diff --git a/src/core/index.js b/src/core/index.js index a80f03b..37f11db 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -21,9 +21,9 @@ // sprites Sprite: require('./sprites/Sprite'), CanvasSpriteRender: require('./sprites/canvas/CanvasSpriteRenderer'), - //ParticleContainer: require('./particles/ParticleContainer'), + ParticleContainer: require('./particles/ParticleContainer'), SpriteRenderer: require('./sprites/webgl/SpriteRenderer'), - //ParticleRenderer: require('./particles/webgl/ParticleRenderer'), + ParticleRenderer: require('./particles/webgl/ParticleRenderer'), // text Text: require('./text/Text'), diff --git a/src/core/index.js b/src/core/index.js index a80f03b..37f11db 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -21,9 +21,9 @@ // sprites Sprite: require('./sprites/Sprite'), CanvasSpriteRender: require('./sprites/canvas/CanvasSpriteRenderer'), - //ParticleContainer: require('./particles/ParticleContainer'), + ParticleContainer: require('./particles/ParticleContainer'), SpriteRenderer: require('./sprites/webgl/SpriteRenderer'), - //ParticleRenderer: require('./particles/webgl/ParticleRenderer'), + ParticleRenderer: require('./particles/webgl/ParticleRenderer'), // text Text: require('./text/Text'), diff --git a/src/core/particles/ParticleContainer.js b/src/core/particles/ParticleContainer.js index 3611c9b..e992580 100644 --- a/src/core/particles/ParticleContainer.js +++ b/src/core/particles/ParticleContainer.js @@ -76,7 +76,7 @@ * @member {WebGLBuffer} * @private */ - this._buffers = null; + this._glBuffers = []; /** * @member {number} @@ -107,6 +107,8 @@ */ this.roundPixels = true; + this.baseTexture = null; + this.setProperties(properties); } @@ -156,6 +158,19 @@ return; } + + if(!this.baseTexture) + { + this.baseTexture = this.children[0]._texture.baseTexture; + if(!this.baseTexture.hasLoaded) + { + this.baseTexture.once('update', function(){ + this.onChildrenChange(0); + }, this) + } + } + + renderer.setObjectRenderer( renderer.plugins.particle ); renderer.plugins.particle.render( this ); }; diff --git a/src/core/index.js b/src/core/index.js index a80f03b..37f11db 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -21,9 +21,9 @@ // sprites Sprite: require('./sprites/Sprite'), CanvasSpriteRender: require('./sprites/canvas/CanvasSpriteRenderer'), - //ParticleContainer: require('./particles/ParticleContainer'), + ParticleContainer: require('./particles/ParticleContainer'), SpriteRenderer: require('./sprites/webgl/SpriteRenderer'), - //ParticleRenderer: require('./particles/webgl/ParticleRenderer'), + ParticleRenderer: require('./particles/webgl/ParticleRenderer'), // text Text: require('./text/Text'), diff --git a/src/core/particles/ParticleContainer.js b/src/core/particles/ParticleContainer.js index 3611c9b..e992580 100644 --- a/src/core/particles/ParticleContainer.js +++ b/src/core/particles/ParticleContainer.js @@ -76,7 +76,7 @@ * @member {WebGLBuffer} * @private */ - this._buffers = null; + this._glBuffers = []; /** * @member {number} @@ -107,6 +107,8 @@ */ this.roundPixels = true; + this.baseTexture = null; + this.setProperties(properties); } @@ -156,6 +158,19 @@ return; } + + if(!this.baseTexture) + { + this.baseTexture = this.children[0]._texture.baseTexture; + if(!this.baseTexture.hasLoaded) + { + this.baseTexture.once('update', function(){ + this.onChildrenChange(0); + }, this) + } + } + + renderer.setObjectRenderer( renderer.plugins.particle ); renderer.plugins.particle.render( this ); }; diff --git a/src/core/particles/webgl/ParticleBuffer.js b/src/core/particles/webgl/ParticleBuffer.js index 316cd4f..2bfc4ea 100644 --- a/src/core/particles/webgl/ParticleBuffer.js +++ b/src/core/particles/webgl/ParticleBuffer.js @@ -1,4 +1,6 @@ - +var glCore = require('pixi-gl-core'), + createIndicesForQuads = require('../../utils/createIndicesForQuads'); + /** * @author Mat Groves * @@ -102,6 +104,17 @@ var property; var dynamicOffset = 0; + + + /** + * Holds the indices of the geometry (quads) to draw + * + * @member {Uint16Array} + */ + this.indices = createIndicesForQuads(this.size) + this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); + + this.dynamicStride = 0; for (i = 0; i < this.dynamicProperties.length; i++) @@ -114,11 +127,7 @@ } this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4); - this.dynamicBuffer = gl.createBuffer(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW); - + this.dynamicBuffer = glCore.GLBuffer.createVertexBuffer(gl, this.dynamicData, gl.STREAM_DRAW); // static // var staticOffset = 0; @@ -131,13 +140,28 @@ property.offset = staticOffset; staticOffset += property.size; this.staticStride += property.size; + + } this.staticData = new Float32Array( this.size * this.staticStride * 4); - this.staticBuffer = gl.createBuffer(); + this.staticBuffer = glCore.GLBuffer.createVertexBuffer(gl, this.staticData, gl.STATIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW); + + this.vao = new glCore.VertexArrayObject(gl) + .addIndex(this.indexBuffer); + + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); + } + + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); + } }; /** @@ -154,8 +178,7 @@ 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); + this.dynamicBuffer.upload(); }; /** @@ -172,8 +195,7 @@ 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); + this.staticBuffer.upload(); }; /** @@ -185,21 +207,7 @@ var gl = this.gl; var i, property; - gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - - 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.staticBuffer); - - 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); - } + this.vao.bind(); }; /** @@ -210,9 +218,9 @@ { this.dynamicProperties = null; this.dynamicData = null; - this.gl.deleteBuffer(this.dynamicBuffer); + this.dynamicBuffer.destroy(); this.staticProperties = null; this.staticData = null; - this.gl.deleteBuffer(this.staticBuffer); + this.staticBuffer.destroy(); }; diff --git a/src/core/index.js b/src/core/index.js index a80f03b..37f11db 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -21,9 +21,9 @@ // sprites Sprite: require('./sprites/Sprite'), CanvasSpriteRender: require('./sprites/canvas/CanvasSpriteRenderer'), - //ParticleContainer: require('./particles/ParticleContainer'), + ParticleContainer: require('./particles/ParticleContainer'), SpriteRenderer: require('./sprites/webgl/SpriteRenderer'), - //ParticleRenderer: require('./particles/webgl/ParticleRenderer'), + ParticleRenderer: require('./particles/webgl/ParticleRenderer'), // text Text: require('./text/Text'), diff --git a/src/core/particles/ParticleContainer.js b/src/core/particles/ParticleContainer.js index 3611c9b..e992580 100644 --- a/src/core/particles/ParticleContainer.js +++ b/src/core/particles/ParticleContainer.js @@ -76,7 +76,7 @@ * @member {WebGLBuffer} * @private */ - this._buffers = null; + this._glBuffers = []; /** * @member {number} @@ -107,6 +107,8 @@ */ this.roundPixels = true; + this.baseTexture = null; + this.setProperties(properties); } @@ -156,6 +158,19 @@ return; } + + if(!this.baseTexture) + { + this.baseTexture = this.children[0]._texture.baseTexture; + if(!this.baseTexture.hasLoaded) + { + this.baseTexture.once('update', function(){ + this.onChildrenChange(0); + }, this) + } + } + + renderer.setObjectRenderer( renderer.plugins.particle ); renderer.plugins.particle.render( this ); }; diff --git a/src/core/particles/webgl/ParticleBuffer.js b/src/core/particles/webgl/ParticleBuffer.js index 316cd4f..2bfc4ea 100644 --- a/src/core/particles/webgl/ParticleBuffer.js +++ b/src/core/particles/webgl/ParticleBuffer.js @@ -1,4 +1,6 @@ - +var glCore = require('pixi-gl-core'), + createIndicesForQuads = require('../../utils/createIndicesForQuads'); + /** * @author Mat Groves * @@ -102,6 +104,17 @@ var property; var dynamicOffset = 0; + + + /** + * Holds the indices of the geometry (quads) to draw + * + * @member {Uint16Array} + */ + this.indices = createIndicesForQuads(this.size) + this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); + + this.dynamicStride = 0; for (i = 0; i < this.dynamicProperties.length; i++) @@ -114,11 +127,7 @@ } this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4); - this.dynamicBuffer = gl.createBuffer(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW); - + this.dynamicBuffer = glCore.GLBuffer.createVertexBuffer(gl, this.dynamicData, gl.STREAM_DRAW); // static // var staticOffset = 0; @@ -131,13 +140,28 @@ property.offset = staticOffset; staticOffset += property.size; this.staticStride += property.size; + + } this.staticData = new Float32Array( this.size * this.staticStride * 4); - this.staticBuffer = gl.createBuffer(); + this.staticBuffer = glCore.GLBuffer.createVertexBuffer(gl, this.staticData, gl.STATIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW); + + this.vao = new glCore.VertexArrayObject(gl) + .addIndex(this.indexBuffer); + + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); + } + + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); + } }; /** @@ -154,8 +178,7 @@ 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); + this.dynamicBuffer.upload(); }; /** @@ -172,8 +195,7 @@ 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); + this.staticBuffer.upload(); }; /** @@ -185,21 +207,7 @@ var gl = this.gl; var i, property; - gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - - 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.staticBuffer); - - 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); - } + this.vao.bind(); }; /** @@ -210,9 +218,9 @@ { this.dynamicProperties = null; this.dynamicData = null; - this.gl.deleteBuffer(this.dynamicBuffer); + this.dynamicBuffer.destroy(); this.staticProperties = null; this.staticData = null; - this.gl.deleteBuffer(this.staticBuffer); + this.staticBuffer.destroy(); }; diff --git a/src/core/particles/webgl/ParticleRenderer.js b/src/core/particles/webgl/ParticleRenderer.js index 6e7b9c0..8fc97c6 100644 --- a/src/core/particles/webgl/ParticleRenderer.js +++ b/src/core/particles/webgl/ParticleRenderer.js @@ -33,23 +33,6 @@ var numIndices = 98304; /** - * Holds the indices - * - * @member {Uint16Array} - */ - this.indices = new Uint16Array(numIndices); - - for (var i=0, j=0; i < numIndices; i += 6, j += 4) - { - this.indices[i + 0] = j + 0; - this.indices[i + 1] = j + 1; - this.indices[i + 2] = j + 2; - this.indices[i + 3] = j + 0; - this.indices[i + 4] = j + 2; - this.indices[i + 5] = j + 3; - } - - /** * The default shader that is used if a sprite doesn't have a more specific one. * * @member {PIXI.Shader} @@ -78,21 +61,12 @@ */ ParticleRenderer.prototype.onContextChange = function () { - return; var gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; // setup default shader - this.shader = new ParticleShader(this.renderer.shaderManager); - - this.indexBuffer = gl.createBuffer(); - - // 65535 is max index, so 65535 / 6 = 10922. - - //upload the index data - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + this.shader = new ParticleShader(gl); this.properties = [ // verticesData @@ -131,6 +105,7 @@ offset:0 } ]; + }; /** @@ -139,18 +114,7 @@ */ ParticleRenderer.prototype.start = function () { - var gl = this.renderer.gl; - - // bind the main texture - gl.activeTexture(gl.TEXTURE0); - - // bind the buffers - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - var shader = this.shader; - - this.renderer.shaderManager.setShader(shader); + this.renderer.bindShader(this.shader); }; @@ -175,42 +139,27 @@ totalChildren = maxSize; } - if(!container._buffers) + var buffers = container._glBuffers[this.renderer.CONTEXT_UID]; + + if(!buffers) { - container._buffers = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); } // if the uvs have not updated then no point rendering just yet! - this.renderer.blendModeManager.setBlendMode(container.blendMode); + this.renderer.setBlendMode(container.blendMode); var gl = this.renderer.gl; - var m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer.currentRenderTarget.projectionMatrix ); - gl.uniformMatrix3fv(this.shader.uniforms.projectionMatrix._location, false, m.toArray(true)); - gl.uniform1f(this.shader.uniforms.uAlpha._location, container.worldAlpha); + // var m = container.worldTransform.copy( this.tempMatrix ); +// m.prepend( this.renderer.currentRenderTarget.projectionMatrix ); + this.shader.uniforms.uAlpha = container.worldAlpha; // make sure the texture is bound.. var baseTexture = children[0]._texture.baseTexture; - if (!baseTexture._glTextures[this.CONTEXT_UID]) - { - // if the texture has not updated then lets not upload any static properties - if(!this.renderer.updateTexture(baseTexture)) - { - return; - } - - if(!container._properties[0] || !container._properties[3]) - { - container._bufferToUpdate = 0; - } - } - else - { - gl.bindTexture(gl.TEXTURE_2D, baseTexture._glTextures[this.CONTEXT_UID]); - } + this.renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. for (var i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) @@ -221,7 +170,7 @@ amount = batchSize; } - var buffer = container._buffers[j]; + var buffer = buffers[j]; // we always upload the dynamic buffer.uploadDynamic(children, i, amount); @@ -234,11 +183,13 @@ } // bind the buffer - buffer.bind( this.shader ); + buffer.vao.bind( this.shader ) + .draw(gl.TRIANGLES, amount * 6) + .unbind(); // now draw those suckas! - gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - this.renderer.drawCount++; + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } }; diff --git a/src/core/index.js b/src/core/index.js index a80f03b..37f11db 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -21,9 +21,9 @@ // sprites Sprite: require('./sprites/Sprite'), CanvasSpriteRender: require('./sprites/canvas/CanvasSpriteRenderer'), - //ParticleContainer: require('./particles/ParticleContainer'), + ParticleContainer: require('./particles/ParticleContainer'), SpriteRenderer: require('./sprites/webgl/SpriteRenderer'), - //ParticleRenderer: require('./particles/webgl/ParticleRenderer'), + ParticleRenderer: require('./particles/webgl/ParticleRenderer'), // text Text: require('./text/Text'), diff --git a/src/core/particles/ParticleContainer.js b/src/core/particles/ParticleContainer.js index 3611c9b..e992580 100644 --- a/src/core/particles/ParticleContainer.js +++ b/src/core/particles/ParticleContainer.js @@ -76,7 +76,7 @@ * @member {WebGLBuffer} * @private */ - this._buffers = null; + this._glBuffers = []; /** * @member {number} @@ -107,6 +107,8 @@ */ this.roundPixels = true; + this.baseTexture = null; + this.setProperties(properties); } @@ -156,6 +158,19 @@ return; } + + if(!this.baseTexture) + { + this.baseTexture = this.children[0]._texture.baseTexture; + if(!this.baseTexture.hasLoaded) + { + this.baseTexture.once('update', function(){ + this.onChildrenChange(0); + }, this) + } + } + + renderer.setObjectRenderer( renderer.plugins.particle ); renderer.plugins.particle.render( this ); }; diff --git a/src/core/particles/webgl/ParticleBuffer.js b/src/core/particles/webgl/ParticleBuffer.js index 316cd4f..2bfc4ea 100644 --- a/src/core/particles/webgl/ParticleBuffer.js +++ b/src/core/particles/webgl/ParticleBuffer.js @@ -1,4 +1,6 @@ - +var glCore = require('pixi-gl-core'), + createIndicesForQuads = require('../../utils/createIndicesForQuads'); + /** * @author Mat Groves * @@ -102,6 +104,17 @@ var property; var dynamicOffset = 0; + + + /** + * Holds the indices of the geometry (quads) to draw + * + * @member {Uint16Array} + */ + this.indices = createIndicesForQuads(this.size) + this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); + + this.dynamicStride = 0; for (i = 0; i < this.dynamicProperties.length; i++) @@ -114,11 +127,7 @@ } this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4); - this.dynamicBuffer = gl.createBuffer(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW); - + this.dynamicBuffer = glCore.GLBuffer.createVertexBuffer(gl, this.dynamicData, gl.STREAM_DRAW); // static // var staticOffset = 0; @@ -131,13 +140,28 @@ property.offset = staticOffset; staticOffset += property.size; this.staticStride += property.size; + + } this.staticData = new Float32Array( this.size * this.staticStride * 4); - this.staticBuffer = gl.createBuffer(); + this.staticBuffer = glCore.GLBuffer.createVertexBuffer(gl, this.staticData, gl.STATIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW); + + this.vao = new glCore.VertexArrayObject(gl) + .addIndex(this.indexBuffer); + + for (i = 0; i < this.dynamicProperties.length; i++) + { + property = this.dynamicProperties[i]; + this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); + } + + for (i = 0; i < this.staticProperties.length; i++) + { + property = this.staticProperties[i]; + this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); + } }; /** @@ -154,8 +178,7 @@ 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); + this.dynamicBuffer.upload(); }; /** @@ -172,8 +195,7 @@ 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); + this.staticBuffer.upload(); }; /** @@ -185,21 +207,7 @@ var gl = this.gl; var i, property; - gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer); - - 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.staticBuffer); - - 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); - } + this.vao.bind(); }; /** @@ -210,9 +218,9 @@ { this.dynamicProperties = null; this.dynamicData = null; - this.gl.deleteBuffer(this.dynamicBuffer); + this.dynamicBuffer.destroy(); this.staticProperties = null; this.staticData = null; - this.gl.deleteBuffer(this.staticBuffer); + this.staticBuffer.destroy(); }; diff --git a/src/core/particles/webgl/ParticleRenderer.js b/src/core/particles/webgl/ParticleRenderer.js index 6e7b9c0..8fc97c6 100644 --- a/src/core/particles/webgl/ParticleRenderer.js +++ b/src/core/particles/webgl/ParticleRenderer.js @@ -33,23 +33,6 @@ var numIndices = 98304; /** - * Holds the indices - * - * @member {Uint16Array} - */ - this.indices = new Uint16Array(numIndices); - - for (var i=0, j=0; i < numIndices; i += 6, j += 4) - { - this.indices[i + 0] = j + 0; - this.indices[i + 1] = j + 1; - this.indices[i + 2] = j + 2; - this.indices[i + 3] = j + 0; - this.indices[i + 4] = j + 2; - this.indices[i + 5] = j + 3; - } - - /** * The default shader that is used if a sprite doesn't have a more specific one. * * @member {PIXI.Shader} @@ -78,21 +61,12 @@ */ ParticleRenderer.prototype.onContextChange = function () { - return; var gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; // setup default shader - this.shader = new ParticleShader(this.renderer.shaderManager); - - this.indexBuffer = gl.createBuffer(); - - // 65535 is max index, so 65535 / 6 = 10922. - - //upload the index data - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + this.shader = new ParticleShader(gl); this.properties = [ // verticesData @@ -131,6 +105,7 @@ offset:0 } ]; + }; /** @@ -139,18 +114,7 @@ */ ParticleRenderer.prototype.start = function () { - var gl = this.renderer.gl; - - // bind the main texture - gl.activeTexture(gl.TEXTURE0); - - // bind the buffers - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - var shader = this.shader; - - this.renderer.shaderManager.setShader(shader); + this.renderer.bindShader(this.shader); }; @@ -175,42 +139,27 @@ totalChildren = maxSize; } - if(!container._buffers) + var buffers = container._glBuffers[this.renderer.CONTEXT_UID]; + + if(!buffers) { - container._buffers = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); } // if the uvs have not updated then no point rendering just yet! - this.renderer.blendModeManager.setBlendMode(container.blendMode); + this.renderer.setBlendMode(container.blendMode); var gl = this.renderer.gl; - var m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer.currentRenderTarget.projectionMatrix ); - gl.uniformMatrix3fv(this.shader.uniforms.projectionMatrix._location, false, m.toArray(true)); - gl.uniform1f(this.shader.uniforms.uAlpha._location, container.worldAlpha); + // var m = container.worldTransform.copy( this.tempMatrix ); +// m.prepend( this.renderer.currentRenderTarget.projectionMatrix ); + this.shader.uniforms.uAlpha = container.worldAlpha; // make sure the texture is bound.. var baseTexture = children[0]._texture.baseTexture; - if (!baseTexture._glTextures[this.CONTEXT_UID]) - { - // if the texture has not updated then lets not upload any static properties - if(!this.renderer.updateTexture(baseTexture)) - { - return; - } - - if(!container._properties[0] || !container._properties[3]) - { - container._bufferToUpdate = 0; - } - } - else - { - gl.bindTexture(gl.TEXTURE_2D, baseTexture._glTextures[this.CONTEXT_UID]); - } + this.renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. for (var i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) @@ -221,7 +170,7 @@ amount = batchSize; } - var buffer = container._buffers[j]; + var buffer = buffers[j]; // we always upload the dynamic buffer.uploadDynamic(children, i, amount); @@ -234,11 +183,13 @@ } // bind the buffer - buffer.bind( this.shader ); + buffer.vao.bind( this.shader ) + .draw(gl.TRIANGLES, amount * 6) + .unbind(); // now draw those suckas! - gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - this.renderer.drawCount++; + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } }; diff --git a/src/core/particles/webgl/ParticleShader.js b/src/core/particles/webgl/ParticleShader.js index e50e3c5..950e612 100644 --- a/src/core/particles/webgl/ParticleShader.js +++ b/src/core/particles/webgl/ParticleShader.js @@ -1,4 +1,4 @@ -var TextureShader = require('../../renderers/webgl/shaders/TextureShader'); +var Shader = require('pixi-gl-core').GLShader; /** * @class @@ -6,10 +6,10 @@ * @memberof PIXI * @param shaderManager {ShaderManager} The webgl shader manager this shader works for. */ -function ParticleShader(shaderManager) +function ParticleShader(gl) { - TextureShader.call(this, - shaderManager, + Shader.call(this, + gl, // vertex shader [ 'attribute vec2 aVertexPosition;', @@ -53,24 +53,14 @@ ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}' - ].join('\n'), - // custom uniforms - { - uAlpha: { type: '1f', value: 1 } - }, - // custom attributes - { - aPositionCoord: 0, - // aScale: 0, - aRotation: 0 - } + ].join('\n') ); // TEMP HACK } -ParticleShader.prototype = Object.create(TextureShader.prototype); +ParticleShader.prototype = Object.create(Shader.prototype); ParticleShader.prototype.constructor = ParticleShader; module.exports = ParticleShader;