修复凹多边形分解算法的bug

navegador5 · Oct 25, 2020 · da577c6 · da577c6
1 parent dfd826b
commit da577c6
Show file tree

Hide file tree

Showing 21 changed files with 143 additions and 124 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -4,7 +4,8 @@ const examples = [
     ['运动刚体', kineticWorld],
     ['复合刚体', compositeWorld],
     ['压力测试', stressWorld],
-    ['真空', vacuumWorld]
+    ['失重', weightlessWorld],
+    ['凹多边形', concaveWorld]
 ];
 
 let renderer = null,

diff --git a/demo/examples/basic.js b/demo/examples/basic.js
@@ -3,7 +3,7 @@ function basicWorld(canvas) {
 
 const canvasWidth = canvas.offsetWidth,
       canvasHeight = canvas.offsetHeight,
-      vector = Torque.math.vector,
+      vector = Torque.vector,
       renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
         gravity: vector(0, 9.8),
         enableSleeping: true,

diff --git a/demo/examples/composite.js b/demo/examples/composite.js
@@ -3,7 +3,7 @@ function compositeWorld(canvas) {
 
     const canvasWidth = canvas.offsetWidth,
           canvasHeight = canvas.offsetHeight,
-          vector = Torque.math.vector,
+          vector = Torque.vector,
           renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
             gravity: vector(0, 9.8),
             enableSleeping: true,
@@ -33,7 +33,7 @@ function compositeWorld(canvas) {
 
     createWall(canvasWidth, canvasHeight, 30, {...options, static: true});
 
-    function createComposite() {
+    function createComposite(i) {
         let rect1 = renderer.createRect(700, 500, 80, 30, {
             ...options
         });
@@ -48,7 +48,7 @@ function compositeWorld(canvas) {
     }
 
     for(let i = 0; i < 20; i++) {
-        createComposite();
+        createComposite(i);
     }
 
     return renderer;

diff --git a/demo/examples/concave.js b/demo/examples/concave.js
@@ -0,0 +1,69 @@
+
+function concaveWorld(canvas) {
+
+    const canvasWidth = canvas.offsetWidth,
+          canvasHeight = canvas.offsetHeight,
+          vector = Torque.vector,
+          renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
+            gravity: vector(0, 9.8),
+            enableSleeping: true,
+            enableCache: true,
+            enableSATBoost: true,
+            backgroundColor: 0x555555
+          }),
+          options = renderer.defaultOptions;
+
+    /**
+     * 创建四面墙
+     * @param {*} cWidth 
+     * @param {*} cHeight 
+     * @param {*} wallWidth 
+     * @param {*} options 
+     */
+    function createWall(cWidth, cHeight, wallWidth, options) {
+        // 顶墙壁
+        renderer.createRect(0, 0, cWidth, wallWidth, options);
+        // 底墙壁
+        renderer.createRect(0, cHeight - wallWidth, cWidth, wallWidth, options);
+        // 左墙壁
+        renderer.createRect(0, 0, wallWidth, cHeight, options);
+        // 右墙壁
+        renderer.createRect(cWidth - wallWidth, 0, wallWidth, cHeight, options);
+    }
+
+    createWall(canvasWidth, canvasHeight, 30, {...options, static: true});
+
+    function fromPath(path) {
+        var pathPattern = /L?\s*([\-\d\.e]+)[\s,]*([\-\d\.e]+)*/ig,
+            points = [];
+
+        path.replace(pathPattern, function(match, x, y) {
+            points.push([parseFloat(x), parseFloat(y)]);
+        });
+
+        return points;
+    };
+
+    const arrowPath = '0 0 40 0 40 20 100 20 100 80 40 80 40 100 0 50',
+        chevronPath = '100 0 75 50 100 100 25 100 0 50 25 0',
+        starPath = '50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38',
+        horseShoePath = '35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7';
+
+    for(let i = 0; i < 4; i++) {
+        renderer.createPolygon(100, i * 100, fromPath(arrowPath), { ...options });
+        renderer.createPolygon(200, i * 100, fromPath(chevronPath), { ...options });
+        renderer.createPolygon(300, i * 100, fromPath(starPath), { ...options });
+        renderer.createPolygon(400, i * 100, fromPath(horseShoePath).reverse(), { ...options });
+    }
+
+    return renderer;
+}
+
+
+
+
+
+
+
+
+
diff --git a/demo/examples/kinetic.js b/demo/examples/kinetic.js
@@ -3,7 +3,7 @@ function kineticWorld(canvas) {
 
     const canvasWidth = canvas.offsetWidth,
           canvasHeight = canvas.offsetHeight,
-          vector = Torque.math.vector,
+          vector = Torque.vector,
           renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
             gravity: vector(0, 9),
             enableSleeping: true,

diff --git a/demo/examples/stack.js b/demo/examples/stack.js
@@ -2,9 +2,9 @@
 function stackWorld(canvas) {
     const canvasWidth = canvas.offsetWidth,
           canvasHeight = canvas.offsetHeight,
-          vector = Torque.math.vector,
+          vector = Torque.vector,
           renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
-            gravity: vector(0, 9),
+            gravity: vector(0, 9.8),
             enableSleeping: true,
             enableCache: true,
             enableSATBoost: true,

diff --git a/demo/examples/stress.js b/demo/examples/stress.js
@@ -4,7 +4,7 @@
 function stressWorld(canvas) {
     const canvasWidth = canvas.offsetWidth,
           canvasHeight = canvas.offsetHeight,
-          vector = Torque.math.vector,
+          vector = Torque.vector,
           renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
             gravity: vector(0, 9),
             enableSleeping: true,

diff --git a/demo/examples/vacuum.js → demo/examples/weightless.js b/demo/examples/vacuum.js → demo/examples/weightless.js
@@ -1,9 +1,9 @@
 
-function vacuumWorld(canvas) {
+function weightlessWorld(canvas) {
 
     const canvasWidth = canvas.offsetWidth,
           canvasHeight = canvas.offsetHeight,
-          vector = Torque.math.vector,
+          vector = Torque.vector,
           renderer = new Renderer(canvas, canvasWidth, canvasHeight, {
             gravity: vector(0, 0),
             enableSleeping: true,

diff --git a/dist/torque.js b/dist/torque.js
diff --git a/index.html b/index.html
@@ -70,7 +70,8 @@
 <script src="./demo/examples/kinetic.js"></script>
 <script src="./demo/examples/composite.js"></script>
 <script src="./demo//examples/stress.js"></script>
-<script src="./demo/examples/vacuum.js"></script>
+<script src="./demo/examples/weightless.js"></script>
+<script src="./demo/examples/concave.js"></script>
 <script src="./demo/demo.js"></script>
 </body>
 </html>
diff --git a/lib/renderer.js b/lib/renderer.js
@@ -195,6 +195,18 @@ class Renderer {
         return this.render(polygonBody, polygon);
     }   
 
+    createStar(x, y, v, options) {
+        let star = new PIXI.Graphics();
+
+        this.strokeAndFill(star, options);
+
+        star.position.x = x;
+        star.position.y = y;
+        star.drawPolygon(v.flat());
+
+        this.app.stage.addChild(star);
+    }
+
     /**
      * 创建复合刚体
      * @param {*} bodies 

diff --git a/src/body/body.ts b/src/body/body.ts
@@ -7,7 +7,7 @@ import { Bound } from "../common/bound";
 import { Util } from "../common/util";
 import { Engine } from "../core/engine";
 import { Axis } from "../common/vertices";
-import { Pin } from "../constraint/pin";
+
 
 
 
@@ -145,8 +145,6 @@ export class Body {
     parts: Body[];
     // 与该刚体碰撞的刚体列表
     contactBodies: { [key: string]: Body };
-    // 图钉约束
-    pinConstraint: Pin;
     // 方法
     methods: BodyOpt['methods'];
     // 渲染函数
@@ -173,7 +171,6 @@ export class Body {
         this.torque = 0;
         this.friction = 10;
         this.restitution = 0.8;
-        this.pinConstraint = null;
         this.static = false;
         this.kinetic = false
         this.ignoreGravity = false;

diff --git a/src/collision/sat.ts b/src/collision/sat.ts
@@ -29,7 +29,7 @@ export type MinOverlap = {
 export class SAT {
     // 是否开启SAT加速
     private enableSATBoost: boolean = true;
-    private reuseCollisionThreshold: number = 0.05;
+    private reuseCollisionThreshold: number = 0.1;
 
     constructor(opt: EngineOpt) {
         Util.merge(this, opt);

diff --git a/src/common/vertices.ts b/src/common/vertices.ts
@@ -22,6 +22,9 @@ export type Axis = {
 };
 
 
+let i = 0;
+
+
 // 顶点操作工具
 export const Vertices = {
 
@@ -219,6 +222,8 @@ export const Vertices = {
         }
     },
 
+
+
     /**
      * 将凹多边形分解为多个子凸多边形
      * @param vertexList
@@ -233,49 +238,67 @@ export const Vertices = {
             vDiv: Vector,
             dividePointA: Vector,
             dividePointB: Vector,
-            len = vertexList.length, i, j, cur, next, next2, 
+            len = vertexList.length, 
+            i, j, cur, next, next2, next3,
             flag = false;
 
+        i++;
+
         for(i = 0 ; i < len; i++) {
             cur = i;
             next = (i + 1) % len;
             next2 = (i + 2) % len;
+            next3 = (i + 3) % len;
 
             xAxis = vertexList[next].sub(vertexList[cur]); 
             vTest = vertexList[next2].sub(vertexList[cur]);
 
-            if(xAxis.cro(vTest) < 0) {
-                for(j = i + 3; j < len; j++) {
-                    vDiv = vertexList[j].sub(vertexList[cur]);
-                    if(xAxis.cro(vDiv) > 0) {
-                        flag = true;
-                        break;
-                    }
+            j = next3;
+
+            do {   
+                vDiv = vertexList[j].sub(vertexList[cur]);
+
+                if(xAxis.cro(vDiv) * xAxis.cro(vTest) <= 0) {
+                    flag = true;
+                    break;
                 }
 
-                if(flag) break;
-            }
+                j = (j + 1) % len;
+            } while(j !== i);
+
+            if(flag) break;
         }
 
         // 获取两个分割点
         dividePointA = vertexList[next],
         dividePointB = vertexList[j];
 
+        if(j > next2) {
+            vertexListB = vertexList.splice(next2, j - next2);
+        }
+        else {
+            vertexListB = [];
+            vertexListB.push(...vertexList.splice(next2, len - (next2 - 1)));
+            vertexListB.push(...vertexList.splice(0, j));
+        }
+
         // 拆分为两个多边形vertexListA和vertexListB
-        vertexListB = vertexList.splice(next2, j - next2);
         vertexListA = vertexList;
         vertexListB.unshift(dividePointA);
         vertexListB.push(dividePointB);
 
+        vertexListA = Vertices.filterCollinearVertex(vertexListA);
+        vertexListB = Vertices.filterCollinearVertex(vertexListB);
+
         // 检测拆分出来的两个多边形是否是凹多边形，若果是，继续递归拆分
-        if(Vertices.isConcave(vertexListA)) {
+        if(vertexListA.length > 3 && Vertices.isConcave(vertexListA)) {
             parts.push(...Vertices.split(vertexListA));
         }
         else {
             parts.push(vertexListA);
         }
 
-        if(Vertices.isConcave(vertexListB)) {
+        if(vertexListB.length > 3 && Vertices.isConcave(vertexListB)) {
             parts.push(...Vertices.split(vertexListB));
         }
         else {
@@ -465,7 +488,7 @@ export const Vertices = {
         }
 
         for(i = 0; i < removeIndex.length; i++) {
-            vertexList.splice(removeIndex[i], 1);
+            vertexList.splice(removeIndex[i] - i, 1);
         }
 
         return vertexList;

diff --git a/src/constraint/constraint.ts b/src/constraint/constraint.ts
@@ -1,8 +1,6 @@
 
 
 
-
-
 export class Constraint {
     // 速度求解迭代次数
     protected velocitySolverIterations: number;