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

これはHoloLens Advent Calendar 2018の12日目です。前回はZuQ9Nnさんの『Mixed Realty Tookit Unity vNext2018を利用し、Air TapでCubeを落とすHoloLensアプリを作ってみた』でした。

今回はBabylon.jsをWindows Mixed Reality Headsetで使う方法を紹介します。

なお、以下の環境で検証しています。

Acer H100 with Motion Controller
Windows 10 Pro 1803
Microsoft Edge 42.17134.1.0

1. Babylon.jsとは？
2. VRのアプリを作るための必須メソッド
3. サンプルシーンの動作確認
4. コントローラ部分のソースコード修正方法
5. 終わりに

1. Babylon.jsとは？

下記の記事で書きましたが、Babylon.jsとはブラウザで3DCGを描画するためのフレームワークです。 Babylon.js向けデータをUnityから出力する - CrossRoad

そのときは書いてませんが、VRヘッドセットのアプリも作ることができます。公式ドキュメントの引用ですが、このように各種コントローラにも対応しています。

Using the controllers There are a few high level implementations that are automatically assigned to a WebVR controller: WindowsMotionController for the Windows Mixed Reality controllers. OculusTouchController for the Oculus touch. ViveController for the Vive controllers. GearVRController for the Samsung Gear VR controller. DaydreamController for the Google Daydream controller.

引用元：https://doc.babylonjs.com/how_to/webvr_camera

今回はBabylon.jsの使い方の詳細は省略します。ソースコードは公開しますのでそちらをご参考ください。また、Unityとの違いを含めた基本的な使い方は過去記事をご覧ください。

babylonjs カテゴリーの記事一覧 - CrossRoad

2. VRのアプリを作るための必須メソッド

シーンをVR化するには、createDefaultVRExperienceというメソッドを使います。

 var scene = new BABYLON.Scene(engine);
 var vrHelper = scene.createDefaultVRExperience();

ここで定義したvrHelperを使って、コントローラの設定をします。

3. サンプルシーンの動作確認

Babylon.jsの公式HPには多数の解説があります。しかし、断片的な記述が多いので、サンプルコードで動きを見ながらの方が理解しやすいと思います。

ということで、まずはサンプルを動かします。サンプルコードは、ここの中にある「Accessing vr device position and rotation」の下の"See Example"のリンクにあります。しかし、このリンクは時々ロードに時間がかかるので、同じものを下記に貼りました。

var createScene = function () {

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);
    var vrHelper = scene.createDefaultVRExperience();

    var camera = new BABYLON.FreeCamera("",new BABYLON.Vector3(0,0,-1),scene)
    var light = new BABYLON.DirectionalLight("", new BABYLON.Vector3(0,-1,1), scene)
    light.position.y = 10;
    var sphere = BABYLON.Mesh.CreateSphere("", 10, 1, scene);
    sphere.position.set(0, 1, 10);
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    var leftHand = BABYLON.Mesh.CreateBox("",0.1, scene)
    leftHand.scaling.z = 2;
    var rightHand = leftHand.clone()
    var head = BABYLON.Mesh.CreateBox("",0.2, scene) 

    // Logic to be run every frame
    scene.onBeforeRenderObservable.add(()=>{
        // Left and right hand position/rotation
        if(vrHelper.webVRCamera.leftController){
            leftHand.position = vrHelper.webVRCamera.leftController.devicePosition.clone()
            leftHand.rotationQuaternion = vrHelper.webVRCamera.leftController.deviceRotationQuaternion.clone()
        }
        if(vrHelper.webVRCamera.rightController){
            rightHand.position = vrHelper.webVRCamera.rightController.devicePosition.clone()
            rightHand.rotationQuaternion = vrHelper.webVRCamera.rightController.deviceRotationQuaternion.clone()
        }

        // Head position/rotation
        head.position = vrHelper.webVRCamera.devicePosition.clone()
        head.rotationQuaternion = vrHelper.webVRCamera.deviceRotationQuaternion.clone()
        head.position.z = 2;
    })
    return scene;
};

引用元：https://www.babylonjs-playground.com/#VIGXA3#7

このようにコントローラが表示されますが、豆腐に覆われた形になります。

Babylon.jsのVRサンプルを動かしたときのモーションコントローラの形

4. コントローラ部分のソースコード修正方法

先ほどのような豆腐だと使いづらいので修正します。leftHandは何かのメッシュオブジェクトで実体化する必要がありますが、豆腐の形が見える必要はないので、アルファを０にします。このようにします。

//var leftHand = BABYLON.Mesh.CreateBox("",0.1, scene);
 var leftHand = BABYLON.Mesh.CreateBox("",{height:0.1,width:0.1,depth:0.1,faceColors:(1,1,1,0)}, scene);

CreateBoxはいくつかのプロパティを持っています。今回はfaceColorsを使いました。なお、Babylon.jsでは、プロパティをjson形式で指定します。詳しくはこちらをご確認ください。

Discover Basic Elements - Babylon.js Documentation

修正すると、このようになります。

Babylon.jsでモーションコントローラを見せるようにした例