最小サイズと最高性能を目指したWebGPU専用の軽量3Dエンジン「Babylon Lite」が発表

10年以上にわたるBabylon.jsの開発実績と最新のGPU技術を背景に、新しい3Dレンダリングエンジン「Babylon Lite」が公開されました。

この記事では、Babylon Liteがどのようなエンジンであり、どのような特徴を持っているのか、そして既存のBabylon.jsとどう使い分けるべきかについて紹介したいと思います。

Babylon Liteとは

Babylon Liteは、「もしレガシーな環境を考慮せず、最新のGPU APIとツールチェーンのみを基盤としてゼロからエンジンを構築したらどうなるか」というアプローチから生まれた新しい3Dエンジンです。

その最大の目的は、最小のバンドルサイズと最大のパフォーマンスを達成することにあります。

WebGPU専用として設計され、データ指向のアプローチと徹底したツリーシェイキング（不要なコードの削除）を採用しながらも、出力される画像はBabylon.jsとピクセル単位で完全に一致するように設計されています。

Babylon.jsとBabylon Liteの違い

重要な点として、Babylon LiteはBabylon.jsを置き換えるものではありません。 両エンジンは今後も並行して開発が進められます。用途に応じて適切なツールを選択できるようになっています。

Babylon.jsは使いやすさや豊富な機能、過去のコードがそのまま動く「後方互換性」に強みを持っています。

一方でBabylon Liteは、サイズと速度を最優先しているため、後方互換性の維持は第一の目標とされていません。

 パフォーマンスやツリーシェイキングの効率を保つために、バージョンアップ時に破壊的変更が行われることが許容されています。そのため、実際のプロジェクトに導入する際は、利用するバージョンを固定することが強く推奨されます。

視覚的な互換性（ピクセルパーフェクト）

Babylon.jsは13年間にわたり、Web上で最も美しいビジュアルレンダリングを提供するために開発されてきました。Babylon Liteでもこの理念は引き継がれています。

同じシーン設定を与えられた場合、Babylon LiteとBabylon.jsは全く同じピクセルを描画します。これはコードを単にコピーしているわけではなく、数学的な仕組みを理解した上で、同一の画像を生成するための最小限のコードを書き直しているためです。

この同一性は目視だけでなく、CI（継続的インテグレーション）環境においてChromeのSwiftShader Vulkanバックエンドを使用し、Babylon.jsの基準画像との自動ピクセル差分テストによって厳密に検証されています。

各カラーチャンネル（0〜255）における平均絶対誤差（MAD: Mean Absolute Difference）を測定しており、100以上のテストシーンの中央値は「0.05」と、視覚的には実質的に見分けがつかないレベルに保たれています。

実際の数値データ比較

以下は100以上のシーンを用いたテストスイートにおいて、両エンジンで構築された全く同じシーンを比較した結果です。

バンドルサイズ

実際にダウンロードされるgzip圧縮されたJavaScriptの量で比較すると、Babylon Liteは平均して約19倍（非圧縮時は約30倍）小さくなります。

例えば、「BoomBox」のPBRシーンでは、675KBに対して34KBという結果になっています。特定の機能に絞ったシーンでは、最大で50倍の差が開くこともあります。

パフォーマンスとメモリ使用量

Babylon Liteは、フレーム描画のCPU時間が約3〜4倍速く、起動時間が約2.5倍速く、メモリ使用量が約5倍少なくなります。これらすべてを、同一の画像を描画しながら達成しています。

レンダリング例

以下は、WebGPU上のBabylon Liteでライブレンダリングされた画像です。これらもすべてBabylon.jsの参照画像とピクセル単位で一致しています。

実際の動作（ライブデモ）

静止画だけでなく、実際のブラウザ上で動作するインタラクティブなデモも多数公開されています。

GPLフリーの「DOOM（id Tech 1）」やプレイ可能な「LibreQuake E1M1」、ストリーミング方式のボクセルサンドボックス、クォータービューのストラテジーマップ、マリオ風プラットフォーマー、テトリスなど、様々なジャンルのデモがWebGPU上で動作しています。

