UnityからエクスポートしたBabylon.jsデータの制御方法

前回、UnityからエクスポートしたデータをBabylon.jsで表示したときの調査について解説しました。今回は、エクスポートしたデータをBabylon.jsの仕組みで使う方法を解説します。

1. Unityでエクスポートしたデータ「.babylon」の形式

少し前の記事で紹介したBabylon Tool Kitは、Unity上で作ったプロジェクトをBabylon.js向けに変換するものでした。変換されると、htmlやBabylon.js関係のjavascriptファイルと一緒に、<シーン名称>.babylonというファイルが生成されます。

中身はjson形式です。

gist9aae3a0e5d92baefea3902e2b670668d

gist6e368580880c69ef66341240ad390015

Main Camera、のように、Unity側で名付けられたオブジェクトの名称も入っています。

2. babylonファイルの読み込み方法

babylonファイルは、 BABYLON.SceneLoader.Load()というメソッドで読み込みます。Unityでエクスポートしたときに生成されたindex.htmlにすでに書かれており、そのまま使えます。

以下は、関係する部分だけを抜き出したものです。記載の通り、default.tmpに.babylonが入っています。

gist8073d8b555e67a3a3dc8d41354749e63

3. Unity側で定義したGameObjectをFindする方法

UnityだとGameObjectがベースクラスで、この中にあるFindメソッドで任意の Objectを検索することができます。しかし、Babylon.jsのHPでは、UnityプロジェクトをBabylon.js向けにエクスポートした後、どうやって使うのか、についての説明がありませんでした。

また、Babylon.jsのチュートリアルをみても、createBoxなどで自分でcubeを作る、というサンプルばかりで、作られたobjectを見つけて使うようなチュートリアルは探せませんでした。これができないとUnityのプロジェクトを活用自体ができないので調べてみました。

Babylon.jsでは、SceneオブジェクトにFindと同じような機能があります。下記はSceneのドキュメントです。

sceneオブジェクトのドキュメント

このドキュメントをみていくと、getMeshByNameというメソッドが準備されています。これを呼ぶことでscene中のオブジェクトを取得することができます。

getMeshByNameの説明

試した結果です。ここでは、Unity側のシーンにある"Car_TAXI_01"というオブジェクトをBabylon.jsで取得してみます。

GameObjectの名前 ：Car_TAXI_01
GameObjectのposition： x,y,z, = -31.5, 0.3, -31.7

取得するために、index.htmlの中にこのようなコードを書きます。

gistd2738255b785263d99c9c78db16f334a

次に、chromeでindex.htmlを実行します。以前書いたように、Web Serverとして実行できる箇所にファイルを置いて、ttp://servername (hをつけてください)のように実行する必要があります。

Chromeで実行後、表示 →開発 / 管理 →デベロッパーツールで、デベロッパーツールを表示させます。すると、このようにログが表示されます。

the name is :Car_TAXI_01
the object's position :{X: -31.5 Y:0.3 Z:-31.7}

nameとpositionがUnityのInspectorの値と一致していることが確認できます。

4. Babylon.jsの文法でObjectを動かす

エクスポートしたオブジェクトを取り出すことはできるので、次は取り出したGameObjectをBabylon.jsの文法で動かしてみます。今回は、ボタンを押したらオブジェクトを動かす、という処理を作ってみました。

まず、UnityのuGUIに相当するボタンですが、このようなコードを作ります。

gist2b069d412e021ce6ec44a7eec0dbfa8a

こちらを参考にしました。
ボタンを表現するコードの例

次に、オブジェクトの移動です。Unityのtransform.translateに相当するコードを書きます。

gist3ebf967ceecca7b00620e888c17ec46f

registerAfterRenderは、Babylon.jsが準備しているメソッドで、一定時間ごとに繰り返し呼ばれます。UnityのUpdate()に相当します。今回はボタンを押すことで、translateFlagをtrueに変更し、translateを繰り返し実行します。指定時間が経過したらtranslateFlagをfalseに変更することで、オブジェクトを移動させています。

ためしに、ボタンを押すことで、ビルを+y軸方向に移動させてみました。実行するとこのようになります。

今回の実行内容を以下のリポジトリにまとめました。index.htmlの中で日本語コメントが入っている箇所が追加箇所、それ以外はBabylon Toolkitによって自動生成されたものです。今回はindex.htmlの中に少し追加しただけです。

GitHub - flushpot1125/BabylonJS_UnityExportSample

5. 終わりに

意外に分量が多くて３つの記事に分かれましたが、ここまで実行することで、Unityから出力した内容をBabylon.jsで制御できます。

Babylon.jsはhtmlとjavascriptなので、既存のWeb技術を組み合わせやすいというメリットがあります。さらに、VRの対応が進んでいるのでUnityだけではやりづらかったようなコンテンツ開発がしやすくなるかもしれません。たとえば、ドキュメントには以下の宣言があり、各種VR HMDのコントローラに対応していることが書かれています。

WebVR Cameraのドキュメント

export enum PoseEnabledControllerType {
    VIVE,
    OCULUS,
    WINDOWS,
    GEAR_VR,
    DAYDREAM,
    GENERIC
}

(2019/3/5 追記　その後、このような記事を書いています)

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

Babylon.jsとDayDreamを使って、ChromeのWebVR機能を使うためのTipsについて - CrossRoad

Oculus GoでBabylon.jsを使ったときに、没入型と通常VRモードを切り替える方法 - CrossRoad

Babylon.jsは日本語ドキュメントがほぼゼロで、少なくとも日本のXR関係のコミュニティでは盛り上がってないと思います。ただ、日本のWeb系コミュニティの動向はまだ確認できておらず、海外だとstack overflowなどでわりと情報がありました。

色々知った方が幅が広がるので、今後はUnityは使いつつ、もう少しWeb側の技術まで範囲を広げてみようと思っています。