CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.js v5をビルドする方法

Babylon.js v5が公開されています。これまでは4.2.Xだったので久しぶりのメジャーアップデートです。

公式アナウンスも出ており、かっこいいビデオも公開されています。

v5の公開を記念して、Babylon.js v5で提供されている各種機能を試す方法、Babylon.js自体をビルドして使う方法をまとめてみました。

なお、v4.0のときも同じようビルドする手順を書いたことがありますが、そのときから少し手順が異なっているので新たに書きました。

www.crossroad-tech.com

・Visual Studio Code 1.66.1.

・Babylon.js v5.1.0.

・MacOS 12.1 (M1 Pro).

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のときになかった便利な機能も増えていて、当時よりも簡単になっていたのでその辺も説明します。

doc.babylonjs.com

2.1 ソースコードをダウンロードし、Visual Studio Codeで開く

まずは、GitHubからBabylon.jsのリポジトリをダウンロードし、任意のフォルダに展開します。

github.com

これをVisual Studioで開きます。Open Folderを使ってフォルダごと開きます。

2.2 .vscode/extentions.jsonに記載の拡張機能をインストールする

extentions of VSCode for Babylon.js build

Open Folderで開くと、右下に「拡張機能をインストールしますか?」というポップアップが出るので、Installボタンを押します。

このときインストールされる拡張機能は、.vscode/extentions.jsonに書いてあります。インストールが終わると、このような5つの拡張機能がインストールされます。

Installed extentions for Babylon.js build in Visual Studio Code

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

これで完了です。

3. 色々と動作確認してみる

Visual Studio Codeのdebugボタンを押すと、このように色々と起動方法を選択できるようになっています。

Built Babylon.js on Visual Studio Code

試しに、"Launch GUI Editor (Edge)" を選択して三角マークを押してみました。すると、数秒で新しくEdgeブラウザが立ち上がり、GUI Editorが表示されました。

GUI Editor on built Babylon.js v5.1.0

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ファイルと同じです。他も同等です。

Generated each babylonjs source code in Visual Studio Code

6. おわりに

ちょっと面倒かもしれませんが、ソースコードからビルドできるようになると色々と試せるので理解が深まります。
Babylon.jsに興味を持っていただけたら、こういう方向から試してみるのも面白いと思います。