RIDE THE GHOST TRAIN

At Realise, we’re fans of working on side-projects - both to challenge ourselves and to ensure we’re getting out hands dirty with the latest technologies and able to keep taking great ideas out to our clients. The Ghost Train Builder was one such project, a site that lets you build (and then ride) your own ghost train by combining different themes (castle, hotel, etc), lighting, music and monsters. It grew from a combination or brainstorming an excuse for some halloween mischief and eagerness to do something of our with own with VR.

The original idea had actually been to have users ride a virtual ghost train and use their webcam to measure how scared they were. This led onto the thought of users making their own ghost train and competing to see who could be the scariest. This concept quickly took over from the emotion-tracking idea - we’d all seen a surge of VR games, experiences and 360 videos over the past few years, but couldn’t think of any instances of anyone giving end users the ability to make their own WebVR experience. This felt new and exciting.

Being primarily web developers, few of us had the experience or skills for building full 3D environments from scratch, and skilling up and delivering in time for halloween wasn’t realistic. This was where A-Frame came to the rescue. Being able to work with familiar HTML-like mark-up was far more appealing than programmatically plotting things in Three.js or building everything in Blender. In fact, prior to learning of A-Frame’s existence, one of our developers had previously started on his own framework, using Angular to allow XML mark-up to be used to generate 3D scenes. Using A-Frame now seemed a no-brainer.

When I joined iStaging a year ago, I was in the position of picking a WebVR framework. A hard decision. Since WebVR was relatively young, like the new kid around the block.

iStaging wanted to build a tool for real estate agents to showcase their buildings and properties. To upload panoramic pictures of rooms, create floor plans, leave comments, set standpoints. Clients were to be immersed into a real estate VR experience from the comfort of their homes.

We checked KRPano. It was cool. Full of features. However, it lacked the flexibility that we needed. And the information available on the Internet was very meager. The other framework that we investigated was Google VR View. However, it turned out to be just an image / video inserted inside an iframe. Kind of disappointing. Then, one day, scrolling through Github’s trending list, we stumbled upon this WebVR framework created by some people at Mozilla. We tried it and we loved it.

Our virtual tour has since become one of our main products. Thanks to A-Frame (and the Mozilla VR team), iStaging has reached thousands of customers while partnering with companies like Microsoft, HTC, Lenovo, and Alibaba.

Want to start painting now? Head to https://aframe.io/a-painter!

Make sure you have a WebVR-enabled browser. In Chromium, enable the flags for chrome://flags/#enable-webvr and chrome://flags/#enable-gamepad-extensions). Firefox support is coming soon.

(Don’t have a headset? No problem – you can still view paintings from any device!)

We on the Mozilla VR team are hardcore fans of Tilt Brush. It’s a wonderful example of the power of VR as an expressive medium. In the last few weeks, we have been experimenting with our own Web-based interpretation of Tilt Brush. We wanted to show how easy is to produce and share your creations on the Web across platforms with no software installations.

A-Frame v0.3.0 has dropped! With support for the new WebVR 1.0 API, we aim higher towards state-of-the-art VR. With room-scale tracking, we can walk in a web page, and with tracked controller support, we can reach out into the world.