Working through splitting the Batch shader out of the manager, and into its own class. Got multi-shader swapping working.

photonstorm · photonstorm · commit f1760f961d2b · 2016-10-28T02:42:58.000+01:00
diff --git a/src/components/Transform.js b/src/components/Transform.js
@@ -176,7 +176,7 @@ Phaser.Component.Transform.prototype = {
         this._anchorX = x;
         this._anchorY = y;
 
-        return this.update();
+        this.dirty = true;
     },
 
     setRotation: function (rotation)
diff --git a/src/gameobjects/pixelfield/PixelField.js b/src/gameobjects/pixelfield/PixelField.js
@@ -0,0 +1,92 @@
+/**
+* @author       Richard Davey <rich@photonstorm.com>
+* @copyright    2016 Photon Storm Ltd.
+* @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+*/
+
+/**
+* A PixelField is a container, with a position, rotation and scale, that renders pixels.
+* So it maintains a list of pixels (just coordinates + a color), and renders them to the batch (maybe with a custom shader?)
+*
+* @class Phaser.GameObject.PixelField
+* @extends Phaser.GameObject
+* @constructor
+* @param {Phaser.Game} game - A reference to the currently running game.
+* @param {number} [x=0] - The x coordinate of the Image. The coordinate is relative to any parent container this Image may be in.
+* @param {number} [y=0] - The y coordinate of the Image. The coordinate is relative to any parent container this Image may be in.
+* @param {string} [key] - The texture used by the Image during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture, BitmapData or PIXI.Texture.
+* @param {string|number} [frame] - If this Image is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
+*/
+Phaser.GameObject.PixelField = function (game, x, y)
+{
+    this.game = game;
+
+    Phaser.GameObject.call(this, game, x, y);
+
+    /**
+    * @property {number} type - The const type of this object.
+    * @readonly
+    */
+    this.type = Phaser.IMAGE;
+};
+
+Phaser.GameObject.PixelField.prototype = Object.create(Phaser.GameObject.prototype);
+Phaser.GameObject.PixelField.prototype.constructor = Phaser.GameObject.PixelField;
+
+/**
+* Automatically called by World.preUpdate.
+*
+* @method Phaser.Image#preUpdate
+* @memberof Phaser.Image
+*/
+Phaser.GameObject.PixelField.prototype.preUpdate = function ()
+{
+    if (this.parent)
+    {
+        this.color.worldAlpha = this.parent.color.worldAlpha;
+    }
+};
+
+// Phaser.GameObject.Image.prototype.update = function ()
+// {
+// };
+
+// Phaser.GameObject.Image.prototype.postUpdate = function ()
+// {
+// };
+
+Object.defineProperties(Phaser.GameObject.PixelField.prototype, {
+
+    width: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.transform._scaleX * this.frame.realWidth;
+        },
+
+        set: function (value)
+        {
+            this.scaleX = value / this.frame.realWidth;
+        }
+
+    },
+
+    height: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.transform._scaleY * this.frame.realHeight;
+        },
+
+        set: function (value)
+        {
+            this.scaleY = value / this.frame.realHeight;
+        }
+
+    }
+
+});
diff --git a/src/renderer/webgl/BatchManager.js b/src/renderer/webgl/BatchManager.js
@@ -30,6 +30,8 @@ Phaser.Renderer.WebGL.BatchManager = function (renderer, batchSize)
     //  Texture Index (float) = 4 bytes
     //  Tint Color (float) = 4 bytes
     //  BG Color (float) = 4 bytes
+    //  
+    //  Total: 28 bytes (per vert) * 4 (4 verts per quad) (= 112 bytes) * maxBatchSize (usually 2000) = 224 kilobytes sent to the GPU every frame
 
     this.vertSize = (4 * 2) + (4 * 2) + (4) + (4) + (4);
 
@@ -115,7 +117,50 @@ Phaser.Renderer.WebGL.BatchManager = function (renderer, batchSize)
         '}'
     ];
 
