Merge branch 'dev-primitive' into dev

Conflicts:
	bin/pixi.js

bin/pixi.dev.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 1 - Basics/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 10 - Text/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 11 - RenderTexture/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 13 - Graphics/index.html

@@ -0,0 +1,109 @@
+<!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/WebGLGraphics.js"></script>
+	<script src="../../src/pixi/renderers/WebGLShaders.js"></script>
+	<script src="../../src/pixi/renderers/CanvasGraphics.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(10, 0x30FF00, 0.5);
+	graphics.moveTo(50,50);
+	graphics.lineTo(250, 50);
+	//graphics.lineTo(100, 100);
+	graphics.lineTo(250, 220);
+	graphics.lineTo(50, 220);
+	
+	graphics.lineTo(150, 50);
+	
+	graphics.lineStyle(2, 0x30FFFF, 1);
+	
+//	graphics.beginFill(0xFF794B);
+	graphics.drawRect(250, 250, 300, 100);
+	
+	
+	graphics.drawCircle(350, 350,100);
+	graphics.endFill();
+	
+	graphics.lineTo(250, 50);
+	
+	graphics.lineStyle(10, 0xFF0000, 1);
+	graphics.moveTo(400,400);
+	graphics.lineTo(550, 50);
+	
+	graphics.lineStyle(30, 0xFF0000, 1);
+	graphics.moveTo(400,100);
+	graphics.lineTo(550, 50);
+//	graphics.lineTo(92, 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);
+	var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
+	
+	stage.addChild(sprite);
+	stage.addChild(graphics);
+	
+	requestAnimFrame(animate);
+
+	function animate() {
+	    renderer.render(stage);
+	    requestAnimFrame( animate );
+	}
+
+	</script>
+
+	</body>
+</html>

examples/example 2 - SpriteSheet/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 3 - MovieClip/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 4 - Balls/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 5 - Morph/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 6 - Interactivity/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 7 - Transparent Background/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 8 - Dragging/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

examples/example 9 - Tiling Texture/pixi.js

@@ -1499,7 +1499,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;
 		}
 		
@@ -2484,6 +2484,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -2509,6 +2514,35 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
   return shader;
 }
 
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
@@ -2567,9 +2601,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -2638,17 +2672,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -2705,7 +2738,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);
 	
@@ -3484,11 +3519,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -3514,6 +3548,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 		{
 			if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
 		}
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -3846,19 +3884,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;
@@ -3955,6 +3990,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;
@@ -4546,6 +4589,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		displayObject.render(this);
+	}
 	
 	// render!
 	if(displayObject.children)

src/pixi/InteractionManager.js

