Making engaging VR experiences on the web

WebVR is a JavaScript API for creating Virtual Reality experiences in the browser. It is the easiest entry point to dive into VR. It’s open for anyone, mobile, cross-platform and it’s just a click away, without the need to download anything.

Inspired by our most recent project which involved lots of 3D, we turned our explorations into a fun project and created two new WebVR experiments. You can try them out on HTC Vive and Google Cardboard or simply view them in 2D if you don’t have access to a VR headset.

A dreamy hot air balloon ride

And a frosty forest encounter with a moose

Project setup

We believe VR is here to stay so we built a starter kit to help us quickly create WebVR projects. The starter kit uses ES6 JavaScript with Babel as the compiler and comes with HTC Vive controllers models. It is based on the webvr-boilerplate, which lets you enter and exit VR mode and works well on all VR headsets. It also works with Room Scale VR, allowing the user to freely walk around in the virtual space.

To display 3D graphics in the browser we use THREE.js, a JavaScript library built on top of WebGL.

Note: The current version of Chrome supports Google Cardboard and Daydream and works best on Android devices. Other browsers and iOS don’t fully support WebVR yet. You still need an experimental desktop version of Chrome in order to access the experience in HTC Vive.

Exporting 3D models with Blender

We found Sketchfab to be a great platform with lots of amazing, downloadable 3D models and used this sky island by Leonid Tsvetkov as a base for the Balloon Experience.

Exporting models from Blender

The models are imported into the scenes with Blender, an open source software for 3D modeling. With the Blender to THREE.js exporter, you can export meshes and scenes as JSON files.

Making it move

We quickly noticed that VR scenes need animations in order to feel more engaging. To bring more life into them, both experiences feature animated animal models, inspired by Rome: 3 Dreams of Black interactive movie. All the creatures featured in the film are open source and can be found here.

We added motion to the scenes by creating several particle systems. THREE.Points is great for generating cool, elemental effects like snow or fire. All our particle systems use shaders, a piece of code which runs directly on the GPU, which means you get a lot of graphical power for free. Thanks to the GPU’s parallel architecture, the transformations are applied to a large set of elements at a time, instead of looping through each particle.

It was great to see how straight-forward applying shaders in THREE.js is and how efficiently and smoothly they run.

The snow shader in the Moose Explorer experience

The fire used in in the Balloon Ride

The triangles which float around the sky island

Engaging the users

To make both experiments more playable we incorporated subtle user interactions.

In the balloon ride, a user can click the rope hanging inside to make it fly higher up. The THREE.js RayCaster class enables features like object picking or clicking. In a 3D scene it’s hard to know where the user is clicking. You have to imagine a line from the camera through the mouse/controller and find which objects are colliding with that line. The ones intersecting with the ray caster, in our case the rope, will be highlighted red to tell the user that the object is interactive. When clicked, the fire expands and the balloon flies higher up.

Interacting with the balloon

The moose experience uses custom hand models instead of HTC Vive controller models which makes the experience feel more immersive. The hands we used were created by the Mozilla VR team and come from the Puzzle Rain experiment.

Custom hands models

Exciting times ahead

As for now, WebGL is the main solution for WebVR. We have been seeing an increasing amount of WebGL sites recently and for a good reason. It encourages the most imaginative and abstract ideas and designs. Thus creating some truly amazing and innovative web experiences.

There are however new cool tools on the block such as A-Frame, which uses a DOM declarative approach. This means that developers can create 3D and WebVR scenes using HTML. The ease of building 3D/VR content this way lets web developers and designers get into the WebVR ecosystem with very little effort. It’s predicted that we will soon be able to build DOM-only virtual reality experiences.

"Developers should be able to create compelling VR experiences, or adapt existing sites, without having to use WebGL. HTML and CSS are the languages we have. They may not seem obvious candidates to be great VR design tools, but we believe they will be, with relatively little effort.”

"Adding models should be as easy as adding images. A <model> element with glTF support would trigger an explosion of creative possibilities.”

Josh Carpenter, UX Lead for WebXR @ Google
A slide from WebVR Workshop by Josh Carpenter

Summing up

THREE.js has once again turned out to be a great library for creating simple WebVR experiments. Even though it occasionally makes you struggle and reverse engineer one of its many examples to find the functionality you’re looking for. It’s without a doubt one of the best 3D libraries which allows you to explore all the wonders of WebGL. As we dive deeper into it we find it more and more fun to work with.

Get the code

The Moose Explorer and the Hot Air Balloon Ride are open-source GitHub. Check them out and tell us what you think!

Write a comment

Keep me posted!