-    this.multiTextureFragmentSrc = null;
+    this.fragmentSrc2 = [
+        'precision lowp float;',
+
+        'varying vec2 vTextureCoord;', // the texture coords passed in from the vertex shader
+        'varying vec4 vTintColor;', //  the color value passed in from the vertex shader (texture color + alpha + tint)
+        'varying vec4 vBgColor;', //  the bg color value passed in from the vertex shader
+        'varying float vTextureIndex;',
+
+        'uniform sampler2D uSampler;', // our texture
+
+        'void main(void) {',
+        '   gl_FragColor = texture2D(uSampler, vTextureCoord);',
+        '   gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126 * gl_FragColor.r + 0.7152 * gl_FragColor.g + 0.0722 * gl_FragColor.b), 1.0);',
+        '}'
+    ];
+
+    /**
+     * The multi-texture fragment shader.
+     * This array is modified heavily by the initMultiTexture method.
+     * @property multiTextureFragmentSrc
+     * @type Array
+    */
+    this.multiTextureFragmentSrc = [
+        'precision lowp float;',
+
+        'varying vec2 vTextureCoord;', // the texture coords passed in from the vertex shader
+        'varying vec4 vTintColor;', //  the color value passed in from the vertex shader (texture color + alpha + tint)
+        'varying vec4 vBgColor;', //  the bg color value passed in from the vertex shader
+        'varying float vTextureIndex;',
+
+        'uniform sampler2D uSamplerArray[0];', // this line is replaced when the shader is built, with the actual total
+
+        'const vec4 PINK = vec4(1.0, 0.0, 1.0, 1.0);',
+
+        'void main(void) {',
+        '   vec4 pixel;',
+        '   if (vTextureIndex == 0.0) pixel = texture2D(uSamplerArray[0], vTextureCoord);',
+        '// IFELSEBLOCK', // special tag used to insert the multi-texture if else block. Do not edit or remove.
+        '   else pixel = PINK;',
+        '   pixel *= vTintColor;',
+        // '   if (pixel.a == 0.0) pixel = vBgColor;', // if texture alpha is zero, use the bg color
+        '   gl_FragColor = pixel;',
+        '}'
+    ];
 
     //  @type {GLint}
     this.aVertexPosition;
@@ -225,10 +270,14 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
         }
     },
 
