App of the Week | WebVR Tools

Following up on my StorySpheres post, I’d like to get into the more expansive universe of WebVR. WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser. Unlike standalone VR applications that require high powered computers and expensive headsets to run, WebVR can run on just about any device with internet access, including mobile phones with a Google Cardboard or similar headset. As WebVR is integrated into mainstream web browsers, organizations and companies have already started creating online tools to create WebVR experiences. Here are a few resources to learn more about WebVR and how to develop for it:

 

WebVR Rocks – A regularly updated report on the status of WebVR integration in modern web-browsers.

 

Vizor– A dedicated online WebVR creation tool. Similar to game engines like Unity and Unreal, Vizor gives you a 3D canvas to work in, letting you drag and drop 3D models, lights, and sounds into your scene. All of the logic in the scene is done through a node editor, similar to Unreal’s Blueprints. It’s a little more friendly to beginners considering you won’t have to write any code yourself and you’re able to have a visual layout of what’s going on. The only major drawback is that this system obfuscates a lot of the process, arbitrarily naming functions and leaving out some fundamentals. You are at the mercy of Vizors programmers.

 

 

PlayCanvas– A more game-focused online editor, PlayCanvas includes a WebVR template to get you started. The rendering engine is very impressive, with realistic lighting and materials. It comes with it’s own in-browser Javascript editor as well as a 3D environment to lay out your scene. Similar to Vizor, PlayCanvas it’s a proprietary engine, meaning that your projects are limited to the capabilities of PlayCanvas.

 

 

A-Frame– A pretty basic Javascript API that gives you access to a number of WebVR essentials. A-Frame has no IDE (integrated development environment) so you’ll have to use something like CodePen or JSFiddle, but it does give you access to both the basic javascript and a more friendly UI with the inspector tool. It also means that you can host the result on your own server and website. The rendering engine is pretty limited, but if you’re just starting and want to get into the nitty gritty of web programming, A-Frame is a great place to start.

 

 

About William Enders

A sophomore Design and Technology major at Parsons School for Design, focusing on interactive media and video games.