Initial Commit

Mitre line algorth working in webGL

bin/pixi.dev.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 1 - Basics/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 10 - Text/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 11 - RenderTexture/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 13 - Graphics/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<title>pixi.js example 13 - Graphics</title>
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+			background-color: #000000;
+		}
+	</style>
+	
+	
+	<script src="pixi.js"></script>
+	<script src="../../src/pixi/renderers/CanvasRenderer.js"></script>
+	<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
+	<script src="../../src/pixi/renderers/WebGLRenderGroup.js"></script>
+	<script src="../../src/pixi/primitives/Graphics.js"></script>
+</head>
+<body>
+	<script>
+	
+
+	// create an new instance of a pixi stage
+	var stage = new PIXI.Stage(0x000000);
+
+	// create a renderer instance
+	//var renderer = new PIXI.CanvasRenderer(800, 600);//PIXI.autoDetectRenderer(800, 600);
+	var renderer = PIXI.autoDetectRenderer(800, 600);
+	
+	// set the canvas width and height to fill the screen
+//	renderer.view.style.width = window.innerWidth + "px";
+	//renderer.view.style.height = window.innerHeight + "px";
+	renderer.view.style.display = "block";
+	 
+	// add render view to DOM
+	document.body.appendChild(renderer.view);
+	
+	// OOH! SHINY!
+	// create two render textures.. these dynamic textures will be used to draw the scene into itself
+	
+	var graphics = new PIXI.Graphics();
+	
+	graphics.lineStyle(3, 0xff0000);
+	graphics.moveTo(50,50);
+	graphics.lineTo(100, 100);
+	graphics.lineTo(250, 220);
+	
+	
+	
+	graphics.lineTo(150, 20);
+	//graphics.lineTo(450, 223);
+	
+	/*
+	 * point1 = new Point(350, 50);
+			
+			point2 = new Point(100, 100);
+			
+			point3 = new Point(250, 220);
+			
+			
+			points = new Vector.<Point>();
+			points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
+			
+	 */
+	//graphics.lineTo(410,300);
+	
+	
+	//graphics.lineTo(450,320);
+	//graphics.lineTo(570,350);
+	//graphics.lineTo(580,120);
+//	graphics.lineTo(630,120);
+	
+	stage.addChild(graphics);
+	
+	requestAnimFrame(animate);
+	    renderer.render(stage);
+
+	function animate() {
+	    requestAnimFrame( animate );
+	}
+
+	</script>
+
+	</body>
+</html>

examples/example 2 - SpriteSheet/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 3 - MovieClip/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 4 - Balls/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 5 - Morph/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 6 - Interactivity/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 7 - Transparent Background/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 8 - Dragging/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

examples/example 9 - Tiling Texture/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-06-07
+ * Compiled: 2013-06-14
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1465,7 +1465,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		
@@ -2643,7 +2643,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);
 	
@@ -3422,7 +3424,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -3452,6 +3453,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -3652,8 +3657,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -3665,6 +3671,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -3683,19 +3789,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -3792,6 +3895,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;
@@ -4383,6 +4494,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

src/pixi/InteractionManager.js

@@ -131,7 +131,7 @@ PIXI.InteractionManager.prototype.update = function()
 		
 		var len = this.interactiveItems.length;
 		
