Trying to debug fbo + multi-texture 'cannot draw to same texture' issue.

src/renderer/webgl/QuadFBO.js

@@ -35,7 +35,7 @@ Phaser.Renderer.WebGL.QuadFBO = function (renderer, x, y, width, height)
     };
 
     this.vertexBuffer;
-    this.indicesBuffer;
+    this.indexBuffer;
     this.textureBuffer;
 
     this.vertices;
@@ -60,10 +60,25 @@ Phaser.Renderer.WebGL.QuadFBO.prototype = {
         var gl = this.gl;
 
         this.vertexBuffer = gl.createBuffer();
-        this.indicesBuffer = gl.createBuffer();
+        this.indexBuffer = gl.createBuffer();
         this.textureBuffer = gl.createBuffer();
 
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+        //  An FBO quad is made up of 2 triangles (A and B in the image below)
+        //
+        //  0 = Bottom Left
+        //  1 = Bottom Right
+        //  2 = Top Left
+        //  3 = Top Right
+        //
+        //  2----3
+        //  |\  B|
+        //  | \  |
+        //  |  \ |
+        //  | A \|
+        //  |    \
+        //  0----1
+
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([ 0, 1, 2, 2, 1, 3 ]), gl.STATIC_DRAW);
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
 
@@ -99,11 +114,6 @@ Phaser.Renderer.WebGL.QuadFBO.prototype = {
             window.console.error('FrameBuffer Error: ', this.renderer._fbErrors[fbStatus]);
         }
 
-        //  Reset back to defaults
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-
         this.createShader();
     },
 
@@ -240,10 +250,16 @@ Phaser.Renderer.WebGL.QuadFBO.prototype = {
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, destinationBuffer);
 
+        gl.activeTexture(gl.TEXTURE0);
+
         gl.useProgram(program);
 
-        gl.activeTexture(gl.TEXTURE0 + this.textureIndex);
+        // gl.activeTexture(gl.TEXTURE0 + this.textureIndex);
+
         gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+        this.renderer.textureArray[0] = this.texture;
+
         gl.uniform1i(gl.getUniformLocation(program, 'uSampler'), 0);
 
         gl.enableVertexAttribArray(this.aTextureCoord);
@@ -256,10 +272,9 @@ Phaser.Renderer.WebGL.QuadFBO.prototype = {
         gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer); // texture buffer
         gl.vertexAttribPointer(this.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer); // index buffer
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); // index buffer
         gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
 
-        this.renderer.textureArray[this.textureIndex] = this.texture;
     },
 
     destroy: function ()

src/renderer/webgl/WebGLRenderer.js

@@ -303,7 +303,8 @@ Phaser.Renderer.WebGL.prototype = {
 
         if (Array.isArray(textureArray))
         {
-            var index = 0;
+            //  index 0 is reserved!
+            var index = 1;
 
             for (var i = 0; i < textureArray.length; i++)
             {
@@ -466,10 +467,12 @@ Phaser.Renderer.WebGL.prototype = {
         //  Giving no argument here tells it to draw to the main context buffer
         //  the same as doing 'gl.bindFramebuffer(gl.FRAMEBUFFER, null)' first.
         //  Or you can give it another framebuffer to draw to.
-        this.stateFBO.render();
+        this.stateFBO.render(null);
 
         this.endTime = Date.now();
 
+        // debugger;
+
         //  Add Post-render hook
     },
 

src/renderer/webgl/batches/BaseBatch.js

@@ -99,11 +99,11 @@ Phaser.Renderer.WebGL.Batch.prototype = {
 
         //  We only need to do this if this batch isn't the current one
 
-        if (this.dirty || force)
+        // if (this.dirty || force)
-        {
+        // {
             this.bindShader();
             this.dirty = false;
-        }
+        // }
     },
 
     stop: function ()

src/renderer/webgl/batches/MultiTextureBatch.js

@@ -177,9 +177,9 @@ Phaser.Renderer.WebGL.Batch.MultiTexture.prototype.init = function ()
         'void main(void) {',
         '   vec4 pixel;',
 
-        '   if (vTextureIndex == 0.0)',
+        '   if (vTextureIndex == 1.0)',
         '   {',
-        '       pixel = texture2D(uSamplerArray[0], vTextureCoord);',
+        '       pixel = texture2D(uSamplerArray[1], vTextureCoord);',
         '   }',
         '// IFELSEBLOCK', // special tag used to insert the multi-texture if else block. Do not edit or remove.
         '   else',
@@ -197,7 +197,7 @@ Phaser.Renderer.WebGL.Batch.MultiTexture.prototype.init = function ()
     var splicePoint = 0;
 
     //  Build the else if block
-    for (var t = 1; t < this.renderer.maxTextures; t++)
+    for (var t = 2; t < this.renderer.maxTextures; t++)
     {
         block.push('   else if (vTextureIndex == ' + t + '.0)');
         block.push('   {');
@@ -233,7 +233,7 @@ Phaser.Renderer.WebGL.Batch.MultiTexture.prototype.init = function ()
 
     var tempTexture = this.renderer.createEmptyTexture(1, 1, 0);
 
-    for (i = 0; i < this.renderer.maxTextures; i++)
+    for (i = 1; i < this.renderer.maxTextures; i++)
     {
         gl.activeTexture(gl.TEXTURE0 + i);
 
@@ -253,6 +253,8 @@ Phaser.Renderer.WebGL.Batch.MultiTexture.prototype.bindShader = function ()
     var program = this.program;
     var vertSize = this.vertSize;
 
+    // console.log('MultiTexture bindShader');
+
     //  Set Shader
     gl.useProgram(program);