Isobar NowLab WebVR Demo


Try it live here!

At the time, my day job was leading front-end digital transformations for clients of Isobar, a global digital marketing agency.

In my spare time, I also headed up the Boston outpost of the Isobar Nowlab. The NowLab's purpose was to explore cutting-edge interactive technologies and introduce them back to the organization for use in potential client pitches and projects.

To that end, I took a quick dive into the world of WebVR using the A-Frame library and held a session to share my findings.

Screenshot of WebVR demo experience
Screenshot of my WebVR demo — a scale replica of the NowLab room in our office

My goals were:

  1. Demonstrate rapid prototyping of a VR experience
  2. Explore the benefits and limitations of WebVR as a VR deployment strategy
  3. Experiment with the idea of a room-scale VR environment that accurately matches the physical environment the player is in

In a couple of short sessions, I created a simple 3D model of the Isobar NowLab room in our Boston office, using the HTML-like structure of A-Frame to rapidly test and iterate. Photos of the carpet, couch fabric, ceiling tiles, etc. served as textures for the 3D objects.

For example, below is what the code for the couch looked like (you can see the full code by opening View Page Source on the live demo linked above).

<img id="couch-bottom" src="img/couch-bottom.jpg">

<!-- nowlab couch -->
<a-entity position="-2.065 0 -0.57">
  position="0 0.205 0"
  repeat="4 1"
  shadow="cast: true"
  position="0 0.575 0.345"
  repeat="4 1"
  shadow="cast: true"

A-Frame proved 100% true to scale, allowing me to specify dimensions in meters. Since we had calibrated the VR headset in the NowLab to be room scale, when I sat on the couch in VR, I sat on the couch in real life.

Comparison of a real photo of the NowLab room to the VR recreation
Comparison of the actual NowLab (top) to the VR recreation (bottom)

In all, I was able to create the entire scene using the following:

  • 3 light entities
  • 4 cylinder entities
  • 9 image assets
  • 66 box entities
  • 83 plane entities

WebVR was very new and only supported by Firefox at the time, but it was fascinating how easy, open, and accessible it made creating and deploying a VR experience, in the best tradition of the web.

Attendees of the talk received a quick overview of the technology, the history, the code involved, and a chance to experience the live VR demo.

Timeline of key events in WebVR history from 2015 to 2018
A slide from my talk — a timeline of key events in WebVR history from 2015 to 2018