Newer
Older
pixi.js / docs / files / src_pixi_renderers_webgl_WebGLRenderGroup.js.html
@Mat Groves Mat Groves on 21 Jun 2013 30 KB Graphics shape fill added
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderGroup.js - Pixi.JS</title>
    <link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
    <script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.3.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
            
                <li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
            
                <li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
            
                <li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
            
                <li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
            
                <li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
            
                <li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
            
                <li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
            
                <li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
            
                <li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
            
                <li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
            
                <li><a href="..&#x2F;classes/Point.html">Point</a></li>
            
                <li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
            
                <li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
            
                <li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
            
                <li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
            
                <li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
            
                <li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
            
                <li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
            
                <li><a href="..&#x2F;classes/Text.html">Text</a></li>
            
                <li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
            
                <li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
            
                <li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
            
                <li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderGroup.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
&#x2F;**
 * @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
 *&#x2F;




&#x2F;**
 * A WebGLBatch Enables a group of sprites to be drawn using the same settings.
 * if a group of sprites all have the same baseTexture and blendMode then they can be grouped into a batch. All the sprites in a batch can then be drawn in one go by the GPU which is hugely efficient. ALL sprites in the webGL renderer are added to a batch even if the batch only contains one sprite. Batching is handled automatically by the webGL renderer. A good tip is: the smaller the number of batchs there are, the faster the webGL renderer will run. 
 * @class WebGLBatch
 * @param an instance of the webGL context
 * @return {PIXI.renderers.WebGLBatch} WebGLBatch {@link PIXI.renderers.WebGLBatch}
 *&#x2F;
PIXI.WebGLRenderGroup = function(gl)
{
	this.gl = gl;
	this.root;
	
	this.backgroundColor;
	this.batchs = [];
	this.toRemove = [];
}


&#x2F;&#x2F; constructor
PIXI.WebGLRenderGroup.constructor = PIXI.WebGLRenderGroup;

PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{
	&#x2F;&#x2F; has this changed??
	if(this.root)this.removeDisplayObjectAndChildren(this.root);
	
	displayObject.worldVisible = displayObject.visible;
	
	&#x2F;&#x2F; soooooo &#x2F;&#x2F;
	&#x2F;&#x2F; to check if any batchs exist already??
	
	&#x2F;&#x2F; TODO what if its already has an object? should remove it
	this.root = displayObject;
	&#x2F;&#x2F;displayObject.__renderGroup = this;
	this.addDisplayObjectAndChildren(displayObject);
	&#x2F;&#x2F;displayObject
}

PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
{
	PIXI.WebGLRenderer.updateTextures();
	
	var gl = this.gl;

	&#x2F;&#x2F; set the flipped matrix..
	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
	
	&#x2F;&#x2F; TODO remove this by replacing visible with getter setters..	
	this.checkVisibility(this.root, this.root.visible);
	
	&#x2F;&#x2F; will render all the elements in the group
	var renderable;
	
	
	for (var i=0; i &lt; this.batchs.length; i++) 
	{
		renderable = this.batchs[i];
		if(renderable instanceof PIXI.WebGLBatch)
		{
			this.batchs[i].render();
		}
		else if(renderable instanceof PIXI.TilingSprite)
		{
			if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
		}
		else if(renderable instanceof PIXI.Strip)
		{
			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
		}
		else if(renderable instanceof PIXI.Graphics)
		{
			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
		}
	}
	
}

PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projectionMatrix)
{
	PIXI.WebGLRenderer.updateTextures();
	
	var gl = this.gl;
	this.checkVisibility(displayObject, displayObject.visible);
	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
	
	
	&#x2F;&#x2F;console.log(&quot;SPECIFIC&quot;);
	&#x2F;&#x2F; to do!
	&#x2F;&#x2F; render part of the scene...
	
	var startIndex;
	var startBatchIndex;
	
	var endIndex;
	var endBatchIndex;
	
	&#x2F;&#x2F; get NEXT Renderable!
	var nextRenderable = displayObject.renderable ? displayObject : this.getNextRenderable(displayObject);
	var startBatch = nextRenderable.batch;
	
	if(nextRenderable instanceof PIXI.Sprite)
	{
		startBatch = nextRenderable.batch;
		
		var head = startBatch.head;
		var next = head;
		
		&#x2F;&#x2F; ok now we have the batch.. need to find the start index!
		if(head == nextRenderable)
		{
			startIndex = 0;
		}
		else
		{
			startIndex = 1;
			
			while(head.__next != nextRenderable)
			{
				startIndex++;
				head = head.__next;
			}
		}
	}
	else
	{
		startBatch = nextRenderable;
	}
	
	&#x2F;&#x2F; Get the LAST renderable object
	var lastRenderable = displayObject;
	var endBatch;
	var lastItem = displayObject;
	while(lastItem.children.length &gt; 0)
	{
		lastItem = lastItem.children[lastItem.children.length-1];
		if(lastItem.renderable)lastRenderable = lastItem;
	}
	
	if(lastRenderable instanceof PIXI.Sprite)
	{
		endBatch = lastRenderable.batch;
		
		var head = endBatch.head;
		
		if(head == lastRenderable)
		{
			endIndex = 0;
		}
		else
		{
			endIndex = 1;
			
			while(head.__next != lastRenderable)
			{
				endIndex++;
				head = head.__next;
			}
		}
	}
	else
	{
		endBatch = lastRenderable;
	}
	
	&#x2F;&#x2F; TODO - need to fold this up a bit!
	
	
	if(startBatch == endBatch)
	{
		if(startBatch instanceof PIXI.WebGLBatch)
		{
			startBatch.render(startIndex, endIndex+1);
		}
		else if(startBatch instanceof PIXI.TilingSprite)
		{
			if(startBatch.visible)this.renderTilingSprite(startBatch, projectionMatrix);
		}
		else if(startBatch instanceof PIXI.Strip)
		{
			if(startBatch.visible)this.renderStrip(startBatch, projectionMatrix);
		}
		else if(startBatch instanceof PIXI.CustomRenderable)
		{
			if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
		}
		else if(renderable instanceof PIXI.Graphics)
		{
			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
		}
		return;
	}
	
	&#x2F;&#x2F; now we have first and last!
	startBatchIndex = this.batchs.indexOf(startBatch);
	endBatchIndex = this.batchs.indexOf(endBatch);
	
	&#x2F;&#x2F; DO the first batch
	if(startBatch instanceof PIXI.WebGLBatch)
	{
		startBatch.render(startIndex);
	}
	else if(startBatch instanceof PIXI.TilingSprite)
	{
		if(startBatch.visible)this.renderTilingSprite(startBatch, projectionMatrix);
	}
	else if(startBatch instanceof PIXI.Strip)
	{
		if(startBatch.visible)this.renderStrip(startBatch, projectionMatrix);
	}
	else if(startBatch instanceof PIXI.CustomRenderable)
	{
		if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
	}
	else if(renderable instanceof PIXI.Graphics)
		{
			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
		}
	&#x2F;&#x2F; DO the middle batchs..
	for (var i=startBatchIndex+1; i &lt; endBatchIndex; i++) 
	{
		renderable = this.batchs[i];
	
		if(renderable instanceof PIXI.WebGLBatch)
		{
			this.batchs[i].render();
		}
		else if(renderable instanceof PIXI.TilingSprite)
		{
			if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
		}
		else if(renderable instanceof PIXI.Strip)
		{
			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
		}
		else if(renderable instanceof PIXI.CustomRenderable)
		{
			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
		}
		else if(renderable instanceof PIXI.Graphics)
		{
			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
		}
	}
	
	&#x2F;&#x2F; DO the last batch..
	if(endBatch instanceof PIXI.WebGLBatch)
	{
		endBatch.render(0, endIndex+1);
	}
	else if(endBatch instanceof PIXI.TilingSprite)
	{
		if(endBatch.visible)this.renderTilingSprite(endBatch);
	}
	else if(endBatch instanceof PIXI.Strip)
	{
		if(endBatch.visible)this.renderStrip(endBatch);
	}
	else if(endBatch instanceof PIXI.CustomRenderable)
	{
		if(endBatch.visible) endBatch.renderWebGL(this, projectionMatrix);
	}
	else if(renderable instanceof PIXI.Graphics)
	{
		if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
	}
}

PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)
{
	&#x2F;&#x2F; give the dp a refference to its renderGroup...
	var children = displayObject.children;
	&#x2F;&#x2F;displayObject.worldVisible = globalVisible;
	for (var i=0; i &lt; children.length; i++) 
	{
		var child = children[i];
		
		&#x2F;&#x2F; TODO optimize... shouldt need to loop through everything all the time
		child.worldVisible = child.visible &amp;&amp; globalVisible;
		
		&#x2F;&#x2F; everything should have a batch!
		&#x2F;&#x2F; time to see whats new!
		if(child.textureChange)
		{
			child.textureChange = false;
			if(child.worldVisible)
			{
				this.removeDisplayObject(child);
				this.addDisplayObject(child);
				&#x2F;&#x2F;this.updateTexture(child);
			}
			&#x2F;&#x2F; update texture!!
		}
		
		if(child.children.length &gt; 0)
		{
			this.checkVisibility(child, child.worldVisible);
		}
	};
}

PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{
	&#x2F;&#x2F; we know this exists..
	&#x2F;&#x2F; is it in a batch..
	&#x2F;&#x2F; check batch length
	if(displayObject.batch.length == 1)
	{
		&#x2F;&#x2F; just one! this guy! so simply swap the texture
		displayObject.batch.texture = displayObject.texture.baseTexture;
		return;
	}
	
	&#x2F;&#x2F; early out!
	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
	
	
	if(displayObject.batch.head == displayObject)
	{
		&#x2F;&#x2F;console.log(&quot;HEAD&quot;)
		var currentBatch = displayObject.batch;
		
		var index = this.batchs.indexOf( currentBatch );
		var previousBatch =  this.batchs[index-1];
		currentBatch.remove(displayObject);
		
		if(previousBatch)
		{
			if(previousBatch.texture == displayObject.texture.baseTexture &amp;&amp; previousBatch.blendMode == displayObject.blendMode)
			{
				previousBatch.insertAfter(displayObject, previousBatch.tail);
			}
			else
			{
				&#x2F;&#x2F; add it before..
				var batch = PIXI.WebGLRenderer.getBatch();
				batch.init(displayObject);
				this.batchs.splice(index-1, 0, batch);
			}
			
		}
		else
		{
			&#x2F;&#x2F; we are 0!
			var batch = PIXI.WebGLRenderer.getBatch();
			batch.init(displayObject);
			this.batchs.splice(0, 0, batch);
		}
		
	}
	else if(displayObject.batch.tail == displayObject)
	{
		var currentBatch = displayObject.batch;
		
		var index = this.batchs.indexOf( currentBatch );
		var nextBatch =  this.batchs[index+1];
		currentBatch.remove(displayObject);
		
		if(nextBatch)
		{
			if(nextBatch.texture == displayObject.texture.baseTexture &amp;&amp; nextBatch.blendMode == displayObject.blendMode)
			{
				nextBatch.insertBefore(displayObject, nextBatch.head);
				return;
			}
			else
			{
				&#x2F;&#x2F; add it before..
				var batch = PIXI.WebGLRenderer.getBatch();
				batch.init(displayObject);
				this.batchs.splice(index+1, 0, batch);
			}
			
		}
		else
		{
			&#x2F;&#x2F; we are 0!
			var batch = PIXI.WebGLRenderer.getBatch();
			batch.init(displayObject);
			this.batchs.push(batch);
		}
	}
	else
	{
	&#x2F;&#x2F;	console.log(&quot;MIDDLE&quot;)
		var currentBatch = displayObject.batch;
		
		&#x2F;&#x2F; split the batch into 2
		&#x2F;&#x2F; AH! dont split on the current display object as the texture is wrong!
		var splitBatch = currentBatch.split(displayObject);
		
		&#x2F;&#x2F; now remove the display object
		splitBatch.remove(displayObject);
		
		var batch = PIXI.WebGLRenderer.getBatch();
		var index = this.batchs.indexOf( currentBatch );
		batch.init(displayObject);
		this.batchs.splice(index+1, 0, batch, splitBatch);
	}
}

PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
{
	&#x2F;&#x2F; add a child to the render group..
	if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);

	&#x2F;&#x2F; DONT htink this is needed?
	&#x2F;&#x2F;	displayObject.batch = null;
	
	displayObject.__renderGroup = this;

	&#x2F;&#x2F;displayObject.cacheVisible = true;
	if(!displayObject.renderable)return;

	&#x2F;&#x2F; while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
	&#x2F;&#x2F;displayObject.__inWebGL = true;
	
	var previousSprite = this.getPreviousRenderable(displayObject);
	var nextSprite = this.getNextRenderable(displayObject);

	&#x2F;*
	 * so now we have the next renderable and the previous renderable
	 * 
	 *&#x2F;
	if(displayObject instanceof PIXI.Sprite)
	{
		var previousBatch
		var nextBatch
		
		if(previousSprite instanceof PIXI.Sprite)
		{
			previousBatch = previousSprite.batch;
			if(previousBatch)
			{
				if(previousBatch.texture == displayObject.texture.baseTexture &amp;&amp; previousBatch.blendMode == displayObject.blendMode)
				{
					previousBatch.insertAfter(displayObject, previousSprite);
					return;
				}
			}
		}
		else
		{
			&#x2F;&#x2F; TODO reword!
			previousBatch = previousSprite;
		}
	
		if(nextSprite)
		{
			if(nextSprite instanceof PIXI.Sprite)
			{
				nextBatch = nextSprite.batch;
			
				&#x2F;&#x2F;batch may not exist if item was added to the display list but not to the webGL
				if(nextBatch)
				{
					if(nextBatch.texture == displayObject.texture.baseTexture &amp;&amp; nextBatch.blendMode == displayObject.blendMode)
					{
						nextBatch.insertBefore(displayObject, nextSprite);
						return;
					}
					else
					{
						if(nextBatch == previousBatch)
						{
							&#x2F;&#x2F; THERE IS A SPLIT IN THIS BATCH! &#x2F;&#x2F;
							var splitBatch = previousBatch.split(nextSprite);
							&#x2F;&#x2F; COOL!
							&#x2F;&#x2F; add it back into the array	
							&#x2F;*
							 * OOPS!
							 * seems the new sprite is in the middle of a batch
							 * lets split it.. 
							 *&#x2F;
							var batch = PIXI.WebGLRenderer.getBatch();

							var index = this.batchs.indexOf( previousBatch );
							batch.init(displayObject);
							this.batchs.splice(index+1, 0, batch, splitBatch);
							
							return;
						}
					}
				}
			}
			else
			{
				&#x2F;&#x2F; TODO re-word!
				nextBatch = nextSprite;
			}
		}
		
		&#x2F;*
		 * looks like it does not belong to any batch!
		 * but is also not intersecting one..
		 * time to create anew one!
		 *&#x2F;
		
		var batch =  PIXI.WebGLRenderer.getBatch();
		batch.init(displayObject);

		if(previousBatch) &#x2F;&#x2F; if this is invalid it means 
		{
			var index = this.batchs.indexOf( previousBatch );
			this.batchs.splice(index+1, 0, batch);
		}
		else
		{
			this.batchs.push(batch);
		}
	
	}
	else if(displayObject instanceof PIXI.TilingSprite)
	{
		&#x2F;&#x2F; add to a batch!!
		this.initTilingSprite(displayObject);
		this.batchs.push(displayObject);
		
	}
	else if(displayObject instanceof PIXI.Strip)
	{
		&#x2F;&#x2F; add to a batch!!
		this.initStrip(displayObject);
		this.batchs.push(displayObject);
	}
	else if(displayObject instanceof PIXI.Graphics)
	{
		&#x2F;&#x2F;displayObject.initWebGL(this);
		
		&#x2F;&#x2F; add to a batch!!
		&#x2F;&#x2F;this.initStrip(displayObject);
		this.batchs.push(displayObject);
	}
	
	&#x2F;&#x2F; if its somthing else... then custom codes!
	this.batchUpdate = true;
}

PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
	&#x2F;&#x2F; TODO - this can be faster - but not as important right now
	
	this.addDisplayObject(displayObject);
	var children = displayObject.children;
	
	for (var i=0; i &lt; children.length; i++) 
	{
	  	this.addDisplayObjectAndChildren(children[i]);
	};
}

