WebVR Content Tools

The challenge for WebVR, is to get people creating content. To solve this, I helped create a number of tools and experiences that helped kickstart interest in creating WebVR content. We also used these tools for our own explorations and prototypes.

Unity WebVR Assets A-Frame UI Widgets WebVR Browser API Puzzle Rain Sketch2three


🕹 Unity WebVR Assets

The Unity WebVR Assets were built to make it easy for VR content creators using Unity, a popular game-development platform, to export their experiences to WebVR. The goal was to have content, which was already available on native, brought over to help make more WebVR content available.

🅰️ A-Frame

A-Frame website, with loading animation Source code of A-Frame’s “Hello World” example project

The main design goal of A-Frame was to create a simple, and easy to use library that would allow anyone to create WebVR content with just simple HTML markup. The library was built on top of three.js and uses web components with Custom Elements.

🎚🎛 A-Frame UI widgets

Animation of my A-Frame UI widgets

One of the most challenging areas of VR is designing interactions that are easy to understand and use. I built the UI Widgets A-Frame components to provide a starting set of controls that model physical controls that one would be familiar with using in the real world.

🌐 WebVR Browser API

The WebVR browser API makes it possible for web pages can use JavaScript to access a VR headset’s headset & controller orientation & position data, then using that data to render the appropriate stereoscopic views using WebGL into the VR headset. I helped with the early design and testing in its earliest stages with Kearwood “Kip” Gilbert (Mozilla), Chris Van Wiemeersch (Mozilla), and Brandon Jones (Google).

Early CSS-VR explorations

Early CSS-VR experiments showing s rendering into the Oculus Rift headset Early CSS-VR experiments showing <div>s rendering into the Oculus Rift headset.

Encouraged by incredible work like Tridiv and CSS-FPS by Keith Clark, we experimented with using CSS as a way to render WebVR content.

The Horizon web browser interface was built exclusively from CSS-VR.

Additional information

Puzzle Rain experience

Puzzle Rain

Puzzle Rain is a musical journey in which you help awaken and guide mythical creatures back together into happy musical harmony with one another. Only their combined musical chorus can summon life-giving rain to revive the parched and desolate landscape. Though, there isn’t much time. Dangerous predators roam!

This experience was a collaboration between Arturo Paracuellos and Mozilla.

🎨 Sketch2three

Sketch2three

One of the earliest challenges facing us when creating UI was that lack of tools for designing 2D layouts in VR. To solve this, I created a workflow tool that enabled designers to quickly iterate designs in Sketch and then view/edit them within the browser via WebVR.

This lead to extremely quick results that allowed us to quickly iterate over several designs for various VR browser explorations, such as HIRO, Horizon, and other early incarnations of VR web-browser concepts.