#

API Docs for: 1.3.0
Show: Inherited Protected Private Deprecated

# File: src/pixi/renderers/webgl/WebGLRenderGroup.js

    /**
     * @author Mat Groves http://matgroves.com/ @Doormat23
     */

    /**
     * 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}
     */
    PIXI.WebGLRenderGroup = function(gl)
    {
    	this.gl = gl;
    	this.root;

    	this.backgroundColor;
    	this.batchs = [];
    	this.toRemove = [];
    }

    // constructor
    PIXI.WebGLRenderGroup.constructor = PIXI.WebGLRenderGroup;

    PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
    {
    	// has this changed??
    	if(this.root)this.removeDisplayObjectAndChildren(this.root);

    	displayObject.worldVisible = displayObject.visible;

    	// soooooo //
    	// to check if any batchs exist already??

    	// TODO what if its already has an object? should remove it
    	this.root = displayObject;
    	this.addDisplayObjectAndChildren(displayObject);
    }

    PIXI.WebGLRenderGroup.prototype.render = function(projection)
    {
    	PIXI.WebGLRenderer.updateTextures();

    	var gl = this.gl;

    	gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
    	gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    	// TODO remove this by replacing visible with getter setters..
    	this.checkVisibility(this.root, this.root.visible);

    	// will render all the elements in the group
    	var renderable;

    	for (var i=0; i < 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, projection);
    		}
    		else if(renderable instanceof PIXI.Strip)
    		{
    			if(renderable.visible)this.renderStrip(renderable, projection);
    		}
    		else if(renderable instanceof PIXI.Graphics)
    		{
    			if(renderable.visible && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable, projection);//, projectionMatrix);
    		}
    		else if(renderable instanceof PIXI.FilterBlock)
    		{
    			/*
    			 * for now only masks are supported..
    			 */
    			if(renderable.open)
    			{
        			gl.enable(gl.STENCIL_TEST);

    				gl.colorMask(false, false, false, false);
    				gl.stencilFunc(gl.ALWAYS,1,0xff);
    				gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);

    				PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);

    				gl.colorMask(true, true, true, false);
    				gl.stencilFunc(gl.NOTEQUAL,0,0xff);
    				gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
    			}
    			else
    			{
    				gl.disable(gl.STENCIL_TEST);
    			}
    		}
    	}

    }

    PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
    {

    }

    PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
    {
    	PIXI.WebGLRenderer.updateTextures();

    	var gl = this.gl;
    	this.checkVisibility(displayObject, displayObject.visible);

    //	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
    	gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);

    	// to do!
    	// render part of the scene...

    	var startIndex;
    	var startBatchIndex;

    	var endIndex;
    	var endBatchIndex;

    	/*
    	 *  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
    	 */
    	var nextRenderable = displayObject.last;
    	while(nextRenderable._iNext)
    	{
    		nextRenderable = nextRenderable._iNext;
    		if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
    	}
    	var startBatch = nextRenderable.batch;

    	if(nextRenderable instanceof PIXI.Sprite)
    	{
    		startBatch = nextRenderable.batch;

    		var head = startBatch.head;
    		var next = head;

    		// 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;
    	}

    	// Get the LAST renderable object
    	var lastRenderable = displayObject;
    	var endBatch;
    	var lastItem = displayObject;
    	while(lastItem.children.length > 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;
    	}

    	// TODO - need to fold this up a bit!

    	if(startBatch == endBatch)
    	{
    		if(startBatch instanceof PIXI.WebGLBatch)
    		{
    			startBatch.render(startIndex, endIndex+1);
    		}
    		else
    		{
    			this.renderSpecial(startBatch);
    		}
    		return;
    	}

    	// now we have first and last!
    	startBatchIndex = this.batchs.indexOf(startBatch);
    	endBatchIndex = this.batchs.indexOf(endBatch);

    	// DO the first batch
    	if(startBatch instanceof PIXI.WebGLBatch)
    	{
    		startBatch.render(startIndex);
    	}
    	else
    	{
    		this.renderSpecial(startBatch);
    	}

    	// DO the middle batchs..
    	for (var i=startBatchIndex+1; i < endBatchIndex; i++)
    	{
    		renderable = this.batchs[i];

    		if(renderable instanceof PIXI.WebGLBatch)
    		{
    			this.batchs[i].render();
    		}
    		else
    		{
    			this.renderSpecial(renderable);
    		}
    	}

    	// DO the last batch..
    	if(endBatch instanceof PIXI.WebGLBatch)
    	{
    		endBatch.render(0, endIndex+1);
    	}
    	else
    	{
    		this.renderSpecial(endBatch);
    	}
    }

    PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable)
    {
    	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 && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
    	}
    	else if(renderable instanceof PIXI.FilterBlock)
    	{
    		/*
    		 * for now only masks are supported..
    		 */
    		if(renderable.open)
    		{
    			gl.enable(gl.STENCIL_TEST);

    			gl.colorMask(false, false, false, false);
    			gl.stencilFunc(gl.ALWAYS,1,0xff);
    			gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);

    			PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);

    			gl.colorMask(true, true, true, false);
    			gl.stencilFunc(gl.NOTEQUAL,0,0xff);
    			gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
    		}
    		else
    		{
    			gl.disable(gl.STENCIL_TEST);
    		}
    	}
    }

    PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)
    {
    	// give the dp a reference to its renderGroup...
    	var children = displayObject.children;
    	//displayObject.worldVisible = globalVisible;
    	for (var i=0; i < children.length; i++)
    	{
    		var child = children[i];

    		// TODO optimize... should'nt need to loop through everything all the time
    		child.worldVisible = child.visible && globalVisible;

    		// everything should have a batch!
    		// time to see whats new!
    		if(child.textureChange)
    		{
    			child.textureChange = false;
    			if(child.worldVisible)this.updateTexture(child);
    			// update texture!!
    		}

    		if(child.children.length > 0)
    		{
    			this.checkVisibility(child, child.worldVisible);
    		}
    	};
    }

    PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
    {

    	// TODO definitely can optimse this function..

    	this.removeObject(displayObject);

    	/*
    	 *  LOOK FOR THE PREVIOUS RENDERABLE
    	 *  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
    	 */
    	var previousRenderable = displayObject.first;
    	while(previousRenderable != this.root)
    	{
    		previousRenderable = previousRenderable._iPrev;
    		if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
    	}

    	/*
    	 *  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
    	 */
    	var nextRenderable = displayObject.last;
    	while(nextRenderable._iNext)
    	{
    		nextRenderable = nextRenderable._iNext;
    		if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
    	}

    	this.insertObject(displayObject, previousRenderable, nextRenderable);
    }

    PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
    {
    	start.__renderGroup = this;
    	end.__renderGroup = this;
    	/*
    	 *  LOOK FOR THE PREVIOUS RENDERABLE
    	 *  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
    	 */
    	var previousRenderable = start;
    	while(previousRenderable != this.root)
    	{
    		previousRenderable = previousRenderable._iPrev;
    		if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
    	}
    	this.insertAfter(start, previousRenderable);

    	/*
    	 *  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
    	 */
    	var previousRenderable2 = end;
    	while(previousRenderable2 != this.root)
    	{
    		previousRenderable2 = previousRenderable2._iPrev;
    		if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break;
    	}
    	this.insertAfter(end, previousRenderable2);
    }

    PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
    {
    	this.removeObject(start);
    	this.removeObject(end);
    }

    PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
    {
    	if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);

    	/*
    	 *  LOOK FOR THE PREVIOUS RENDERABLE
    	 *  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
    	 */

    	var previousRenderable = displayObject.first;
    	while(previousRenderable != this.root)
    	{
    		previousRenderable = previousRenderable._iPrev;
    		if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
    	}

    	/*
    	 *  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
    	 */
    	var nextRenderable = displayObject.last;
    	while(nextRenderable._iNext)
    	{
    		nextRenderable = nextRenderable._iNext;
    		if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
    	}

    	// one the display object hits this. we can break the loop

    	var tempObject = displayObject.first;
    	var testObject = displayObject.last._iNext;
    	do
    	{
    		tempObject.__renderGroup = this;

    		if(tempObject.renderable)
    		{

    			this.insertObject(tempObject, previousRenderable, nextRenderable);
    			previousRenderable = tempObject;
    		}

    		tempObject = tempObject._iNext;
    	}
    	while(tempObject != testObject)
    }

    PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
    {
    	if(displayObject.__renderGroup != this)return;

    //	var displayObject = displayObject.first;
    	var lastObject = displayObject.last;
    	do
    	{
    		displayObject.__renderGroup = null;
    		if(displayObject.renderable)this.removeObject(displayObject);
    		displayObject = displayObject._iNext;
    	}
    	while(displayObject)
    }

    PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousObject, nextObject)
    {
    	// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
    	var previousSprite = previousObject;
    	var nextSprite = nextObject;

    	/*
    	 * so now we have the next renderable and the previous renderable
    	 *
    	 */
    	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 && previousBatch.blendMode == displayObject.blendMode)
    				{
    					previousBatch.insertAfter(displayObject, previousSprite);
    					return;
    				}
    			}
    		}
    		else
    		{
    			// TODO reword!
    			previousBatch = previousSprite;
    		}

    		if(nextSprite)
    		{
    			if(nextSprite instanceof PIXI.Sprite)
    			{
    				nextBatch = nextSprite.batch;

    				//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 && nextBatch.blendMode == displayObject.blendMode)
    					{
    						nextBatch.insertBefore(displayObject, nextSprite);
    						return;
    					}
    					else
    					{
    						if(nextBatch == previousBatch)
    						{
    							// THERE IS A SPLIT IN THIS BATCH! //
    							var splitBatch = previousBatch.split(nextSprite);
    							// COOL!
    							// add it back into the array
    							/*
    							 * OOPS!
    							 * seems the new sprite is in the middle of a batch
    							 * lets split it..
    							 */
    							var batch = PIXI.WebGLRenderer.getBatch();

    							var index = this.batchs.indexOf( previousBatch );
    							batch.init(displayObject);
    							this.batchs.splice(index+1, 0, batch, splitBatch);

    							return;
    						}
    					}
    				}
    			}
    			else
    			{
    				// TODO re-word!

    				nextBatch = nextSprite;
    			}
    		}

    		/*
    		 * looks like it does not belong to any batch!
    		 * but is also not intersecting one..
    		 * time to create anew one!
    		 */

    		var batch =  PIXI.WebGLRenderer.getBatch();
    		batch.init(displayObject);

    		if(previousBatch) // if this is invalid it means
    		{
    			var index = this.batchs.indexOf( previousBatch );
    			this.batchs.splice(index+1, 0, batch);
    		}
    		else
    		{
    			this.batchs.push(batch);
    		}

    		return;
    	}
    	else if(displayObject instanceof PIXI.TilingSprite)
    	{

    		// add to a batch!!
    		this.initTilingSprite(displayObject);
    	//	this.batchs.push(displayObject);

    	}
    	else if(displayObject instanceof PIXI.Strip)
    	{
    		// add to a batch!!
    		this.initStrip(displayObject);
    	//	this.batchs.push(displayObject);
    	}
    	else if(displayObject)// instanceof PIXI.Graphics)
    	{
    		//displayObject.initWebGL(this);

    		// add to a batch!!
    		//this.initStrip(displayObject);
    		//this.batchs.push(displayObject);
    	}

    	this.insertAfter(displayObject, previousSprite);

    	// insert and SPLIT!

    }

    PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
    {
    	if(displayObject instanceof PIXI.Sprite)
    	{
    		var previousBatch = displayObject.batch;

    		if(previousBatch)
    		{
    			// so this object is in a batch!

    			// is it not? need to split the batch
    			if(previousBatch.tail == displayObject)
    			{
    				// is it tail? insert in to batchs
    				var index = this.batchs.indexOf( previousBatch );
    				this.batchs.splice(index+1, 0, item);
    			}
    			else
    			{
    				// TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //

    				// THERE IS A SPLIT IN THIS BATCH! //
    				var splitBatch = previousBatch.split(displayObject.__next);

    				// COOL!
    				// add it back into the array
    				/*
    				 * OOPS!
    				 * seems the new sprite is in the middle of a batch
    				 * lets split it..
    				 */
    				var index = this.batchs.indexOf( previousBatch );
    				this.batchs.splice(index+1, 0, item, splitBatch);
    			}
    		}
    		else
    		{
    			this.batchs.push(item);
    		}
    	}
    	else
    	{
    		var index = this.batchs.indexOf( displayObject );
    		this.batchs.splice(index+1, 0, item);
    	}
    }

    PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
    {
    	// loop through children..
    	// display object //

    	// add a child from the render group..
    	// remove it and all its children!
    	//displayObject.cacheVisible = false;//displayObject.visible;

    	/*
    	 * removing is a lot quicker..
    	 *
    	 */
    	var batchToRemove;

    	if(displayObject instanceof PIXI.Sprite)
    	{
    		// should always have a batch!
    		var batch = displayObject.batch;
    		if(!batch)return; // this means the display list has been altered befre rendering

    		batch.remove(displayObject);

    		if(batch.size==0)
    		{
    			batchToRemove = batch;
    		}
    	}
    	else
    	{
    		batchToRemove = displayObject;
    	}

    	/*
    	 * Looks like there is somthing that needs removing!
    	 */
    	if(batchToRemove)
    	{
    		var index = this.batchs.indexOf( batchToRemove );
    		if(index == -1)return;// this means it was added then removed before rendered

    		// ok so.. check to see if you adjacent batchs should be joined.
    		// TODO may optimise?
    		if(index == 0 || index == this.batchs.length-1)
    		{
    			// 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 && this.batchs[index+1] instanceof PIXI.WebGLBatch)
    		{
    			if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
    			{
    				//console.log("MERGE")
    				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);
    	}
    }

    /**
     * @private
     */

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

    	// 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])//, 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);

    //    return ( (x > 0) && ((x & (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;
    	}
    }

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

    	gl.useProgram(PIXI.stripShaderProgram);

    	var m = PIXI.mat3.clone(strip.worldTransform);

    	PIXI.mat3.transpose(m);

    	// set the matrix transform for the
     	gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m);
    	gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y);
    	gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha);

    /*
    	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);

    		// 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);

    		// 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);

    		// 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);

    		// dont need to upload!
    	    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
    	    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);

    	}
    	//console.log(gl.TRIANGLE_STRIP);

    	gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);

      	gl.useProgram(PIXI.shaderProgram);
    }

    /**
     * @private
     */
    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/sprite.texture.baseTexture.width;
    	var offsetY =  tilePosition.y/sprite.texture.baseTexture.height;

    	var scaleX =  (sprite.width / sprite.texture.baseTexture.width)  / tileScale.x;
    	var scaleY =  (sprite.height / sprite.texture.baseTexture.height) / 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);
    }

    /**
     * @private
     */
    PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
    {
    	// 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);
    }