Update BlitterBatch

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: 'a3087720-dd97-11e6-a4f9-9d0768ce91d7'
+build: 'bc213d90-de6f-11e6-bd32-974da4fb460f'
 };
 module.exports = CHECKSUM;

v3/src/renderer/webgl/WebGLRenderer.js

@@ -7,6 +7,7 @@
 
 var CONST = require('../../const');
 var CreateEmptyTexture = require('./utils/CreateEmptyTexture');
+var BlitterBatch =  require('./batches/blitter/BlitterBatch');
 
 var WebGLRenderer = function (game)
 {
@@ -44,6 +45,9 @@ var WebGLRenderer = function (game)
     this.gl = null;
 
     this.init();
+    this.blitterBatch = new BlitterBatch(game, this.gl, this);
+    this.batch = null;
+    this.currentTexture2D = null;
 };
 
 WebGLRenderer.prototype.constructor = WebGLRenderer;
@@ -127,6 +131,12 @@ WebGLRenderer.prototype = {
         ];
     },
 
+    setTexture2D: function(texture2D)
+    {
+        this.currentTexture = texture2D;
+        this.batch.dirty = true;
+    },
+
     resize: function (width, height)
     {
         var res = this.game.config.resolution;
@@ -177,38 +187,44 @@ WebGLRenderer.prototype = {
 
         var gl = this.gl;
 
-        /*
+        
 
         //  This is the old render loop - add what you need here to replace it,
         //  but please allow each State to render to its own Quad FBO
 
-        var fbo = state.sys.fbo;
+        //var fbo = state.sys.fbo;
 
-        fbo.activate();
+        //fbo.activate();
 
         //  clear is needed for the FBO, otherwise corruption ...
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.setBlendMode(CONST.blendModes.NORMAL);
+        //this.setBlendMode(CONST.blendModes.NORMAL);
 
-        this.batch.start();
+        //this.batch.start();
 
         //  Could move to the State Systems or MainLoop
-        this.game.state.renderChildren(this, state, interpolationPercentage);
+        for (var c = 0; c < state.sys.children.list.length; c++)
+        {
+            var child = state.sys.children.list[c];
 
-        this.batch.stop();
+            child.renderWebGL(this, child, interpolationPercentage);
+        }
+        this.batch.flush();
+
+        //this.batch.stop();
 
         //  Call state.render here, so we can do some extra shizzle on the top
         //  Maybe pass in the FBO texture too?
 
-        fbo.render(null);
+        //fbo.render(null);
 
         //  Unbind the fbo texture and replace it with an empty texture.
         //  If we forget this we corrupt the main context texture!
         //  or get `RENDER WARNING: there is no texture bound to the unit 0` spam in the console
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture);
+        //gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture);
 
-        */
+        
 
         // console.log('%c render end ', 'color: #ffffff; background: #ff0000;');
 
@@ -218,8 +234,8 @@ WebGLRenderer.prototype = {
     destroy: function ()
     {
         this.gl = null;
-    }
-
+    },
+    createFBO: function () {}
 };
 
 module.exports = WebGLRenderer;

v3/src/renderer/webgl/batches/blitter/BlitterBatch.js

@@ -12,7 +12,7 @@ var VertexArray = require('../../utils/VertexArray');
 var PHASER_CONST = require('../../../../const');
 var CONST = require('./const');
 
-var ParticleRenderer = function (game)
+var BlitterBatch = function (game, gl, manager)
 {
     this.game = game;
     this.type = PHASER_CONST.WEBGL;
@@ -22,7 +22,7 @@ var ParticleRenderer = function (game)
     this.width = game.config.width * game.config.resolution;
     this.height = game.config.height * game.config.resolution;
 
-    this.glContext = null;
+    this.glContext = gl;
 
     this.maxParticles = null;
 
@@ -57,78 +57,73 @@ var ParticleRenderer = function (game)
         }
     };
 
