Awesome
Inside the Matrix VR
This project is a fan remake of the iconic construct scene and the digital rain from The Matrix for WebVR. I wanted to experiment with VR on the web for some time. Then I found a cool collection of models from the film on Sketchfab which gave me the perfect excuse.
I have the Oculus Quest, and that's what I tested it on. Let me know if you run to any issues using other devices. If you don't have a headset, you can also run it in 360-mode.
Have an idea how to make this better? Submit an issue or make a PR.
<p align="center"> <img src="https://user-images.githubusercontent.com/169328/62211026-6f480280-b395-11e9-9d64-cd059663054b.gif"> </p>Credits
In the construct, I used the incredibly detailed models by Rodrigo Villani and Sirenko available under CC-BY-4.0.
For the digital rain, I stole the msdf font and some other ideas from Rezmason's much more polished 2D version.
I also used sound effects by these awesome people:
- Rain and Thunder Strikes by Mike Koenig CC-BY-3.0
- Freeze by goac0re1
- Alien Chatter by fl1ppy
- Matrix Sound 01 by Julien Matthey
The fonts are IBM Plex and Source Sans Pro.
And the rest of it is three.js which makes working with WebGL really way easier than it should be 🚀.
Thank you all!
Future Work
- Add support for controllers — The original idea was to change the scene only after the user picks up the red pill. I didn't get around to it yet.
- Randomise the digital rain more — I was hitting some performance issues, but I'm pretty sure the shader could be improved to make the drops more random.
- Test with more headsets — It would be great to know whether this works on Vive/Rift/GearVR etc.
- Anti-aliasing — The renderer flag didn't work for me. The FXAA pass was giving me weird flickering results in VR, probably because of something stupid.
- Refactoring — The project came out of many hours of experiments within a single file called texture_shader.html. You can imagine, it took me a while to untangle :D. There's always more to be done...
Development
To get this working on your machine, clone the repo as usual and run yarn to install the dependencies. Run the following command to start a local server:
yarn serve
To generate a deployable build, run:
yarn build
I ended up bundling a slightly modified build of three.js with the project, mainly to make post-processing work in VR. If you see a weird issue, it's probably my fault.
Licence
The code in this repo is distributed under the MIT License. See LICENSE for details.