How to switching mode between WebVR and 2D view in Babylon.js

Japanese version is here

Babylon.jsのWebVRモードと通常モードを切り替える方法 - CrossRoad

Babylon.js provides Web VR sample codes. Here is an example of Windows Mixed Reality.

Babylon.jsでWindows Mixed Realityヘッドセットのアプリを作る方法 - CrossRoad

In a Web VR sample code, you can switch to Web VR mode with just pushing VR headset icon.

But there is no sample button which switching from Web VR to 2D mode. To my surprise, I could not find any information about the switching. In this post, I introduce how to switching mode between WebVR and 2D view.

Environment

Chrome : 71.0.3578.98
Babylon.js : 3.3

1. There is no html source of switching button
2. Find function related with the VR headset button by Chrome Developer Tool
3. Check specification of these methods
4. Implementation
5. Tips
- 5.1 You get fullscreen error if you don't call enterVR() method in an event listener
- 5.2 You can not release fullscreen mode with just calling exitVR() method
6. Conclusion

1. There is no html source of switching button

Here is a simplest sample code of WebVR in Babylon.js. You can get full source code at this page by click Zip button.

https://www.babylonjs-playground.com/#VIGXA3#7

In this example, you can switch from 2DView to WebVR mode by the VR headset icon, but there is no html <button> in the sample code. It is generated from DOM in "babylon.js".

I searched for the appropriate function method with Chrome Developer Tool by reference to the following post.

要素に設定されているイベントを調べよう - ゆずめも

To find the method, I did from 1 to 5 at the screen shot below.

Enable the option which you can select element on screen.
Select Web VR headset button
Select Event Listener
Select "click"
Right click "handler", and "Show function definition"

You can show the method related with VR headset button. "enterVR()" and "exitVR()" are appropriate methods.

3. Check specification of these methods

You can check specification by searching Babylon.js Documentation. Search window is right-side of the page.

As result of search, these methods belong to VRExperienceHelper class.

4. Implementation

The following is my sample code. It is based on 360 Photo sample code. VR and ActionManager feature are added.

BJS_SwitchToNormal_WebVR/index.html at master · flushpot1125/BJS_SwitchToNormal_WebVR · GitHub

Reference
How to do 360 Photo - Babylon.js Documentation

Use the WebVR experience helper - Babylon.js Documentation

Use Actions - Babylon.js Documentation

Just execute the sample code of index.html on Chrome browser. You can check the switching function.

Push "s" key : 2D view to WebVR
Push "e" key : WebVR to 2D view

5. Tips

5.1 You get fullscreen error if you don't call enterVR() method in an event listener

For example, you get a fullscreen error with the following code.

var map = {}; //object for multiple key presses
            scene.actionManager = new BABYLON.ActionManager(scene); // for key event
            scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) {
                map[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
            }));
//          
            scene.registerAfterRender(function () {

                if (map["S"] ) {// pushed key "S"
                    vrHelper.enterVR();
                };
                if (map["E"] ) { // pushed key "E"
                    vrHelper.exitVR();
                };
            });

Uncaught (in promise) TypeError: fullscreen error
    at Function.e.RequestFullscreen (babylon.js:16)
    at e.enterFullscreen (babylon.js:16)
    at e.enterVR (babylon.js:16)
    at Object.callback ((index):124)
    at e.notifyObservers (babylon.js:16)
    at t.render (babylon.js:16)
    at (index):166
    at e._renderLoop (babylon.js:16)

In this example, chrome 2D view turns into WebVR mode (binocular view). But it is not fullscreen. As the result of my investigation, a combination of ActionManager event handler makes the function work.

5.2 You can not release fullscreen mode with just calling exitVR() method

You also need javascript exitFullscreen() method like this.

scene.actionManager.registerAction(
     new BABYLON.ExecuteCodeAction({
     trigger: BABYLON.ActionManager.OnKeyDownTrigger,parameter: 'e' },
            function () { vrHelper.exitVR(); document.exitFullscreen();}  ));

6. Conclusion

In this post, I introduced how to switching mode between WebVR and 2D view in BJS. The main problem is fullscreen API defined by specification of HTML5. Now you can switch the two mode easily. In my next post, I'll write about BJS WebVR and Oculus Go.