#

API Docs for: 1.0.0
Show: Inherited Protected Private Deprecated

# File: src/pixi/renderers/WebGLRenderer.js

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

    PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);

    /**
     * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer should be used for browsers support webGL. This Render works by automatically managing webGLBatchs. So no need for Sprite Batch's or Sprite Cloud's
     * Dont forget to add the view to your DOM or you will not see anything :)
     * @class WebGLRenderer
     * @constructor
     * @param width {Number} the width of the canvas view
     * @default 0
     * @param height {Number} the height of the canvas view
     * @default 0
     * @param view {Canvas} the canvas to use as a view, optional
     * @param transparent {Boolean} the transparency of the render view, default false
     * @default false
     *
     */
    PIXI.WebGLRenderer = function(width, height, view, transparent)
    {
    	//console.log(transparent)
    	this.transparent = !!transparent;

    	this.width = width || 800;
    	this.height = height || 600;

    	this.view = view || document.createElement( 'canvas' );
        this.view.width = this.width;
    	this.view.height = this.height;

    	// deal with losing context..
        var scope = this;
    	this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
    	this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)

    	this.batchs = [];

    	try
     	{
            this.gl = this.view.getContext("experimental-webgl",  {
        		 alpha: this.transparent,
        		 antialias:false, // SPEED UP??
        		 premultipliedAlpha:true
            });
        }
        catch (e)
        {
        	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
        }

        this.initShaders();

        var gl = this.gl;

        this.batch = new PIXI.WebGLBatch(gl);
       	gl.disable(gl.DEPTH_TEST);
        gl.enable(gl.BLEND);
        gl.colorMask(true, true, true, this.transparent);

        this.projectionMatrix =  PIXI.mat4.create();
        this.resize(this.width, this.height)
        this.contextLost = false;
    }

    // constructor
    PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.initShaders = function()
    {
    	var gl = this.gl;
    	var fragmentShader = PIXI.CompileFragmentShader(gl, PIXI.shaderFragmentSrc);
    	var vertexShader = PIXI.CompileVertexShader(gl, PIXI.shaderVertexSrc);

    	this.shaderProgram = gl.createProgram();

    	var shaderProgram = this.shaderProgram;

        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, "aColor");
        gl.enableVertexAttribArray(shaderProgram.colorAttribute);

        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
        shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");

    	PIXI.shaderProgram = this.shaderProgram;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.checkVisibility = function(displayObject, globalVisible)
    {
    	var children = displayObject.children;

    	for (var i=0; i < children.length; i++)
    	{
    		var child = children[i];

    		// TODO optimize... shouldt need to loop through everything all the time
    		var actualVisibility = child.visible && globalVisible;

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

    		if(child.cacheVisible != actualVisibility)
    		{
    			child.cacheVisible = actualVisibility;

    			if(child.cacheVisible)
    			{
    				this.addDisplayObject(child);
    			}
    			else
    			{
    				this.removeDisplayObject(child);
    			}
    		}

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

    /**
     * Renders the stage to its webGL view
     * @method render
     * @param stage {Stage} the PIXI.Stage element to be rendered
     */
    PIXI.WebGLRenderer.prototype.render = function(stage)
    {
    	if(this.contextLost)return;

    	// if rendering a new stage clear the batchs..
    	if(this.__stage !== stage)
    	{
    		if(this.__stage)this.checkVisibility(this.__stage, false)
    		this.__stage = stage;
    	}

    	// update children if need be
    	// best to remove first!
    	for (var i=0; i < stage.__childrenRemoved.length; i++)
    	{
    		this.removeDisplayObject(stage.__childrenRemoved[i]);
    	}

    	// update any textures
    	for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);

    	// empty out the arrays
    	stage.__childrenRemoved = [];
    	stage.__childrenAdded = [];
    	PIXI.texturesToUpdate = [];

    	// recursivly loop through all items!
    	this.checkVisibility(stage, true);

    	// update the scene graph
    	stage.updateTransform();

    	var gl = this.gl;

    	gl.clear(gl.COLOR_BUFFER_BIT)

    	gl.clearColor(stage.backgroundColorSplit[0], stage.backgroundColorSplit[1], stage.backgroundColorSplit[2], 0);

    	// set the correct blend mode!
     	gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
        gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);

    	// render all the batchs!

    	var renderable;
    	for (var i=0; i < this.batchs.length; i++)
    	{
    		renderable = this.batchs[i];
    		if(renderable instanceof PIXI.WebGLBatch)
    		{
    			this.batchs[i].render();
    		}
    		else if(renderable instanceof PIXI.TilingSprite)
    		{
    			if(renderable.visible)this.renderTilingSprite(renderable);
    		}
    		else if(renderable instanceof PIXI.Strip)
    		{
    			if(renderable.visible)this.renderStrip(renderable);
    		}
    	}

    	// interaction
    	// run interaction!
    	if(stage.interactive)
    	{
    		//need to add some events!
    		if(!stage._interactiveEventsAdded)
    		{
    			stage._interactiveEventsAdded = true;
    			stage.interactionManager.setTarget(this);
    		}
    	}
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
    {
    	var gl = this.gl;

    	if(!texture._glTexture)
    	{
    		texture._glTexture = gl.createTexture();
    	}

    	if(texture.hasLoaded)
    	{
    		gl.bindTexture(gl.TEXTURE_2D, texture._glTexture);
    	 	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
    		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
    		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

    		// reguler...

    		//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    		//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    		if(!texture._powerOf2)
    		{
    			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    		}
    		else
    		{
    			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    		}

    	//	gl.generateMipmap(gl.TEXTURE_2D);
    		gl.bindTexture(gl.TEXTURE_2D, null);
    	}

    	this.refreshBatchs = true;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
    {

    	if(!displayObject.stage)return; // means it was removed
    	if(displayObject.__inWebGL)return; //means it is already in webgL

    	//displayObject.cacheVisible = displayObject.visible;

    	// TODO if objects parent is not visible then dont add to stage!!!!
    	//if(!displayObject.visible)return;

    	displayObject.batch = null;

    	//displayObject.cacheVisible = true;
    	if(!displayObject.renderable)return;

    	// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
    	displayObject.__inWebGL = true;

    	/*
    	 *  LOOK FOR THE PREVIOUS SPRITE
    	 *  This part looks for the closest previous sprite that can go into a batch
    	 *  It keeps going back until it finds a sprite or the stage
    	 */
    	var previousSprite = displayObject;
    	do
    	{
    		if(previousSprite.childIndex == 0)
    		{
    			previousSprite = previousSprite.parent;

    		}
    		else
    		{
    			previousSprite = previousSprite.parent.children[previousSprite.childIndex-1];
    			// what if the bloop has children???
    			while(previousSprite.children.length != 0)
    			{
    				// keep diggin till we get to the last child
    				previousSprite = previousSprite.children[previousSprite.children.length-1];
    			}
    		}

    		if(previousSprite == displayObject.stage)break;
    	}
    	while(!previousSprite.renderable || !previousSprite.__inWebGL)
    	//while(!(previousSprite instanceof PIXI.Sprite))

    	/*
    	 *  LOOK FOR THE NEXT SPRITE
    	 *  This part looks for the closest next sprite that can go into a batch
    	 *  it keeps looking until it finds a sprite or gets to the end of the display
    	 *  scene graph
    	 *
    	 *  These look a lot scarier than the actually are...
    	 */
    	var nextSprite = displayObject;
    	do
    	{
    		// moving forward!
    		// if it has no children..
    		if(nextSprite.children.length == 0)
    		{
    			// go along to the parent..
    			while(nextSprite.childIndex == nextSprite.parent.children.length-1)
    			{
    				nextSprite = nextSprite.parent;
    				if(nextSprite == displayObject.stage)
    				{
    					nextSprite = null
    					break;
    				}
    			}

    			if(nextSprite)nextSprite = nextSprite.parent.children[nextSprite.childIndex+1];

    		}
    		else
    		{
    			nextSprite = nextSprite.children[0];
    		}

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

    	/*
    	 * so now we have the next renderable and the previous renderable
    	 *
    	 */

    	if(displayObject instanceof PIXI.Sprite)
    	{
    		var previousBatch
    		var nextBatch

    		if(previousSprite instanceof PIXI.Sprite)
    		{
    			previousBatch = previousSprite.batch;

    			if(previousBatch)
    			{
    				if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode)
    				{
    					previousBatch.insertAfter(displayObject, previousSprite);
    					return;
    				}
    			}
    		}
    		else
    		{
    			// TODO reword!
    			previousBatch = previousSprite;
    		}

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

    				//batch may not exist if item was added to the display list but not to the webGL
    				if(nextBatch)
    				{
    					if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode)
    					{
    						nextBatch.insertBefore(displayObject, nextSprite);
    						return;
    					}
    					else
    					{
    						if(nextBatch == previousBatch)
    						{
    							// THERE IS A SPLIT IN THIS BATCH! //
    							var splitBatch = previousBatch.split(nextSprite);
    							// COOL!
    							// add it back into the array
    							/*
    							 * OOPS!
    							 * seems the new sprite is in the middle of a batch
    							 * lets split it..
    							 */
    							var batch = PIXI._getBatch(this.gl);

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

    							return;
    						}
    					}
    				}
    			}
    			else
    			{
    				// TODO re-word!
    				nextBatch = nextSprite;
    			}
    		}

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

    		var batch = PIXI._getBatch(this.gl);
    		batch.init(displayObject);

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

    	}
    	else if(displayObject instanceof PIXI.TilingSprite)
    	{
    		// add to a batch!!
    		this.initTilingSprite(displayObject);
    		this.batchs.push(displayObject);

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

    	}

    	// if its somthing else... then custom codes!
    	this.batchUpdate = true;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
    {
    	//if(displayObject.stage)return;
    	displayObject.cacheVisible = false;//displayObject.visible;

    	if(!displayObject.renderable)return;

    	displayObject.__inWebGL = false;

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

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

    		batch.remove(displayObject);

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

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

    		// ok so.. check to see if you adjacent batchs should be joined.
    		// TODO may optimise?
    		if(index == 0 || index == this.batchs.length-1)
    		{
    			// wha - eva! just get of the empty batch!
    			this.batchs.splice(index, 1);
    			if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);

    			return;
    		}

    		if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch)
    		{
    			if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
    			{
    				//console.log("MERGE")
    				this.batchs[index-1].merge(this.batchs[index+1]);

    				if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
    				PIXI._returnBatch(this.batchs[index+1]);
    				this.batchs.splice(index, 2);
    				return;
    			}
    		}

    		this.batchs.splice(index, 1);
    		if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
    	}

    }

    /**
     * resizes the webGL view to the specified width and height
     * @method resize
     * @param width {Number} the new width of the webGL view
     * @param height {Number} the new height of the webGL view
     */
    PIXI.WebGLRenderer.prototype.resize = function(width, height)
    {
    	this.width = width;
    	this.height = height;

    	this.view.width = width;
    	this.view.height = height;

    	this.gl.viewport(0, 0, this.width, this.height);

    	var projectionMatrix = this.projectionMatrix;

    	projectionMatrix[0] = 2/this.width;
    	projectionMatrix[5] = -2/this.height;
    	projectionMatrix[12] = -1;
    	projectionMatrix[13] = 1;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.initTilingSprite = function(sprite)
    {

    	var gl = this.gl;

    	// make the texture tilable..

    	sprite.verticies = new Float32Array([0, 0,
    										  sprite.width, 0,
    										  sprite.width,  sprite.height,
    										 0,  sprite.height]);

    	sprite.uvs = new Float32Array([0, 0,
    									1, 0,
    									1, 1,
    									0, 1]);

    	sprite.colors = new Float32Array([1,1,1,1]);

    	sprite.indices =  new Uint16Array([0, 1, 3,2])//, 2]);

    	sprite._vertexBuffer = gl.createBuffer();
    	sprite._indexBuffer = gl.createBuffer();
    	sprite._uvBuffer = gl.createBuffer();
    	sprite._colorBuffer = gl.createBuffer();

    	gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
    	gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);

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

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

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

    //    return ( (x > 0) && ((x & (x - 1)) == 0) );

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

    	/*
    	var context = this.context;

     	if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");

    	context.beginPath();

    	var tilePosition = sprite.tilePosition;
    	var tileScale = sprite.tileScale;

        // offset
        context.scale(tileScale.x,tileScale.y);
        context.translate(tilePosition.x, tilePosition.y);

    	context.fillStyle = sprite.__tilePattern;
    	context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);

        context.translate(-tilePosition.x, -tilePosition.y);
    	context.scale(1/tileScale.x, 1/tileScale.y);
    	*/
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.renderTilingSprite = function(sprite)
    {
    	var gl = this.gl;
    	var shaderProgram = this.shaderProgram;

    	var tilePosition = sprite.tilePosition;
    	var tileScale = sprite.tileScale;

    	var offsetX =  tilePosition.x/sprite.texture.baseTexture.width;
    	var offsetY =  tilePosition.y/sprite.texture.baseTexture.height;

    	var scaleX =  (sprite.width / sprite.texture.baseTexture.width)  / tileScale.x///sprite.texture.baseTexture.width;
    	var scaleY =  (sprite.height / sprite.texture.baseTexture.height) / tileScale.y///sprite.texture.baseTexture.height;
    	//
    	//sprite.dirty = true;
    	sprite.uvs[0] = 0 + offsetX
    	sprite.uvs[1] = 0 - offsetY;

    	sprite.uvs[2] = (1 * scaleX)  +offsetX
    	sprite.uvs[3] = 0 - offsetY;

    	sprite.uvs[4] = (1 *scaleX) + offsetX
    	sprite.uvs[5] = (1 *scaleY) - offsetY;

    	sprite.uvs[6] = 0  + offsetX
    	sprite.uvs[7] = (1 *scaleY) - offsetY;

    	gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
    	gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)

    	this.renderStrip(sprite);

    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.initStrip = function(strip)
    {
    	// build the strip!
    	var gl = this.gl;
    	var shaderProgram = this.shaderProgram;

    	strip._vertexBuffer = gl.createBuffer();
    	strip._indexBuffer = gl.createBuffer();
    	strip._uvBuffer = gl.createBuffer();
    	strip._colorBuffer = gl.createBuffer();

    	gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
    	gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);

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

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

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

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

    	gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, mat4Real);

    	if(strip.blendMode == PIXI.blendModes.NORMAL)
    	{
    		gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    	}
    	else
    	{
    		gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
    	}

    	if(!strip.dirty)
    	{

    		gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
    		gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
    	    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);

    		// update the uvs
    	   	gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
    	    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

    	    gl.activeTexture(gl.TEXTURE0);
    	    gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);

    		gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
    	    gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);

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

    	}
    	else
    	{
    		strip.dirty = false;
    		gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
    		gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
    	    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);

    		// update the uvs
    	   	gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
    	   	gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
    	    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

    	    gl.activeTexture(gl.TEXTURE0);
    	    gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);

    		gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
    		gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
    	    gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);

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

    	}
    	//console.log(gl.TRIANGLE_STRIP)
    	gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);

        gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);

      //  console.log("!!!")
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
    {
    	event.preventDefault();
    	this.contextLost = true;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
    {
    	this.gl = this.view.getContext("experimental-webgl",  {
    		alpha: true
        });

    	this.initShaders();

    	for (var i=0; i < PIXI.TextureCache.length; i++)
    	{
    		this.updateTexture(PIXI.TextureCache[i]);
    	};

    	for (var i=0; i <  this.batchs.length; i++)
    	{
    		this.batchs[i].restoreLostContext(this.gl)//
    		this.batchs[i].dirty = true;
    	};

    	PIXI._restoreBatchs(this.gl);

    	this.contextLost = false;
    }