diff --git a/package.json b/package.json index ec6a31e..ffa1282 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "async": "^0.9.0", "brfs": "^1.4.0", + "earcut": "^2.0.0", "eventemitter3": "^1.0.1", "object-assign": "^2.0.0", "resource-loader": "^1.5.5" diff --git a/package.json b/package.json index ec6a31e..ffa1282 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "async": "^0.9.0", "brfs": "^1.4.0", + "earcut": "^2.0.0", "eventemitter3": "^1.0.1", "object-assign": "^2.0.0", "resource-loader": "^1.5.5" diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index aaf3b02..83eb0bc 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -3,7 +3,8 @@ CONST = require('../../const'), ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'), WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); + WebGLGraphicsData = require('./WebGLGraphicsData'), + earcut = require('earcut'); /** * Renders the graphics object. @@ -382,6 +383,7 @@ this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius + 0.0000000001, recPoints); + // this tiny number deals with the issue that occurs when points overlap and polyK fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -399,9 +401,7 @@ var vecPos = verts.length/6; - //TODO use this https://github.com/mapbox/earcut - var triangles = utils.PolyK.Triangulate(recPoints); - // + var triangles = earcut(recPoints, null, 2); var i = 0; for (i = 0; i < triangles.length; i+=3) @@ -869,7 +869,7 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = utils.PolyK.Triangulate(points); + var triangles = earcut(points, null, 2); if (!triangles) { return false; diff --git a/package.json b/package.json index ec6a31e..ffa1282 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "async": "^0.9.0", "brfs": "^1.4.0", + "earcut": "^2.0.0", "eventemitter3": "^1.0.1", "object-assign": "^2.0.0", "resource-loader": "^1.5.5" diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index aaf3b02..83eb0bc 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -3,7 +3,8 @@ CONST = require('../../const'), ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'), WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); + WebGLGraphicsData = require('./WebGLGraphicsData'), + earcut = require('earcut'); /** * Renders the graphics object. @@ -382,6 +383,7 @@ this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius + 0.0000000001, recPoints); + // this tiny number deals with the issue that occurs when points overlap and polyK fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -399,9 +401,7 @@ var vecPos = verts.length/6; - //TODO use this https://github.com/mapbox/earcut - var triangles = utils.PolyK.Triangulate(recPoints); - // + var triangles = earcut(recPoints, null, 2); var i = 0; for (i = 0; i < triangles.length; i+=3) @@ -869,7 +869,7 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = utils.PolyK.Triangulate(points); + var triangles = earcut(points, null, 2); if (!triangles) { return false; diff --git a/src/core/utils/PolyK.js b/src/core/utils/PolyK.js deleted file mode 100644 index 2f26d36..0000000 --- a/src/core/utils/PolyK.js +++ /dev/null @@ -1,170 +0,0 @@ -//TODO: Have Graphics use https://github.com/mattdesl/shape2d -// and https://github.com/mattdesl/shape2d-triangulate instead of custom code. - -/* - PolyK library - url: http://polyk.ivank.net - Released under MIT licence. - - Copyright (c) 2012 Ivan Kuckir - - Permission is hereby granted, free of charge, to any person - obtaining a copy of this software and associated documentation - files (the "Software"), to deal in the Software without - restriction, including without limitation the rights to use, - copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the - Software is furnished to do so, subject to the following - conditions: - - The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. - - This is an amazing lib! - - Slightly modified by Mat Groves (matgroves.com); -*/ - -/** - * Based on the Polyk library http://polyk.ivank.net released under MIT licence. - * This is an amazing lib! - * Slightly modified by Mat Groves (matgroves.com); - * - * @memberof PIXI.utils - */ -var PolyK = module.exports = {}; - -/** - * Triangulates shapes for webGL graphic fills. - * - */ -PolyK.Triangulate = function (p) -{ - var sign = true; - - var n = p.length >> 1; - if (n < 3) return []; - - var tgs = []; - var avl = []; - for (var i = 0; i < n; i++) avl.push(i); - - i = 0; - var al = n; - while (al > 3) - { - var i0 = avl[(i+0)%al]; - var i1 = avl[(i+1)%al]; - var i2 = avl[(i+2)%al]; - - var ax = p[2*i0], ay = p[2*i0+1]; - var bx = p[2*i1], by = p[2*i1+1]; - var cx = p[2*i2], cy = p[2*i2+1]; - - var earFound = false; - if (PolyK._convex(ax, ay, bx, by, cx, cy, sign)) - { - earFound = true; - for (var j = 0; j < al; j++) - { - var vi = avl[j]; - if (vi === i0 || vi === i1 || vi === i2) continue; - - if (PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) - { - earFound = false; - break; - } - } - } - - if (earFound) - { - tgs.push(i0, i1, i2); - avl.splice((i+1)%al, 1); - al--; - i = 0; - } - else if (i++ > 3*al) - { - // need to flip flip reverse it! - // reset! - if (sign) - { - tgs = []; - avl = []; - for (i = 0; i < n; i++) avl.push(i); - - i = 0; - al = n; - - sign = false; - } - else - { - // window.console.log("PIXI Warning: shape too complex to fill"); - return null; - } - } - } - - tgs.push(avl[0], avl[1], avl[2]); - return tgs; -}; - -/** - * Checks whether a point is within a triangle - * - * @param px {number} x coordinate of the point to test - * @param py {number} y coordinate of the point to test - * @param ax {number} x coordinate of the a point of the triangle - * @param ay {number} y coordinate of the a point of the triangle - * @param bx {number} x coordinate of the b point of the triangle - * @param by {number} y coordinate of the b point of the triangle - * @param cx {number} x coordinate of the c point of the triangle - * @param cy {number} y coordinate of the c point of the triangle - * @private - * @return {boolean} - */ -PolyK._PointInTriangle = function (px, py, ax, ay, bx, by, cx, cy) -{ - var v0x = cx-ax; - var v0y = cy-ay; - var v1x = bx-ax; - var v1y = by-ay; - var v2x = px-ax; - var v2y = py-ay; - - var dot00 = v0x*v0x+v0y*v0y; - var dot01 = v0x*v1x+v0y*v1y; - var dot02 = v0x*v2x+v0y*v2y; - var dot11 = v1x*v1x+v1y*v1y; - var dot12 = v1x*v2x+v1y*v2y; - - var invDenom = 1 / (dot00 * dot11 - dot01 * dot01); - var u = (dot11 * dot02 - dot01 * dot12) * invDenom; - var v = (dot00 * dot12 - dot01 * dot02) * invDenom; - - // Check if point is in triangle - return (u >= 0) && (v >= 0) && (u + v < 1); -}; - -/** - * Checks whether a shape is convex - * - * @private - * @return {boolean} - */ -PolyK._convex = function (ax, ay, bx, by, cx, cy, sign) -{ - return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) === sign; -}; diff --git a/package.json b/package.json index ec6a31e..ffa1282 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "async": "^0.9.0", "brfs": "^1.4.0", + "earcut": "^2.0.0", "eventemitter3": "^1.0.1", "object-assign": "^2.0.0", "resource-loader": "^1.5.5" diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index aaf3b02..83eb0bc 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -3,7 +3,8 @@ CONST = require('../../const'), ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'), WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); + WebGLGraphicsData = require('./WebGLGraphicsData'), + earcut = require('earcut'); /** * Renders the graphics object. @@ -382,6 +383,7 @@ this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius + 0.0000000001, recPoints); + // this tiny number deals with the issue that occurs when points overlap and polyK fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -399,9 +401,7 @@ var vecPos = verts.length/6; - //TODO use this https://github.com/mapbox/earcut - var triangles = utils.PolyK.Triangulate(recPoints); - // + var triangles = earcut(recPoints, null, 2); var i = 0; for (i = 0; i < triangles.length; i+=3) @@ -869,7 +869,7 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = utils.PolyK.Triangulate(points); + var triangles = earcut(points, null, 2); if (!triangles) { return false; diff --git a/src/core/utils/PolyK.js b/src/core/utils/PolyK.js deleted file mode 100644 index 2f26d36..0000000 --- a/src/core/utils/PolyK.js +++ /dev/null @@ -1,170 +0,0 @@ -//TODO: Have Graphics use https://github.com/mattdesl/shape2d -// and https://github.com/mattdesl/shape2d-triangulate instead of custom code. - -/* - PolyK library - url: http://polyk.ivank.net - Released under MIT licence. - - Copyright (c) 2012 Ivan Kuckir - - Permission is hereby granted, free of charge, to any person - obtaining a copy of this software and associated documentation - files (the "Software"), to deal in the Software without - restriction, including without limitation the rights to use, - copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the - Software is furnished to do so, subject to the following - conditions: - - The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. - - This is an amazing lib! - - Slightly modified by Mat Groves (matgroves.com); -*/ - -/** - * Based on the Polyk library http://polyk.ivank.net released under MIT licence. - * This is an amazing lib! - * Slightly modified by Mat Groves (matgroves.com); - * - * @memberof PIXI.utils - */ -var PolyK = module.exports = {}; - -/** - * Triangulates shapes for webGL graphic fills. - * - */ -PolyK.Triangulate = function (p) -{ - var sign = true; - - var n = p.length >> 1; - if (n < 3) return []; - - var tgs = []; - var avl = []; - for (var i = 0; i < n; i++) avl.push(i); - - i = 0; - var al = n; - while (al > 3) - { - var i0 = avl[(i+0)%al]; - var i1 = avl[(i+1)%al]; - var i2 = avl[(i+2)%al]; - - var ax = p[2*i0], ay = p[2*i0+1]; - var bx = p[2*i1], by = p[2*i1+1]; - var cx = p[2*i2], cy = p[2*i2+1]; - - var earFound = false; - if (PolyK._convex(ax, ay, bx, by, cx, cy, sign)) - { - earFound = true; - for (var j = 0; j < al; j++) - { - var vi = avl[j]; - if (vi === i0 || vi === i1 || vi === i2) continue; - - if (PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) - { - earFound = false; - break; - } - } - } - - if (earFound) - { - tgs.push(i0, i1, i2); - avl.splice((i+1)%al, 1); - al--; - i = 0; - } - else if (i++ > 3*al) - { - // need to flip flip reverse it! - // reset! - if (sign) - { - tgs = []; - avl = []; - for (i = 0; i < n; i++) avl.push(i); - - i = 0; - al = n; - - sign = false; - } - else - { - // window.console.log("PIXI Warning: shape too complex to fill"); - return null; - } - } - } - - tgs.push(avl[0], avl[1], avl[2]); - return tgs; -}; - -/** - * Checks whether a point is within a triangle - * - * @param px {number} x coordinate of the point to test - * @param py {number} y coordinate of the point to test - * @param ax {number} x coordinate of the a point of the triangle - * @param ay {number} y coordinate of the a point of the triangle - * @param bx {number} x coordinate of the b point of the triangle - * @param by {number} y coordinate of the b point of the triangle - * @param cx {number} x coordinate of the c point of the triangle - * @param cy {number} y coordinate of the c point of the triangle - * @private - * @return {boolean} - */ -PolyK._PointInTriangle = function (px, py, ax, ay, bx, by, cx, cy) -{ - var v0x = cx-ax; - var v0y = cy-ay; - var v1x = bx-ax; - var v1y = by-ay; - var v2x = px-ax; - var v2y = py-ay; - - var dot00 = v0x*v0x+v0y*v0y; - var dot01 = v0x*v1x+v0y*v1y; - var dot02 = v0x*v2x+v0y*v2y; - var dot11 = v1x*v1x+v1y*v1y; - var dot12 = v1x*v2x+v1y*v2y; - - var invDenom = 1 / (dot00 * dot11 - dot01 * dot01); - var u = (dot11 * dot02 - dot01 * dot12) * invDenom; - var v = (dot00 * dot12 - dot01 * dot02) * invDenom; - - // Check if point is in triangle - return (u >= 0) && (v >= 0) && (u + v < 1); -}; - -/** - * Checks whether a shape is convex - * - * @private - * @return {boolean} - */ -PolyK._convex = function (ax, ay, bx, by, cx, cy, sign) -{ - return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) === sign; -}; diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 99c7c91..b74608c 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -8,7 +8,6 @@ _saidHello: false, pluginTarget: require('./pluginTarget'), - PolyK: require('./PolyK'), async: require('async'), /**