diff --git a/src/core/particles/webgl/ParticleBuffer.js b/src/core/particles/webgl/ParticleBuffer.js index 918704c..c707654 100644 --- a/src/core/particles/webgl/ParticleBuffer.js +++ b/src/core/particles/webgl/ParticleBuffer.js @@ -17,7 +17,7 @@ * @namespace PIXI * @param renderer {WebGLRenderer} The renderer this sprite batch works for. */ -function ParticleBuffer(gl, size ) +function ParticleBuffer(gl, size, shader ) { this.gl = gl; @@ -42,23 +42,72 @@ */ this.size = size; - // the total number of bytes in our batch - var numVerts = this.size * 2 * this.vertByteSize; + this.verticiesData = { + attribute:shader.attributes.aVertexPosition, + dynamic:true, + size:2, + uploadFunction:this.uploadVerticies.bind(this), + offset:0 + }; - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new Float32Array(numVerts); - this.position = new Float32Array(numVerts); - this.rotation = new Float32Array(numVerts/2); - this.uvs = new Float32Array(numVerts); - this.alpha = new Float32Array(numVerts/2); + this.positionData = { + attribute:shader.attributes.aPositionCoord, + dynamic:true, + size:2, + uploadFunction:this.uploadPosition.bind(this), + offset:0 + }; + + this.rotationData = { + attribute:shader.attributes.aRotation, + dynamic:true, + size:1, + uploadFunction:this.uploadRotation.bind(this), + offset:0 + }; + + this.uvsData = { + attribute:shader.attributes.aTextureCoord, + dynamic:true, + size:2, + uploadFunction:this.uploadUvs.bind(this), + offset:0 + }; + + this.alphaData = { + attribute:shader.attributes.aColor, + dynamic:true, + size:1, + uploadFunction:this.uploadAlpha.bind(this), + offset:0 + }; + + this.dynamicProperties = [ + // this.verticiesData, + this.positionData + // this.rotationData, + // this.uvsData + // this.alphaData + ]; + + this.staticProperties = [ + this.verticiesData, + // this.positionData, + this.rotationData, + this.uvsData, + this.alphaData + ]; + + this.staticStride = 0; + this.staticBuffer = null; + this.staticData = null; + + this.dynamicStride = 0; + this.dynamicBuffer = null; + this.dynamicData = null; this.initBuffers(); - } ParticleBuffer.prototype.constructor = ParticleBuffer; @@ -73,46 +122,90 @@ ParticleBuffer.prototype.initBuffers = function () { var gl = this.gl; + var i; + var property; - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.positionBuffer = gl.createBuffer(); - this.rotationBuffer = gl.createBuffer(); - this.uvsBuffer = gl.createBuffer(); - this.alphaBuffer = gl.createBuffer(); + var dynamicOffset = 0; + this.dynamicStride = 0; - // upload the buffers.. - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.position, gl.DYNAMIC_DRAW); + if(property.dynamic) + { + property.offset = dynamicOffset; + dynamicOffset += property.size; + this.dynamicStride += property.size; + } + } - gl.bindBuffer(gl.ARRAY_BUFFER, this.rotationBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4); + this.dynamicBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.uvs, gl.DYNAMIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.alphaBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.alpha, gl.DYNAMIC_DRAW); -}; + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW); -ParticleBuffer.prototype.refresh = function(children, startIndex, amount) -{ - this.uploadVerticies(children,startIndex, amount); - this.uploadRotation(children,startIndex, amount); - this.uploadUvs(children,startIndex, amount); - this.uploadAlpha(children,startIndex, amount); + // static // + var staticOffset = 0; + this.staticStride = 0; + + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + + if(property.dynamic) + { + property.offset = staticOffset; + staticOffset += property.size; + this.staticStride += property.size; + } + } + + this.staticData = new Float32Array( this.size * this.staticStride * 4); + this.staticBuffer = gl.createBuffer(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW); }; -ParticleBuffer.prototype.uploadVerticies = function (children,startIndex, amount) +ParticleBuffer.prototype.upload = function(children, startIndex, amount, uploadStatic) { - var vertices = this.vertices, - index = 0, - sprite, + var i, property; + var gl = this.gl; + + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + } + + + + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dynamicData); + + if(uploadStatic) + { + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + } + + + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.staticData); + } +}; + +ParticleBuffer.prototype.uploadVerticies = function (children, startIndex, amount, array, stride, offset) +{ + //console.log(">>>", array) + //var vertices = this.vertices, + var sprite, texture, trim, sx, @@ -146,74 +239,72 @@ h1 = texture._frame.height * -sprite.anchor.y; } - vertices[index++] = w1 * sx; - vertices[index++] = h1 * sy; + // var pos = stride * i; - vertices[index++] = w0 * sx; - vertices[index++] = h1 * sy; + array[offset] = w1 * sx; + array[offset + 1] = h1 * sy; - vertices[index++] = w0 * sx; - vertices[index++] = h0 * sy; + array[offset + stride] = w0 * sx; + array[offset + stride + 1] = h1 * sy; - vertices[index++] = w1 * sx; - vertices[index++] = h0 * sy; + array[offset + stride * 2] = w0 * sx; + array[offset + stride * 2 + 1] = h0 * sy; + + array[offset + stride * 3] = w1 * sx; + array[offset + stride * 3 + 1] = h0 * sy; + + offset += stride * 4; } - this.uploadToBuffer(this.vertexBuffer, this.vertices, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadPosition = function (children,startIndex, amount) + +ParticleBuffer.prototype.uploadPosition = function (children,startIndex, amount, array, stride, offset) { - var position = this.position, - index = 0, - spritePosition; + var spritePosition; for (var i = 0; i < amount; i++) { spritePosition = children[startIndex + i].position; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset] = spritePosition.x; + array[offset + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride] = spritePosition.x; + array[offset + stride + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride * 2] = spritePosition.x; + array[offset + stride * 2 + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride * 3] = spritePosition.x; + array[offset + stride * 3 + 1] = spritePosition.y; + + offset += stride * 4; } - - // upload the verts to the buffer - this.uploadToBuffer(this.positionBuffer, this.position, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadRotation = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadRotation = function (children,startIndex, amount, array, stride, offset) { - var rotation = this.rotation, - index = 0, - spriteRotation; + var spriteRotation; for (var i = 0; i < amount; i++) { spriteRotation = children[startIndex + i].rotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - } - this.uploadToBuffer(this.rotationBuffer, this.rotation, 1 * 4, amount); + array[offset] = spriteRotation; + array[offset + stride] = spriteRotation; + array[offset + stride * 2] = spriteRotation; + array[offset + stride * 3] = spriteRotation; + + offset += stride * 4; + } }; -ParticleBuffer.prototype.uploadUvs = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadUvs = function (children,startIndex, amount, array, stride, offset) { - var uvs = this.uvs, - index = 0, - textureUvs; + var textureUvs; for (var i = 0; i < amount; i++) { @@ -221,46 +312,55 @@ if (textureUvs) { - uvs[index++] = textureUvs.x0; - uvs[index++] = textureUvs.y0; + array[offset] = textureUvs.x0; + array[offset + 1] = textureUvs.y0; - uvs[index++] = textureUvs.x1; - uvs[index++] = textureUvs.y1; + array[offset + stride] = textureUvs.x1; + array[offset + stride + 1] = textureUvs.y1; - uvs[index++] = textureUvs.x2; - uvs[index++] = textureUvs.y2; + array[offset + stride * 2] = textureUvs.x2; + array[offset + stride * 2 + 1] = textureUvs.y2; - uvs[index++] = textureUvs.x3; - uvs[index++] = textureUvs.y3; + array[offset + stride * 3] = textureUvs.x3; + array[offset + stride * 3 + 1] = textureUvs.y3; + + offset += stride * 4; } else { - index += 8; + //TODO you know this can be easier! + array[offset] = 0; + array[offset + 1] = 0; + + array[offset + stride] = 0; + array[offset + stride + 1] = 0; + + array[offset + stride * 2] = 0; + array[offset + stride * 2 + 1] = 0; + + array[offset + stride * 3] = 0; + array[offset + stride * 3 + 1] = 0; + + offset += stride * 4; } } - - this.uploadToBuffer(this.uvsBuffer, this.uvs, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadAlpha = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadAlpha = function (children,startIndex, amount, array, stride, offset) { - var alpha = this.alpha, - index = 0, - spriteAlpha; + var spriteAlpha; - for (var i = 0; i < amount; i++) { + for (var i = 0; i < amount; i++) { spriteAlpha = children[startIndex + i].alpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; + array[offset] = spriteAlpha; + array[offset + stride] = spriteAlpha; + array[offset + stride * 2] = spriteAlpha; + array[offset + stride * 3] = spriteAlpha; + + offset += stride * 4; } - - - this.uploadToBuffer(this.alphaBuffer, this.alpha, 1 * 4, amount); - }; ParticleBuffer.prototype.uploadToBuffer = function (buffer, data, dataSize, amount) @@ -284,27 +384,26 @@ * Starts a new sprite batch. * */ -ParticleBuffer.prototype.bind = function (shader) +ParticleBuffer.prototype.bind = function () { var gl = this.gl; + var i, property; - // this is the same for each shader? + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); + } - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - gl.vertexAttribPointer(shader.attributes.aPositionCoord, 2, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); - gl.bindBuffer(gl.ARRAY_BUFFER, this.rotationBuffer); - gl.vertexAttribPointer(shader.attributes.aRotation, 1, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer); - gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.alphaBuffer); - gl.vertexAttribPointer(shader.attributes.aColor, 1, gl.FLOAT, false, 0, 0); - + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); + } }; /** diff --git a/src/core/particles/webgl/ParticleBuffer.js b/src/core/particles/webgl/ParticleBuffer.js index 918704c..c707654 100644 --- a/src/core/particles/webgl/ParticleBuffer.js +++ b/src/core/particles/webgl/ParticleBuffer.js @@ -17,7 +17,7 @@ * @namespace PIXI * @param renderer {WebGLRenderer} The renderer this sprite batch works for. */ -function ParticleBuffer(gl, size ) +function ParticleBuffer(gl, size, shader ) { this.gl = gl; @@ -42,23 +42,72 @@ */ this.size = size; - // the total number of bytes in our batch - var numVerts = this.size * 2 * this.vertByteSize; + this.verticiesData = { + attribute:shader.attributes.aVertexPosition, + dynamic:true, + size:2, + uploadFunction:this.uploadVerticies.bind(this), + offset:0 + }; - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new Float32Array(numVerts); - this.position = new Float32Array(numVerts); - this.rotation = new Float32Array(numVerts/2); - this.uvs = new Float32Array(numVerts); - this.alpha = new Float32Array(numVerts/2); + this.positionData = { + attribute:shader.attributes.aPositionCoord, + dynamic:true, + size:2, + uploadFunction:this.uploadPosition.bind(this), + offset:0 + }; + + this.rotationData = { + attribute:shader.attributes.aRotation, + dynamic:true, + size:1, + uploadFunction:this.uploadRotation.bind(this), + offset:0 + }; + + this.uvsData = { + attribute:shader.attributes.aTextureCoord, + dynamic:true, + size:2, + uploadFunction:this.uploadUvs.bind(this), + offset:0 + }; + + this.alphaData = { + attribute:shader.attributes.aColor, + dynamic:true, + size:1, + uploadFunction:this.uploadAlpha.bind(this), + offset:0 + }; + + this.dynamicProperties = [ + // this.verticiesData, + this.positionData + // this.rotationData, + // this.uvsData + // this.alphaData + ]; + + this.staticProperties = [ + this.verticiesData, + // this.positionData, + this.rotationData, + this.uvsData, + this.alphaData + ]; + + this.staticStride = 0; + this.staticBuffer = null; + this.staticData = null; + + this.dynamicStride = 0; + this.dynamicBuffer = null; + this.dynamicData = null; this.initBuffers(); - } ParticleBuffer.prototype.constructor = ParticleBuffer; @@ -73,46 +122,90 @@ ParticleBuffer.prototype.initBuffers = function () { var gl = this.gl; + var i; + var property; - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.positionBuffer = gl.createBuffer(); - this.rotationBuffer = gl.createBuffer(); - this.uvsBuffer = gl.createBuffer(); - this.alphaBuffer = gl.createBuffer(); + var dynamicOffset = 0; + this.dynamicStride = 0; - // upload the buffers.. - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.position, gl.DYNAMIC_DRAW); + if(property.dynamic) + { + property.offset = dynamicOffset; + dynamicOffset += property.size; + this.dynamicStride += property.size; + } + } - gl.bindBuffer(gl.ARRAY_BUFFER, this.rotationBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4); + this.dynamicBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.uvs, gl.DYNAMIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.alphaBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.alpha, gl.DYNAMIC_DRAW); -}; + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW); -ParticleBuffer.prototype.refresh = function(children, startIndex, amount) -{ - this.uploadVerticies(children,startIndex, amount); - this.uploadRotation(children,startIndex, amount); - this.uploadUvs(children,startIndex, amount); - this.uploadAlpha(children,startIndex, amount); + // static // + var staticOffset = 0; + this.staticStride = 0; + + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + + if(property.dynamic) + { + property.offset = staticOffset; + staticOffset += property.size; + this.staticStride += property.size; + } + } + + this.staticData = new Float32Array( this.size * this.staticStride * 4); + this.staticBuffer = gl.createBuffer(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW); }; -ParticleBuffer.prototype.uploadVerticies = function (children,startIndex, amount) +ParticleBuffer.prototype.upload = function(children, startIndex, amount, uploadStatic) { - var vertices = this.vertices, - index = 0, - sprite, + var i, property; + var gl = this.gl; + + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + } + + + + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dynamicData); + + if(uploadStatic) + { + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + } + + + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.staticData); + } +}; + +ParticleBuffer.prototype.uploadVerticies = function (children, startIndex, amount, array, stride, offset) +{ + //console.log(">>>", array) + //var vertices = this.vertices, + var sprite, texture, trim, sx, @@ -146,74 +239,72 @@ h1 = texture._frame.height * -sprite.anchor.y; } - vertices[index++] = w1 * sx; - vertices[index++] = h1 * sy; + // var pos = stride * i; - vertices[index++] = w0 * sx; - vertices[index++] = h1 * sy; + array[offset] = w1 * sx; + array[offset + 1] = h1 * sy; - vertices[index++] = w0 * sx; - vertices[index++] = h0 * sy; + array[offset + stride] = w0 * sx; + array[offset + stride + 1] = h1 * sy; - vertices[index++] = w1 * sx; - vertices[index++] = h0 * sy; + array[offset + stride * 2] = w0 * sx; + array[offset + stride * 2 + 1] = h0 * sy; + + array[offset + stride * 3] = w1 * sx; + array[offset + stride * 3 + 1] = h0 * sy; + + offset += stride * 4; } - this.uploadToBuffer(this.vertexBuffer, this.vertices, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadPosition = function (children,startIndex, amount) + +ParticleBuffer.prototype.uploadPosition = function (children,startIndex, amount, array, stride, offset) { - var position = this.position, - index = 0, - spritePosition; + var spritePosition; for (var i = 0; i < amount; i++) { spritePosition = children[startIndex + i].position; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset] = spritePosition.x; + array[offset + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride] = spritePosition.x; + array[offset + stride + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride * 2] = spritePosition.x; + array[offset + stride * 2 + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride * 3] = spritePosition.x; + array[offset + stride * 3 + 1] = spritePosition.y; + + offset += stride * 4; } - - // upload the verts to the buffer - this.uploadToBuffer(this.positionBuffer, this.position, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadRotation = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadRotation = function (children,startIndex, amount, array, stride, offset) { - var rotation = this.rotation, - index = 0, - spriteRotation; + var spriteRotation; for (var i = 0; i < amount; i++) { spriteRotation = children[startIndex + i].rotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - } - this.uploadToBuffer(this.rotationBuffer, this.rotation, 1 * 4, amount); + array[offset] = spriteRotation; + array[offset + stride] = spriteRotation; + array[offset + stride * 2] = spriteRotation; + array[offset + stride * 3] = spriteRotation; + + offset += stride * 4; + } }; -ParticleBuffer.prototype.uploadUvs = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadUvs = function (children,startIndex, amount, array, stride, offset) { - var uvs = this.uvs, - index = 0, - textureUvs; + var textureUvs; for (var i = 0; i < amount; i++) { @@ -221,46 +312,55 @@ if (textureUvs) { - uvs[index++] = textureUvs.x0; - uvs[index++] = textureUvs.y0; + array[offset] = textureUvs.x0; + array[offset + 1] = textureUvs.y0; - uvs[index++] = textureUvs.x1; - uvs[index++] = textureUvs.y1; + array[offset + stride] = textureUvs.x1; + array[offset + stride + 1] = textureUvs.y1; - uvs[index++] = textureUvs.x2; - uvs[index++] = textureUvs.y2; + array[offset + stride * 2] = textureUvs.x2; + array[offset + stride * 2 + 1] = textureUvs.y2; - uvs[index++] = textureUvs.x3; - uvs[index++] = textureUvs.y3; + array[offset + stride * 3] = textureUvs.x3; + array[offset + stride * 3 + 1] = textureUvs.y3; + + offset += stride * 4; } else { - index += 8; + //TODO you know this can be easier! + array[offset] = 0; + array[offset + 1] = 0; + + array[offset + stride] = 0; + array[offset + stride + 1] = 0; + + array[offset + stride * 2] = 0; + array[offset + stride * 2 + 1] = 0; + + array[offset + stride * 3] = 0; + array[offset + stride * 3 + 1] = 0; + + offset += stride * 4; } } - - this.uploadToBuffer(this.uvsBuffer, this.uvs, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadAlpha = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadAlpha = function (children,startIndex, amount, array, stride, offset) { - var alpha = this.alpha, - index = 0, - spriteAlpha; + var spriteAlpha; - for (var i = 0; i < amount; i++) { + for (var i = 0; i < amount; i++) { spriteAlpha = children[startIndex + i].alpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; + array[offset] = spriteAlpha; + array[offset + stride] = spriteAlpha; + array[offset + stride * 2] = spriteAlpha; + array[offset + stride * 3] = spriteAlpha; + + offset += stride * 4; } - - - this.uploadToBuffer(this.alphaBuffer, this.alpha, 1 * 4, amount); - }; ParticleBuffer.prototype.uploadToBuffer = function (buffer, data, dataSize, amount) @@ -284,27 +384,26 @@ * Starts a new sprite batch. * */ -ParticleBuffer.prototype.bind = function (shader) +ParticleBuffer.prototype.bind = function () { var gl = this.gl; + var i, property; - // this is the same for each shader? + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); + } - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - gl.vertexAttribPointer(shader.attributes.aPositionCoord, 2, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); - gl.bindBuffer(gl.ARRAY_BUFFER, this.rotationBuffer); - gl.vertexAttribPointer(shader.attributes.aRotation, 1, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer); - gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.alphaBuffer); - gl.vertexAttribPointer(shader.attributes.aColor, 1, gl.FLOAT, false, 0, 0); - + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); + } }; /** diff --git a/src/core/particles/webgl/ParticleRenderer.js b/src/core/particles/webgl/ParticleRenderer.js index 6b92ab8..009c65d 100644 --- a/src/core/particles/webgl/ParticleRenderer.js +++ b/src/core/particles/webgl/ParticleRenderer.js @@ -49,6 +49,7 @@ var numIndices = this.size * 6; + /** * Holds the indices * @@ -131,7 +132,7 @@ for (i = 0; i < totalSize; i += this.size) { - this.buffers.push( new ParticleBuffer(gl, this.size) ); + this.buffers.push( new ParticleBuffer(gl, this.size, this.shader) ); } for (i = 0; i < totalSize; i++) @@ -178,7 +179,7 @@ this.currentBatchSize++; /* - if (sprite._texture !== spriteCache.texture) + if(sprite._texture !== spriteCache.texture) { spriteCache.texture = sprite._texture; vertsDirty = true; @@ -187,7 +188,7 @@ } var sx = sprite.scale.x, sy = sprite.scale.y; - if (sx !== spriteCache.sX || sy !== spriteCache.sY) + if(sx !== spriteCache.sX || sy !== spriteCache.sY) { spriteCache.sX = sx; spriteCache.sY = sy; @@ -195,7 +196,7 @@ } var px = sprite.position.x, py = sprite.position.y - if (px !== spriteCache.pX || py !== spriteCache.pY) + if(px !== spriteCache.pX || py !== spriteCache.pY) { spriteCache.pX = px; spriteCache.pY = py; @@ -203,13 +204,13 @@ positionDirty = true; } - if (sprite.rotation !== spriteCache.rotation) + if(sprite.rotation !== spriteCache.rotation) { spriteCache.rotation = sprite.rotation; rotationDirty = true; } - if (sprite.alpha !== spriteCache.alpha) + if(sprite.alpha !== spriteCache.alpha) { spriteCache.alpha = sprite.alpha; alphaDirty = true; @@ -218,20 +219,37 @@ } /* - if (vertsDirty)this.uploadVerticies(children); - if (positionDirty)this.uploadPosition(children); - if (rotationDirty)this.uploadRotation(children); - if (uvsDirty)this.uploadUvs(children); - if (alphaDirty)this.uploadAlpha(children); + if(vertsDirty)this.uploadVerticies(children); + if(positionDirty)this.uploadPosition(children); + if(rotationDirty)this.uploadRotation(children); + if(uvsDirty)this.uploadUvs(children); + if(alphaDirty)this.uploadAlpha(children); */ - this.uploadPosition(children); - if (this._childCache !== children.length) + // this.uploadPosition(children); + + var uploadStatic = false; + + if(this._childCache !== children.length) { - this.refresh(children); + uploadStatic = true + // this.refresh(children); this._childCache = children.length; } - this.flush(); + var j = 0; + for (var i = 0; i < children.length; i+=this.size) + { + var amount = ( children.length - i ); + if(amount > this.size) + { + amount = this.size; + } + + this.buffers[j++].upload(children, i, amount, uploadStatic); + } + + var baseTexture = children[0]._texture.baseTexture; + this.renderBatch(baseTexture, children.length, 0); }; @@ -244,125 +262,6 @@ this.uploadAlpha(children); }; -ParticleRenderer.prototype.uploadVerticies = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadVerticies(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadPosition = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+= this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadPosition(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadRotation = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadRotation(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadUvs = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadUvs(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadAlpha = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadAlpha(children, i, amount); - } -}; - -/** - * Renders the content and empties the current batch. - * - */ -ParticleRenderer.prototype.flush = function () -{ - // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize === 0) - { - return; - } - - var nextTexture; - var batchSize = 0; - var start = 0; - - var currentBaseTexture = null; - - var sprite; - - for (var i = 0, j = this.currentBatchSize; i < j; i++) - { - - sprite = this.sprites[i]; - - nextTexture = sprite._texture.baseTexture; - - if (currentBaseTexture !== nextTexture) - { - this.renderBatch(currentBaseTexture, batchSize, start); - - start = i; - batchSize = 0; - currentBaseTexture = nextTexture; - } - - batchSize++; - } - - this.renderBatch(currentBaseTexture, batchSize, start); - - // then reset the batch! - this.currentBatchSize = 0; -}; /** * Draws the currently batches sprites. @@ -398,17 +297,16 @@ var amount = ( size - i) ; - if (amount > this.size) + if(amount > this.size) { amount = this.size; } - + // amount = 1; // now draw those suckas! - gl.drawElements(gl.TRIANGLES, this.size * 6, gl.UNSIGNED_SHORT, 0);//(startIndex % this.size) * 6 * 2); + gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0);//(startIndex % this.size) * 6 * 2); } - // increment the draw count this.renderer.drawCount++; }; diff --git a/src/core/particles/webgl/ParticleBuffer.js b/src/core/particles/webgl/ParticleBuffer.js index 918704c..c707654 100644 --- a/src/core/particles/webgl/ParticleBuffer.js +++ b/src/core/particles/webgl/ParticleBuffer.js @@ -17,7 +17,7 @@ * @namespace PIXI * @param renderer {WebGLRenderer} The renderer this sprite batch works for. */ -function ParticleBuffer(gl, size ) +function ParticleBuffer(gl, size, shader ) { this.gl = gl; @@ -42,23 +42,72 @@ */ this.size = size; - // the total number of bytes in our batch - var numVerts = this.size * 2 * this.vertByteSize; + this.verticiesData = { + attribute:shader.attributes.aVertexPosition, + dynamic:true, + size:2, + uploadFunction:this.uploadVerticies.bind(this), + offset:0 + }; - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new Float32Array(numVerts); - this.position = new Float32Array(numVerts); - this.rotation = new Float32Array(numVerts/2); - this.uvs = new Float32Array(numVerts); - this.alpha = new Float32Array(numVerts/2); + this.positionData = { + attribute:shader.attributes.aPositionCoord, + dynamic:true, + size:2, + uploadFunction:this.uploadPosition.bind(this), + offset:0 + }; + + this.rotationData = { + attribute:shader.attributes.aRotation, + dynamic:true, + size:1, + uploadFunction:this.uploadRotation.bind(this), + offset:0 + }; + + this.uvsData = { + attribute:shader.attributes.aTextureCoord, + dynamic:true, + size:2, + uploadFunction:this.uploadUvs.bind(this), + offset:0 + }; + + this.alphaData = { + attribute:shader.attributes.aColor, + dynamic:true, + size:1, + uploadFunction:this.uploadAlpha.bind(this), + offset:0 + }; + + this.dynamicProperties = [ + // this.verticiesData, + this.positionData + // this.rotationData, + // this.uvsData + // this.alphaData + ]; + + this.staticProperties = [ + this.verticiesData, + // this.positionData, + this.rotationData, + this.uvsData, + this.alphaData + ]; + + this.staticStride = 0; + this.staticBuffer = null; + this.staticData = null; + + this.dynamicStride = 0; + this.dynamicBuffer = null; + this.dynamicData = null; this.initBuffers(); - } ParticleBuffer.prototype.constructor = ParticleBuffer; @@ -73,46 +122,90 @@ ParticleBuffer.prototype.initBuffers = function () { var gl = this.gl; + var i; + var property; - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.positionBuffer = gl.createBuffer(); - this.rotationBuffer = gl.createBuffer(); - this.uvsBuffer = gl.createBuffer(); - this.alphaBuffer = gl.createBuffer(); + var dynamicOffset = 0; + this.dynamicStride = 0; - // upload the buffers.. - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.position, gl.DYNAMIC_DRAW); + if(property.dynamic) + { + property.offset = dynamicOffset; + dynamicOffset += property.size; + this.dynamicStride += property.size; + } + } - gl.bindBuffer(gl.ARRAY_BUFFER, this.rotationBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4); + this.dynamicBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.uvs, gl.DYNAMIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.alphaBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.alpha, gl.DYNAMIC_DRAW); -}; + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW); -ParticleBuffer.prototype.refresh = function(children, startIndex, amount) -{ - this.uploadVerticies(children,startIndex, amount); - this.uploadRotation(children,startIndex, amount); - this.uploadUvs(children,startIndex, amount); - this.uploadAlpha(children,startIndex, amount); + // static // + var staticOffset = 0; + this.staticStride = 0; + + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + + if(property.dynamic) + { + property.offset = staticOffset; + staticOffset += property.size; + this.staticStride += property.size; + } + } + + this.staticData = new Float32Array( this.size * this.staticStride * 4); + this.staticBuffer = gl.createBuffer(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW); }; -ParticleBuffer.prototype.uploadVerticies = function (children,startIndex, amount) +ParticleBuffer.prototype.upload = function(children, startIndex, amount, uploadStatic) { - var vertices = this.vertices, - index = 0, - sprite, + var i, property; + var gl = this.gl; + + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + } + + + + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dynamicData); + + if(uploadStatic) + { + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + } + + + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.staticData); + } +}; + +ParticleBuffer.prototype.uploadVerticies = function (children, startIndex, amount, array, stride, offset) +{ + //console.log(">>>", array) + //var vertices = this.vertices, + var sprite, texture, trim, sx, @@ -146,74 +239,72 @@ h1 = texture._frame.height * -sprite.anchor.y; } - vertices[index++] = w1 * sx; - vertices[index++] = h1 * sy; + // var pos = stride * i; - vertices[index++] = w0 * sx; - vertices[index++] = h1 * sy; + array[offset] = w1 * sx; + array[offset + 1] = h1 * sy; - vertices[index++] = w0 * sx; - vertices[index++] = h0 * sy; + array[offset + stride] = w0 * sx; + array[offset + stride + 1] = h1 * sy; - vertices[index++] = w1 * sx; - vertices[index++] = h0 * sy; + array[offset + stride * 2] = w0 * sx; + array[offset + stride * 2 + 1] = h0 * sy; + + array[offset + stride * 3] = w1 * sx; + array[offset + stride * 3 + 1] = h0 * sy; + + offset += stride * 4; } - this.uploadToBuffer(this.vertexBuffer, this.vertices, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadPosition = function (children,startIndex, amount) + +ParticleBuffer.prototype.uploadPosition = function (children,startIndex, amount, array, stride, offset) { - var position = this.position, - index = 0, - spritePosition; + var spritePosition; for (var i = 0; i < amount; i++) { spritePosition = children[startIndex + i].position; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset] = spritePosition.x; + array[offset + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride] = spritePosition.x; + array[offset + stride + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride * 2] = spritePosition.x; + array[offset + stride * 2 + 1] = spritePosition.y; - position[index++] = spritePosition.x; - position[index++] = spritePosition.y; + array[offset + stride * 3] = spritePosition.x; + array[offset + stride * 3 + 1] = spritePosition.y; + + offset += stride * 4; } - - // upload the verts to the buffer - this.uploadToBuffer(this.positionBuffer, this.position, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadRotation = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadRotation = function (children,startIndex, amount, array, stride, offset) { - var rotation = this.rotation, - index = 0, - spriteRotation; + var spriteRotation; for (var i = 0; i < amount; i++) { spriteRotation = children[startIndex + i].rotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - rotation[index++] = spriteRotation; - } - this.uploadToBuffer(this.rotationBuffer, this.rotation, 1 * 4, amount); + array[offset] = spriteRotation; + array[offset + stride] = spriteRotation; + array[offset + stride * 2] = spriteRotation; + array[offset + stride * 3] = spriteRotation; + + offset += stride * 4; + } }; -ParticleBuffer.prototype.uploadUvs = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadUvs = function (children,startIndex, amount, array, stride, offset) { - var uvs = this.uvs, - index = 0, - textureUvs; + var textureUvs; for (var i = 0; i < amount; i++) { @@ -221,46 +312,55 @@ if (textureUvs) { - uvs[index++] = textureUvs.x0; - uvs[index++] = textureUvs.y0; + array[offset] = textureUvs.x0; + array[offset + 1] = textureUvs.y0; - uvs[index++] = textureUvs.x1; - uvs[index++] = textureUvs.y1; + array[offset + stride] = textureUvs.x1; + array[offset + stride + 1] = textureUvs.y1; - uvs[index++] = textureUvs.x2; - uvs[index++] = textureUvs.y2; + array[offset + stride * 2] = textureUvs.x2; + array[offset + stride * 2 + 1] = textureUvs.y2; - uvs[index++] = textureUvs.x3; - uvs[index++] = textureUvs.y3; + array[offset + stride * 3] = textureUvs.x3; + array[offset + stride * 3 + 1] = textureUvs.y3; + + offset += stride * 4; } else { - index += 8; + //TODO you know this can be easier! + array[offset] = 0; + array[offset + 1] = 0; + + array[offset + stride] = 0; + array[offset + stride + 1] = 0; + + array[offset + stride * 2] = 0; + array[offset + stride * 2 + 1] = 0; + + array[offset + stride * 3] = 0; + array[offset + stride * 3 + 1] = 0; + + offset += stride * 4; } } - - this.uploadToBuffer(this.uvsBuffer, this.uvs, 2 * 4, amount); }; -ParticleBuffer.prototype.uploadAlpha = function (children,startIndex, amount) +ParticleBuffer.prototype.uploadAlpha = function (children,startIndex, amount, array, stride, offset) { - var alpha = this.alpha, - index = 0, - spriteAlpha; + var spriteAlpha; - for (var i = 0; i < amount; i++) { + for (var i = 0; i < amount; i++) { spriteAlpha = children[startIndex + i].alpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; - alpha[index++] = spriteAlpha; + array[offset] = spriteAlpha; + array[offset + stride] = spriteAlpha; + array[offset + stride * 2] = spriteAlpha; + array[offset + stride * 3] = spriteAlpha; + + offset += stride * 4; } - - - this.uploadToBuffer(this.alphaBuffer, this.alpha, 1 * 4, amount); - }; ParticleBuffer.prototype.uploadToBuffer = function (buffer, data, dataSize, amount) @@ -284,27 +384,26 @@ * Starts a new sprite batch. * */ -ParticleBuffer.prototype.bind = function (shader) +ParticleBuffer.prototype.bind = function () { var gl = this.gl; + var i, property; - // this is the same for each shader? + gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); + } - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - gl.vertexAttribPointer(shader.attributes.aPositionCoord, 2, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); - gl.bindBuffer(gl.ARRAY_BUFFER, this.rotationBuffer); - gl.vertexAttribPointer(shader.attributes.aRotation, 1, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer); - gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.alphaBuffer); - gl.vertexAttribPointer(shader.attributes.aColor, 1, gl.FLOAT, false, 0, 0); - + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); + } }; /** diff --git a/src/core/particles/webgl/ParticleRenderer.js b/src/core/particles/webgl/ParticleRenderer.js index 6b92ab8..009c65d 100644 --- a/src/core/particles/webgl/ParticleRenderer.js +++ b/src/core/particles/webgl/ParticleRenderer.js @@ -49,6 +49,7 @@ var numIndices = this.size * 6; + /** * Holds the indices * @@ -131,7 +132,7 @@ for (i = 0; i < totalSize; i += this.size) { - this.buffers.push( new ParticleBuffer(gl, this.size) ); + this.buffers.push( new ParticleBuffer(gl, this.size, this.shader) ); } for (i = 0; i < totalSize; i++) @@ -178,7 +179,7 @@ this.currentBatchSize++; /* - if (sprite._texture !== spriteCache.texture) + if(sprite._texture !== spriteCache.texture) { spriteCache.texture = sprite._texture; vertsDirty = true; @@ -187,7 +188,7 @@ } var sx = sprite.scale.x, sy = sprite.scale.y; - if (sx !== spriteCache.sX || sy !== spriteCache.sY) + if(sx !== spriteCache.sX || sy !== spriteCache.sY) { spriteCache.sX = sx; spriteCache.sY = sy; @@ -195,7 +196,7 @@ } var px = sprite.position.x, py = sprite.position.y - if (px !== spriteCache.pX || py !== spriteCache.pY) + if(px !== spriteCache.pX || py !== spriteCache.pY) { spriteCache.pX = px; spriteCache.pY = py; @@ -203,13 +204,13 @@ positionDirty = true; } - if (sprite.rotation !== spriteCache.rotation) + if(sprite.rotation !== spriteCache.rotation) { spriteCache.rotation = sprite.rotation; rotationDirty = true; } - if (sprite.alpha !== spriteCache.alpha) + if(sprite.alpha !== spriteCache.alpha) { spriteCache.alpha = sprite.alpha; alphaDirty = true; @@ -218,20 +219,37 @@ } /* - if (vertsDirty)this.uploadVerticies(children); - if (positionDirty)this.uploadPosition(children); - if (rotationDirty)this.uploadRotation(children); - if (uvsDirty)this.uploadUvs(children); - if (alphaDirty)this.uploadAlpha(children); + if(vertsDirty)this.uploadVerticies(children); + if(positionDirty)this.uploadPosition(children); + if(rotationDirty)this.uploadRotation(children); + if(uvsDirty)this.uploadUvs(children); + if(alphaDirty)this.uploadAlpha(children); */ - this.uploadPosition(children); - if (this._childCache !== children.length) + // this.uploadPosition(children); + + var uploadStatic = false; + + if(this._childCache !== children.length) { - this.refresh(children); + uploadStatic = true + // this.refresh(children); this._childCache = children.length; } - this.flush(); + var j = 0; + for (var i = 0; i < children.length; i+=this.size) + { + var amount = ( children.length - i ); + if(amount > this.size) + { + amount = this.size; + } + + this.buffers[j++].upload(children, i, amount, uploadStatic); + } + + var baseTexture = children[0]._texture.baseTexture; + this.renderBatch(baseTexture, children.length, 0); }; @@ -244,125 +262,6 @@ this.uploadAlpha(children); }; -ParticleRenderer.prototype.uploadVerticies = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadVerticies(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadPosition = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+= this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadPosition(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadRotation = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadRotation(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadUvs = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadUvs(children, i, amount); - } -}; - -ParticleRenderer.prototype.uploadAlpha = function (children) -{ - var j = 0; - for (var i = 0; i < children.length; i+=this.size) - { - var amount = ( children.length - i ); - if (amount > this.size) - { - amount = this.size; - } - - this.buffers[j++].uploadAlpha(children, i, amount); - } -}; - -/** - * Renders the content and empties the current batch. - * - */ -ParticleRenderer.prototype.flush = function () -{ - // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize === 0) - { - return; - } - - var nextTexture; - var batchSize = 0; - var start = 0; - - var currentBaseTexture = null; - - var sprite; - - for (var i = 0, j = this.currentBatchSize; i < j; i++) - { - - sprite = this.sprites[i]; - - nextTexture = sprite._texture.baseTexture; - - if (currentBaseTexture !== nextTexture) - { - this.renderBatch(currentBaseTexture, batchSize, start); - - start = i; - batchSize = 0; - currentBaseTexture = nextTexture; - } - - batchSize++; - } - - this.renderBatch(currentBaseTexture, batchSize, start); - - // then reset the batch! - this.currentBatchSize = 0; -}; /** * Draws the currently batches sprites. @@ -398,17 +297,16 @@ var amount = ( size - i) ; - if (amount > this.size) + if(amount > this.size) { amount = this.size; } - + // amount = 1; // now draw those suckas! - gl.drawElements(gl.TRIANGLES, this.size * 6, gl.UNSIGNED_SHORT, 0);//(startIndex % this.size) * 6 * 2); + gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0);//(startIndex % this.size) * 6 * 2); } - // increment the draw count this.renderer.drawCount++; }; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index eaa78df..ed50aac 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -127,6 +127,8 @@ WebGLRenderer.prototype = Object.create(SystemRenderer); WebGLRenderer.prototype.constructor = WebGLRenderer; module.exports = WebGLRenderer; +utils.pluginTarget.mixin(WebGLRenderer); +utils.eventTarget.mixin(WebGLRenderer.prototype); WebGLRenderer.glContextId = 0;