CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

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とは?

下記の記事で書きましたが、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は何かのメッシュオブジェクトで実体化する必要がありますが、豆腐の形が見える必要はないので、アルファを0にします。このようにします。

//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形式で指定します。詳しくはこちらをご確認ください。

Babylon.js Documentation

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

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

動かした例です。少しみづらいですが、ボタンを押したこと、ジョイスティックを動かしたことが検出できています。

ソースコードはこちらです。Windows Mixed Realityヘッドセットとコントローラが動く状態にしてから、EdgeブラウザまたはChromeブラウザでindex.htmlを起動するだけです。

GitHub - flushpot1125/BJS_WinMR_public: sample code of Babylon.JS with Windows Mixed Reality

5. 終わりに

整理するとすごく単純なのですが、Babylon.jsのドキュメントにはこのような細かい調整方法が書いてなかったので整理しました。

次回は、miyauraさんの「Cognitive Serviceと連携したサンプルについて」です。