First working example of multi texture support

Author: bitnenfer

src/pixi/renderers/webgl/shaders/PixiShader.js

@@ -80,9 +80,9 @@ PIXI.PixiShader.prototype.constructor = PIXI.PixiShader;
 PIXI.PixiShader.prototype.init = function()
 {
     var gl = this.gl;
-    var MAX_TEXTURES = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
+    this.MAX_TEXTURES = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
     var dynamicIfs = '\tif (vTextureIndex == 0.0) gl_FragColor = texture2D(uSamplerArray[0], vTextureCoord) * vColor;\n'
-    for (var index = 1; index < MAX_TEXTURES; ++index)
+    for (var index = 1; index < this.MAX_TEXTURES; ++index)
     {
         dynamicIfs += '\telse if (vTextureIndex == ' + 
                     index + '.0) gl_FragColor = texture2D(uSamplerArray[' + 
@@ -94,7 +94,7 @@ PIXI.PixiShader.prototype.init = function()
         'varying vec2 vTextureCoord;',
         'varying vec4 vColor;',
         'varying float vTextureIndex;',
-        'uniform sampler2D uSamplerArray[' + MAX_TEXTURES + '];',
+        'uniform sampler2D uSamplerArray[' + this.MAX_TEXTURES + '];',
         'const vec4 PINK = vec4(1.0, 0.0, 1.0, 1.0);',
         'const vec4 GREEN = vec4(0.0, 1.0, 0.0, 1.0);',
         'void main(void) {',
@@ -121,7 +121,7 @@ PIXI.PixiShader.prototype.init = function()
     this.aTextureIndex = gl.getAttribLocation(program, 'aTextureIndex');
 
     var indices = [];
-    for (var i = 0; i < MAX_TEXTURES; ++i) {
+    for (var i = 0; i < this.MAX_TEXTURES; ++i) {
         indices.push(i);
     }
     // NOTE:!!!

src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js

@@ -139,16 +139,22 @@ PIXI.WebGLSpriteBatch = function () {
      * @type AbstractFilter
      */
     this.defaultShader = null;
+
+    /**
+     * @property textureArray
+     * @type Array
+     */
+    this.textureArray = [];
 };
 
 /**
  * @method setContext
  * @param gl {WebGLContext} the current WebGL drawing context
  */
 PIXI.WebGLSpriteBatch.prototype.setContext = function (gl) {
-    var MAX_TEXTURES = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
+    this.MAX_TEXTURES = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
     var dynamicIfs = '\tif (vTextureIndex == 0.0) gl_FragColor = texture2D(uSamplerArray[0], vTextureCoord) * vColor;\n'
-    for (var index = 1; index < MAX_TEXTURES; ++index) {
+    for (var index = 1; index < this.MAX_TEXTURES; ++index) {
         dynamicIfs += '\telse if (vTextureIndex == ' +
             index + '.0) gl_FragColor = texture2D(uSamplerArray[' +
             index + '], vTextureCoord) * vColor;\n'
@@ -160,7 +166,7 @@ PIXI.WebGLSpriteBatch.prototype.setContext = function (gl) {
         'varying vec2 vTextureCoord;',
         'varying vec4 vColor;',
         'varying float vTextureIndex;',
-        'uniform sampler2D uSamplerArray[' + MAX_TEXTURES + '];',
+        'uniform sampler2D uSamplerArray[' + this.MAX_TEXTURES + '];',
         'void main(void) {',
         dynamicIfs,
         '\telse gl_FragColor = texture2D(uSamplerArray[0], vTextureCoord) * vColor;',
@@ -216,6 +222,14 @@ PIXI.WebGLSpriteBatch.prototype.end = function () {
  */
 PIXI.WebGLSpriteBatch.prototype.render = function (sprite, matrix) {
     var texture = sprite.texture;
+    var baseTexture = texture.baseTexture;
+    var gl = this.gl;
+    if (this.textureArray[baseTexture.textureIndex] != baseTexture) {
+        gl.activeTexture(gl.TEXTURE0 + baseTexture.textureIndex);
+        gl.bindTexture(gl.TEXTURE_2D, baseTexture._glTextures[gl.id]);
+        this.textureArray[baseTexture.textureIndex] = baseTexture;
+        this.flush();
+    }
 
     //  They provided an alternative rendering matrix, so use it
     var wt = sprite.worldTransform;
@@ -260,7 +274,7 @@ PIXI.WebGLSpriteBatch.prototype.render = function (sprite, matrix) {
         h1 = texture.frame.height * -aY;
     }
 
-    var i = this.currentBatchSize * this.vertexSize;//4 * this.vertSize;
+    var i = this.currentBatchSize * this.vertexSize; //4 * this.vertSize;
     var tiOffset = this.currentBatchSize * 4;
     var resolution = texture.baseTexture.resolution;
     var textureIndex = texture.baseTexture.textureIndex;
@@ -347,6 +361,7 @@ PIXI.WebGLSpriteBatch.prototype.render = function (sprite, matrix) {
 PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function (sprite) {
     var texture = sprite.tilingTexture;
 
+
     // check texture..
     if (this.currentBatchSize >= this.size) {
         this.flush();
@@ -409,7 +424,7 @@ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function (sprite) {
     var h0 = height * (1 - aY);
     var h1 = height * -aY;
 
-    var i = this.currentBatchSize * this.vertexSize;//4 * this.vertSize;
+    var i = this.currentBatchSize * this.vertexSize; //4 * this.vertSize;
 
     var resolution = texture.baseTexture.resolution;
 
@@ -538,6 +553,7 @@ PIXI.WebGLSpriteBatch.prototype.flush = function () {
         } else {
             nextTexture = sprite.texture.baseTexture;
         }
+
         nextBlendMode = sprite.blendMode;
         nextShader = sprite.shader || this.defaultShader;
 
@@ -549,8 +565,10 @@ PIXI.WebGLSpriteBatch.prototype.flush = function () {
         if (skip && sprite.children.length > 0) {
             skip = false;
         }
-
-        if (( currentBaseTexture !== nextTexture && !skip) || blendSwap || shaderSwap) {
+        //
+        if (/*(currentBaseTexture != nextTexture && !skip) ||*/
+            blendSwap ||
+            shaderSwap) {
             this.renderBatch(currentBaseTexture, batchSize, start);
 
             start = i;
@@ -627,13 +645,9 @@ PIXI.WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startInde
         }
     } else {
         gl.activeTexture(gl.TEXTURE0 + texture.textureIndex);
-        // bind the current texture
         gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
     }
-
-    // now draw those suckas!
     gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2);
-
     // increment the draw count
     this.renderSession.drawCount++;
 };