Cross Technology

Unity、VR、MR、ARを中心とした技術ブログ

Babylon.js向けデータをUnityから出力する

ブログのタイトル通り、私が勉強の対象にしているのはUnityですが、周辺技術や関連分野についても調べることがあります。

過去に調べた例

最近は、海外コミュニティの知り合いから聞いた「Babylon.js」を調べています。Babylon.jsとは、Web向け3DCGフレームワークです。最初はBabylon.jsとUnityの違いを見ていたのですが、調べるうちにUnityで作ったものをBabylon.jsに変換する仕組みがあるとわかりました。

ただ、Babylon.js自体日本語の情報がほとんどなく、UnityからBabyln.js向けの変換説明は部分的に少しわかりづらい箇所がありました。

そこで、今回はUnity-Babylon.js変換の手順を整理してみました。なお、以下の環境で動作を確認しています。

  • MacOSX 10.13.5
  • Unity2018.1.6f1
  • Safari 11.1.1

1. Babylon.jsとは?

HPに書かれている説明を引用します。

A complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR and Web Audio

Works on all WebGL platforms via a specific modern shader architecture and native touch support: IE11/MS Edge, Chrome, Firefox, Opera, Safari, iOS (iPad/iPhone), Android, Windows Phone 8.1/Mobile 10, Firefox OS, Xbox One

引用元(どちらも同じURL):BabylonJS - 3D engine based on WebGL/Web Audio and JavaScript

まとめると、Babylon.jsとはブラウザで3DCGを描画するためのフレームワークです。IE11/Edgeを始めとして、主要なブラウザやOSに対応しています。

2. Unityプロジェクトを変換する「Babylon Editor Toolkit」とは?

Babylon.js Editor Toolkitとは、Unityで作ったプロジェクトをBabylon.js向けに変換する仕組みです。Unity上で動作し、拡張子「babylon」のファイルや、html付きの実行ファイル一式を出力できます。

なお、Babylon.jsには、Unityだけでなく、Blender、3DS MAX、MAYA、Clara.ioで作ったものを、Babylon.jsで処理できる形式に変換する仕組みも提供されています。

(注)
Clara.ioとは、クラウドベースで3Dモデリングをする仕組みのようです。これだけはリンク先がClara.ioのHPになっており、Exporterを見つけることができませんでした。

3. Babylon.js Editor Toolkitの準備と出力までの手順

以下のHPの手順に沿って進めます。

Babylon.js Documentation

3-1. unitypackageのインポート

まずはExportできる環境をUnityに作るため、Editor機能を固めたunitypackageをダウンロードします。

Exporters/Unity/EditorToolkit/Redist at master · BabylonJS/Exporters · GitHub

Unityで新規プロジェクト(名前は任意)を作ります。次に、ここで取得した「Babylon Editor Toolkit.unitypackage」をUnityでインポートします。

なお、2018/7/1現在、最新バージョンを使うにはUnity2018以降が必要です。Unity2017で開くとこのようなエラーが出ます。

Babylon Editor Toolkit.unitypackageをUnity2017でインポートしたときのエラーメッセージ

Assets/Babylon/Shaders/Unity/Interface/StandardRoughnessShaderBJS.cs(272,34): error CS1501: No overload for method `TexturePropertyWithHDRColor' takes `4' arguments

Assets/Babylon/Shaders/Unity/Interface/StandardShaderBJS.cs(323,34): error CS1501: No overload for method `TexturePropertyWithHDRColor' takes `4' arguments

これは、TexturePropertyWithHDRColorというメソッドが使う引数の数が、Unity2017(5個)からUnity2018(4個)で変わったためです。

ちなみに、このエラーが出ている間はBabylon.jsのメニューが表示されず、使うことができません。

3-2. ランタイム設定

インポートが成功すると、UnityにBabylonというメニューが追加されます。また、ComponentにもBabylonが追加されます。

Babylon Export機能が付加されたUnity

Babylon / Scene Exporterを選択します。ほとんどの設定はここから進めます。

Babylon Editorの機能パネルをUnityで表示させた例

まずは、TypeScriptとNodeのコンパイルができるようにパスを指定します。

TypeScriptとは、Microsoftが開発、メンテナンスの主体を担っているOSSのスクリプト言語です。Javascriptと似ており、Javascirptにはなかった「型」と「クラス」があります。「TypeScript 使い方」などで調べれば多数情報が出てきますので、ここでは詳細は省略します。

typescriptのコンパイラが入っていない場合、下記のコマンドでインストールします。

Windowsの場合

 > npm install -g typescript

Macの場合

 $ sudo npm install -g typescript

npmもない場合は、「Node.js インストール」のように調べて、Node.jsをインストールして見てください。

次は、Node Runtimeです。これは「Node.js」をインストールして入ればOKです。それぞれインストールしたら、このようにパスを入力します。画像はMacの例です。
Babylon.js Editor Toolkitの設定パス


Macの場合

 Typescript Compiler   :/usr/local/bin/tsc
 Node Runtime System : /usr/local/bin/node

Windowsの場合

  Typescript Compiler   :C:\Users\ログインユーザ名\AppData\Roaming\npm\node_modules\typescript\bin\tsc
 Node Runtime System : C:\Program Files\nodejs\node.exe

3-3. Unity側のビルド設定

Unityのビルド設定を2箇所変更します。

(1) Other SettingsのColor SettingsをLinerからGammaに変更

