Isobar NowLab WebVR Demo

2018

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.

My goals were:

Demonstrate rapid prototyping of a VR experience
Explore the benefits and limitations of WebVR as a VR deployment strategy
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).

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

<!-- nowlab couch -->
<a-entity position="-2.065 0 -0.57">
<a-box
  position="0 0.205 0"
  width="1.69"
  height="0.39"
  depth="0.84"
  src="#couch-bottom"
  repeat="4 1"
  shadow="cast: true"
></a-box>
<a-box
  position="0 0.575 0.345"
  width="1.69"
  height="0.35"
  depth="0.15"
  src="#couch-bottom"
  repeat="4 1"
  shadow="cast: true"
></a-box>
</a-entity>
</a-scene>

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.

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.