ThinEngine

Babylon.jsのThinEngineは、軽量で最小限の機能を持つWebGLレンダリングエンジンです。

通常のBabylon.jsのEngineクラスから高レベルな機能（シーン管理、アニメーション、物理演算など）を取り除き、基本的なWebGL操作のみを提供します。メモリ使用量が少なく、パフォーマンスが重視される用途や、独自のレンダリングパイプラインを構築したい場合に使用されます。

https://scrapbox.io/files/68315218179b8fbc49d356ec.png

1.初期セットアップ

code:js

// HTMLキャンバス要素を取得

const canvas = document.getElementById('renderCanvas');

// ThinEngineを初期化

const engine = new BABYLON.ThinEngine(canvas, true);

2.頂点バッファの作成

code:js

// 頂点座標データ

const positions = [

0.0, 0.5, 0.0, // 頂点1

-0.5, -0.5, 0.0, // 頂点2

0.5, -0.5, 0.0 // 頂点3

];

// 頂点カラーデータ

const colors = [

1.0, 0.0, 0.0, // 赤

0.0, 1.0, 0.0, // 緑

0.0, 0.0, 1.0 // 青

];

// VertexBufferを作成

const positionBuffer = new BABYLON.VertexBuffer(

engine, // ThinEngineインスタンス

positions, // データ配列

"position", // 属性名

true, // updatable（更新可能）

false, // normalized（正規化）

3, // size（要素数）

false // instanced（インスタンス化）

);

const colorBuffer = new BABYLON.VertexBuffer(

engine, colors, "color", true, false, 3, false

);

// バッファ辞書を作成

const vertexBuffers = {

position: positionBuffer,

color: colorBuffer

};

3.シェーダーの作成

code:js

// 頂点シェーダー

const vertexShader = `

attribute vec3 position; // 頂点座標

attribute vec3 color; // 頂点カラー

varying vec3 vColor; // フラグメントシェーダーに渡す変数

void main(void) {

vColor = color;

gl_Position = vec4(position, 1.0);

}

`;

// フラグメントシェーダー

const fragmentShader = `

precision mediump float;

varying vec3 vColor; // 頂点シェーダーから受け取る変数

void main() {

gl_FragColor = vec4(vColor, 1.0);

}

`;

// EffectWrapperを作成

const effectWrapper = new BABYLON.EffectWrapper({

engine: engine,

name: "triangle",

vertexShader: vertexShader,

fragmentShader: fragmentShader,

});

4.レンダリング処理

code:js

function render() {

// 1. エフェクトの準備確認

if (!effectWrapper.effect.isReady()) {

return; // まだ準備できていない場合は待機

}

// 2. 画面をクリア

const clearColor = { r: 0.1, g: 0.1, b: 0.2, a: 1.0 };

engine.clear(clearColor, true, true, true);

// 3. エフェクトを有効化

engine.enableEffect(effectWrapper.effect);

// 4. 頂点バッファをバインド

engine.bindBuffers(vertexBuffers, null, effectWrapper.effect);

// 5. 描画実行

engine.drawUnIndexed(true, 0, 3); // 3頂点の三角形を描画

}

// レンダリング実行

render();

Babylon.js のエンジンの継承関係（Babylon.js 8.0時点）

https://scrapbox.io/files/683170842260395d9326e4c9.png

code:リファクタリングによる継承関係の変化

■ 当初（Babylon.s 7.0時点）

AbstractEngine

└─ ThinEngine

└─ Engine

└─ WebGPUEngine

■ 継承関係変更（7.2.3）

AbstractEngine

├─ ThinEngine

│ └─ Engine

└─ WebGPUEngine

■ 継承関係変更（7.26.0）

AbstractEngine

├─ ThinEngine

│ └─ Engine

└─ ThinWebGPUEngine

└─ WebGPUEngine

参考