Building virtual reality for the web using JavaScript
The possibilities within the world of virtual reality and augmented reality are exciting and still just beginning to be explored in these emerging areas of technology. It is an area just waiting for developers to jump in and work some magic to build things that have never been seen before. This guide will provide links to key resources that can help you develop for VR and AR without needing to have an expensive VR headset.
Keen to learn JavaScript so you can get into all of this? This list of resources for JavaScript learners by Eric Elliott might come in handy!
Where do I start?
- A-Frame – The easiest way to get started experimenting with VR on the web. A-Frame lets you use web components to build WebVR experiences.
- A-Frame: The Easiest Way to Bring VR to the Web Today (SitePoint) – Here’s a tutorial to give you a grip on the basics.
- WebVR – A guide to the WebVR spec — recommended reading for anyone new to all of this.
- WebVR Boilerplate from Boris Smus – My recommended starting point for those looking to implement WebVR from a lower level, rather than using A-Frame components.
What browsers are supported?
- Compatible Mobile Chrome and Chromium Builds – These versions of Chrome/Chromium are the ones that are compatible with WebVR.
- Firefox Nightly – This is also your option as a compatible browser for WebVR.
- Samsung Internet for Gear VR – To enable WebVR on a Gear VR, visit internet://webvr-enable in the “Samsung Internet” app.
A-Frame Handy Resources, Tools and Components
- A-Frame Inspector – This tool is your friend. Use it!
- awesome-aframe – The most fantastic list of A-Frame resources, talks and projects.
- A-Frame Registry – Curated collection of A-Frame components (only new)
- Three.js Inspector – A Chrome plugin that also works with A-Frame, might help with troubleshooting bugs
- aframe-video-billboard component – Early days but contains some potential for AR creations.
- aframe-react – You can use React and A-Frame together!
- UnitySceneWebExporter – Export Unity scenes into A-Frame and Three.js
- Optimising A-Frame Assets for Faster Starts – A guide to getting your A-Frame creations loading faster
- HyperDev – A fantastic sandbox for both front-end and back-end code that works great with A-Frame
A-Frame Demos
- A-Painter – TiltBrush-like 3D painting in the browser!
- Audio Analyser – Plays Spotify, with visualisations and speech recognition.
- Waves XYZ – Another audio visualisation example
- Physics and click-and-drag – A neat demo showing physics interactions you trigger by freely clicking and dragging elements.
- WordPress template – A proof of concept for a WordPress post list in VR
- TumbVR – Generates a lovely gallery scene with pictures from a Tumblr of your choosing
- Racer – A racing game concept from part of Samsung’s team
- Forrest – A procedurally generated forest
Other WebVR Resources
- First Steps for VR on the Web – The beginnings of it all!
- Bringing VR To Chrome – Brilliant article on how this all came to Chrome.
- The Working Draft of WebVR
- MozVR Sample Projects
- Getting Started with VR in JS (SlideShare) – A great set of slides introducing WebVR by Rudy Jahchan from Carbon Five.
- Carbon Five VR Demos (Carbon Five) – A really nice collection of WebVR samples from Carbon Five too!
- Quake Level Demo
Other Frameworks and Boilerplates to Try
- Primrose – A WebVR framework for building productivity tools. Sean, the creator, had a great interview with Dev Diner on WebVR dev too. Highly recommended!
VR via Three.js and DeviceOrientationEvent
This is how VR used to be done before the emergence of WebVR. By this point, I wouldn’t recommend building your web apps like this unless you’re keen to learn the ins and outs of how it all works in theory.