How to create VR applications on the web?

Introduction

To know what's the best application to make a VR tour on the web, I've create three times the same application. Here are the libraries xor tools I've tried for the WebVR applications.

1. A-frame in combination with Angular-CLI
2. React VR
3. Krpano

But first let begin with the description of the application I made.

Description of application

The VR application I develop to test the three frameworks is a virtual education for a truck. There are eight high quality 360 pictures taken of the truck on the marked locations. The red lines shows how the user can walk around the truck.

At each picture you got several points that must give more information when you're stare or click on the button. This information could be an video, image or text.

A-frame + Angular-CLI

The first one tried is A-Frame in combination with Angular-CLI. A-frame uses the Entity-Component-System. This means that A-frame follows the composition over inheritance principle that allows greater flexibility in defining entities where every object in a game's scene is an entity.

The pro of this framework is that it's the documentation is very good and almost every Web VR application uses this framework. When I made the VR tour I came on some issues. The first issue is that you must write a lot of code. Now I'm using A-frame in combination with Angular so I could reuse a lot of repeating code. I prefer to keep my code DRY (Don't repeat yourself)!

The advantage of DRY is that you could reuse the same project, change the images and a configuration file I created. In this config file, I place all the navigation and information buttons. Below you could find an example for one 360 image.

[
    {
        "id": 1,
        "image": "",
        "location": "Backsite",
        "camera": "10 130 0",
        "nextScenes": [
            {
                "to": 6,
                "location": "-3000 1800 1700",
                "rotation": "0 150 0",
                "scale": "150 150 150"
            }
        ],
        "hotspots": [
            {
                "id": "obj6",
                "location": "-3000 1600 2500",
                "rotation": "0 150 0",
                "scale": "150 150 150",
                "headerTitle": "The roof",
                "body": "The roof is the upside of a house."
            }
        ]
    }
]

Another advantage of A-frame is that you could make other projects with it, not only virtual tours. You could create mini VR games, interactive educations in VR and much more. There is also a possibility to track controllers or the W, A, S and D keys.

If you use the key combination ctrl + alt + I when you're developing, you have a visual editor to place the objects to the correct place. It's easier than do it blind.

A problem I got with A-frame in combination with Angular is the data binding to A-frame tags like the a-entry tag. The question you could find here: Data binding does not work for A-frame tag attributes. The bug is that the position, rotation and scale attributes of the a-enity tag wouldn't bind and because that it has the default values.

This I've solved by using the document.getElementById selector.

ngAfterViewInit(): void {

    for (let i: number = this.currentData.hotspots.length; i--;) {

        let spot: any = this.currentData.hotspots[i],
            el: any = document.getElementById(spot.id);

        el.setAttribute("position", spot.location);
        el.setAttribute("rotation", spot.rotation);
        el.setAttribute("scale", spot.scale);
    }
}

By reading another answer I know that A-frame doesn't support data binding.

For performance reasons, A-frame does not update the DOM with component data.

React VR TL;NF

The other library I've tried is React VR. This framework is really new and the documentation is small and it's difficult to create a working application with it. This comes because the library is not mature enough to develop stable applications with it.

The advantage is that the React VR is build on the React Native library that could be used to create native web applications.

The disadva

More information about developing with React VR coming soon.

Krpano

The Krpano Viewer is a small and very flexible high-performance viewer for all kind of panoramic images and interactive virtual tours. The viewer is available as Flash and HTML5 application. The viewer is designed for the usage inside the browser on desktop (Windows, Mac, Linux) and on mobiles and tablets (iPhone, iPad, Android etc.).

^{Source: krpano.com}

The advantage of using Krpano is that everything is easy to build. Krpano works with HTML5 and uses Flash as fallback if there's something wrong with while using. You could add some audio files or 360 video's and make it interactive with the user.

It's just drag 'n drop the 360 images to an executable Batch file, wait till it's done and finally add arrows buttons to navigate and information points in the browser. The settings are automatic saved in a XML file and this is an easy feature of Krpano that you didn't have with A-frame.

You have to buy a license to use Krpano and got a good experience for the VR tour. The free demo version of Krpano add watermarks to images. An example of the watermarks, you could find below.

An other feature of Krpano is that you could make a mini world of one image. There are several other views available with Krpano like: fisheye, stereographic, architectural, Pannini, normal and a mini world (see image below). You could try the views on this demo.

For performance reasons, Krpano cut the 360 panorama pictures. This works as follow: Krpano start form an equirectangular .tif files from 20,000 by 10,000 pixels. Dependant of the details of a file are this file average between the 300 and 500 Mb.

Next the images go to the Krpano cutter that cuts the .tif files into .jpgs on different resolutions between the 8,000 by 4,000 and 20,000 by 10,000 pixels. In normal situations are the four resolutions between this. A total cut image got a size between the 25 and 70 Mb.

Average is one panorama image had been cut in 1,500 parts, divided over 330 folders. The folder for mobile devices is the easiest. This had been cut in 6 parts: left, right, front, back, top and bottom.

Source: S. Stumpf (interviewed by H. Pauwelyn) 2017

Conclusion

Using A-frame or React VR applications you need to code. You've to learn the frameworks and install the source code or drivers. It's fun if you're a programmer and you love coding.

The alternative Krpano that has other features then A-frame and React VR and it is approachable for everyone if you got a license of course and contains other features than A-frame and React VR.

Let me say next about my research:

1. Use A-frame or React VR if you like to develop applications but there are some packages needed for a better workflow.
2. Use Krpano for virtual tours and other features if you're working with 360 video's or images and it's not open sourced and you need a license.

Notes

Original article here: heinpauwelyn.github.io/blog#create-wevvr