WebVR
Neil Haddley • March 2, 2021
Create Virtual Reality Experiences.
Moon Rider
WebVR has been replaced by the WebXR Device API, that supports both Virtual Reality (VR) and Augmented Reality (AR).
So why write a post about WebVR?
Moon Rider. That's why.
Moon Rider is a free VR rhythm game built on WebVR that runs in a web browser.
Moon Rider is an impressive example of what can be done with WebVR.
https://moonrider.xyz
The Moon Rider code is available for download from GitHub
https://github.com/supermedium/moonrider
Moon Rider in Oculus Quest 2 Browser
A static WebVR scene
WebVR developers use entities to create scenes. Entities are created using assets.
A static scene can be created using a few web page tags.
A scene
JAVASCRIPT
1<body> 2 3 <a-scene> 4 5 <a-assets> 6 <a-asset-item id="engine" src="./assets/files/engine.glb"> 7 </a-asset-item> 8 </a-assets> 9 10 <a-entity position="0 0 -3"> 11 <a-gltf-model src="#engine" rotation="90 0 0" scale="18 18 18"></a-gltf-model> 12 </a-entity> 13 14 <a-entity light="type: point; intensity: 60; distance: 50; decay: 2" position="0 0 10"></a-entity> 15 16 </a-scene> 17 18</body> 19 20</html>