-    this.init();
+    this.manager = manager;
+    this.dirty = false;
+
+    this.init(this.glContext);
 };
 
-ParticleRenderer.prototype.constructor = ParticleRenderer;
+BlitterBatch.prototype.constructor = BlitterBatch;
 
-ParticleRenderer.prototype = {
+BlitterBatch.prototype = {
 
-    init: function ()
+    init: function (gl)
     {
-        if (this.glContext === null)
-        {
-            var gl = this.view.getContext('webgl', this.config.WebGLContextOptions) || this.view.getContext('experimental-webgl', this.config.WebGLContextOptions);
 
-            var vertexDataBuffer = new VertexBuffer(CONST.VERTEX_SIZE * CONST.PARTICLE_VERTEX_COUNT * CONST.MAX_PARTICLES);
+        var vertexDataBuffer = new VertexBuffer(CONST.VERTEX_SIZE * CONST.PARTICLE_VERTEX_COUNT * CONST.MAX_PARTICLES);
 
-            var indexDataBuffer = new IndexBuffer(CONST.INDEX_SIZE * CONST.PARTICLE_INDEX_COUNT * CONST.MAX_PARTICLES);
+        var indexDataBuffer = new IndexBuffer(CONST.INDEX_SIZE * CONST.PARTICLE_INDEX_COUNT * CONST.MAX_PARTICLES);
 
-            var vertShader = CreateShader(gl, CONST.VERTEX_SHADER_SOURCE, gl.VERTEX_SHADER);
-            var fragShader = CreateShader(gl, CONST.FRAGMENT_SHADER_SOURCE, gl.FRAGMENT_SHADER);
-            var program = CreateProgram(gl, vertShader, fragShader);
+        var vertShader = CreateShader(gl, CONST.VERTEX_SHADER_SOURCE, gl.VERTEX_SHADER);
+        var fragShader = CreateShader(gl, CONST.FRAGMENT_SHADER_SOURCE, gl.FRAGMENT_SHADER);
+        var program = CreateProgram(gl, vertShader, fragShader);
 
-            var indexBufferObject = CreateBuffer(gl, gl.ELEMENT_ARRAY_BUFFER, gl.STATIC_DRAW, null, indexDataBuffer.getByteCapacity());
+        var indexBufferObject = CreateBuffer(gl, gl.ELEMENT_ARRAY_BUFFER, gl.STATIC_DRAW, null, indexDataBuffer.getByteCapacity());
 
-            var attribArray = [
-                CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
-                CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8)
-            ];
+        var attribArray = [
+            CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
+            CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8)
+        ];
 
-            var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
+        var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
 
-            var viewMatrixLocation = gl.getUniformLocation(program, 'u_view_matrix');
+        var viewMatrixLocation = gl.getUniformLocation(program, 'u_view_matrix');
 
-            this.vertexDataBuffer = vertexDataBuffer;
-            this.indexDataBuffer = indexDataBuffer;
+        this.vertexDataBuffer = vertexDataBuffer;
+        this.indexDataBuffer = indexDataBuffer;
 
-            this.vertShader = vertShader;
-            this.fragShader = fragShader;
-            this.program = program;
+        this.vertShader = vertShader;
+        this.fragShader = fragShader;
+        this.program = program;
 
-            this.indexBufferObject = indexBufferObject;
-            this.vertexArray = vertexArray;
+        this.indexBufferObject = indexBufferObject;
+        this.vertexArray = vertexArray;
 
-            this.glContext = gl;
 
-            this.viewMatrixLocation = viewMatrixLocation;
+        this.viewMatrixLocation = viewMatrixLocation;
            
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferObject);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferObject);
 
-            var indexBuffer = indexDataBuffer.wordView;
-            var max = CONST.MAX_PARTICLES * CONST.PARTICLE_INDEX_COUNT;
+        var indexBuffer = indexDataBuffer.wordView;
+        var max = CONST.MAX_PARTICLES * CONST.PARTICLE_INDEX_COUNT;
 
             // Populate the index buffer only once
