Ghost Train Builder: How we brought interactive VR to your browser

 

Virtual Reality, once confined to the realm of 80’s Sci-Fi films, has finally been making a move on your living room. Google Cardboard and the Samsung Gear have been around for a few years now, but with the launch of Oculus Rift, Vive and Playstation VR full Tron-like VR is now available in your home.

But does this emerging entertainment medium have a use on the web? Will we one day buy dresses, cars, and holidays based on full VR experiences? 

One of the barriers to creating VR content is the expense. We’ve seen a lot of hi-spec VR games and applications that cost millions to produce. Was there was a cheaper, quicker way to produce VR allowing those without gargantuan budgets to take advantage of this exciting new medium?

At Realise we love a challenge, so the Creative Technology team decided to produce an interactive, customisable VR experience that works in browser, quickly and cheaply.  


A Web Dev Halloween tradition
Trying to creep out our colleagues is fast becoming a Realise web dev team Halloween tradition. With this in mind, combining Web technologies, VR and our favourite horror tropes seemed like the obvious choice for our experiment. And so, on a dark and stormy August afternoon, the Realise Ghost Train Builder came into being. 

 
ghost train gif.gif


Here comes the technical bit...
We used Blender, a free open-source 3D modelling application, and Sketchfab.com to prototype the ghost train surroundings and monsters. From there we developed a build kit that provides the 3D building blocks for the environment. 

In order to rapidly prototype and build the Ghost Train Builder, the web dev team leveraged two frameworks: Vue.js and A-frame.  Vue.js is an MVVM framework similar to AngularJS or Knockout but very lightweight. It allowed us to create one template that can dynamically update to change things such as UI, theme, sounds and monsters.  A-frame is a WEBVR framework that sits on top of the Three.JS library. It handles all the difficulties of building for VR in the web allowing the team to define a rich 3D experience using HTML and our existing web development knowledge with minimal custom scripting. 

Once we had a notion of how it would all fit together, the prototype was given to the design team to add a touch of Halloween magic.


The result: a customisable, interactive VR experience in your browser
The Ghost Train Builder allows you to build your own customized Virtual Reality Ghost Train. You can choose from a range of creepy interiors from hotels to graveyards, select a spooky soundtrack, pick scary lighting, and – finally – choose what monsters you’d like to be frightened by on your Ghost Train journey. This proves it’s possible to create engaging, content rich environments in the time it takes to build a simple microsite. 

We hope you enjoy our Ghost Train Builder as much as we enjoyed developing it. So have a go, play about with the options, and see what Ghost Trains you can build. 

Happy Halloween!

Bee Flaherty