diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 0126d06..a4f43ee 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -1,5 +1,5 @@ var earcut = require('earcut'), - // buildLine = require('./buildLine'), + buildLine = require('./buildLine'), utils = require('../../../utils'); /** @@ -21,10 +21,10 @@ var recPoints = []; recPoints.push(x, y + radius); - this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); - 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); + quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); + quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); + quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); + 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 earcut fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -67,7 +67,7 @@ graphicsData.points = recPoints; - this.buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData); graphicsData.points = tempPoints; } @@ -87,42 +87,42 @@ * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -// var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) -// { -// var xa, -// ya, -// xb, -// yb, -// x, -// y, -// n = 20, -// points = out || []; -// -// function getPt(n1 , n2, perc) { -// var diff = n2 - n1; -// -// return n1 + ( diff * perc ); -// } -// -// var j = 0; -// for (var i = 0; i <= n; i++ ) { -// j = i / n; -// -// // The Green Line -// xa = getPt( fromX , cpX , j ); -// ya = getPt( fromY , cpY , j ); -// xb = getPt( cpX , toX , j ); -// yb = getPt( cpY , toY , j ); -// -// // The Black Dot -// x = getPt( xa , xb , j ); -// y = getPt( ya , yb , j ); -// -// points.push(x, y); -// } -// -// return points; -// }; +var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +{ + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = out || []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + + return points; +}; module.exports = buildRoundedRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 0126d06..a4f43ee 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -1,5 +1,5 @@ var earcut = require('earcut'), - // buildLine = require('./buildLine'), + buildLine = require('./buildLine'), utils = require('../../../utils'); /** @@ -21,10 +21,10 @@ var recPoints = []; recPoints.push(x, y + radius); - this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); - 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); + quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); + quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); + quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); + 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 earcut fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -67,7 +67,7 @@ graphicsData.points = recPoints; - this.buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData); graphicsData.points = tempPoints; } @@ -87,42 +87,42 @@ * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -// var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) -// { -// var xa, -// ya, -// xb, -// yb, -// x, -// y, -// n = 20, -// points = out || []; -// -// function getPt(n1 , n2, perc) { -// var diff = n2 - n1; -// -// return n1 + ( diff * perc ); -// } -// -// var j = 0; -// for (var i = 0; i <= n; i++ ) { -// j = i / n; -// -// // The Green Line -// xa = getPt( fromX , cpX , j ); -// ya = getPt( fromY , cpY , j ); -// xb = getPt( cpX , toX , j ); -// yb = getPt( cpY , toY , j ); -// -// // The Black Dot -// x = getPt( xa , xb , j ); -// y = getPt( ya , yb , j ); -// -// points.push(x, y); -// } -// -// return points; -// }; +var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +{ + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = out || []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + + return points; +}; module.exports = buildRoundedRectangle; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 1ccbfda..f6490b4 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -59,6 +59,7 @@ * @member {boolean} */ this.dirty = true; + this.indexDirty = true; /** * The blend mode to be applied to the sprite. Set to `PIXI.BLEND_MODES.NORMAL` to remove any blend mode. @@ -172,12 +173,22 @@ .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; + + + this.indexDirty = false; } if(this.dirty) { this.dirty = false; glData.uvBuffer.upload(); + + } + + if(this.indexDirty) + { + this.indexDirty = false; + glData.indexBuffer.upload(); } glData.vertexBuffer.upload(); diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 0126d06..a4f43ee 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -1,5 +1,5 @@ var earcut = require('earcut'), - // buildLine = require('./buildLine'), + buildLine = require('./buildLine'), utils = require('../../../utils'); /** @@ -21,10 +21,10 @@ var recPoints = []; recPoints.push(x, y + radius); - this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); - 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); + quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); + quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); + quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); + 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 earcut fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -67,7 +67,7 @@ graphicsData.points = recPoints; - this.buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData); graphicsData.points = tempPoints; } @@ -87,42 +87,42 @@ * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -// var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) -// { -// var xa, -// ya, -// xb, -// yb, -// x, -// y, -// n = 20, -// points = out || []; -// -// function getPt(n1 , n2, perc) { -// var diff = n2 - n1; -// -// return n1 + ( diff * perc ); -// } -// -// var j = 0; -// for (var i = 0; i <= n; i++ ) { -// j = i / n; -// -// // The Green Line -// xa = getPt( fromX , cpX , j ); -// ya = getPt( fromY , cpY , j ); -// xb = getPt( cpX , toX , j ); -// yb = getPt( cpY , toY , j ); -// -// // The Black Dot -// x = getPt( xa , xb , j ); -// y = getPt( ya , yb , j ); -// -// points.push(x, y); -// } -// -// return points; -// }; +var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +{ + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = out || []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + + return points; +}; module.exports = buildRoundedRectangle; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 1ccbfda..f6490b4 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -59,6 +59,7 @@ * @member {boolean} */ this.dirty = true; + this.indexDirty = true; /** * The blend mode to be applied to the sprite. Set to `PIXI.BLEND_MODES.NORMAL` to remove any blend mode. @@ -172,12 +173,22 @@ .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; + + + this.indexDirty = false; } if(this.dirty) { this.dirty = false; glData.uvBuffer.upload(); + + } + + if(this.indexDirty) + { + this.indexDirty = false; + glData.indexBuffer.upload(); } glData.vertexBuffer.upload(); diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index 9fddbd8..79cfe33 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -58,9 +58,6 @@ var indices = []; var texture = this.texture; - // texture.width = 800 texture.width || 800; - // texture.height = 800//texture.height || 800; - var segmentsXSub = this.segmentsX - 1; var segmentsYSub = this.segmentsY - 1; var i = 0; @@ -106,6 +103,8 @@ this.uvs = new Float32Array(uvs); this.colors = new Float32Array(colors); this.indices = new Uint16Array(indices); + + this.indexDirty = true; }; /** diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 0126d06..a4f43ee 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -1,5 +1,5 @@ var earcut = require('earcut'), - // buildLine = require('./buildLine'), + buildLine = require('./buildLine'), utils = require('../../../utils'); /** @@ -21,10 +21,10 @@ var recPoints = []; recPoints.push(x, y + radius); - this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); - 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); + quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); + quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); + quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints); + 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 earcut fails to triangulate the item. // TODO - fix this properly, this is not very elegant.. but it works for now. @@ -67,7 +67,7 @@ graphicsData.points = recPoints; - this.buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData); graphicsData.points = tempPoints; } @@ -87,42 +87,42 @@ * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -// var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) -// { -// var xa, -// ya, -// xb, -// yb, -// x, -// y, -// n = 20, -// points = out || []; -// -// function getPt(n1 , n2, perc) { -// var diff = n2 - n1; -// -// return n1 + ( diff * perc ); -// } -// -// var j = 0; -// for (var i = 0; i <= n; i++ ) { -// j = i / n; -// -// // The Green Line -// xa = getPt( fromX , cpX , j ); -// ya = getPt( fromY , cpY , j ); -// xb = getPt( cpX , toX , j ); -// yb = getPt( cpY , toY , j ); -// -// // The Black Dot -// x = getPt( xa , xb , j ); -// y = getPt( ya , yb , j ); -// -// points.push(x, y); -// } -// -// return points; -// }; +var quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +{ + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = out || []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + + return points; +}; module.exports = buildRoundedRectangle; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 1ccbfda..f6490b4 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -59,6 +59,7 @@ * @member {boolean} */ this.dirty = true; + this.indexDirty = true; /** * The blend mode to be applied to the sprite. Set to `PIXI.BLEND_MODES.NORMAL` to remove any blend mode. @@ -172,12 +173,22 @@ .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; + + + this.indexDirty = false; } if(this.dirty) { this.dirty = false; glData.uvBuffer.upload(); + + } + + if(this.indexDirty) + { + this.indexDirty = false; + glData.indexBuffer.upload(); } glData.vertexBuffer.upload(); diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index 9fddbd8..79cfe33 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -58,9 +58,6 @@ var indices = []; var texture = this.texture; - // texture.width = 800 texture.width || 800; - // texture.height = 800//texture.height || 800; - var segmentsXSub = this.segmentsX - 1; var segmentsYSub = this.segmentsY - 1; var i = 0; @@ -106,6 +103,8 @@ this.uvs = new Float32Array(uvs); this.colors = new Float32Array(colors); this.indices = new Uint16Array(indices); + + this.indexDirty = true; }; /** diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index c3fc687..0d7b95b 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -125,6 +125,7 @@ } this.dirty = true; + this.indexDirty = true; }; /** @@ -134,6 +135,7 @@ */ Rope.prototype._onTextureUpdate = function () { + Mesh.prototype._onTextureUpdate.call(this); // wait for the Rope ctor to finish before calling refresh