すべてが徹底的にツリーシェイキングされており、例えばDOOMのデモはエンジンとデモコードを合わせても全体でわずか約43KB（gzip圧縮時）に収まっています。

Babylon Lite ライブデモギャラリーページへ

両エンジンのコード比較

Babylon LiteとBabylon.jsは別々のエンジンであるため、1つのシーンの中に両者を混在させることはできません。しかし、APIの設計思想は非常に似ているため、概念やアセット（glTFモデル、環境マップ、テクスチャなど）はそのまま流用し、プロジェクトの目的に応じて使い分けることが可能です。

以下は、同じ「BoomBox」のPBRモデルを表示するシーンを構築する際の、両エンジンのコード比較です。クラスベースから関数ベースへとAPIの形は変わりますが、概念や名称は引き継がれていることがわかります。

Babylon.jsの場合

import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";
import "@babylonjs/core/Helpers/sceneHelpers";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { Scene } from "@babylonjs/core/scene";
import "@babylonjs/loaders/glTF";

const engine = new WebGPUEngine(canvas, { antialias: true, adaptToDeviceRatio: true });
await engine.initAsync();
const scene = new Scene(engine);

const light = new HemisphericLight("hemi", new Vector3(0, 1, 0), scene);
light.intensity = 1.0;

await SceneLoader.ImportMeshAsync("", "https://playground.babylonjs.com/scenes/", "BoomBox.glb", scene);

scene.environmentTexture = new CubeTexture(
    "https://assets.babylonjs.com/core/environments/environmentSpecular.env",
    scene
);
scene.createDefaultCamera(true, true, true);
scene.createDefaultEnvironment({ createSkybox: true, createGround: true, skyboxSize: 1000 });

engine.runRenderLoop(() => scene.render());

Babylon Liteの場合

import {
    createEngine,
    createSceneContext,
    createDefaultCamera,
    createHemisphericLight,
    loadGltf,
    loadEnvironment,
    addToScene,
    attachControl,
    registerScene,
    startEngine,
} from "@babylonjs/lite";

const engine = await createEngine(canvas);
const scene = createSceneContext(engine);

addToScene(scene, createHemisphericLight([0, 1, 0], 1.0));

addToScene(scene, await loadGltf(engine, "https://playground.babylonjs.com/scenes/BoomBox.glb"));

await loadEnvironment(scene, "https://assets.babylonjs.com/core/environments/environmentSpecular.env", {
    groundTextureUrl: "https://assets.babylonjs.com/core/environments/backgroundGround.png",
    skyboxUrl: "https://assets.babylonjs.com/core/environments/backgroundSkybox.dds",
    skyboxSize: 1000,
});

const cam = createDefaultCamera(scene);
attachControl(cam, canvas, scene);

await registerScene(engine, scene);
await startEngine(engine);

エンジンを作成し、ライトを追加し、glTFモデルや環境を読み込むという大まかな流れは共通しています。

Babylon Liteではメソッドの代わりに純粋な関数をインポートして使用するため、使用していないコードをバンドラが安全に削除できるようになっています。

今後の展望と開発状況

Babylon Liteはオープンソースとしてすでに利用可能ですが、まだ新しいプロジェクトであり、現在も開発が活発に進行しています。機能の拡充に伴いAPIも進化し続けている段階です。

今後のロードマップとしては、以下の取り組みが予定されています。

• Babylon.jsとの機能パリティ（同等性）の向上： Babylon.jsとの機能格差を埋めることが最優先事項とされています。各機能は独立したモジュールとして追加されるため、この拡充によって未使用時のバンドルサイズが肥大化することはありません。妥協することなくLiteで構築できるシーンを増やしていきます。
• Lite Viewer： 最小限のフットプリントで3Dモデルやシーンを表示できる、組み込みやすいビューアーの提供。
• Lite Playground / Sandbox： ドラッグ＆ドロップでアセットを確認したり、ブラウザ上で素早くプロトタイピングできるツールの再構築。

参考リンク

ブラウザで実際に動作する軽量なライブデモや、ソースコードは以下の公式リンクから確認することができます。

• Babylon Lite GitHub リポジトリ
• Babylon Lite ライブデモギャラリー

Babylon Lite 公式ウェブページへ