ダークサイドにようこそ!

ブレイクダンス / プログラミング / 映像制作 / 旅行 / 散歩

【Babylon.js】Babylon Editor Toolkitの導入メモ【Unity】

Unityで作成したSceneをWeb向けレンダリングエンジンであるBabylon.jsで扱うためのBabylon Editor Toolkit導入メモです。公式チュートリアルは以下ですがちょっと分かりにくいので本記事で補足します。ちなみに私はUnityもBabylon.jsもよく分かっていません、あしからず。

※検証時のUnityバージョンは「2020.1.16f1」です。

doc.babylonjs.com

 

まずは以下URLより「Babylon Editor Toolkit.unitypackage」をダウンロードし、適当に作成したプロジェクトでインポートします。

github.com

kan-kikuchi.hatenablog.com

 

f:id:hahaeatora:20210312021011p:plain

次にTools→Babylon→Scene Exporterを起動します。

f:id:hahaeatora:20210312040943p:plain

Script CompilationよりNode Command Line(node.exe)Type Script Compiler(tscのパスを指定します。これら使ったことのない人は別途インストールが必要です(Node.jsTypeScript)。ググるとたくさん記事が見つかると思うのでそちらも参照。

 

f:id:hahaeatora:20210312042435p:plain

続いて、Edit→Project SettingsよりPlayer→Other Settings→Color SpaceをLinearに設定します。

 

f:id:hahaeatora:20210312043110p:plain

更に、Window→Rendering→LightingよりScene→Realtime Lighting→Realtime Global Illuminationのチェックを外す&Mixed Lighting→Baked Global Illuminationにチェックを付けましょう。事前準備としては以上です。

今回は適当にマテリアルを設定したCubeをScene内に配置してBabylon.js用に出力してみます。

 

f:id:hahaeatora:20210312045814p:plain

Scene ExporterよりBuild Projectを実行。ビルドが終わると画像のようにダイアログが表示されPreviewを押すと実際にブラウザ上で確認ができます。出力されたスクリプト類はUnityプロジェクト内のExportフォルダ(Assetsと同じ階層)で確認できます。

 

f:id:hahaeatora:20210312052308p:plain

Chromeでプレビューした様子。

 

以下の記事も参考にさせていただきました。

www.crossroad-tech.com

www.crossroad-tech.com