乾貨

最近一直在刪文章，不是要關博洗手什麼的，而是被刪的文章沒有達到“乾貨”的標準。乾貨的反義詞是水貨，比如我們經常吃的注水豬肉，它就是水貨，非乾貨。什麼是“乾貨”。？經過一番搜尋，標準的描述是：實用性比較強的，不含任何吹噓水分，也沒有虛假的成分，所以業內人士通常把這一類分享活動稱之為“乾貨”。

文章是否是乾貨做如下幾點要求：

必備條件：

1.整體樣式風格整齊美觀；

2.實用性比較強的，邏輯條理清晰；

3.獨立性強，一篇文章只寫一類東西；

4.碼農看完就懂（或者有了search的方向），拿去就能用；

加精條件：

1.圖文並茂；

2.線上演示；

3.示例程式碼下載；

從這篇開始我們的乾貨之旅~~~~~

簡介

包圍體是一個簡單的幾何空間，裡面包含著複雜形狀的物體。為物體新增包圍體的目的是快速的進行碰撞檢測或者進行精確的碰撞檢測之前進行過濾（即當包圍體碰撞，才進行精確碰撞檢測和處理）。包圍體型別包括球體、軸對齊包圍盒（AABB）、有向包圍盒（OBB）、8-DOP以及凸殼。如圖1所示。

圖1 依次是球體、AABB、OBB

可以看到圖1是3D包圍體，在2D包圍體如圖2所示：

圖2 依次是球體、AABB、OBB

OBB

方向包圍盒（Oriented bounding box），簡稱OBB。方向包圍盒類似於AABB，但是具有方向性、可以旋轉，AABB不能旋轉。如圖3所示。

圖3 矩形和矩形投影檢測的四條軸

要計算兩個OBB是否碰撞，只需要計算他們在圖3上的4個座標軸上的投影是否有重疊，如果有，則兩多邊形有接觸。這也可以擴充套件到任意多邊形，如圖4所示。

圖4 矩形和三角形投影檢測的五條軸

投影軸來自於多邊形自身邊的垂線。

判定方式：兩個多邊形在所有軸上的投影都發生重疊，則判定為碰撞；否則，沒有發生碰撞。

OBB存在多種的表達方式，這裡使用最常用的一種：一箇中心點、2個矩形的邊長、兩個旋轉軸（該軸垂直於多邊形自身的邊，用於投影計算）。程式碼如下所示：

(function (window) {

    var OBB = function (centerPoint, width, height, rotation) {

        this
 
.centerPoint = centerPoint;
        this.extents = [width / 2, height / 2];
        this.axes = [new Vector2(Math.cos(rotation), Math.sin(rotation)), new Vector2(-1 * Math.sin(rotation), Math.cos(rotation))];

        this._width = width;
        this._height = height;
        this._rotation = rotation;
    }

    window.OBB = OBB;
})(window);

其所依賴的Vector2這個類如下所示：

(function (window) {
    Vector2 = function (x, y) {
        this.x = x || 0;
        this.y = y || 0;
    };

    Vector2.prototype = {
        sub: function (v) {
            return new Vector2(this.x - v.x, this.y - v.y)
        },
        dot: function (v) {
            return this.x * v.x + this.y * v.y;
        }
    };
    window.Vector2 = Vector2;
} (window))

然後基於這個資料結構，進行OBB之間的相交測試。為OBB擴充套件一個方法，即或者在任意軸上的投影半徑：

OBB.prototype = {
    getProjectionRadius: function (axis) {
        returnthis.extents[0] * Math.abs(axis.dot(this.axes[0])) + this.extents[1] * Math.abs(axis.dot(this.axes[1]));
    }
}

這裡你可能需要讀者瞭解Vector2.dot的幾何意義：若b為單位向量，則a與b的點積即為a在方向b的投影。

有了這些，就可以進行相交檢測。由上面的判定方式，可以得出，兩個矩形之間的碰撞檢測需要判斷四次（每個投影軸一次）。完整檢測程式碼如下所示：

