diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 93458ab..1dd64f6 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -31,7 +31,7 @@ 1, 0, 0, 1]); - this.verticies = new PIXI.Float32Array([0, 0, + this.vertices = new PIXI.Float32Array([0, 0, 100, 0, 100, 100, 0, 100]); @@ -107,7 +107,7 @@ this._colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.verticies, gl.DYNAMIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer); gl.bufferData(gl.ARRAY_BUFFER, this.uvs, gl.STATIC_DRAW); @@ -143,7 +143,7 @@ { gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs @@ -173,7 +173,7 @@ this.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.verticies, gl.STATIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs @@ -235,89 +235,26 @@ PIXI.Strip.prototype._renderCanvasTriangleStrip = function(context) { - var strip = this; // draw triangles!! - var verticies = strip.verticies; - var uvs = strip.uvs; + var vertices = this.vertices; + var uvs = this.uvs; - var length = verticies.length / 2; + var length = vertices.length / 2; this.count++; for (var i = 0; i < length - 2; i++) { // draw some triangles! var index = i * 2; - - var x0 = verticies[index], x1 = verticies[index + 2], x2 = verticies[index + 4]; - var y0 = verticies[index + 1], y1 = verticies[index + 3], y2 = verticies[index + 5]; - - if (this.padding > 0) { - var centerX = (x0 + x1 + x2) / 3; - var centerY = (y0 + y1 + y2) / 3; - - var normX = x0 - centerX; - var normY = y0 - centerY; - - var dist = Math.sqrt(normX * normX + normY * normY); - x0 = centerX + (normX / dist) * (dist + 3); - y0 = centerY + (normY / dist) * (dist + 3); - - // - - normX = x1 - centerX; - normY = y1 - centerY; - - dist = Math.sqrt(normX * normX + normY * normY); - x1 = centerX + (normX / dist) * (dist + 3); - y1 = centerY + (normY / dist) * (dist + 3); - - normX = x2 - centerX; - normY = y2 - centerY; - - dist = Math.sqrt(normX * normX + normY * normY); - x2 = centerX + (normX / dist) * (dist + 3); - y2 = centerY + (normY / dist) * (dist + 3); - } - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index + 2] * strip.texture.width, u2 = uvs[index + 4] * strip.texture.width; - var v0 = uvs[index + 1] * strip.texture.height, v1 = uvs[index + 3] * strip.texture.height, v2 = uvs[index + 5] * strip.texture.height; - - context.save(); - context.beginPath(); - - - context.moveTo(x0, y0); - context.lineTo(x1, y1); - context.lineTo(x2, y2); - - context.closePath(); - - context.clip(); - - // Compute matrix transform - var delta = u0 * v1 + v0 * u2 + u1 * v2 - v1 * u2 - v0 * u1 - u0 * v2; - var deltaA = x0 * v1 + v0 * x2 + x1 * v2 - v1 * x2 - v0 * x1 - x0 * v2; - var deltaB = u0 * x1 + x0 * u2 + u1 * x2 - x1 * u2 - x0 * u1 - u0 * x2; - var deltaC = u0 * v1 * x2 + v0 * x1 * u2 + x0 * u1 * v2 - x0 * v1 * u2 - v0 * u1 * x2 - u0 * x1 * v2; - var deltaD = y0 * v1 + v0 * y2 + y1 * v2 - v1 * y2 - v0 * y1 - y0 * v2; - var deltaE = u0 * y1 + y0 * u2 + u1 * y2 - y1 * u2 - y0 * u1 - u0 * y2; - var deltaF = u0 * v1 * y2 + v0 * y1 * u2 + y0 * u1 * v2 - y0 * v1 * u2 - v0 * u1 * y2 - u0 * y1 * v2; - - context.transform(deltaA / delta, deltaD / delta, - deltaB / delta, deltaE / delta, - deltaC / delta, deltaF / delta); - - context.drawImage(strip.texture.baseTexture.source, 0, 0); - context.restore(); + this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } }; PIXI.Strip.prototype._renderCanvasTriangles = function(context) { - var strip = this; // draw triangles!! - var verticies = strip.verticies; - var uvs = strip.uvs; - var indices = strip.indices; + var vertices = this.vertices; + var uvs = this.uvs; + var indices = this.indices; var length = indices.length; this.count++; @@ -325,72 +262,80 @@ for (var i = 0; i < length; i += 3) { // draw some triangles! var index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; - - var x0 = verticies[index0], x1 = verticies[index1], x2 = verticies[index2]; - var y0 = verticies[index0 + 1], y1 = verticies[index1 + 1], y2 = verticies[index2 + 1]; - - if (this.padding > 0) { - var padding = this.padding; - var centerX = (x0 + x1 + x2) / 3; - var centerY = (y0 + y1 + y2) / 3; - - var normX = x0 - centerX; - var normY = y0 - centerY; - - var dist = Math.sqrt(normX * normX + normY * normY); - x0 = centerX + (normX / dist) * (dist + padding); - y0 = centerY + (normY / dist) * (dist + padding); - - // - - normX = x1 - centerX; - normY = y1 - centerY; - - dist = Math.sqrt(normX * normX + normY * normY); - x1 = centerX + (normX / dist) * (dist + padding); - y1 = centerY + (normY / dist) * (dist + padding); - - normX = x2 - centerX; - normY = y2 - centerY; - - dist = Math.sqrt(normX * normX + normY * normY); - x2 = centerX + (normX / dist) * (dist + padding); - y2 = centerY + (normY / dist) * (dist + padding); - } - - var u0 = uvs[index0] * strip.texture.width, u1 = uvs[index1] * strip.texture.width, u2 = uvs[index2] * strip.texture.width; - var v0 = uvs[index0 + 1] * strip.texture.height, v1 = uvs[index1 + 1] * strip.texture.height, v2 = uvs[index2 + 1] * strip.texture.height; - - context.save(); - context.beginPath(); - - - context.moveTo(x0, y0); - context.lineTo(x1, y1); - context.lineTo(x2, y2); - - context.closePath(); - - context.clip(); - - // Compute matrix transform - var delta = u0 * v1 + v0 * u2 + u1 * v2 - v1 * u2 - v0 * u1 - u0 * v2; - var deltaA = x0 * v1 + v0 * x2 + x1 * v2 - v1 * x2 - v0 * x1 - x0 * v2; - var deltaB = u0 * x1 + x0 * u2 + u1 * x2 - x1 * u2 - x0 * u1 - u0 * x2; - var deltaC = u0 * v1 * x2 + v0 * x1 * u2 + x0 * u1 * v2 - x0 * v1 * u2 - v0 * u1 * x2 - u0 * x1 * v2; - var deltaD = y0 * v1 + v0 * y2 + y1 * v2 - v1 * y2 - v0 * y1 - y0 * v2; - var deltaE = u0 * y1 + y0 * u2 + u1 * y2 - y1 * u2 - y0 * u1 - u0 * y2; - var deltaF = u0 * v1 * y2 + v0 * y1 * u2 + y0 * u1 * v2 - y0 * v1 * u2 - v0 * u1 * y2 - u0 * y1 * v2; - - context.transform(deltaA / delta, deltaD / delta, - deltaB / delta, deltaE / delta, - deltaC / delta, deltaF / delta); - - context.drawImage(strip.texture.baseTexture.source, 0, 0); - context.restore(); + this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } }; +PIXI.Strip.prototype._renderCanvasDrawTriangle = function(context, vertices, uvs, index0, index1, index2) +{ + var textureSource = this.texture.baseTexture.source; + var textureWidth = this.texture.width; + var textureHeight = this.texture.height; + + var x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; + var y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; + + var u0 = uvs[index0] * textureWidth, u1 = uvs[index1] * textureWidth, u2 = uvs[index2] * textureWidth; + var v0 = uvs[index0 + 1] * textureHeight, v1 = uvs[index1 + 1] * textureHeight, v2 = uvs[index2 + 1] * textureHeight; + + if (this.padding > 0) { + var padding = this.padding; + var centerX = (x0 + x1 + x2) / 3; + var centerY = (y0 + y1 + y2) / 3; + + var normX = x0 - centerX; + var normY = y0 - centerY; + + var dist = Math.sqrt(normX * normX + normY * normY); + x0 = centerX + (normX / dist) * (dist + padding); + y0 = centerY + (normY / dist) * (dist + padding); + + // + + normX = x1 - centerX; + normY = y1 - centerY; + + dist = Math.sqrt(normX * normX + normY * normY); + x1 = centerX + (normX / dist) * (dist + padding); + y1 = centerY + (normY / dist) * (dist + padding); + + normX = x2 - centerX; + normY = y2 - centerY; + + dist = Math.sqrt(normX * normX + normY * normY); + x2 = centerX + (normX / dist) * (dist + padding); + y2 = centerY + (normY / dist) * (dist + padding); + } + + context.save(); + context.beginPath(); + + + context.moveTo(x0, y0); + context.lineTo(x1, y1); + context.lineTo(x2, y2); + + context.closePath(); + + context.clip(); + + // Compute matrix transform + var delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + var deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + var deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + var deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + var deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + var deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + var deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + + context.drawImage(textureSource, 0, 0); + context.restore(); +}; + /** @@ -403,9 +348,9 @@ PIXI.Strip.prototype.renderStripFlat = function(strip) { var context = this.context; - var verticies = strip.verticies; + var vertices = strip.vertices; - var length = verticies.length/2; + var length = vertices.length/2; this.count++; context.beginPath(); @@ -414,8 +359,8 @@ // draw some triangles! var index = i*2; - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + var x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + var y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); @@ -454,6 +399,13 @@ this.updateFrame = true; }; +/** + * Different drawing buffer modes supported + * + * @property + * @type {{TRIANGLE_STRIP: number, TRIANGLES: number}} + * @static + */ PIXI.Strip.DrawModes = { TRIANGLE_STRIP: 0, TRIANGLES: 1