-		for (var i=0; i < this.interactiveItems.length; i++) {
+		for (var i=0; i < len; i++) {
 		  this.interactiveItems[i].interactiveChildren = false;
 		}
 		

src/pixi/primitives/Graphics.js

@@ -0,0 +1,472 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+
+/**
+ * A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
+ * @class DisplayObjectContainer 
+ * @extends DisplayObject
+ * @constructor
+ */
+PIXI.Graphics = function()
+{
+	PIXI.DisplayObjectContainer.call( this );
+	
+	this.renderable = true;
+	
+	// style - color
+	// style - thickness
+	// alpha - 
+	
+	this.paths = [];	
+	this.currentPath = {points:[]};
+	
+	// path has a 
+	// line?
+	// fill?
+	// 
+	
+	this.colors = new Float32Array([100]);
+		
+//		this.indices = new Uint16Array([0, 1, 2, 3]);
+}
+
+// constructor
+PIXI.Graphics.constructor = PIXI.Graphics;
+PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
+
+PIXI.Graphics.prototype.lineStyle = function(thickness, color)
+{
+	
+}
+
+
+PIXI.Graphics.prototype.moveTo = function(x, y)
+{
+	this.currentPath.points.push(x, y);
+}
+
+PIXI.Graphics.prototype.lineTo = function(x, y)
+{
+	this.currentPath.points.push(x, y);
+}
+
+PIXI.Graphics.prototype.render = function(renderer)
+{
+	
+	var context = renderer.context;
+	var points = this.currentPath.points;
+	var length = this.currentPath.points.length / 2;
+	
+	context.lineWidth = 40;
+	context.globalAlpha = 1;
+	
+	context.strokeStyle="#FF0000";
+	
+	context.beginPath();
+	
+	
+	context.moveTo( points[0], points[1] )
+	
+	for (var i=1; i < length; i++) {
+	  	context.lineTo( points[i * 2], points[i * 2 + 1] );
+	};
+	
+	context.stroke();
+	
+}
+/*
+PIXI.Graphics.prototype.render = function()
+{
+	var context = renderer.context;
+	var points = this.currentPath.points;
+	var length = this.currentPath.points.length / 2;
+	
+	context.lineWidth = 5;
+	context.globalAlpha = 1;
+	
+	context.strokeStyle="#FF0000";
+	
+//	graphics.clear();
+//	graphics.lineStyle(3, 0xFF0000);
+	context.beginPath();
+	
+	// DRAW the Line
+	context.moveTo(points[0], points[1]);
+	
+	for (var i = 1; i < length; i++) 
+	{
+		var linex = points[i* 2];
+		var liney = points[i*2 + 1];
+		context.lineTo(linex, liney);	
+		
+	}
+	
+	context.stroke()
+	context.lineWidth = 2;
+	
+	context.beginPath();
+	
+	var newVerts = PIXI.Shape.convertPoints(points);
+	
+	for (var i = 1; i < newVerts.length/2; i++) 
+	{
+		var linex = newVerts[i* 2];
+		var liney = newVerts[i*2 + 1];
+		context.lineTo(linex, liney);	
+		
+	}	
+	
+	context.stroke();
+	
+	return;
+}
+*/
+
+
+
+PIXI.Graphics.prototype.renderWebGL = function(renderer)
+{
+	if(!this.shape)
+	{
+		this.shape = new PIXI.Shape(this.currentPath.points);
+	}
+	
+	this.shape.draw();
+	
+	/*
+	var context = renderer.context;
+	var points = this.currentPath.points;
+	var length = this.currentPath.points.length / 2;
+	
+	context.globalAlpha = 1;
+	
+	context.strokeStyle="#FF0000";
+	
+	context.beginPath();
+	
+	context.moveTo( points[0], points[1] )
+	
+	for (var i=1; i < length; i++) {
+	  	context.lineTo( points[i * 2], points[i * 2 + 1] );
+	};
+	
+	context.stroke();
+	*/
+	
+	//console.log("@@")
+	
+	// ----- lines ------ //
+}
+
+PIXI.Shape = function(points)
+{
+	this.points = new Float32Array(points);
+	
+	var gl = PIXI.gl;
+	
+	this.buffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+	gl.bufferData(gl.ARRAY_BUFFER, this.points, gl.STATIC_DRAW);
+	
+	this.initShaders();
+	
+}
+
+PIXI.primitiveShaderFragmentSrc = [
+  "precision mediump float;",
+  //"uniform vec4 color;",
+  "void main(void) {",
+    "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);",
+  "}"
+];
+
+PIXI.primitiveShaderVertexSrc = [
+  "attribute vec2 aVertexPosition;",
+  "uniform mat4 uMVMatrix;",
+  "void main(void) {",
+    "gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
+  "}"
+];
+
+PIXI.Shape.prototype.initShaders = function() 
+{
+	var gl = PIXI.gl;
+	var fragmentShader = PIXI.CompileFragmentShader(gl, PIXI.primitiveShaderFragmentSrc);
+	var vertexShader = PIXI.CompileVertexShader(gl, PIXI.primitiveShaderVertexSrc);
+	
+	PIXI.shaderProgram2 = gl.createProgram();
+	
+	var shaderProgram = PIXI.shaderProgram2;
+	
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        alert("Could not initialise shaders");
+    }
+
+    gl.useProgram(shaderProgram);
+
+    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+
+	//    shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+ 	//   gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+	
+	///shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "color");
+    //gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+
+	//shaderProgram.color = gl.getUniformLocation(shaderProgram, "color");
+	//console.log(shaderProgram.color)
+	//gl.uniform4f(shaderProgram.color, 1.0, 0.0, 0.0, 1.0);
+	
+    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+}
+ 
+PIXI.Shape.constructor = PIXI.Shape;
+
+
+PIXI.Shape.prototype.draw = function()
+{
+	var gl = PIXI.gl;
+	gl.useProgram(PIXI.shaderProgram2);
+	gl.lineWidth(5);
+	
+	var webGLPoints = PIXI.Shape.convertPoints(this.points);
+	
+	
+	
+//	console.log(PIXI.shaderProgram2.mvMatrixUniform)
+	gl.uniformMatrix4fv(PIXI.shaderProgram2.mvMatrixUniform, false, PIXI.projectionMatrix );
+    gl.vertexAttribPointer(PIXI.shaderProgram2.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+	
+	gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+//	gl.bufferSubData(gl.ARRAY_BUFFER, 0, webGLPoints)
+	gl.bufferData(gl.ARRAY_BUFFER, webGLPoints, gl.STATIC_DRAW);
+	
+	
+	gl.drawArrays(gl.TRIANGLE_STRIP, 0, webGLPoints.length/2);
+	
+	gl.useProgram(PIXI.shaderProgram);
+}
+
+
+PIXI.Shape.convertPoints = function(points)
+{
+	var verts = [];//0, 0, 0, 0];
+	
+	var length = points.length / 2;
+	
+	// DRAW the Line
+	verts.push(points[0], points[1])
+	
+	var width = 20;
+	
+	// i = 0 //
+	var point1 = new PIXI.Point( points[0], points[1] );
+	var point2 = new PIXI.Point( points[2], points[3] );
+	var perp = getPerp(point1, point2);
+	var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
+	perp.x /= dist;
+	perp.y /= dist;
+	perp.x *= width;
+	perp.y *= width;
+	
+	verts.push(points[0] - perp.x , points[1] - perp.y)
+	verts.push(points[0] + perp.x , points[1] + perp.y)
+	for (var i = 1; i < length-1; i++) 
+	{
+		var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
+		var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
+		var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
+		
+		
+
+		var perp = getPerp(point1, point2);
+		var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
+		perp.x /= dist;
+		perp.y /= dist;
+		perp.x *= width;
+		perp.y *= width;
+
+		var perp2 = getPerp(point2, point3);
+		var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
+		perp2.x /= dist2;
+		perp2.y /= dist2;
+		perp2.x *= width;
+		perp2.y *= width;
+		
+		
+		var p1 = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
+		var p1_ = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
+		
+		var p2 = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
+		var p2_ = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
+		
+		var p = lineIntersectLine(p1, p1_, p2, p2_);
+		
+		var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
+		
+		if(pdist > 50 * 50)
+		{
+			var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
+			var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
+			perp3.x /= dist3;
+			perp3.y /= dist3;
+			perp3.x *= width;
+			perp3.y *= width;
+//					var perp = 
+			verts.push(point2.x - perp3.x, point2.y -perp3.y);
+			verts.push(point2.x + perp3.x, point2.y +perp3.y);
+			verts.push(point2.x - perp3.x, point2.y -perp3.y);
+		//	graphics.drawCircle(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y), 4);	
+				
+		}
+		else
+		{
+			
+	//	context.fillRect(2,1,1,1);
+			verts.push(p.x , p.y);
+			verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
+		}
+	}
+	
+	var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
+	var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
+	
+	var perp = getPerp(point1, point2);
+	
+	var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
+	perp.x /= dist;
+	perp.y /= dist;
+	perp.x *= width;
+	perp.y *= width;
+
+	verts.push(point2.x - perp.x , point2.y - perp.y)
+	verts.push(point2.x + perp.x , point2.y + perp.y)
+	
+	return new Float32Array(verts);
+}
+
+function normalise(point)
+{
+	var dist = Math.sqrt(point.x * point.x + point.y * point.y);
+	return new PIXI.Point(point.x / dist, point.y / dist);
+}
+
+function getPerp(point, point2)
+{
+	return new PIXI.Point(-(point.y - point2.y), point.x - point2.x);
+}
+
+function lineIntersectLine(A,B,E,F) 
+{
+    var ip;
+    var a1;
+    var a2;
+    var b1;
+    var b2;
+    var c1;
+    var c2;
+ 
+    a1= B.y-A.y;
+    b1= A.x-B.x;
+    c1= B.x*A.y - A.x*B.y;
+    a2= F.y-E.y;
+    b2= E.x-F.x;
+    c2= F.x*E.y - E.x*F.y;
+ 
+    var denom=a1*b2 - a2*b1;
+    
+    if (denom == 0) {
+    //    return null;
+    	denom+=1;
+    }
+    ip=new PIXI.Point();
+    ip.x=(b1*c2 - b2*c1)/denom;
+    ip.y=(a2*c1 - a1*c2)/denom;
+ 
+    //---------------------------------------------------
+    //Do checks to see if intersection to endpoints
+    //distance is longer than actual Segments.
+    //Return null if it is with any.
+    //---------------------------------------------------
+    
+
+    return ip;
+}	
+
+/*
+PIXI.Shape.prototype.convertPoints = function(points)
+{
+	var verts = [0, 0, 0, 0];
+	
+	var total = points.length/2;
+//	var lastPoint = points[0];
+	var lastPointX = points[0];
+	var lastPointY = points[1];
+	var nextPointX = 0;
+	var nextPointY = 0;
+	
+	var perp = {x:0, y:0};
+	var pointX = points[0];
+	var pointY = points[1];
+	
+	for (var i =  1; i < total; i++) 
+	{
+		
+		var pointX = points[i * 2];
+		var pointY = points[i * 2 + 1];
+	
+		var index = i * 4;
+		
+		if(i < points.length-2)
+		{
+			nextPointX = points[(i+1) * 2];
+			nextPointY = points[(i+1) * 2 + 1];
+		}
+		else
+		{
+			nextPointX = pointX;
+			nextPointY = pointY;
+		}
+		
+		perp.y = -(nextPointX - lastPointX);
+		perp.x = nextPointY - lastPointY;
+		
+		var ratio = (1 - (i / (total-1))) * 10;
+		if(ratio > 1)ratio = 1;
+				
+		var perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
+		var num = 10;
+		perp.x /= perpLength;
+		perp.y /= perpLength;
+	
+		perp.x *= num;
+		perp.y *= num;
+		verts[index] = pointX + perp.x 
+		verts[index+1] = pointY + perp.y
+		verts[index+2] = pointX - perp.x 
+		verts[index+3] = pointY - perp.y
+
+		lastPointX = pointX;
+		lastPointY = pointY;
+	}
+	
+	return new Float32Array(verts);
+}
+*/
+/**
+ * @private
+ */
+PIXI.Graphics.prototype.updateTransform = function()
+{
+	if(!this.visible)return;
+	
+	PIXI.DisplayObject.prototype.updateTransform.call( this );
+	
+}
+

src/pixi/primitives/Line.js

@@ -0,0 +1,37 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+
+/**
+ * A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
+ * @class DisplayObjectContainer 
+ * @extends DisplayObject
+ * @constructor
+ */
+PIXI.Line = function()
+{
+	PIXI.DisplayObject.call( this );
+	
+	// style - color
+	// style - thickness
+	// alpha - 
+}
+
+// constructor
+PIXI.Line.constructor = PIXI.Line;
+PIXI.Line.prototype = Object.create( PIXI.DisplayObject.prototype );
+
+
+
+
+/**
+ * @private
+ */
+PIXI.DisplayObjectContainer.prototype.updateTransform = function()
+{
+	if(!this.visible)return;
+	
+	PIXI.DisplayObject.prototype.updateTransform.call( this );
+	
+}

src/pixi/renderers/CanvasRenderer.js

@@ -197,6 +197,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	for (var i=0; i < displayObject.children.length; i++) 

src/pixi/renderers/WebGLRenderGroup.js

@@ -45,7 +45,6 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
@@ -75,6 +74,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
+		}
 	}
 	
 }