(function (window) {

    var CollisionDetector = {

        detectorOBBvsOBB: function (OBB1, OBB2) {
            var nv = OBB1.centerPoint.sub(OBB2.centerPoint);
            var axisA1 = OBB1.axes[0];
            if (OBB1.getProjectionRadius(axisA1) + OBB2.getProjectionRadius(axisA1) <= Math.abs(nv.dot(axisA1))) return false;
            var axisA2 = OBB1.axes[1];
            if (OBB1.getProjectionRadius(axisA2) + OBB2.getProjectionRadius(axisA2) <= Math.abs(nv.dot(axisA2))) return false;
            var axisB1 = OBB2.axes[0];
            if (OBB1.getProjectionRadius(axisB1) + OBB2.getProjectionRadius(axisB1) <= Math.abs(nv.dot(axisB1))) return false;
            var axisB2 = OBB2.axes[1];
            if (OBB1.getProjectionRadius(axisB2) + OBB2.getProjectionRadius(axisB2) <= Math.abs(nv.dot(axisB2))) return false;
            return true;

        }
    }

    window.CollisionDetector = CollisionDetector;
})(window)

這裡拿兩個OBB的中心點連線在座標軸上的投影長度和兩個矩形投影半徑之和進行對比，如果半徑之後都小於或者等於中心連線之後才判定為碰撞，否則判定為分離狀態。

整合圖形化測試介面

為了更加直觀的測試OBB碰撞檢測方法，使用Easeljs輸出碰撞的狀態。當兩個矩形沒有發生碰撞的時候，兩矩形呈現藍色；當兩個矩形發生碰撞的時候，兩矩形呈現紅色。先引入相關的指令碼庫以及用於顯示的canvas畫布：

<script src="Vector2.js" type="text/javascript"></script>
<script src="OBB.js" type="text/javascript"></script>
<script src="CollisionDetector.js" type="text/javascript"></script>
<script src="easel.js" type="text/javascript"></script>
<canvas id="testCanvas" width="980" height="580">

然後進行OBB初始化以及碰撞檢測：

var OBB1, OBB1x = 100, OBB1y = 150, OBB1w = 30, OBB1h = 140, OBB1r = 30;
var OBB2, OBB2x = 100, OBB2y = 70, OBB2w = 40, OBB2h = 110, OBB2r = 40;
var canvas;
var stage;
var color;

function init() {

    canvas = document.getElementById("testCanvas");
    stage = new Stage(canvas);

    Ticker.addListener(window);
}
     
function tick() {
    stage.removeAllChildren();

    OBB1r += 2;
    OBB2r += 1;
    OBB1 = new OBB(new Vector2(OBB1x, OBB1y), OBB1w, OBB1h, OBB1r * Math.PI / 180);
    OBB2 = new OBB(new Vector2(OBB2x, OBB2y), OBB2w, OBB2h, OBB2r * Math.PI / 180);
    var r = CollisionDetector.detectorOBBvsOBB(OBB1, OBB2);

    color=r?"red":"#00F";
    OBB1 = new Container();
    stage.addChild(OBB1);
    OBB1.x = OBB1x;
    OBB1.y = OBB1y;
    var frame1 = new Shape();
    frame1.graphics.beginFill(color).drawRect(0, 0, OBB1w, OBB1h);
    frame1.rotation = OBB1r;
    frame1.regX = OBB1w / 2;
    frame1.regY = OBB1h / 2;
    OBB1.addChild(frame1);

    OBB2 = new Container();
    stage.addChild(OBB2);
    OBB2.x = OBB2x;
    OBB2.y = OBB2y;
    var frame2 = new Shape();
    frame2.graphics.beginFill(color).drawRect(0, 0, OBB2w, OBB2h);
    frame2.rotation = OBB2r;
    frame2.regX = OBB2w / 2;
    frame2.regY = OBB2h / 2;
    OBB2.addChild(frame2);

    stage.update();
}
init();

以上程式碼定義了兩個旋轉的OBB包圍盒，當他們發生碰撞則改變繪製的顏色，使其成為紅色。執行程式碼，效果圖5和6所示。

圖5 未發生碰撞

圖6 發生碰撞

這裡是2D情況下的OBB碰撞檢測，對於3D OBB碰撞檢測，更為複雜。需要測試15個分離軸以確定OBB的相交狀態，兩個OBB的座標軸各3個，以及垂直於每個軸的9個軸。除了座標軸個數不一樣，其相交測試思路和本文一致，本文不再探討。

線上演示

更多幹貨敬請期待~~~~~

如果您覺得此文有幫助，可以打賞點錢給我支付寶[email protected] ，或掃描二維碼