Multi-Texture support has now been built into our version of Pixi. This can offer dramatic performance increases in WebGL games on GPUs that support multiple texture bindings (which is most of them these days).

WebGLRenderer.setTexturePriority is the method used to set the priority of textures when the GPU supports multi-texture batching.

Rope has two new properties `textureIndices` and `textureIndex` to handle multi-texture support.

Strip has two new properties `textureIndices` and `textureIndex` to handle multi-texture support.

The following shaders have all been updated to support multi-textures: `ComplexPrimitiveShader`, `PixiFastShader`, `PixiShader`, `PrimitiveShader`, `StripShader`.

WebGLFastSpriteBatch.vertSize was increased from 10 to 11.

BaseTexture.textureIndex is a new property that controls the index of the texture within the GPU texture cache. Usually you don't change this yourself, and use `renderer.setTexturePriority` instead, but the property is public and available for more advanced use-cases.

CanvasRenderer.setTexturePriority is an empty function, but included to allow you to simply call `game.renderer.setTexturePriority` without first having to wrap that in a WebGL check.

Author: photonstorm

README.md

@@ -348,7 +348,9 @@ Please note that Phaser uses a custom build of Pixi and always has done. The fol
 * Rope has two new properties `textureIndices` and `textureIndex` to handle multi-texture support.
 * Strip has two new properties `textureIndices` and `textureIndex` to handle multi-texture support.
 * The following shaders have all been updated to support multi-textures: `ComplexPrimitiveShader`, `PixiFastShader`, `PixiShader`, `PrimitiveShader`, `StripShader`.
+* WebGLFastSpriteBatch.vertSize was increased from 10 to 11.
 * BaseTexture.textureIndex is a new property that controls the index of the texture within the GPU texture cache. Usually you don't change this yourself, and use `renderer.setTexturePriority` instead, but the property is public and available for more advanced use-cases.
+* CanvasRenderer.setTexturePriority is an empty function, but included to allow you to simply call `game.renderer.setTexturePriority` without first having to wrap that in a WebGL check.
 * This version contains significant fixes for `DisplayObject.getBounds` and `DisplayObjectContainer.getBounds`. The methods can now accept an optional argument `targetCoordinateSpace` which makes it much more flexible, allowing you to check the bounds against any target, not just local and global ones. If the `targetCoordinateSpace` is a valid DisplayObject:
 
     - If it's a parent of the caller at some level it will return the bounds

src/pixi/extras/Rope.js

@@ -177,8 +177,6 @@ PIXI.Rope.prototype.updateTransform = function()
  */
 PIXI.Rope.prototype.setTexture = function(texture)
 {
-    console.log(texture);
-    debugger;
     // stop current texture
     this.texture = texture;
     this.textureIndex = texture.baseTexture.textureIndex;

src/pixi/extras/Strip.js

@@ -13,8 +13,8 @@
  *
  */
 PIXI.Strip = function (texture) {
-    PIXI.DisplayObjectContainer.call(this);
 
+    PIXI.DisplayObjectContainer.call(this);
 
     /**
      * The texture of the strip
@@ -82,6 +82,7 @@ PIXI.Strip.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
 PIXI.Strip.prototype.constructor = PIXI.Strip;
 
 PIXI.Strip.prototype._renderWebGL = function (renderSession) {
+
     // if the sprite is not visible or the alpha is 0 then no need to render this element
     if (!this.visible || this.alpha <= 0) return;
     // render triangle strip..
@@ -103,6 +104,7 @@ PIXI.Strip.prototype._renderWebGL = function (renderSession) {
 };
 
 PIXI.Strip.prototype._initWebGL = function (renderSession) {
+
     // build the strip!
     var gl = renderSession.gl;
     this.gl = gl;
@@ -132,6 +134,7 @@ PIXI.Strip.prototype._initWebGL = function (renderSession) {
 };
 
 PIXI.Strip.prototype._renderStrip = function (renderSession) {
+
     var gl = renderSession.gl;
     var projection = renderSession.projection,
         offset = renderSession.offset,

src/pixi/renderers/canvas/CanvasRenderer.js

@@ -190,6 +190,14 @@ PIXI.CanvasRenderer.prototype.render = function (root) {
 
 };
 
+PIXI.CanvasRenderer.prototype.setTexturePriority = function (textureNameCollection) {
+
+    //  Does nothing on Canvas, but here to allow you to simply set
+    //  `game.renderer.setTexturePriority()` without having to worry about
+    //  running in WebGL or not.
+
+};
+
 /**
  * Removes everything from the renderer and optionally removes the Canvas DOM element.
  *

src/pixi/renderers/webgl/WebGLRenderer.js

@@ -242,20 +242,32 @@ PIXI.WebGLRenderer.prototype.initContext = function()
     this.resize(this.width, this.height);
 };
 
-PIXI.WebGLRenderer.prototype.setTexturePriority = function(textureNameCollection) {
+PIXI.WebGLRenderer.prototype.setTexturePriority = function (textureNameCollection) {
+
     var maxTextures = this.maxTextures;
     var imageCache = this.game.cache._cache.image;
     var imageName = null;
+
     // We start from 1 because framebuffer texture uses unit 0.
-    for (var index = 0; index < textureNameCollection.length; ++index) {
+    for (var index = 0; index < textureNameCollection.length; ++index)
+    {
         imageName = textureNameCollection[index];
-        if (!(imageName in imageCache)) continue;
-        if (index + 1 < maxTextures) {
+
+        if (!(imageName in imageCache))
+        {
+            continue;
+        }
+
+        if (index + 1 < maxTextures)
+        {
             imageCache[imageName].base.textureIndex = index + 1;
-        } else {
+        }
+        else
+        {
             imageCache[imageName].base.textureIndex = maxTextures - 1;
         }
     }
+
 };
 
 /**