Screenshots
Overview
概要
Three.jsが「3D描画ライブラリ」なのに対し、Babylon.jsは描画に加えて物理・GUI・パーティクル・PBR・アニメーション・モデル読込・Gizmo編集・デバッガまでを公式に内包したWeb 3Dエンジンです。その違いを、外部ライブラリに頼らない7つのデモで実証するショーケース。各デモには「vs Three.js」の対比コピーを添え、Three.jsなら自前実装や追加統合が必要になる箇所を示します。
How to use
遊び方・使い方
左サイドバーまたは数字キー(1〜7)でデモを切り替えます。画面右下のコントロール(ボタン／スライダー／トグル／セレクト)で各デモをリアルタイムに操作。物理デモでは床をクリックするとその位置にオブジェクトが落下し、重力もスライダーで変えられます。パーティクルは炎／煙／魔法陣／噴水を切替、アニメーションはイージングや再生速度を調整可能。左上のInspectorボタンでBabylon.js標準のシーンデバッガを開け、対応環境ではWebGPUバックエンドへ切り替えられます。
Tech stack
技術スタック
@babylonjs/core 9Havok (WASM)WebGL2 / WebGPUNext.js 16React 19TypeScript
レンダリングはWebGL2を基本に、対応環境ではWebGPUへオプトイン切替(失敗時はWebGL2へ安全フォールバック)。デモ切替ごとにSceneを作り直して旧インスタンスをdisposeし、連打対策のswitchTokenで古い構築結果を破棄。共通演出としてGlowLayer＋Bloom＋FXAA＋ACESトーンマッピングと指数シャドウマップを適用しています。
Highlights
工夫した点
- SSR安全性を徹底し、Babylon実体はuseEffect内の動的import()のみで読み込み、型だけを静的参照する設計
- Havok WASMをバンドラ解決に任せず、public配下のwasmをfetchしてwasmBinaryとして渡し、Next環境での解決不安定を回避
- 外部CDNのモデルや環境マップは実行時取得とし、取得失敗時は代替メッシュやライトのみ描画へ必ずフォールバック
To improve
改善したい点
- ルートimportでBabylon全体を取り込みバンドルが大きいため、deep import化によるツリーシェイクが必要
- Havok wasm(約2MB)とBabylonバンドルで初回ロードが重く、チャンク分割などの最適化余地がある
- WebGPU経路での各デモ(Glow／Bloom／Havok／GPUパーティクル)の実機検証が未完了
What's next
今後の展望
- Node Material Editor連携・Spatial Audio・WebXR(VR／AR)デモの追加
- バンドル最適化(dynamic chunk分割)とLighthouseでの計測・改善
- WebGPUバックエンドでの全デモ動作検証と最適化