@@ -275,8 +278,9 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 			child.textureChange = false;
 			if(child.worldVisible)
 			{
-				this.removeDisplayObject(child)
+				this.removeDisplayObject(child);
-				this.addDisplayObject(child)
+				this.addDisplayObject(child);
+				//this.updateTexture(child);
 			}
 			// update texture!!
 		}
@@ -288,6 +292,106 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
 	};
 }
 
+PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
+{
+	// we know this exists..
+	// is it in a batch..
+	// check batch length
+	if(displayObject.batch.length == 1)
+	{
+		// just one! this guy! so simply swap the texture
+		displayObject.batch.texture = displayObject.texture.baseTexture;
+		return;
+	}
+	
+	// early out!
+	if(displayObject.batch.texture == displayObject.texture.baseTexture)return;
+	
+	
+	if(displayObject.batch.head == displayObject)
+	{
+		//console.log("HEAD")
+		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 && previousBatch.blendMode == displayObject.blendMode)
+			{
+				previousBatch.insertAfter(displayObject, previousBatch.tail);
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index-1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// 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 && nextBatch.blendMode == displayObject.blendMode)
+			{
+				nextBatch.insertBefore(displayObject, nextBatch.head);
+				return;
+			}
+			else
+			{
+				// add it before..
+				var batch = PIXI.WebGLRenderer.getBatch();
+				batch.init(displayObject);
+				this.batchs.splice(index+1, 0, batch);
+			}
+			
+		}
+		else
+		{
+			// we are 0!
+			var batch = PIXI.WebGLRenderer.getBatch();
+			batch.init(displayObject);
+			this.batchs.push(batch);
+		}
+	}
+	else
+	{
+	//	console.log("MIDDLE")
+		var currentBatch = displayObject.batch;
+		
+		// split the batch into 2
+		// AH! dont split on the current display object as the texture is wrong!
+		var splitBatch = currentBatch.split(displayObject);
+		
+		// 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)
 {
 	// add a child to the render group..
@@ -306,19 +410,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 	
 	var previousSprite = this.getPreviousRenderable(displayObject);
 	var nextSprite = this.getNextRenderable(displayObject);
-	
 
 	/*
 	 * so now we have the next renderable and the previous renderable
 	 * 
 	 */
-	
 	if(displayObject instanceof PIXI.Sprite)
 	{
 		var previousBatch
 		var nextBatch
 		
-		//console.log( previousSprite)
 		if(previousSprite instanceof PIXI.Sprite)
 		{
 			previousBatch = previousSprite.batch;
@@ -415,6 +516,14 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
 		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);
+	}
 	
 	// if its somthing else... then custom codes!
 	this.batchUpdate = true;

src/pixi/renderers/WebGLRenderer.js

@@ -130,10 +130,10 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
 
     shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
-    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+   // gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
 	
 	shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+   // gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
@@ -194,7 +194,9 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
 	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);     
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-
+	// HACK TO TEST
+	PIXI.projectionMatrix = this.projectionMatrix;
+	
 	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
 	this.stageRenderGroup.render(this.projectionMatrix);