Babylon.jsのHavokエンジンの基本的な使い方

Babylon.jsではv6.0以降にHavokという物理エンジンが使えるようになりました。

これまでの物理エンジンとは少し使い方が異なるので、基本的な使い方をまとめました。

1. Havokとは

私はこれまで知らなかったのですが、海外製のゲームで多数使われている有名な物理エンジンです。

調べると色々な情報が出てきます。
www.gamespark.jp

dic.pixiv.net

2017年発売の「ゼルダの伝説　ブレス オブ ザ ワイルド」で使われたようです。
www.4gamer.net

同じく少し前の情報ですが、Unityでも使えるようになったようです(有料)。 automaton-media.com

なお、Web向けでは無料で使うことができます。

Havok is now available for the web, using a WebAssembly version of the engine. It is available, free to use, under the MIT license.

引用：Babylon.js docs

2. Babylon.jsでHavokを使う方法

CDNで宣言する場合と、npmパッケージとしてインストールして使う方法があります。

CDNの場合

<script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
<script>

npmパッケージの場合

npm install @babylonjs/havok

公式ドキュメントからの引用ですが、このように宣言することで使うことができます。

var scene = new BABYLON.Scene(engine);
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.HavokPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);

3. 基本的な使い方

公式ドキュメントを色々読んでみましたが、まずは物理エンジンをつけたいオブジェクトに対してPhysicsAggregateをつけます。

    // Create a sphere shape and the associated body. Size will be determined automatically.
    var sphereAggregate = new BABYLON.PhysicsAggregate(sphere, BABYLON.PhysicsShapeType.SPHERE, { mass: 1, restitution:0.75}, scene);

    // Create a static box shape.
    var groundAggregate = new BABYLON.PhysicsAggregate(ground, BABYLON.PhysicsShapeType.BOX, { mass: 0 }, scene);

これで、球が地面に落下する挙動を実現できます。

https://playground.babylonjs.com/#Z8HTUN#1

また、この記述を入れておくと、画面内で物理エンジンがかかっている対象のメッシュが三角メッシュで表示されるようになります。

physicsViewer = new BABYLON.Debug.PhysicsViewer();
for (const mesh of scene.rootNodes) {
    if (mesh.physicsBody) {
        const debugMesh = physicsViewer.showBody(mesh.physicsBody);
    }
}

今回の内容はこのURLの記載を元にしています。

Babylon.js docs

4. おわりに

ひとまず基本的な使い方を紹介しました。