VR DrupalCon demo case study

As a virtual company we don’t get a lot of chances to visit the places that our teammates work or live. We see a little sliver of each other’s workspaces, as the background in the videos conferences that we have everyday, but visiting everyone’s home office isn’t practical. So we thought: why not visit virtually? The result: vr.fourkitchens.com, “Working with the Web Chefs: Explore Life in WebVR with Two of Four Kitchens’ Best!”

How We Built It

We put our VR demo together in a few short weeks, primarily through the efforts of Patrick Coffey (lead engineer) with help from me (Mike Minecki, Director of Technology), Joe Tower (designer), Doug Bigham (story writer), and John DeMott (engineer). We partnered with Erik Horn (from Hunt, Gather), who used a Samsung Gear 360 camera to capture images of our workspaces.

“There’s nothing like being there, but WebVR can get much closer than videos or images.”

To build the experience we used A-Frame, a framework that makes creating VR scenes almost as simple as editing HTML. At it’s core, A-Frame brings a powerful, entity component model and acts as a wrapper for the myriad of technologies, browser APIs, and low level frameworks that make WebVR possible. We added a number of our go-to tools for web development, including React and Webpack, and even included support for Google Analytics. An upcoming post from Patrick will explain the technical nitty gritty, but for now you can poke around the code here.

What Worked

There’s nothing like being there, but WebVR can get much closer than videos or images. We see each other’s offices through the box of a webcam everyday, but it wasn’t until we put this demo together had we had the opportunity to visit. This little VR tour immediately gave us more than just another view each other’s offices. Looking around, particularly when using the Daydream or Cardboard Viewer, made it possible to really get the feel of what those spaces are like, and simple text, image, or sound modals were a very enjoyable experience for users that activated a sense of discovery and exploration that simple images or even videos can’t compete with.

What Was Hard

We were impressed with the maturity of the tools available for WebVR development, but this project wasn’t without its challenges. Everyone who worked on this agreed that the biggest challenge was telling a great story while building the tools to tell that story. One of the great opportunities that any VR interface presents is the ability to tell a story all around you. But, for the last… oh, ten thousand years or so?… visual storytelling has been a one-directional medium. Even in 3D, you don’t expect your viewer to “look around” and explore the space.

“…in each scene, there are things to see, hear, and inspect above you, behind you, and all around you…”

In creating our VR workspaces experience, we had to consider not only traditional visual storytelling, but we also had to incorporate elements of theater, educational dioramas, and even a bit of performance art. What we ended up with is still a simple narrative, but one that begins to use VR in all its glory— in each scene, there are things to see, hear, and inspect above you, behind you, and all around you. We made sure that the content was as dynamic as the medium.

What’s Next?

The demo that we shared at DrupalCon Baltimore was fantastic. In just a few weeks, we developed an experience that was really able to showcase the abilities of WebVR. But we haven’t stopped there. Since April, we’ve been hard at work creating more experiences and playing around with new ideas for these truly immersive content narratives. To make things easier on ourselves— and for our clients and colleagues— we are working on building a tool that will allow anyone to easily create WebVR content, taking the complexity out of engineering these experiences, by making it possible to edit them using Drupal, and maybe even WordPress.

There’s so much we’re working on, and so much more ahead— stay tuned for more blog posts, webinars, and whitepapers showing how Four Kitchens really makes content go.