@@ -133,7 +133,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,103 @@
+/**
+ * @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.fillAlpha = 1;
+	
+	this.lineWidth = 2;
+	this.lineColor = "#FF0000";
+	
+	this.graphicsData = [];
+	
+}
+
+// SOME TYPES:
+PIXI.Graphics.POLY = 0;
+PIXI.Graphics.RECT = 1;
+PIXI.Graphics.CIRC = 2;
+
+// constructor
+PIXI.Graphics.constructor = PIXI.Graphics;
+PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
+
+PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
+{
+	
+	this.lineWidth = lineWidth || 0;
+	this.lineColor = color || 0;
+	this.lineAlpha = (alpha == undefined) ? 1 : alpha;
+	
+	this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
+	this.graphicsData.push(this.currentPath);
+	
+	// TODO store the last position of the line in the current
+}
+
+
+PIXI.Graphics.prototype.moveTo = function(x, y)
+{
+	this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
+	
+	this.currentPath.points.push(x, y);
+	
+	this.graphicsData.push(this.currentPath);
+}
+
+PIXI.Graphics.prototype.lineTo = function(x, y)
+{
+	this.currentPath.points.push(x, y);
+}
+
+PIXI.Graphics.prototype.beginFill = function(color, alpha)
+{
+	this.filling = true;
+	this.fillColor = color || 0;
+	this.fillAlpha = alpha || 1;
+}
+
+PIXI.Graphics.prototype.endFill = function()
+{
+	this.filling = false;
+	this.fillColor = null;
+	this.fillAlpha = 1;
+}
+
+PIXI.Graphics.prototype.updateTransform = function()
+{
+	if(!this.visible)return;
+	PIXI.DisplayObject.prototype.updateTransform.call( this );
+}
+
+PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
+{
+	this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 
+						fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, 
+						points:[x, y, width, height], type:PIXI.Graphics.RECT};
+						
+	this.graphicsData.push(this.currentPath);
+}
+
+PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
+{
+	this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 
+						fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, 
+						points:[x, y, radius], type:PIXI.Graphics.CIRC};
+						
+	this.graphicsData.push(this.currentPath);
+}

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/CanvasGraphics.js

@@ -0,0 +1,87 @@
+/**
+ * @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.CanvasGraphics = function()
+{
+	
+}
+
+// constructor
+
+PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
+{
+	
+	for (var i=0; i < graphics.graphicsData.length; i++) 
+	{
+		var data = graphics.graphicsData[i];
+		var points = data.points;
+		
+		context.strokeStyle = "#" + data.lineColor.toString(16);
+      	
+		context.lineWidth = data.lineWidth;
+		context.globalAlpha = data.lineAlpha;
+		
+		if(data.type == PIXI.Graphics.POLY)
+		{
+			if(data.lineWidth <= 0)continue;
+			
+			context.beginPath();
+			
+			context.moveTo(points[0], points[1]);
+			
+			for (var j=1; j < points.length/2; j++)
+			{
+				context.lineTo(points[j * 2], points[j * 2 + 1]);
+			} 
+	      	
+	      	// if the first and last point are the same close the path - much neater :)
+	      	if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
+	      	{
+	      		context.closePath();
+	      	}
+			
+			context.stroke();
+		}
+		else if(data.type == PIXI.Graphics.RECT)
+		{
+			// TODO - need to be Undefined!
+			if(data.fillColor)
+			{
+				context.fillStyle = "#" + data.fillColor.toString(16);
+				context.fillRect(points[0], points[1], points[2], points[3]);
+				
+			}
+			if(data.lineWidth)
+			{
+				context.strokeRect(points[0], points[1], points[2], points[3]);
+			}
+		}
+		else if(data.type == PIXI.Graphics.CIRC)
+		{
+			// TODO - need to be Undefined!
+      		context.beginPath();
+			context.arc(points[0], points[1], points[2],0,2*Math.PI);
+			context.closePath();
+			
+			if(data.fill)
+			{
+				context.fillStyle = "#" + data.fillColor.toString(16);
+      			context.fill();
+			}
+			if(data.lineWidth)
+			{
+      			context.stroke();
+			}
+		}
+      	
+	   
+	};
+}

src/pixi/renderers/CanvasRenderer.js

@@ -197,6 +197,10 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 	{
 		displayObject.renderCanvas(this);
 	}
+	else if(displayObject instanceof PIXI.Graphics)
+	{
+		PIXI.CanvasGraphics.renderGraphics(displayObject, context);
+	}
 	
 	// render!
 	if(displayObject.children)

src/pixi/renderers/WebGLGraphics.js

@@ -0,0 +1,431 @@
+/**
+ * @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.WebGLGraphics = function()
+{
+	
+}
+
+// constructor
+PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
+
+PIXI.WebGLGraphics.renderGraphics = function(graphics)
+{
+	PIXI.activatePrimitiveShader();
+	var gl = PIXI.gl;
+	
+	// graphicsObject
+	// a collection of "shapes" (mainly lines right now!)
+	///this.shape.draw();
+	if(!graphics._webGL)PIXI.WebGLGraphics.initGraphics(graphics);
+	
+	gl.uniformMatrix4fv(PIXI.shaderProgram2.mvMatrixUniform, false, PIXI.projectionMatrix );
+	
+	gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
+	gl.vertexAttribPointer(PIXI.shaderProgram2.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
+	gl.vertexAttribPointer(PIXI.shaderProgram2.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+	
+	//shaderProgram.colorAttribute
+	
+//	ulong idx, long size, ulong type, bool norm, long stride, ulong offset )
+	gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.points.length/6);
+	
+	PIXI.activateDefaultShader();
+}
+
+PIXI.WebGLGraphics.initGraphics = function(graphics)
+{
+	graphics._webGL = {points:[], lastPosition:new PIXI.Point()};
+	
+	for (var i=0; i < graphics.graphicsData.length; i++) 
+	{
+		var data = graphics.graphicsData[i];
+		
+		if(data.type == PIXI.Graphics.POLY)
+		{
+			if(data.lineWidth > 0)
+			{
+				PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
+			}
+		}
+		else if(data.type == PIXI.Graphics.RECT)
+		{
+			PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
+		}
+		else if(data.type == PIXI.Graphics.CIRC)
+		{
+			PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
+		}
+	};
+	
+	// convert to points
+	graphics._webGL.points = new Float32Array(graphics._webGL.points);
+	
+	var gl = PIXI.gl;
+	
+	graphics._webGL.buffer = gl.createBuffer();
+	
+	gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
+	gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.points, gl.STATIC_DRAW);
+}
+
+
+PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
+{
+	// --- //
+	// need to convert points to a nice regular data
+	// 
+	var rectData = graphicsData.points;
+	var x = rectData[0];
+	var y = rectData[1];
+	var width = rectData[2];
+	var height = rectData[3];
+	
+	
+	if(graphicsData.fill)
+	{
+		var color = HEXtoRGB(graphicsData.fillColor);
+		var alpha = graphicsData.fillAlpha;
+
+		var r = color[0] * alpha;
+		var g = color[1] * alpha;
+		var b = color[2] * alpha;
+	
+		var verts = webGLData.points;
+		
+		// dead triangle
+		verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1); 
+		verts.push(x, y, 1, 1, 1, 1);
+		
+		// start
+		verts.push(x, y);
+		verts.push(r, g, b, alpha);
+		
+		verts.push(x + width, y);
+		verts.push(r, g, b, alpha);
+		
+		verts.push(x , y + height);
+		verts.push(r, g, b, alpha);
+		
+		verts.push(x + width, y + height);
+		verts.push(r, g, b, alpha);
+		
+		webGLData.lastPosition.x = x + width;
+		webGLData.lastPosition.y = y + height;
+	}
+	
+	if(graphicsData.lineWidth)
+	{
+		graphicsData.points = [x, y,
+				  x + width, y,
+				  x + width, y + height,
+				  x, y + height,
+				  x, y];
+	
+		PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
+	}
+	
+}
+
+PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
+{
+	// --- //
+	// need to convert points to a nice regular data
+	// 
+	var rectData = graphicsData.points;
+	var x = rectData[0];
+	var y = rectData[1];
+	var radius = rectData[2];
+	
+	var totalSegs = 40
+	var seg = (Math.PI * 2) / totalSegs ;
+		
+	if(graphicsData.fill)
+	{
+		var color = HEXtoRGB(graphicsData.fillColor);
+		var alpha = graphicsData.fillAlpha;
+
+		var r = color[0] * alpha;
+		var g = color[1] * alpha;
+		var b = color[2] * alpha;
+	
+		var verts = webGLData.points;
+		
+		verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1); 
+		verts.push(x, y, 1, 1, 1, 1);
+		
+		for (var i=0; i < totalSegs + 1 ; i++) 
+		{
+			verts.push(x,y);
+			verts.push(r, g, b, alpha);
+			
+			verts.push(x + Math.sin(seg * i) * radius,
+					   y + Math.cos(seg * i) * radius);
+		
+			verts.push(r, g, b, alpha);
+		};
+		
+		verts.push(x,y);
+		verts.push(1, 0, 0, 1);
+		
+		webGLData.lastPosition.x = x;
+		webGLData.lastPosition.y = y;
+	}
+	
+	if(graphicsData.lineWidth)
+	{
+		graphicsData.points = [];
+		
+		for (var i=0; i < totalSegs + 1; i++) 
+		{
+			graphicsData.points.push(x + Math.sin(seg * i) * radius,
+									 y + Math.cos(seg * i) * radius)
+		};
+		
+		PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
+	}
+	
+}
+
+PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
+{
+	var wrap = true;
+	var points = graphicsData.points;
+	if(points.length == 0)return;
+	
+	// get first and last point.. figure out the middle!
+	var firstPoint = new PIXI.Point( points[0], points[1] );
+	var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
+	
+	// if the first point is the last point - goona have issues :)
+	if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
+	{
+		points.pop();
+		points.pop();
+		
+		lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
+		
+		var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+		var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+		
+		points.unshift(midPointX, midPointY);
+		points.push(midPointX, midPointY)
+	}
+	
+	var verts = webGLData.points;
+	
+	var length = points.length / 2;
+	
+	// DRAW the Line
+	var width = graphicsData.lineWidth / 2;
+	
+	var color = HEXtoRGB(graphicsData.lineColor);
+	var alpha = graphicsData.lineAlpha;
+	var r = color[0] * alpha;
+	var g = color[1] * alpha;
+	var b = color[2] * alpha;
+	
+	// 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;
+	
+	// insert dead triangle!
+	verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1); 
+	verts.push(points[0] - perp.x , points[1] - perp.y, 1, 1, 1, 1);
+	
+	
+	// start
+	verts.push(points[0] - perp.x , points[1] - perp.y);
+	verts.push(r, g, b, alpha);
+	
+	verts.push(points[0] + perp.x , points[1] + perp.y);
+	verts.push(r, g, b, alpha);
+	
+	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 > 140 * 140)
+		{
+			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;
+			
+			verts.push(point2.x - perp3.x, point2.y -perp3.y);
+			verts.push(r, g, b, alpha);
+	
+			verts.push(point2.x + perp3.x, point2.y +perp3.y);
+			verts.push(r, g, b, alpha);
+	
+			verts.push(point2.x - perp3.x, point2.y -perp3.y);
+			verts.push(r, g, b, alpha);
+		}
+		else
+		{
+			verts.push(p.x , p.y);
+			verts.push(r, g, b, alpha);
+	
+			verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
+			verts.push(r, g, b, alpha);
+		}
+	}
+	
+	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(r, g, b, alpha);
+	
+	verts.push(point2.x + perp.x , point2.y + perp.y)
+	verts.push(r, g, b, alpha);
+	
+	// set last triangle!
+	webGLData.lastPosition.x = point2.x + perp.x;
+	webGLData.lastPosition.y = point2.y + perp.y;
+	
+}
+
+function HEXtoRGB(hex) {
+	return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
+}
+
+
+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;
+    console.log("!")
+    	denom+=1;
+    }
+    ip=new PIXI.Point();
+    ip.x=(b1*c2 - b2*c1)/denom;
+    ip.y=(a2*c1 - a1*c2)/denom;
+
+    return ip;
+}	
+
+
+
+PIXI.primitiveShaderFragmentSrc = [
+  "precision mediump float;",
+  "varying vec4 vColor;",
+  "void main(void) {",
+    "gl_FragColor = vColor;",
+  "}"
+];
+
+PIXI.primitiveShaderVertexSrc = [
+  "attribute vec2 aVertexPosition;",
+  "attribute vec4 aColor;",
+  "uniform mat4 uMVMatrix;",
+  "varying vec4 vColor;",
+  "void main(void) {",
+    "gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
+    "vColor = aColor;",
+  "}"
+];
+
+
+PIXI.WebGLGraphics.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");
+    shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
+    
+    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+}

src/pixi/renderers/WebGLRenderGroup.js

@@ -45,11 +45,10 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
 
 PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
 {
-	
 	PIXI.WebGLRenderer.updateTextures();
 	
 	var gl = this.gl;
-	
+
 	// set the flipped matrix..
 	gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
 	
@@ -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) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 }
@@ -407,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;
@@ -516,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

@@ -34,7 +34,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
 	
 	this.view = view || document.createElement( 'canvas' ); 
     this.view.width = this.width;
-	this.view.height = this.height;  
+	this.view.height = this.height;
 	
 	// deal with losing context..	
     var scope = this;
@@ -56,9 +56,9 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
     	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
     }
     
+    PIXI.WebGLGraphics.initShaders();
     this.initShaders();
     
-    
     var gl = this.gl;
     PIXI.WebGLRenderer.gl = gl;
     
@@ -127,17 +127,16 @@ PIXI.WebGLRenderer.prototype.initShaders = function()
     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, "aColor");
-    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
 
 
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+    
+    PIXI.activateDefaultShader();
 }
 
 
@@ -194,7 +193,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);
 	

src/pixi/renderers/WebGLShaders.js

@@ -28,6 +28,11 @@ PIXI.shaderVertexSrc = [
   "}"
 ];
 
+/*
+ * primitive shader..
+ */
+
+
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
   return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@@ -52,3 +57,32 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
 
   return shader;
 }
+
+PIXI.activateDefaultShader = function()
+{
+	var gl = PIXI.gl;
+	var shaderProgram = PIXI.shaderProgram;
+	
+	gl.useProgram(shaderProgram);
+	
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+    gl.enableVertexAttribArray(shaderProgram.colorAttribute);
+} 
+
+PIXI.activatePrimitiveShader = function()
+{
+	var gl = PIXI.gl;
+	
+	gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
+    gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
+    
+	var shaderProgram2 = PIXI.shaderProgram2;
+	
+	gl.useProgram(shaderProgram2);
+	
+	gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
+	gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
+    
+} 
+