How Anyone Can Create A Virtual Reality Experience With One Line of Code

View the demo »
View the documentation and source code »

Earlier this month, I found that it was possible to experience virtual reality content at an entry level on a low budget – around $50. But that only gets us as far as viewing existing content. If we want to broaden this new VR field to a truly diverse and innovative range of material, we need to make creation as accessible as consumption.

Even with inexpensive viewers, we still need a desktop computer — powerful mobile tablets have limited content creation capabilities and it’s all but impossible on something as small as a phone without a keyboard. We also need software for both authoring and display. We can use a commercial game engine, such Unity, or free and open-source tools, such as Blender, and we can output platform-specific software for Android, iOS, Mac or PC – all of which require a development environment and tools to compile the binary executable programs. Finally, we need a form of distribution, a web hosting or content delivery network (CDN) service from which to deliver the media and program files.

If potential VR creators don’t own a computer or have an Internet connection, few of these requirements can be met. They may have access to a computer at a school or public library, but those machines won’t likely have any 3D authoring tools or software development environments. Installing this software on those computers is almost certainly impossible. Even saving project files is a problem, since many public computers automatically wipe those files after each session. This person may also lack the educational resources or experience to program three-dimensional environments and manage the intricacies of head-tracking and VR display technology. And most web hosting accounts are either not free or very difficult to use, like GitHub. They will, however, have a web browser.

Web VR Starter Kit

With this scenario in mind, I built a Web VR Starter Kit. It consists of a single JavaScript file that, when included in a web page, bootstraps an empty virtual reality scene. It includes an API that wraps three.js in simplified commands for creating and manipulating simple 3D objects in that empty scene. The API is targeted toward the level of coding skill taught on a site like Codeacademy and inspired by Vidcode, a project for teaching girls how to code with video and image processing. The resulting web page adapts to a range of devices, whether it runs on an iOS or Android phone with Cardboard, an Oculus Rift or on a 2D monitor. It can be hosted for free on an HTML/JavaScript sandbox site like JS Bin.

The API covers the basics of building a scene as well as the means to make it dynamic and interactive:

Create and manipulate “primitive” shapes (box, sphere, torus, cylinder, etc.)
Apply textures (metal, stone, grass, etc.) to these shapes, or custom textures via an image file
Create backgrounds based on the 360-degree spherical photos that can be created by smartphones
Import media, such as 2D images and sounds
Trigger events such as media playback or object animation or phone vibration when a user looks at objects or shakes the device

For more advanced developers, the full three.js API is available for additional features and interactivity.

Examples

Here are some examples of what you can create in a few lines of code:

Panorama – A spherical panoramic photo
Sound – Audio sources in 3D space, triggered by looking at objects
Animation – Simple animation, moving and rotating objects
Sky – A realistic daytime sky with movable sun and lighting
Near and Far – Actions triggered when an object moves close to or far away from the viewer

Try It Now

Go to jsbin.com to start a new web page that you can edit right in the browser. It’s not necessary to make an account, but it’s a good idea since your page will eventually expire without one. (Other sandboxes like CodePen won’t let you show the page in full screen outside an iframe.)

In the HTML panel, paste this script tag between the <body> tags:

<script src="//povdocs.github.io/webvr-starter-kit/build/vr.js"></script>

Hide the HTML panel and show the JavaScript and Output panels. (You can pop the Output panel out into a new window and optionally open the same URL in your mobile browser.)
Start writing code in the JavaScript panel, copying in the code from below, or by using the simplified API. See the documentation for a list of commands and links to examples. Note that the page will automatically reload whenever you make changes.
If your code requires media, you can upload images to a public site such as imgur, which will provide a direct link to a hosted image file. You may also use the public folder of a Dropbox account for hosting images or sound files.
If you already know JavaScript, you can make your VR scene more interactive by triggering “callback” functions on events, such as this example, which plays audio files when you look at different objects.
You can send the JS Bin url to yourself and friends by email or social media. You or anyone else can come back to it later to continue editing or “fork” the code to a new URL.

Sample Code

//Make a floor, with default checkerboard texture and tinted blueVR.floor({ color: 'lightblue' });//make a box, using brick-tiles material. Move it up and over.VR.box() .setMaterial('brick-tiles') .moveTo(-2, 1, 0.5);//make a sphere, using shiny, metal material. make it a bit bigger and move it upVR.sphere() .setMaterial('metal') .setScale(1.4) .moveTo(0, 1, 0);//make a torus, using wood material. Move it up and overVR.torus() .setMaterial('wood') .moveTo(2, 1, 0.5);

View or edit this example

This is our first version of the Web VR Starter Kit but it already demonstrates that virtual reality content can be made with limited resources. Although it was designed with a low-income user in mind, looking at the problem from a different point of view than my own has provided additional benefits. The tool is already useful for rapid VR prototyping and for well-resourced creative authors without advanced technical skills.