-    initAttributes: function ()
+    initAttributes: function (p)
     {
         var gl = this.gl;
-        var program = this.program;
+        // var program = this.program2;
+        var program = p;
+
+        //  Set Shader
+        gl.useProgram(program);
 
         //  Get and store the attributes
 
@@ -261,8 +310,6 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
 
     initSingleTexture: function ()
     {
-        console.log('initSingleTexture');
-
         var gl = this.gl;
 
         //  Shader already exists
@@ -274,55 +321,53 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
         //  Compile the Shader
         this.program = this.renderer.compileProgram(this.vertexSrc, this.fragmentSrc);
 
+        this.program2 = this.renderer.compileProgram(this.vertexSrc, this.fragmentSrc2);
+
         //  Set Shader
-        gl.useProgram(this.program);
+        // gl.useProgram(this.program);
 
-        this.initAttributes();
+        this.initAttributes(this.program);
 
         this.uSampler = gl.getUniformLocation(this.program, 'uSampler');
     },
 
     initMultiTexture: function ()
     {
-        console.log('initMultiTexture');
-
         var gl = this.gl;
 
-        var multiFrag = [
-            'precision lowp float;',
-
-            'varying vec2 vTextureCoord;', // the texture coords passed in from the vertex shader
-            'varying vec4 vTintColor;', //  the color value passed in from the vertex shader (texture color + alpha + tint)
-            'varying vec4 vBgColor;', //  the bg color value passed in from the vertex shader
-            'varying float vTextureIndex;',
-
-            'uniform sampler2D uSamplerArray[' + this.renderer.maxTextures + '];',
+        var block = [];
+        var splicePoint = 0;
 
-            'const vec4 PINK = vec4(1.0, 0.0, 1.0, 1.0);',
-
-            'void main(void) {',
-
-            '   vec4 pixel;',
-            '   if (vTextureIndex == 0.0) pixel = texture2D(uSamplerArray[0], vTextureCoord);'
-        ];
-
-        for (var i = 1; i < this.renderer.maxTextures; i++)
+        //  Build the else if block
+        for (var t = 1; t < this.renderer.maxTextures; t++)
         {
-            multiFrag.push('   else if (vTextureIndex == ' + i + '.0) pixel = texture2D(uSamplerArray[' + i + '], vTextureCoord);');
+            block.push('   else if (vTextureIndex == ' + t + '.0) pixel = texture2D(uSamplerArray[' + t + '], vTextureCoord);');
         }
 
-        multiFrag = multiFrag.concat([
-            '   else pixel = PINK;',
+        //  Parse the fragment src array
+        for (var i = 0; i < this.multiTextureFragmentSrc.length; i++)
+        {
+            var line = this.multiTextureFragmentSrc[i];
 
-            '   pixel *= vTintColor;',
-            // '   if (pixel.a == 0.0) pixel = vBgColor;', // if texture alpha is zero, use the bg color
-            '   gl_FragColor = pixel;',
-            '}'
-        ]);
+            //  Inject the maxTextures total into the shader
+            if (line === 'uniform sampler2D uSamplerArray[0];')
+            {
+                this.multiTextureFragmentSrc[i] = 'uniform sampler2D uSamplerArray[' + this.renderer.maxTextures + '];';
+            }
+            else if (line === '// IFELSEBLOCK')
+            {
+                //  Store the index at which we need to insert the if else block
+                splicePoint = i;
+            }
+        }
 
-        this.multiTextureFragmentSrc = multiFrag;
+        //  Store the end part of the shader
+        var shaderEnd = this.multiTextureFragmentSrc.splice(splicePoint);
 
-        //  Shader already exists
+        //  Stitch it back together again
+        this.multiTextureFragmentSrc = this.multiTextureFragmentSrc.concat(block, shaderEnd);
+
+        //  Shader already exists?
         if (this.program)
         {
             this.renderer.deleteProgram(this.program);
@@ -360,6 +405,7 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
         this._i = 0;
         this.dirty = true;
         this.currentBatchSize = 0;
+        this.initAttributes(this.program);
     },
 
     end: function ()
@@ -480,8 +526,8 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
         var gl = this.gl;
 
         //  Bind the buffers
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        // gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
 
         //  Set the projection vector. Defaults to the middle of the Game World, on negative y.
         //  I.e. if the world is 800x600 then the projection vector is 400 x -300
@@ -518,14 +564,17 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
 
     flush: function ()
     {
+        var gl = this.gl;
+
         //  Always dirty the first pass through but subsequent calls may be clean
         if (this.dirty)
         {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+
             this.initShader();
         }
 
-        var gl = this.gl;
-
         //  Upload the vertex data to the GPU - is this cheaper (overall) than creating a new TypedArray view?
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
 
@@ -569,6 +618,31 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
                 this.renderer.setBlendMode(sprite.blendMode);
             }
 
+            if (sprite.shader === 2)
+            {
+                gl.drawElements(gl.TRIANGLES, currentSize * 6, gl.UNSIGNED_SHORT, start * 6 * 2);
+                this.renderer.drawCount++;
+
+                //  Reset the batch
+                start = i;
+                currentSize = 0;
+
+                this.initAttributes(this.program2);
+                this.initShader();
+            }
+            else if (sprite.shader === 1)
+            {
+                gl.drawElements(gl.TRIANGLES, currentSize * 6, gl.UNSIGNED_SHORT, start * 6 * 2);
+                this.renderer.drawCount++;
+
+                //  Reset the batch
+                start = i;
+                currentSize = 0;
+
+                this.initAttributes(this.program);
+                this.initShader();
+            }
+
             //  TODO: Check for shader here
 
             //  If either blend or shader set, we need to drawElements and swap
diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js
@@ -21,7 +21,7 @@ Phaser.Renderer.WebGL = function (game)
 
     this.type = Phaser.WEBGL;
 
-    this.shaderID = 0;
+    this.currentShader = null;
 
     /**
      * This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
@@ -318,6 +318,7 @@ Phaser.Renderer.WebGL.prototype = {
         this.projection.y = -(this.height / 2) / this.game.resolution;
     },
 
+    /*
     getShaderID: function (shader)
     {
         this.shaderID++;
@@ -326,6 +327,7 @@ Phaser.Renderer.WebGL.prototype = {
 
         return this.shaderID;
     },
+    */
 
     /**
     * If Multi Texture support has been enabled, then calling this method will enable batching on the given
diff --git a/src/renderer/webgl/shaders/Image.js b/src/renderer/webgl/shaders/Image.js
