Babylon.js 6 で搭載された HavokEngine の WebAssembly を、 Vite で読み込めるようにしたプロジェクトのサンプルです。
ついでに WebGPU が動作するならそっちを優先するようにしています。
各バージョン
@babylonjs/core: ^6.0.0@babylonjs/havok: ^1.0.1typescript: ^5.0.0vite: ^4.0.0
npm install 後に自動実行
package.json
{
"scripts": {
"postinstall": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./assets/HavokPhysics.wasm"
}
}
この記述を追加することで、ローカルに依存パッケージとして導入された wasm ファイルを Vite が読み込み可能な場所に移動させました。
vite-wasm-plugin は期待通り動作しませんでした。
Vite に WebAssembly の import サポートはあるんですが、期待通り動作しませんでした(多分 ESM に非対応だからではないでしょうか)。
wasm ファイルの URL をインポート
import HavokPhysics from "@babylonjs/havok";
import havokWasmUrl from "../assets/HavokPhysics.wasm?url";
このように ?url サフィックスを付けることで、そのファイルへのアクセス URL を取得することが出来ます。
const havok = await HavokPhysics({
locateFile: () => havokWasmUrl,
});
として wasm を初期化することで、指定した URL のファイルを取得するように出来ます。
HavokPlugin の初期化
const scene = new Scene(this.engine);
const havokPlugin = new HavokPlugin(true, havok);
scene.enablePhysics(new Vector3(0, -9.8, 0), havokPlugin);
上記で HavokPlugin の初期化が完了です。
const sphere = CreateSphere("Sphere", {}, scene);
sphere.position = new Vector3(0, 10, 0);
new PhysicsAggregate(sphere, PhysicsShapeType.SPHERE, {
mass: 1.0, // 質量(kg?)
restitution: 0.75, // 反発力
}, scene);
PhysicsAggregate を追加することで、対象の Mesh に対して物理演算をかけるようになります。