» Virtual Reality on the web oddEVEN

We have been experimenting with different VR headsets and technologies to find out what is possible today in AR and VR, especially on the web. In this post, we share our experience.

Definitions
Augmented Reality (AR): Digital content gets displayed inside the real world
Virtual reality (VR): A complete virtual environment, the user doesn’t see the real world

Building blocks for VR on the web

To bring virtual reality into the browser and the browser into VR headsets, we use two building blocks: A-Frame and WebVR.

A-Frame

A-Frame is an open source framework for creating 3D virtual reality experiences inside a browser. It is very easy to learn, because you can simply write HTML and JavaScript. A-Frame uses the WebVR API to support all current platforms and VR headsets.

WebVR

WebVR is a JavaScript API that enables web content to render into VR headsets and handle the various input devices available, such as handheld controllers. This means, we can code for the browser, display the content on a VR headset and interact with it like it was a native app. Most browsers officially support WebVR.

First steps with the new technology

Our first experiment was creating a 3D gallery using A-Frame. You can view it on a smartphone using a Google Cardboard. See https://vr.oddeven.ch/panorama/

The challenge was – apart from technical ones – to find a way how to navigate the user. Where to put menu elements, when the user can look everywhere? The home button at the feet of the user, while navigation elements are placed in the picture, was our solution (see blue arrow in the image above). Because there is no mouse, the cursor is the user’s focus and a click has to get replaced by intersecting the cursor with the clickable object.

360° stereo images and films give us a sense of being there, something, that can’t be achieved with normal 2D images. This sense of immersion lets us tell convincing stories and experience places before going there, like apartments and hotel rooms.

Bringing the Web to VR headsets

The HTC Vive is one of the most popular VR headsets. With it come two hand controllers that are used as mouse or tools, depending on the application. To use a WebVR application on your Vive plug it in, make sure that the controllers are recognized, surf to the WebVR page and enter VR mode.

We wrote a small demo game where you can move around and stack oddEVEN cubes. The left hand touchpad is used for teleporting and the right hand trigger for stacking oddEVEN cubes. Test it under https://vr.oddeven.ch/vive/

Thanks to A-Frame the code for the game is very short. Below you find the HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>oddEVEN cube game for HTC Vive</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-teleport-controls@0.2.0/
                 dist/aframe-teleport-controls.min.js"></script>
    <script src="https://unpkg.com/aframe-controller-cursor-component@0.2.x/
                 dist/aframe-controller-cursor-component.min.js"></script>
    <script src="components/newblock.js"></script>
</head>
<body>
<a-scene>
    <a-assets>
        <img id="groundTexture"
             src="https://cdn.aframe.io/a-painter/images/floor.jpg">
        <img id="skyTexture"
             src="https://cdn.aframe.io/a-painter/images/sky.jpg">
        <img id="logo" src="img/logo.jpg">
    </a-assets>

    <a-sky height="2048" radius="30" src="#skyTexture"
           theta-length="90" width="2048">
    </a-sky>
    <a-light type="ambient" color="#445451"></a-light>
    <a-light type="point" intensity="2" position="2 4 4"></a-light>
    <a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100">
    </a-plane>

    <a-mixin id="block"
             geometry="primitive: box; height: 0.5; width: 0.5; depth: 0.5"
             material="shader: flat; src: #logo">
    </a-mixin>

    <a-entity id="blockHand" vive-controls="hand: right" controller-cursor
              newblock="event: click; mixin: block">
    </a-entity>
    <a-entity id="teleHand" vive-controls="hand: left" teleport-controls>
    </a-entity>
</a-scene>
</body>
</html>

And here the corresponding JavaScript code:

AFRAME.registerComponent('newblock', {
    schema: {
        default: '',
        parse: AFRAME.utils.styleParser.parse
    },

    init: function () {
        const data = this.data;
        const el = this.el;

        el.addEventListener(data.event, function (event) {
            const block = document.createElement('a-entity');

            var pos = event.detail.intersection.point;
            pos.y = pos.y + 0.5;
            block.setAttribute('position', pos);

            // Set components and properties.
            Object.keys(data).forEach(function(name) {
                if (name === 'event') { return; }
                AFRAME.utils.entity
                      .setComponentProperty(block, name, data[name]);
            });

            el.sceneEl.appendChild(block);
        });
    }
});

Augmented reality on the Web

Bringing AR into the browser is a snap with AR.js. We built a small demo to display our logo in 3D when it sees a specific marker. Open this link https://vr.oddeven.ch/ar/ on your phone and point the camera to this marker:

You should see something like this:

Combining the reality with digital content and running it all in a browser, instead of forcing the user to download an app, is more comfortable for the users and gives us a lot more possibilities to display content.

What else?

Offline, but not less promising were our experiments with the FOVE 0, Leap Motion and Microsoft’s HoloLens.

Among the different headsets the FOVE 0 is special. With its eye tracking it gives us a whole range of new possibilities to explore. Steering the cursor with the eyes, using blinking as mouse click, viewing a virtual shop and getting a heat map where the customer looked are some of the demos we came across when we searched for test applications. The FOVE is still very new and we are looking forward to find more interesting concepts.

Leap Motion is a small device that tracks the hand motions. It can be used standalone on the computer, but it gets even more interesting when combining it with a VR headset. After all, we are more used to use our hands instead of bulky controllers. Reaching into VR is a special feeling, maybe we’ll soon be able to reach into the browser.

Microsoft’s HoloLens lets us place virtual content in the real world. It remembers and recognizes the room so next time the virtual object is still there. We weren’t successful so far to bring WebVR content to the HoloLens.

Conclusion

Exploring the latest state of AR/VR on the web was sometimes a little frustrating, but generally very rewarding. Especially, since frameworks like A-Frame make it so easy to build VR content.

We believe that the future of augmented and virtual reality is on the web. The content can easily get distributed without the need of a specialized app store. Every smartphone with a modern browser turns into a VR display. The fast development of this technology and the rising awareness among consumers, brings new possibilities for commercial applications every day. We are excited to see what the future brings.

Virtual Reality on the web