-            for (var indexA = 0, indexB = 0; indexA < max; indexA += CONST.PARTICLE_INDEX_COUNT, indexB += CONST.PARTICLE_VERTEX_COUNT)
+        for (var indexA = 0, indexB = 0; indexA < max; indexA += CONST.PARTICLE_INDEX_COUNT, indexB += CONST.PARTICLE_VERTEX_COUNT)
             {
-                indexBuffer[indexA + 0] = indexB + 0;
-                indexBuffer[indexA + 1] = indexB + 1;
-                indexBuffer[indexA + 2] = indexB + 2;
-                indexBuffer[indexA + 3] = indexB + 0;
-                indexBuffer[indexA + 4] = indexB + 2;
-                indexBuffer[indexA + 5] = indexB + 3;
-            }
-
-            this.bind();
-
-            this.resize(this.width, this.height);
-
-            this.unbind();
-        }
-        else
-        {
-            console.error('ParticleRenderer already initialized');
+            indexBuffer[indexA + 0] = indexB + 0;
+            indexBuffer[indexA + 1] = indexB + 1;
+            indexBuffer[indexA + 2] = indexB + 2;
+            indexBuffer[indexA + 3] = indexB + 0;
+            indexBuffer[indexA + 4] = indexB + 2;
+            indexBuffer[indexA + 5] = indexB + 3;
         }
+        gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, indexDataBuffer.getUsedBufferAsWord());
+
+        this.bind();
+
+        this.resize(this.width, this.height);
+
+        this.unbind();
     },
 
     isFull: function ()
@@ -138,9 +133,19 @@ ParticleRenderer.prototype = {
 
     add: function (x, y, width, height, umin, vmin, umax, vmax)
     {
-        // The user must check if the buffers are full before flushing
-        // this is to give freedom of when should the renderer flush.
+        var manager = this.manager;
+        if (manager.batch !== this || this.dirty)
+        {
+            if (manager.batch)
+                manager.batch.flush();
+    
+            this.bind();
+            this.setTexture2D(manager.currentTexture2D, true);
+            manager.batch = this;
+        }
 
+        // The user must check if the buffers are full before flushing
+        // this is to give freedom of when should the renderer flush. var vertexDataBuffer = this.vertexDataBuffer;
         var vertexDataBuffer = this.vertexDataBuffer;
         var vertexBuffer = vertexDataBuffer.floatView;
         var vertexOffset = vertexDataBuffer.allocate(CONST.PARTICLE_VERTEX_COMPONENT_COUNT * CONST.PARTICLE_VERTEX_COUNT);
@@ -168,11 +173,11 @@ ParticleRenderer.prototype = {
         this.elementCount += CONST.PARTICLE_INDEX_COUNT;
     },
 
-    setTexture2D: function (texture2D)
+    setTexture2D: function (texture2D, force)
     {
         var gl = this.glContext;
 
-        if (this.currentTexture2D !== texture2D)
+        if (this.currentTexture2D !== texture2D || force)
         {
             this.flush();
 
@@ -183,16 +188,6 @@ ParticleRenderer.prototype = {
         }
     },
 
-    render: function ()
-    {
-        //  Stops it breaking
-    },
-
-    createFBO: function ()
-    {
-        //  Stops it breaking
-    },
-
     bind: function ()
     {
         var gl = this.glContext;
@@ -282,4 +277,4 @@ ParticleRenderer.prototype = {
 
 };
 
-module.exports = ParticleRenderer;
+module.exports = BlitterBatch;

v3/src/renderer/webgl/batches/sprite/SpriteBatch.js

@@ -0,0 +1,4 @@
+var SpriteBatch = function ()
+{};
+
+module.exports = SpriteBatch;

v3/src/renderer/webgl/renderers/sprite/SpriteRenderer.js

@@ -1,4 +0,0 @@
-var SpriteRenderer = function ()
-{};
-
-module.exports = SpriteRenderer;