diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f68d03a..a5ff5dc 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -32,7 +32,7 @@ * * @member {number} */ - this.vertSize = 5; + this.vertSize = 4; /** * The size of the vertex information in bytes. @@ -67,6 +67,8 @@ * @member {Float32Array} */ this.positions = new Float32Array(this.vertices); + + this.uvs = new Uint32Array(this.vertices); /** * View on the vertices as a Uint32Array for colors @@ -216,8 +218,9 @@ if (this.renderer.roundPixels) { + var resolution = this.renderer.resolution; - + // console.log("<>") // xy positions[index] = (((a * w1 + c * h1 + tx) * resolution) | 0) / resolution; positions[index+1] = (((d * h1 + b * w1 + ty) * resolution) | 0) / resolution; @@ -233,46 +236,37 @@ // xy positions[index+15] = (((a * w1 + c * h0 + tx) * resolution) | 0) / resolution; positions[index+16] = (((d * h0 + b * w1 + ty) * resolution) | 0) / resolution; + } else { - // xy positions[index] = a * w1 + c * h1 + tx; positions[index+1] = d * h1 + b * w1 + ty; // xy - positions[index+5] = a * w0 + c * h1 + tx; - positions[index+6] = d * h1 + b * w0 + ty; + positions[index+4] = a * w0 + c * h1 + tx; + positions[index+5] = d * h1 + b * w0 + ty; // xy - positions[index+10] = a * w0 + c * h0 + tx; - positions[index+11] = d * h0 + b * w0 + ty; + positions[index+8] = a * w0 + c * h0 + tx; + positions[index+9] = d * h0 + b * w0 + ty; // xy - positions[index+15] = a * w1 + c * h0 + tx; - positions[index+16] = d * h0 + b * w1 + ty; + positions[index+12] = a * w1 + c * h0 + tx; + positions[index+13] = d * h0 + b * w1 + ty; } - // uv - positions[index+2] = uvs.x0; - positions[index+3] = uvs.y0; + // upload som uvs! + this.uvs[index + 2] = uvs.uvs_uint32[0]; + this.uvs[index + 6] = uvs.uvs_uint32[1]; + this.uvs[index + 10] = uvs.uvs_uint32[2]; + this.uvs[index + 14] = uvs.uvs_uint32[3]; - // uv - positions[index+7] = uvs.x1; - positions[index+8] = uvs.y1; + // colors[index+3] = colors[index+7] = colors[index+11] = colors[index+15] = sprite._tintUint + (sprite.worldAlpha * 255 << 24); + var tint = sprite.tint; + colors[index+3] = colors[index+7] = colors[index+11] = colors[index+15] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); - // uv - positions[index+12] = uvs.x2; - positions[index+13] = uvs.y2; - - // uv - positions[index+17] = uvs.x3; - positions[index+18] = uvs.y3; - - // color and alpha - var tint = sprite.tint; - colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); // increment the batchsize this.sprites[this.currentBatchSize++] = sprite; @@ -437,10 +431,10 @@ // this is the same for each shader? var stride = this.vertByteSize; gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.UNSIGNED_SHORT, true, stride, 2 * 4); // color attributes will be interpreted as unsigned bytes and normalized - gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 3 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f68d03a..a5ff5dc 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -32,7 +32,7 @@ * * @member {number} */ - this.vertSize = 5; + this.vertSize = 4; /** * The size of the vertex information in bytes. @@ -67,6 +67,8 @@ * @member {Float32Array} */ this.positions = new Float32Array(this.vertices); + + this.uvs = new Uint32Array(this.vertices); /** * View on the vertices as a Uint32Array for colors @@ -216,8 +218,9 @@ if (this.renderer.roundPixels) { + var resolution = this.renderer.resolution; - + // console.log("<>") // xy positions[index] = (((a * w1 + c * h1 + tx) * resolution) | 0) / resolution; positions[index+1] = (((d * h1 + b * w1 + ty) * resolution) | 0) / resolution; @@ -233,46 +236,37 @@ // xy positions[index+15] = (((a * w1 + c * h0 + tx) * resolution) | 0) / resolution; positions[index+16] = (((d * h0 + b * w1 + ty) * resolution) | 0) / resolution; + } else { - // xy positions[index] = a * w1 + c * h1 + tx; positions[index+1] = d * h1 + b * w1 + ty; // xy - positions[index+5] = a * w0 + c * h1 + tx; - positions[index+6] = d * h1 + b * w0 + ty; + positions[index+4] = a * w0 + c * h1 + tx; + positions[index+5] = d * h1 + b * w0 + ty; // xy - positions[index+10] = a * w0 + c * h0 + tx; - positions[index+11] = d * h0 + b * w0 + ty; + positions[index+8] = a * w0 + c * h0 + tx; + positions[index+9] = d * h0 + b * w0 + ty; // xy - positions[index+15] = a * w1 + c * h0 + tx; - positions[index+16] = d * h0 + b * w1 + ty; + positions[index+12] = a * w1 + c * h0 + tx; + positions[index+13] = d * h0 + b * w1 + ty; } - // uv - positions[index+2] = uvs.x0; - positions[index+3] = uvs.y0; + // upload som uvs! + this.uvs[index + 2] = uvs.uvs_uint32[0]; + this.uvs[index + 6] = uvs.uvs_uint32[1]; + this.uvs[index + 10] = uvs.uvs_uint32[2]; + this.uvs[index + 14] = uvs.uvs_uint32[3]; - // uv - positions[index+7] = uvs.x1; - positions[index+8] = uvs.y1; + // colors[index+3] = colors[index+7] = colors[index+11] = colors[index+15] = sprite._tintUint + (sprite.worldAlpha * 255 << 24); + var tint = sprite.tint; + colors[index+3] = colors[index+7] = colors[index+11] = colors[index+15] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); - // uv - positions[index+12] = uvs.x2; - positions[index+13] = uvs.y2; - - // uv - positions[index+17] = uvs.x3; - positions[index+18] = uvs.y3; - - // color and alpha - var tint = sprite.tint; - colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); // increment the batchsize this.sprites[this.currentBatchSize++] = sprite; @@ -437,10 +431,10 @@ // this is the same for each shader? var stride = this.vertByteSize; gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.UNSIGNED_SHORT, true, stride, 2 * 4); // color attributes will be interpreted as unsigned bytes and normalized - gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 3 * 4); }; /** diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index b3a5f7f..c5e4564 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -19,6 +19,13 @@ this.x3 = 0; this.y3 = 1; + + this.xy0_uint32 = 0; + this.xy1_uint32 = 0; + this.xy2_uint32 = 0; + this.xy3_uint32 = 0; + + this.uvs_uint32 = new Uint32Array(4) } module.exports = TextureUvs; @@ -64,4 +71,9 @@ this.x3 = frame.x / tw; this.y3 = (frame.y + frame.height) / th; } + + this.uvs_uint32[0] = (((this.y0 * 65535) & 0xFFFF) << 16) | ((this.x0 * 65535) & 0xFFFF); + this.uvs_uint32[1] = (((this.y1 * 65535) & 0xFFFF) << 16) | ((this.x1 * 65535) & 0xFFFF); + this.uvs_uint32[2] = (((this.y2 * 65535) & 0xFFFF) << 16) | ((this.x2 * 65535) & 0xFFFF); + this.uvs_uint32[3] = (((this.y3 * 65535) & 0xFFFF) << 16) | ((this.x3 * 65535) & 0xFFFF); };