はじめに
以下のポストや記事に書かれている「Babylon Lite」の話に関する記事です。
●Babylon Lite
https://babylonjs.com/lite/
ざっくりとした内容を見ると、Babylon Lite は、Babylon.js を使った特定用途に関して、より小さく・速く・軽く、ということを実現できそうなもののようです。
Babylon Lite の GitHub のリポジトリは、以下になるようです。
●BabylonJS/Babylon-Lite: Home of Babylon Lite project
https://github.com/BabylonJS/Babylon-Lite
また、ゲーム系のメディアにも、取り上げられていました。
●オープンソースのWebレンダリングエンジン「Babylon Lite」リリース。「Babylon.js」と同等の描画性能を誇り、データサイズ削減＆動作速度が向上｜ゲームメーカーズ
https://gamemakers.jp/article/2026_06_18_139810/
Babylon Lite と Babylon.js の違い
上記の公式の記事に「Babylon Lite と Babylon.js の違い」などが書かれていたので、それを見てみました。
「The numbers」の部分
以下を見ると、Babylon Lite は、Babylon.js と比較して、「バンドルサイズ・表示まわりの処理時間的なもの・起動時間・メモリ使用量」の面でサイズ削減・高速化などが行われているようです。
| METRIC | Babylon Lite と Babylon.js の比較 |
|---|---|
| Bundle size / gzip 後のサイズ | 平均で約 19 分の 1。特定の用途に絞ったシーンでは最大 50 分の 1 |
| Frame time / RAF CPU | 約 3〜4 倍高速 |
| Startup time / 起動時間 | 約 2.5 倍高速 |
| Memory / メモリ使用量 | 約 5 分の 1 |
上記の「Frame time / RAF CPU」という部分は、画面が動いている最中に毎フレーム発生する処理時間にあたるようです。ブラウザでのアニメーション描画関連のメソッドで「window.requestAnimationFrame()」というメソッドがあったりしますが、requestAnimationFrame の略が RAF になるようです。
「Same scene, side by side」の部分
以下の「同じ 3D シーンを Babylon Lite と Babylon.js で横並びに表示した比較」を見ると、見た目が同一の結果となる形で、ランタイムやバンドルサイズをかなり削減できるようです。
この例では、gzip 後の JavaScript サイズが「675 KB ⇒ 34 KB」と、約 20分の1 に削減できているようです。また、フレームあたりの処理時間も 0.388 ms から 0.111 ms となっており、約 3.5 倍高速になっているようです。
これを、何らか機能を削って実現したという話ではなく、同じモデル・同じライティングなどにしたもので（見た目が同一に見える状態を保って）軽量化した形になるようです。
「Which engine should I use?」の部分
以下では、Babylon Lite と Babylon.js の使い分けについて書かれています。ここでは、どちらか一方を常に使うという方向ではなく、目的に応じて使い分けるものとして整理されているようです。
また、API の形が近いため、後から切り替えることも想定されているようです。見た目のピクセルが変わらない、つまりレンダリング結果を保ったまま移行しやすい点も強調されています。
| やりたいこと | 選ぶエンジン |
|---|---|
| できるだけ小さいバンドルサイズにしたい | Babylon Lite |
| 最高のパフォーマンスを狙いたい | Babylon Lite |
| 使う機能だけを配信する構成（ship-only-what-you-use な構成）にしたい | Babylon Lite |
| WebGL / WebGPU 対応を含む、幅広い機能セットを使いたい | Babylon.js |
| 後方互換性を重視したい | Babylon.js |
| モダンな Web 3D をクラスレスでクリーンな API で学びたい | Babylon Lite |
| 既存の Babylon.js のフル機能を使ったアプリを出したい | Babylon.js |
その他
その他、例えば以下では API の違いについて説明されていました。
Babylon.js で作ったシーンを Babylon Lite に移行する時は、書き方は少し変わるものの、考え方や名前はかなり近いので、Babylon.js を知っていれば理解しやすい、といったような説明がされていました。
それと、FAQ も掲載されています。
いくつか内容を見てみます。
以下、少し編集しつつ訳したものです。
-
Q. どのブラウザで動きますか？
-
A. Babylon Lite は WebGPU 専用であるため、WebGPU が使える環境で動作します。具体的には Chrome / Edge 113 以降、最近の Firefox や Safari です。設計上、WebGL へのフォールバックはありません。
-
Q. Babylon.js の機能は Lite にも追加されますか？
-
A. はい。Babylon Lite を Babylon.js に近い機能レベルまで引き上げることが、最優先事項です。機能は独立したモジュールとして追加されるため、使わない機能でバンドルサイズが膨らむことはありません。
-
Q. 本番環境で使えますか？API は安定していますか？
-
A. Babylon Lite はまだ新しく、Babylon.js との機能差を埋めていく中で API が変わる可能性があります。完全にオープンソースで、現在でも利用可能です。安定版になる前に一部の API が変更される可能性がある点には注意が必要です。
おわりに
今後、実際に「Babylon Lite」を試していければと思います。
その他のメモ
あと、自分があとで見てみようと思ったリンクをメモしておきます。
ポーティングガイド
●Babylon-Lite/docs/lite/01-porting-guide.md at master · BabylonJS/Babylon-Lite
https://github.com/BabylonJS/Babylon-Lite/blob/master/docs/lite/01-porting-guide.md
公式デモとドキュメント
●Babylon Lite demos
https://babylonjs.com/lite-demos/
●Welcome to Babylon Lite | Babylon.js Documentation
https://doc.babylonjs.com/lite