Skip to content
The construct and digital rain from The Matrix in WebVR.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src
vendor/three
.gitignore
LICENSE
README.md
index.html
package.json
replace.config.js
rollup.config.js
serve-prod.js
yarn.lock

README.md

Inside the Matrix VR

MIT website

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.

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:

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.

You can’t perform that action at this time.