File / Build Settings / Player Settingsから設定画面を開き、Color SpaceをLinearからGammaに変更します。

Babylon.js EditorでExportするときのColor設定]

(2) Realtime Global IlluminationをOFF

Window / Lighting / Settingsから設定画面を開き、Realtime Global Illuminationのチェックが付いている場合は外します。また、Baked Global Illumination はチェックをつけておきます。

Babylon.js EditorでUnityのRealtime Global Illumination設定画面

ちなみに、この設定をする理由は書かれておらず、これらの設定をしなくても出力自体はできました。とはいえ、今回はお試しでSphereを1つ出しただけなので、GameobjectやMaterialが多数ある場合はうまく表現されないのかもしれません。理由がわかり次第追記したいと思います。

これで設定は終わりです。あとは通常通りUnityの中でGameobjectを並べたり、処理を作ります。

3-4. Babylon.js形式に出力

出力するには、Scene Explorerの「Build and Preview」を実行します。Unity ProjectのAssetsと同じ階層にExportというフォルダができて、この中に各種スクリプトが生成されます。

4. 動作確認

まずはSphereとParticleだけを並べてみました。

Unityで作ったシーン

簡単ですが、Sphereはこのようなコードを書いてX軸方向に移動させています。


gista977a4afd52d3b45417b4ee7a07c673c

次に、このシーンをBabylon.js Editorで出力してみました。

UnityからBabylon.js向けに出力した結果

このように、Particleは表示されず、transformの移動も表現されませんでした。ただし、冒頭で解説した通り、Babylon.js Editorは色々な機能があり、現時点ではどこまで再現できるか/できないか?までは把握できていません。

この辺りは次回以降、調べていきたいと思います。

5. 困ったときは?

5-1. Unityでシーン実行すると、Babylon.js Editorのビルド画面が出てしまう。

Unity側で何かを作って動きを確認したいのに、Babylon.js Editorのビルド設定が出ることがあります。

Unityのシーン実行でBabylon.js Editorのビルドダイアログが出る画面

状況:Build Current Babylon Scene : 設定したシーン名、というダイアログが出て、Unityのシーン実行ではなくBabylon.jsのビルドが実行される

原因:Scene Explorerで Attach Unity Editorが有効になっているため

対策:Attach Unity Editorのチェックを外し、Save Project Export Settings をクリックする。

Save Project Export Settings をクリックしないと設定が反映されないので注意が必要です。

5-2. Compile ScriptとExport Scene Fileの役割は?

明確にはわかっていませんが、以下のような違いがありました。

Compile Script:<UnityProjectname>.babylon.jsのみが生成される

<UnityProjectname>.babylon.jsの生成例

このjavascriptはhtmlのサイズとか、基本設定に関するもののようですね。


gistc1327e33d6905fdbefa9b6d3817afa21

Export Scene File :UnityのScene情報のみが生成される

Export Scene Fileの結果

拡張子babylonのファイルをBabylon.jsの仕組みで読み込めば、Unityのシーンを再現できると思われます。

Build and Preview :ブラウザで実行できるだけのファイルが生成される

Build and Previewの結果

「Compile Script」、「Export Scene File」の内容に加えて、index.htmlやJavascriptが生成されます。

5-3. Build and Previewで生成したindex.htmlをブラウザから開いても、真っ暗のままで実行できない

Babylon.js Editorで出力したindex.htmlを実行したときのエラー

たとえば、index.htmlをダブルクリックしてSafari、Chromeなどを開いても、このように黒い画面のままになります。

このとき出ているエラーは以下の通りです。

BJS - [14:45:11]: Unable to load from scenes/SampleScene.babylon: Failed to load scene.

[Error] Failed to load resource: 要求されたURLがこのサーバ上に見つかりませんでした。 (babylon.videoDome.js.map, line 0)

[Error] Failed to load resource: 要求されたURLがこのサーバ上に見つかりませんでした。 (textBlock.js.map, line 0)

3つ出ていますが、実際はFailed to load sceneが原因です。現状はWebServerにindex.htmlを含む全てのファイルを移動させ、http://localhostにアクセスすれば実行できます。Macの場合、/Library/WebServer/Documentsの中に移動させます。

補足1

textBlockは不明ですが、videoDomeはBabylon.js単体で360度動画を再生するための機能であり、UnityのExport対象に含まれていません。また、http://localhostで実行したときも、videoDomeとtextBlockのエラーは出てきます。

補足2

Scene Explorer / Toolkit Exportation Options / Export Http Module を有効にしてからBuild and Previewを実行すると、出力結果にweb.configというファイルが追加されます。

まだ調べてませんが、ここを変更すればダブルクリックでも実行できるかもしれません。(あとはブラウザのクロスオリジン制限を無効にするとか)
機会をみて調べてみたいと思います。

5-4. Unity側のPlatform指定はどれにすればよいか?

HPにはUnity側のBuild Settingで使うプラットフォームの指定はありませんでした。「PC、Mac Linux Standalone」、「WebGL」で試した限りでは同じ結果になりました。

Unityの対応プラットフォーム一覧

変換の主体はBabylon.js Editor なので、断定はできませんがどちらでもよいのだと思います。

終わりに

Babylon.jsは色々勉強になることが多そうです。「4.動作確認」で書いたように、どこまでUnityの仕組みを移せるか/できないのか、などについて、何回かに分けて解説していきたいと思います。