はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

babylon.js ステップ10 メッシュの交差衝突判定 (Intersect Collisions - mesh)

f:id:hollywis:20200620221236p:plain

メッシュ同士が、それぞれ衝突を検出する方法をやります

いきましょう!!

説明

衝突検出の2つの方法を紹介します。

  1. 2つのメッシュが接触しているときに衝突イベントを発生させる方法
  1. メッシュと1点間の接触を検出する方法

2つのメッシュが接触しているときに衝突イベントを発生させる方法


intersectsMesh()を使うことで、対象との交差(衝突)判定を行うことが出来ます

コードは次の通り

// 平面(plan1)とballoon1との交差判定
if (balloon1.intersectsMesh(plan1, false)) {
  balloon1.material.emissiveColor = new BABYLON.Color4(1, 0, 0, 1);
} else {
  balloon1.material.emissiveColor = new BABYLON.Color4(1, 1, 1, 1);
}


バビロンエンジンでは、交差判定を効率よく行うために
オブジェクトの周囲に下図のように境界ボックス(バウンティングボックス)を作成し、

このボックスと衝突するメッシュの間の交差をテストします。

f:id:hollywis:20200620221905p:plain


また、より詳細に接触を検出したい場合には第二引数をtrueにすることで、

バウンティングボックスをメッシュにより近くし、

交差判定を正確にすることが出来ます。

ただ、この操作は計算負荷が高くなるようです。


左が、falseの例、右がtrueの例です。

f:id:hollywis:20200620222143p:plain

このタイプのバウンディングボックスは、メッシュをある角度に回転させる場合に特に役立ちます。

メッシュと1点間の接触を検出する方法

特定の1点との接触判定をする方法が、intersectsPoint()です。


使用方法は次の通り

var pointToIntersect = new BABYLON.Vector3(10, -5, 0);
if (balloon3.intersectsPoint(pointToIntersect)){
  balloon3.material.emissiveColor = new BABYLON.Color4(1, 0, 0, 1);
}

デモはこちらです

ボールと接触すると赤色になります

https://www.babylonjs-playground.com/#KQV9SA

まとめ

babylon.jsでは衝突判定ようの便利な関数があり

オブジェクト間ではintersectsMesh()


オブジェクトと点ではintersectsPoint()を使うことで衝突判定を行う方法を紹介しました。


次回はマウスとの衝突判定です!