PIXI.WebGLRenderGroup.prototype.removeDisplayObject = function(displayObject)
{
	&#x2F;&#x2F; loop through children..
	&#x2F;&#x2F; display object &#x2F;&#x2F;
	
	&#x2F;&#x2F; add a child from the render group..
	&#x2F;&#x2F; remove it and all its children!
	&#x2F;&#x2F;displayObject.cacheVisible = false;&#x2F;&#x2F;displayObject.visible;
	displayObject.__renderGroup = null;
	
	if(!displayObject.renderable)return;
	
	&#x2F;*
	 * removing is a lot quicker..
	 * 
	 *&#x2F;
	var batchToRemove;
	
	if(displayObject instanceof PIXI.Sprite)
	{
		&#x2F;&#x2F; should always have a batch!
		var batch = displayObject.batch;
		if(!batch)return; &#x2F;&#x2F; this means the display list has been altered befre rendering
		
		batch.remove(displayObject);
		
		if(batch.size==0)
		{
			batchToRemove = batch;
		}
	}
	else
	{
		batchToRemove = displayObject;
	}
	
	&#x2F;*
	 * Looks like there is somthing that needs removing!
	 *&#x2F;
	if(batchToRemove)	
	{
		var index = this.batchs.indexOf( batchToRemove );
		if(index == -1)return;&#x2F;&#x2F; this means it was added then removed before rendered
		
		&#x2F;&#x2F; ok so.. check to see if you adjacent batchs should be joined.
		&#x2F;&#x2F; TODO may optimise?
		if(index == 0 || index == this.batchs.length-1)
		{
			&#x2F;&#x2F; wha - eva! just get of the empty batch!
			this.batchs.splice(index, 1);
			if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
		
			return;
		}
		
		if(this.batchs[index-1] instanceof PIXI.WebGLBatch &amp;&amp; this.batchs[index+1] instanceof PIXI.WebGLBatch)
		{
			if(this.batchs[index-1].texture == this.batchs[index+1].texture &amp;&amp; this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
			{
				&#x2F;&#x2F;console.log(&quot;MERGE&quot;)
				this.batchs[index-1].merge(this.batchs[index+1]);
				
				if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
				PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
				this.batchs.splice(index, 2);
				return;
			}
		}
		
		
		this.batchs.splice(index, 1);
		if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
	}
}

PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{
	&#x2F;&#x2F; TODO - this can be faster - but not as important right now
	if(displayObject.__renderGroup != this)return;
	
	this.removeDisplayObject(displayObject);
	var children = displayObject.children;
	
	for (var i=0; i &lt; children.length; i++) 
	{
	  	this.removeDisplayObjectAndChildren(children[i]);
	};
}

&#x2F;**
 * @private
 *&#x2F;

PIXI.WebGLRenderGroup.prototype.getNextRenderable = function(displayObject)
{
	&#x2F;*
	 *  LOOK FOR THE NEXT SPRITE
	 *  This part looks for the closest next sprite that can go into a batch
	 *  it keeps looking until it finds a sprite or gets to the end of the display
	 *  scene graph
	 * 
	 *  These look a lot scarier than the actually are...
	 *&#x2F;
	
	var nextSprite = displayObject;
	do
	{
		&#x2F;&#x2F; moving forward!
		&#x2F;&#x2F; if it has no children.. 
		if(nextSprite.children.length == 0)
		{
			&#x2F;&#x2F;maynot have a parent
			if(!nextSprite.parent)return null;
			
			&#x2F;&#x2F; go along to the parent..
			while(nextSprite.childIndex == nextSprite.parent.children.length-1)
			{
				nextSprite = nextSprite.parent;
				&#x2F;&#x2F;console.log(&quot;&gt;&quot; + nextSprite);
&#x2F;&#x2F;				console.log(&quot;&gt;-&quot; + this.root);
				if(nextSprite ==  this.root || !nextSprite.parent)&#x2F;&#x2F;displayObject.stage)
				{
					nextSprite = null
					break;
				}
			}
			
			if(nextSprite)nextSprite = nextSprite.parent.children[nextSprite.childIndex+1];
		}
		else
		{
			nextSprite = nextSprite.children[0];
		}

		if(!nextSprite)break;
	}
	while(!nextSprite.renderable || !nextSprite.__renderGroup)
	
	return nextSprite;
}

PIXI.WebGLRenderGroup.prototype.getPreviousRenderable = function(displayObject)
{
	&#x2F;*
	 *  LOOK FOR THE PREVIOUS SPRITE
	 *  This part looks for the closest previous sprite that can go into a batch
	 *  It keeps going back until it finds a sprite or the stage
	 *&#x2F;
	var previousSprite = displayObject;
	do
	{
		if(previousSprite.childIndex == 0)
		{
			previousSprite = previousSprite.parent;
			if(!previousSprite)return null;
		}
		else
		{
			
			previousSprite = previousSprite.parent.children[previousSprite.childIndex-1];
			&#x2F;&#x2F; what if the bloop has children???
			while(previousSprite.children.length != 0)
			{
				&#x2F;&#x2F; keep diggin till we get to the last child
				previousSprite = previousSprite.children[previousSprite.children.length-1];
			}
		}
		
		if(previousSprite == this.root)break;
	}
	while(!previousSprite.renderable || !previousSprite.__renderGroup);
	
	return previousSprite;
}

&#x2F;**
 * @private
 *&#x2F;
PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
{
	var gl = this.gl;

	&#x2F;&#x2F; make the texture tilable..
			
	sprite.verticies = new Float32Array([0, 0,
										  sprite.width, 0,
										  sprite.width,  sprite.height,
										 0,  sprite.height]);
					
	sprite.uvs = new Float32Array([0, 0,
									1, 0,
									1, 1,
									0, 1]);
				
	sprite.colors = new Float32Array([1,1,1,1]);
	
	sprite.indices =  new Uint16Array([0, 1, 3,2])&#x2F;&#x2F;, 2]);
	
	
	sprite._vertexBuffer = gl.createBuffer();
	sprite._indexBuffer = gl.createBuffer();
	sprite._uvBuffer = gl.createBuffer();
	sprite._colorBuffer = gl.createBuffer();
						
	gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);

	gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,  sprite.uvs, gl.DYNAMIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, sprite._colorBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, sprite.colors, gl.STATIC_DRAW);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
    
