Babylon.js v5が公開されています。これまでは4.2.Xだったので久しぶりのメジャーアップデートです。
公式アナウンスも出ており、かっこいいビデオも公開されています。
We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5
— Babylon.js (@babylonjs) 2022年5月5日
🥳🥳🥳
Blog: https://t.co/aMgjIIeIin
Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU
#webgl #simple #beautiful #powerful #OpenSource
v5の公開を記念して、Babylon.js v5で提供されている各種機能を試す方法、Babylon.js自体をビルドして使う方法をまとめてみました。
なお、v4.0のときも同じようビルドする手順を書いたことがありますが、そのときから少し手順が異なっているので新たに書きました。
・Visual Studio Code 1.66.1.
・Babylon.js v5.1.0.
・MacOS 12.1 (M1 Pro).
- 1. Babylon.jsをビルドして使うと何が良いか？
- 2. Babylon.js のビルド方法
- 3. 色々と動作確認してみる
- 4. Visual Studio Codeを使わないでも実行はできる
- 5. 任意のソースコードで使いたいBabylon.jsのまとまったファイルをビルドするには？
- 6. おわりに
1. Babylon.jsをビルドして使うと何が良いか？
Babylon.jsを使う時、普段はCDNやnpmなどで利用できる状態のコードを取得して使うと思います。今回紹介するビルドをすると、それらの公開版よりも早く最新機能を試すことができます。
また、Babylon.jsの機能改善 (pull request) をするためにも必要です。
あとは、Babylon.jsのコミュニティはNode Editor, GUI Editor, Sandbox, Playgroundなどのツール的な機能を提供しています。
これらはWebブラウザでインターネットアクセスすることで使用できます。ただ、Babylon.jsのリポジトリをビルドすると、インターネットアクセスしなくても使うことができます。そのため、新しい機能を試す、自分で追加してみるというときに役立ちます。
2. Babylon.js のビルド方法
3年前 (v4.0) に書いたときと同様に、このページに色々書いてあります。
ただ、v4.0のときになかった便利な機能も増えていて、当時よりも簡単になっていたのでその辺も説明します。
2.1 ソースコードをダウンロードし、Visual Studio Codeで開く
まずは、GitHubからBabylon.jsのリポジトリをダウンロードし、任意のフォルダに展開します。
これをVisual Studioで開きます。Open Folderを使ってフォルダごと開きます。
2.2 .vscode/extentions.jsonに記載の拡張機能をインストールする
Open Folderで開くと、右下に「拡張機能をインストールしますか？」というポップアップが出るので、Installボタンを押します。
このときインストールされる拡張機能は、.vscode/extentions.jsonに書いてあります。インストールが終わると、このような５つの拡張機能がインストールされます。
2.3 npmを指定されたバージョンにアップデートする
The package manager npm is updated regularly and often to test Babylon.js you will need the latest v8 version. To update to the latest v8 version in your CLI:
私の環境ではnpmのバージョンが8.5でしたが、8.6を要求されたため、トップディレクトリでこのように実行しました。
$ npm install npm@8.6.0
2.4 npm installで必要なパッケージを取得する
これはnpmで管理されるJavaScriptで一般的な方法ですが、package.jsonに記載されている依存関係のあるパッケージを一通りインストールします。
(トップディレクトリで実行しています)
$ npm install
2.5 run build:devでビルドする
実際のビルドは、トップディレクトリでrun build:devを実行します。完了までの時間はPC環境によるので、しばらく待ちます。
$ run build:dev
これで完了です。
2023/3/16追記
run build:dev を実行した時に run command not foundと出る場合、本来のコマンドである以下を直接実行してください。
npm run build:assets && npm run build:source && npm run build:declaration -w @tools/babylon-server
build:dev と上記のコマンドの対応関係は、package.jsonに書いてあります。
"scripts": { "build:dev": "npm run build:assets && npm run build:source && npm run build:declaration -w @tools/babylon-server", ・・・
3. 色々と動作確認してみる
Visual Studio Codeのdebugボタンを押すと、このように色々と起動方法を選択できるようになっています。
試しに、"Launch GUI Editor (Edge)" を選択して三角マークを押してみました。すると、数秒で新しくEdgeブラウザが立ち上がり、GUI Editorが表示されました。
URL部分がlocalhostになっていることが確認できると思います。
ほかにもPlayground, Sandbox, Node Editorなど、色々と確認することができます。
4. Visual Studio Codeを使わないでも実行はできる
一連の手順はVisual Studio Codeを使わなくてもできます。ただし、その場合、個別機能の起動は全てコマンドラインから実行になります。
例：
・Sandboxを起動したい場合
$ npm run serve -w @tools/babylon-server // in a new terminal window $ npm run serve -w @tools/sandbox // in a new terminal window
・GUI Editorを起動したい場合
$ npm run serve -w @tools/babylon-server //in a new terminal window $ npm run serve -w @tools/gui-editor //in a new terminal window
5. 任意のソースコードで使いたいBabylon.jsのまとまったファイルをビルドするには？
先ほどまでは各種機能を試す手順を紹介しました。リポジトリをビルドすると、普段CDNで指定したり、npm install bablon.jsのようにして取得しているBabylon.js自体のjsファイルを取得することもできます。
そのためには、トップディレクトリで以下のコマンドを実行します。
$ npm run build:umd
ビルドが終わると、packages/umdディレクトリ以下にbabylonjs, babylonjs-gui, babylonjs-editor,などのフォルダができます。
この画像では、babylonjsフォルダを展開して表示しています。たとえばbabylon.jsというJavaScriptファイルが、CDNで使うときのbabylon.jsファイルと同じです。他も同等です。
6. おわりに
ちょっと面倒かもしれませんが、ソースコードからビルドできるようになると色々と試せるので理解が深まります。
Babylon.jsに興味を持っていただけたら、こういう方向から試してみるのも面白いと思います。
