Babylon.js - 環境構築（自分用メモ）
この記事のスナップショット
ソース
お詫び
大幅に書き直しました。以前の記事を見ていた方には申し訳ないです。
嘘ではないけどちょっと偏りすぎてました m(_ _)m
概要
Babylon の開発環境、動作環境を構築する自分用メモ。
公開されているサンプルコード（主にPlayGroundにある）をいかにして自分の環境にもってくるか、
動作確認できる環境で少しずつコードを修正しつつ目的の環境に持っていく、
という視点にフォーカスをあててます。
環境構築、インフラ回りの話は陳腐化しやすいのでご注意。
閲覧時に時間がたっていたら、複数の情報／裏付けで確認を。
Babylon v8.0.1 (2025/03/29時点)が対象。
（執筆時に v7 から v8 になったけど、特に問題・変更はなかったのでそのままの内容で）
やったこと
- babylon のフレームワーク再整理
- 環境構築手順の確認
この手の情報はあちこちいろんな方が情報を公開されており、「屋上屋を架す」感じで非常に恐縮ですけど、自分なりの視点で再整理させてもらいました。
babylon のフレームワーク再整理
本家のドキュメントによると babylonフレームワークは下記3種に大別できます。
| フレームワーク | 特徴 ／利点 | 欠点 |
|---|---|---|
| CDN | ・外部ライブラリ ・PlayGroundと同じ環境？ ・利用が簡単 ・最新版を利用可能 |
・要ネット環境 ・バージョン固定しないとバージョンアップ時に動かなくなるリスク ・（URIの変更／公開停止のリスク） |
| UMD/NPM | ・PlayGroundと同じ環境 ・パッケージは＠無しの名称 ・（namescapeにBABYLON.～） ・ローカルに環境を構築 ・永続して利用可能 |
・バージョンアップは自前で ・ライブラリが大きくなりがち ・利用にnpm等の知識必要 |
| ES6/NPM | ・ライブライをコンパクトにできる ・パッケージは＠付きの名称 ・ローカルに環境を構築 ・永続して利用可能 |
・バージョンアップは自前で ・利用にnpm等の知識必要 |
UMD と ES6 が混在した環境は動作しない／どちらか一方にしないと動かないとのこと。
環境構築手順の確認
公開されているコードや PlayGround にあるサンプルを自分の環境で動かすための各環境を用意して、追試しつつ自分の環境にもっていくための実験環境を用意しました。
たとえば、拾ったサンプル（PlayGroundのコード）をまず「1.CDN環境」で動かして簡単に確認、
次にローカルな「3.UMD/NPM／webpack」でいろいろ改造して動作確認したら、
最後に「7.ES6/NPM／webpack」の環境で自分のサイトに組み込むといったイメージ。
| id | BabylonFW／NPM package | 開発言語 | デモ | デモ（havok*1） |
|---|---|---|---|---|
| 1 | CDN | JavaScript | 〇 | 〇 |
| 2 | local_lib | JavaScript | 〇 | 〇 |
| 3 | UMD/NPM／webpack | JavaScript | 〇 | × |
| 4 | TypeScript | ？ | × | |
| 5 | UMD/NPM／vite | TypeScript | 〇 | × |
| 6 | JavaScript | ？ | ？ | |
| 7 | ES6/NPM／webpack | TypeScript | 〇 | 〇 |
| 8 | ES6/NPM／vite | TypeScript | 〇 | -- |
*1)
公式によると havok エンジンは CDN もしくは ES6 の環境のみ利用可能（UMDは不可）っぽい。
簡単なサンプル（下記）を各環境で動かしてみました。
各環境の詳細は下記で。
1_CDN
- ライブラリのパス（URI）は
CDN＠本家
を参照してください。
2_local_lib
-
本家の gitソースをコンパイルした生成物(js)を配置したもの。
-
動作には別途、WEBサーバが必要。
-
gitソースのコンパイル手順
# gitよりソースを取得 https://github.com/BabylonJS/Babylon.js # 環境設定 npm install # UMD版でコンパイル npm run build:dev -
WEBサーバに関する補足
- WindowsOS で nodejs, npm がインストール済みなら、
Running_a_local_webserver_for_BabylonJs＠本家の記事の中にあるmaster.zipを使ってサーバを立てるのが楽（.batを２つ実行するだけ）。 - Visual Studio Code(VSCode)をお持ちなら、拡張機能の Live Server でも代用可能。
- WindowsOS で nodejs, npm がインストール済みなら、
3_UMDnpm_webpack_JavaScript
-
色々なBabylon.jsプロジェクトを作ってみた＠shigenobu.kondoさまの「npm版」を参考に環境構築
-
package.json みたら babylonjs のバージョンが 5.22.1 (´･ω｀･ )エッ？
一旦このままで。
4_UMDnpm_webpack_TypeScript
- 調査中。
5_UMDnpm_vite_TypeScript
-
UMP/NPM + vite で構築した環境。
-
gitソースからのコンパイルより手間は多少楽。
-
構築手順
# 初回のみ npm i vite npm i babylonjs # プロジェクトごと npm init vite cd {プロジェクト名} npm i npm run dev # デプロイ npm run build
6_ES6/NPM／webpack_JavaScript
- 調査中。
7_ES6/NPM／webpack_TypeScript
-
basic-example＠本家
の最初のリンク先の git から取得して展開したもの -
package.json の中を見てわかるとおり、すべてのパッケージ入り。
- babylonjs のバージョンが 8.0.0 に更新されてた（仕事が早い ^-^;）
-
個人サイトでも同様な構築環境を紹介していている方々がいますが、いろいろやるなら本家（上記）を使うのが無難。サンプルコードも込み。
-
デフォルトで動作(npm start)すると、テクスチャの床と球が表示される。
-
他のサンプル、例えば「物理演算(Havok)の例(床と上空にある球)」に切り替える場合、src/createScene.ts を編集する。
// 編集前 src/createScene.ts import { DefaultSceneWithTexture } from "./scenes/defaultWithTexture"; ... export const getSceneModule = (): CreateSceneClass => { return new DefaultSceneWithTexture(); }// 編集後 src/createScene.ts import { PhysicsSceneWithHavok } from "./scenes/physicsWithHavok"; ... export const getSceneModule = (): CreateSceneClass => { return new PhysicsSceneWithHavok(); } -
あと実行(npm start)が重いです。起動に数十秒かかります。
-
構築手順
# gitソース取得 https://github.com/RaananW/babylonjs-webpack-es6 # 初回設定 npm install # 実行 npm start -
デプロイは
npm run build
8_ES6/NPM／vite_TypeScript
-
usingVite＠本家のドキュメントをもとに環境構築。
- 物理演算(havok)は手探りで
-
構築手順
# 初回のみ npm i vite npm i @babylonjs/core @babylonjs/inspector @babylonjs/havok # プロジェクトごと npm init vite cd {プロジェクト名} npm i npm run dev # デプロイ npm run build -
物理演算(havok)
- 結局上手くいってないです
- 上記「7_ES6/NPM／webpack_TypeScript」の唯一動いている例でも特殊な import （マジックワード）が必要だったり、
掲示板をみてると「ES6への過渡期／移行中」「CDN が安定」な旨の発言を見かけたり... - １から環境構築できるのは、かなりスキルの高い人じゃないとムリっぽい気がする。
- 今後のバージョンアップ／開発チームに期待といったところでしょうか？
まとめ・雑感
同じサンプルコード（「立体表示」と物理演算「地面と球とパネル」）を各環境にもってきて動かしてみましたが、CDN が一番楽かも。
ES6/NPM は初学者が手を出すにはちょっとハードルが高い感じです。
物理演算(havok)について、UMD/NPMでは未サポートという情報を見落としてて、かなりの時間を浪費。調べても情報が出てこない訳ですね。物理演算をやりたい自分としては選択肢が減って残念です。
ES6＆TypeScriptで物理演算は更に一段ハードルが上がる感じなので、しばらくは PlayGround／CDN で様子見ですかね。
あと、PlayGround の保存がローカルにではなく、外部（クラウド？）に保存されるっぽいことがわかって、ローカルでPlayGroundを動かす意味が見いだせなくなり、関連記事（コンパイル＆起動手順）を消してます。m(_ _)m
ちなみに上記「調査中」とあるのは、そのまま塩漬け（放置したまま）になる可能性があります。
期待されていたら申し訳ないです。
Discussion