babylon.js editor v5 対応版をビルドしてみた
こんにちは。やまゆです。
babylon.js の現在
babylon.js という TypeScript 製のブラウザ向け 3D アプリケーションフレームワークがあります。世の中では three.js の方が圧倒的に知名度が高いですが、 babylon.js は Microsoft 謹製ということで、こちらも十分に魅力的です。私の推しプロダクトでもあります。
現在の最新 stable バージョンは 4.2.0 で、 npm install --save @babylonjs/core とするとこの 4.2.0 が落ちてきます。
しかし、そのリリースは 2020/11/13 と結構古いです。え、更新されてないの？と思うかもしれませんが、そんなことはありません。
その 4 日後の 2020/11/17 から 5.0.0-alpha.1 のリリースが始まりました。正式な babylon.js のリリースポリシーは良くわかりませんが、 alpha, beta, rc を長い期間行ってからリリースするのが慣習となっているみたいです。
そして執筆時の 2022/03/21 現在では 2022/3/16 の 5.0.0-rc.4 が最新バージョンです。 alpha が 65 回、 beta が 12 回リリースされ、今に至ります。 5.0.0 の正式リリースは 4 月の予定です。
ある程度の BREAKING CHANGE がありますが、基本的には大幅な機能追加が行われています。一番大きなものは WebGPU 対応でしょう。
アプリケーションコードの大きな変更なく、 WebGL1, 2 WebGPU と三つの API で動作させることが可能になっています。 WebGPU は今後大きく発展していく可能性が高いので、期待が持てますね。もちろん three.js でも実装されているみたいです。
babylon.js Editor
さて、今回は babylon.js 自体の話ではなく、公式の周辺ツールである babylon.js Editor についての話をします。
これは要するに babylon.js 版 Unity Editor みたいなものですね。シーンにメッシュやライトを配置してプレビューしたりビルドしたりできる Electron 製のツールです。
公式ページではまだ 4.0 バージョンしか表記されていませんが、 別ブランチ で v5 対応が進んでいるみたいなので、こちらのソースコードを持ってきて自分で Electron をビルドしてみたいと思います。
インストールとビルド
まず、ビルドに必要なツールを準備する必要があります。 python3 と Visual Studio Build Tools(Win) が必要なようです。
Windows への node.js と python3 のインストールは scoop に任せます。便利なのでオススメです(ただ、 vscode や Chrome のようにセルフアップデート機能を持つアプリケーションとは相性が悪いので、 CLI ツールのみに絞って使うのが良いと思います)。
Scoop 自体のインストールは割愛します。
PS > scoop install nodejs@14.19.1 python@3.10.3
...
PS > node -v
v14.19.1 // v16, v17 では electron-rebuild が動きませんでした
PS > python -V
Python 3.10.3
また、 Windows 環境では Visual Studio Build Tools を入れる必要があるかもしれません。 macOS, Linux は試していないので node-gyp の README を読んだりしてみてください。
その後、 Editor の v5 対応ブランチ からソースコードをダウンロードします。今回はコミットする予定はないので zip で落とすのが楽ですね。
解凍したディレクトリで PowerShell を開き、 npm install で依存関係を用意します。
46 error gyp: name 'openssl_fips' is not defined while evaluating condition 'openssl_fips != ""' in binding.gyp while trying to load binding.gyp
46 error gyp ERR! configure error
46 error gyp ERR! stack Error: `gyp` failed with exit code: 1
46 error gyp ERR! stack at ChildProcess.onCpExit (C:\Users\akai_\Downloads\Editor-chore-babylonjs5\Editor-chore-babylonjs5\node_modules\node-gyp\lib\configure.js:261:16)
46 error gyp ERR! stack at ChildProcess.emit (node:events:526:28)
46 error gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
Win 10 PowerShell 環境で node.js v16, v17 を入れていると、このエラーが出て npm run postinstall コマンドに失敗するようです。 node.js v14 を入れることで正常に終了するようになりました。
PS > npm run build
で Electron アプリのビルドが走ります。無事にビルドが終了すると、 electron-packages ディレクトリ内にインストーラが配置されますので、それを使ってインストールします。
起動してみた
インストールして開けば、 Unity っぽい画面が出てきます。
あまり詳しく触ってはいませんが、さすがに完成度は Unity, Unreal Engine に比べればあまり高くないみたいですね。私はとりあえず Editor なしで色々作ってみます。
Discussion