diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index 8903011..d67a0aa 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -371,7 +371,7 @@ PIXI.PixiShader.defaultVertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute vec2 aColor;', + 'attribute vec4 aColor;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -384,7 +384,6 @@ 'void main(void) {', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;', - ' vColor = vec4(color * aColor.x, aColor.x);', + ' vColor = aColor;', '}' -]; +]; \ No newline at end of file diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index 8903011..d67a0aa 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -371,7 +371,7 @@ PIXI.PixiShader.defaultVertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute vec2 aColor;', + 'attribute vec4 aColor;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -384,7 +384,6 @@ 'void main(void) {', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;', - ' vColor = vec4(color * aColor.x, aColor.x);', + ' vColor = aColor;', '}' -]; +]; \ No newline at end of file diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index a587edc..b366ef0 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -3,7 +3,8 @@ * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ * for creating the original pixi version! - * + * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer + * * Heavily inspired by LibGDX's WebGLSpriteBatch: * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ @@ -20,7 +21,7 @@ * @property vertSize * @type Number */ - this.vertSize = 6; + this.vertSize = 5; /** * The number of images in the SpriteBatch before it flushes @@ -29,8 +30,8 @@ */ this.size = 2000;//Math.pow(2, 16) / this.vertSize; - //the total number of floats in our batch - var numVerts = this.size * 4 * this.vertSize; + //the total number of bytes in our batch + var numVerts = this.size * 4 * 4 * this.vertSize; //the total number of indices in our batch var numIndices = this.size * 6; @@ -38,9 +39,25 @@ * Holds the vertices * * @property vertices + * @type ArrayBuffer + */ + this.vertices = new PIXI.ArrayBuffer(numVerts); + + /** + * View on the vertices as a Float32Array + * + * @property positions * @type Float32Array */ - this.vertices = new PIXI.Float32Array(numVerts); + this.positions = new PIXI.Float32Array(this.vertices); + + /** + * View on the vertices as a Uint32Array + * + * @property colors + * @type Uint32Array + */ + this.colors = new PIXI.Uint32Array(this.vertices); /** * Holds the indices @@ -188,7 +205,7 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - + //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -202,12 +219,6 @@ // if the uvs have not updated then no point rendering just yet! if(!uvs)return; - // get the sprites current alpha - var alpha = sprite.worldAlpha; - var tint = sprite.tint; - - var verticies = this.vertices; - // TODO trim?? var aX = sprite.anchor.x; var aY = sprite.anchor.y; @@ -248,66 +259,64 @@ var tx = worldTransform.tx; var ty = worldTransform.ty; + var colors = this.colors; + var positions = this.positions; + if(this.renderSession.roundPixels) { - //xy - verticies[index] = a * w1 + c * h1 + tx | 0; - verticies[index+1] = d * h1 + b * w1 + ty | 0; + // xy + positions[index] = a * w1 + c * h1 + tx | 0; + positions[index+1] = d * h1 + b * w1 + ty | 0; // xy - verticies[index+6] = a * w0 + c * h1 + tx | 0; - verticies[index+7] = d * h1 + b * w0 + ty | 0; + positions[index+5] = a * w0 + c * h1 + tx | 0; + positions[index+6] = d * h1 + b * w0 + ty | 0; // xy - verticies[index+12] = a * w0 + c * h0 + tx | 0; - verticies[index+13] = d * h0 + b * w0 + ty | 0; + positions[index+10] = a * w0 + c * h0 + tx | 0; + positions[index+11] = d * h0 + b * w0 + ty | 0; // xy - verticies[index+18] = a * w1 + c * h0 + tx | 0; - verticies[index+19] = d * h0 + b * w1 + ty | 0; + positions[index+15] = a * w1 + c * h0 + tx | 0; + positions[index+16] = d * h0 + b * w1 + ty | 0; } else { - //xy - verticies[index] = a * w1 + c * h1 + tx; - verticies[index+1] = d * h1 + b * w1 + ty; + // xy + positions[index] = a * w1 + c * h1 + tx; + positions[index+1] = d * h1 + b * w1 + ty; // xy - verticies[index+6] = a * w0 + c * h1 + tx; - verticies[index+7] = d * h1 + b * w0 + ty; + positions[index+5] = a * w0 + c * h1 + tx; + positions[index+6] = d * h1 + b * w0 + ty; // xy - verticies[index+12] = a * w0 + c * h0 + tx; - verticies[index+13] = d * h0 + b * w0 + ty; + positions[index+10] = a * w0 + c * h0 + tx; + positions[index+11] = d * h0 + b * w0 + ty; // xy - verticies[index+18] = a * w1 + c * h0 + tx; - verticies[index+19] = d * h0 + b * w1 + ty; + positions[index+15] = a * w1 + c * h0 + tx; + positions[index+16] = d * h0 + b * w1 + ty; } // uv - verticies[index+2] = uvs.x0; - verticies[index+3] = uvs.y0; + positions[index+2] = uvs.x0; + positions[index+3] = uvs.y0; // uv - verticies[index+8] = uvs.x1; - verticies[index+9] = uvs.y1; + positions[index+7] = uvs.x1; + positions[index+8] = uvs.y1; // uv - verticies[index+14] = uvs.x2; - verticies[index+15] = uvs.y2; + positions[index+12] = uvs.x2; + positions[index+13] = uvs.y2; // uv - verticies[index+20] = uvs.x3; - verticies[index+21] = uvs.y3; + positions[index+17] = uvs.x3; + positions[index+18] = uvs.y3; - // color - verticies[index+4] = verticies[index+10] = verticies[index+16] = verticies[index+22] = alpha; - - // alpha - verticies[index+5] = verticies[index+11] = verticies[index+17] = verticies[index+23] = tint; - - + // color and alpha + colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = sprite.tint + ((sprite.worldAlpha * 255 | 0) * 0x1000000); // increment the batchsize this.sprites[this.currentBatchSize++] = sprite; @@ -359,13 +368,13 @@ uvs.y2 = (1 * scaleY) - offsetY; uvs.x3 = 0 - offsetX; - uvs.y3 = (1 *scaleY) - offsetY; + uvs.y3 = (1 * scaleY) - offsetY; - // get the tilingSprites current alpha - var alpha = tilingSprite.worldAlpha; - var tint = tilingSprite.tint; + // get the tilingSprites current alpha and tint and combining them into a single color + var color = tilingSprite.tint + ((tilingSprite.worldAlpha * 255 | 0) * 0x1000000); - var verticies = this.vertices; + var verticies = this.vertices; + var colors = this.colors; var width = tilingSprite.width; var height = tilingSprite.height; @@ -390,7 +399,7 @@ var c = worldTransform.c / resolution;//[1]; var d = worldTransform.d / resolution;//[4]; var tx = worldTransform.tx;//[2]; - var ty = worldTransform.ty;///[5]; + var ty = worldTransform.ty;//[5]; // xy verticies[index++] = a * w1 + c * h1 + tx; @@ -399,8 +408,7 @@ verticies[index++] = uvs.x0; verticies[index++] = uvs.y0; // color - verticies[index++] = alpha; - verticies[index++] = tint; + colors[index++] = color; // xy verticies[index++] = (a * w0 + c * h1 + tx); @@ -409,8 +417,7 @@ verticies[index++] = uvs.x1; verticies[index++] = uvs.y1; // color - verticies[index++] = alpha; - verticies[index++] = tint; + colors[index++] = color; // xy verticies[index++] = a * w0 + c * h0 + tx; @@ -419,8 +426,7 @@ verticies[index++] = uvs.x2; verticies[index++] = uvs.y2; // color - verticies[index++] = alpha; - verticies[index++] = tint; + colors[index++] = color; // xy verticies[index++] = a * w1 + c * h0 + tx; @@ -429,8 +435,7 @@ verticies[index++] = uvs.x3; verticies[index++] = uvs.y3; // color - verticies[index++] = alpha; - verticies[index++] = tint; + colors[index++] = color; // increment the batchsize this.sprites[this.currentBatchSize++] = tilingSprite; @@ -465,7 +470,9 @@ var stride = this.vertSize * 4; gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - gl.vertexAttribPointer(shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4); + + // color attributes will be interpreted as unsigned bytes and normalized + gl.vertexAttribPointer(shader.colorAttribute, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); } // upload the verts to the buffer @@ -475,7 +482,7 @@ } else { - var view = this.vertices.subarray(0, this.currentBatchSize * 4 * this.vertSize); + var view = this.positions.subarray(0, this.currentBatchSize * 4 * this.vertSize); gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } @@ -623,4 +630,4 @@ this.currentBaseTexture = null; this.gl = null; -}; +}; \ No newline at end of file