&#x2F;&#x2F;    return ( (x &gt; 0) &amp;&amp; ((x &amp; (x - 1)) == 0) );

	if(sprite.texture.baseTexture._glTexture)
	{
    	gl.bindTexture(gl.TEXTURE_2D, sprite.texture.baseTexture._glTexture);
    	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
		sprite.texture.baseTexture._powerOf2 = true;
	}
	else
	{
		sprite.texture.baseTexture._powerOf2 = true;
	}
}

&#x2F;**
 * @private
 *&#x2F;
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
{
	var gl = this.gl;
	var shaderProgram = PIXI.shaderProgram;
&#x2F;&#x2F;	mat
	var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
	PIXI.mat4.transpose(mat4Real);
	PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )

	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mat4Real);
  
	if(strip.blendMode == PIXI.blendModes.NORMAL)
	{
		gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
	}
	else
	{
		gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
	}
	
	if(!strip.dirty)
	{
		
		gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
		gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
	    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
		
		&#x2F;&#x2F; update the uvs
	   	gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
	    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
			
	    gl.activeTexture(gl.TEXTURE0);
	    gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
		
		gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
	    gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
		
		&#x2F;&#x2F; dont need to upload!
	    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
    
	
	}
	else
	{
		strip.dirty = false;
		gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
	    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
		
		&#x2F;&#x2F; update the uvs
	   	gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
	   	gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
	    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
			
	    gl.activeTexture(gl.TEXTURE0);
	    gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
		
		gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
	    gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
		
		&#x2F;&#x2F; dont need to upload!
	    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
	    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
	    
	}
	&#x2F;&#x2F;console.log(gl.TRIANGLE_STRIP)
	gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
    
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, projectionMatrix);
  
}


&#x2F;**
 * @private
 *&#x2F;
PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projectionMatrix)
{
	var gl = this.gl;
	var shaderProgram = PIXI.shaderProgram;
	
	var tilePosition = sprite.tilePosition;
	var tileScale = sprite.tileScale;
	
	var offsetX =  tilePosition.x&#x2F;sprite.texture.baseTexture.width;
	var offsetY =  tilePosition.y&#x2F;sprite.texture.baseTexture.height;
	
	var scaleX =  (sprite.width &#x2F; sprite.texture.baseTexture.width)  &#x2F; tileScale.x;
	var scaleY =  (sprite.height &#x2F; sprite.texture.baseTexture.height) &#x2F; tileScale.y;

	sprite.uvs[0] = 0 - offsetX;
	sprite.uvs[1] = 0 - offsetY;
	
	sprite.uvs[2] = (1 * scaleX)  -offsetX;
	sprite.uvs[3] = 0 - offsetY;
	
	sprite.uvs[4] = (1 *scaleX) - offsetX;
	sprite.uvs[5] = (1 *scaleY) - offsetY;
	
	sprite.uvs[6] = 0 - offsetX;
	sprite.uvs[7] = (1 *scaleY) - offsetY;
	
	gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
	gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
	
	this.renderStrip(sprite, projectionMatrix);
}



&#x2F;**
 * @private
 *&#x2F;
PIXI.WebGLRenderer.prototype.initStrip = function(strip)
{
	&#x2F;&#x2F; build the strip!
	var gl = this.gl;
	var shaderProgram = this.shaderProgram;
	
	strip._vertexBuffer = gl.createBuffer();
	strip._indexBuffer = gl.createBuffer();
	strip._uvBuffer = gl.createBuffer();
	strip._colorBuffer = gl.createBuffer();
	
	gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);

	gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,  strip.uvs, gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);

	
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}


    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>