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.
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
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
Early CSS-VR explorations
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.
- WebXR API specification
- WebXR API specification
- Mozilla Hacks: W3C Workshop on Web and Virtual Reality: A Look Ahead
- Mozilla Hacks: Introducing the WebVR 1.0 API Proposal
☔ Puzzle Rain experience
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.
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.