Newer
Older
pixi.js / src / pixi / renderers / webgl / WebGLRenderGroup.js
/**
 * @author Mat Groves http://matgroves.com/ @Doormat23
 */

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

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

/**
 * Add a display object to the webgl renderer
 *
 * @method setRenderable
 * @param displayObject {DisplayObject}
 * @private 
 */
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{
    // has this changed??
    if(this.root)this.removeDisplayObjectAndChildren(this.root);
    
    displayObject.worldVisible = displayObject.visible;
    
    // soooooo //
    // to check if any batchs exist already??
    
    // TODO what if its already has an object? should remove it
    this.root = displayObject;
    this.addDisplayObjectAndChildren(displayObject);
}

/**
 * Renders the stage to its webgl view
 *
 * @method render
 * @param projection {Object}
 */
PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer)
{
    PIXI.WebGLRenderer.updateTextures();
    
    var gl = this.gl;
    gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y);

    this.filterManager.begin(projection, buffer);

    
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    // will render all the elements in the group
    var renderable;

    for (var i=0; i < this.batchs.length; i++) 
    {
        
        renderable = this.batchs[i];
        if(renderable instanceof PIXI.WebGLBatch)
        {
            this.batchs[i].render();
            continue;
        }
        
        // render special
        this.renderSpecial(renderable, projection);
    }
    
}

/**
 * Renders a specific displayObject
 *
 * @method renderSpecific
 * @param displayObject {DisplayObject}
 * @param projection {Object}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection, buffer)
{
    PIXI.WebGLRenderer.updateTextures();
    var gl = this.gl;

    gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y);

    this.filterManager.begin(projection, buffer);

    // to do!
    // render part of the scene...
    
    var startIndex;
    var startBatchIndex;
    
    var endIndex;
    var endBatchIndex;
    
    /*
     *  LOOK FOR THE NEXT SPRITE
     *  This part looks for the closest next sprite that can go into a batch
     *  it keeps looking until it finds a sprite or gets to the end of the display
     *  scene graph
     */
    var nextRenderable = displayObject.first;
    while(nextRenderable._iNext)
    {
        if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
        nextRenderable = nextRenderable._iNext;
    }
    var startBatch = nextRenderable.batch;
    //console.log(nextRenderable);
    
    //console.log(renderable)
    if(nextRenderable instanceof PIXI.Sprite)
    {
        startBatch = nextRenderable.batch;
        
        var head = startBatch.head;
        var next = head;
        
        // ok now we have the batch.. need to find the start index!
        if(head == nextRenderable)
        {
            startIndex = 0;
        }
        else
        {
            startIndex = 1;
            
            while(head.__next != nextRenderable)
            {
                startIndex++;
                head = head.__next;
            }
        }
    }
    else
    {
        startBatch = nextRenderable;
    }
    
    // Get the LAST renderable object
    var lastRenderable = displayObject.last;
    while(lastRenderable._iPrev)
    {
        if(lastRenderable.renderable && lastRenderable.__renderGroup)break;
        lastRenderable = lastRenderable._iNext;
    }
    
    if(lastRenderable instanceof PIXI.Sprite)
    {
        endBatch = lastRenderable.batch;
        
        var head = endBatch.head;
        
        if(head == lastRenderable)
        {
            endIndex = 0;
        }
        else
        {
            endIndex = 1;
            
            while(head.__next != lastRenderable)
            {
                endIndex++;
                head = head.__next;
            }
        }
    }
    else
    {
        endBatch = lastRenderable;
    }
    
    //console.log(endBatch);
    // TODO - need to fold this up a bit!
    
    if(startBatch == endBatch)
    {
        if(startBatch instanceof PIXI.WebGLBatch)
        {
            startBatch.render(startIndex, endIndex+1);
        }
        else
        {
            this.renderSpecial(startBatch, projection);
        }
        return;
    }
    
    // now we have first and last!
    startBatchIndex = this.batchs.indexOf(startBatch);
    endBatchIndex = this.batchs.indexOf(endBatch);
    
    // DO the first batch
    if(startBatch instanceof PIXI.WebGLBatch)
    {
        startBatch.render(startIndex);
    }
    else
    {
        this.renderSpecial(startBatch, projection);
    }
    
    // DO the middle batchs..
    for (var i=startBatchIndex+1; i < endBatchIndex; i++) 
    {
        renderable = this.batchs[i];
    
        if(renderable instanceof PIXI.WebGLBatch)
        {
            this.batchs[i].render();
        }
        else
        {
            this.renderSpecial(renderable, projection);
        }
    }
    
    // DO the last batch..
    if(endBatch instanceof PIXI.WebGLBatch)
    {
        endBatch.render(0, endIndex+1);
    }
    else
    {
        this.renderSpecial(endBatch, projection);
    }
}

/**
 * Renders a specific renderable
 *
 * @method renderSpecial
 * @param renderable {DisplayObject}
 * @param projection {Object}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{
    
    var worldVisible = renderable.vcount === PIXI.visibleCount


    if(renderable instanceof PIXI.TilingSprite)
    {
        if(worldVisible)this.renderTilingSprite(renderable, projection);
    }
    else if(renderable instanceof PIXI.Strip)
    {
        if(worldVisible)this.renderStrip(renderable, projection);
    }
    else if(renderable instanceof PIXI.CustomRenderable)
    {
        if(worldVisible) renderable.renderWebGL(this, projection);
    }
    else if(renderable instanceof PIXI.Graphics)
    {
        if(worldVisible && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable, projection);
    }
    else if(renderable instanceof PIXI.FilterBlock)
    {
        this.handleFilterBlock(renderable, projection);
    }
}

flip = false;
var maskStack = [];
var maskPosition = 0;

//var usedMaskStack = [];

PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(filterBlock, projection)
{
    /*
     * for now only masks are supported..
     */
    var gl = PIXI.gl;
    
    if(filterBlock.open)
    {
        if(filterBlock.data instanceof Array)
        {
            this.filterManager.pushFilter(filterBlock);
            // ok so..
            
        }
        else
        {   
            maskPosition++;

            maskStack.push(filterBlock)
    
            gl.enable(gl.STENCIL_TEST);
            
            gl.colorMask(false, false, false, false);
            
            gl.stencilFunc(gl.ALWAYS,1,1);
            gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
    
            PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection);
            
            gl.colorMask(true, true, true, true);
            gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length);
            gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
        }
    }
    else
    {
        if(filterBlock.data instanceof Array)
        {
            this.filterManager.popFilter();
        }
        else
        {
            var maskData = maskStack.pop(filterBlock)


            if(maskData)
            {
                gl.colorMask(false, false, false, false);
            
                gl.stencilFunc(gl.ALWAYS,1,1);
                gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);

                PIXI.WebGLGraphics.renderGraphics(maskData.data, projection);
            
                gl.colorMask(true, true, true, true);
                gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length);
                gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
            };

            gl.disable(gl.STENCIL_TEST);
        }
    }
}

/**
 * Updates a webgl texture
 *
 * @method updateTexture
 * @param displayObject {DisplayObject}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{
    
    // TODO definitely can optimse this function..
    
    this.removeObject(displayObject);
    
    /*
     *  LOOK FOR THE PREVIOUS RENDERABLE
     *  This part looks for the closest previous sprite that can go into a batch
     *  It keeps going back until it finds a sprite or the stage
     */
    var previousRenderable = displayObject.first;
    while(previousRenderable != this.root)
    {
        previousRenderable = previousRenderable._iPrev;
        if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
    }
    
    /*
     *  LOOK FOR THE NEXT SPRITE
     *  This part looks for the closest next sprite that can go into a batch
     *  it keeps looking until it finds a sprite or gets to the end of the display
     *  scene graph
     */
    var nextRenderable = displayObject.last;
    while(nextRenderable._iNext)
    {
        nextRenderable = nextRenderable._iNext;
        if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
    }
    
    this.insertObject(displayObject, previousRenderable, nextRenderable);
}

/**
 * Adds filter blocks
 *
 * @method addFilterBlocks
 * @param start {FilterBlock}
 * @param end {FilterBlock}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
{
    start.__renderGroup = this;
    end.__renderGroup = this;
    /*
     *  LOOK FOR THE PREVIOUS RENDERABLE
     *  This part looks for the closest previous sprite that can go into a batch
     *  It keeps going back until it finds a sprite or the stage
     */
    var previousRenderable = start;
    while(previousRenderable != this.root.first)
    {
        previousRenderable = previousRenderable._iPrev;
        if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
    }
    this.insertAfter(start, previousRenderable);
        
    /*
     *  LOOK FOR THE NEXT SPRITE
     *  This part looks for the closest next sprite that can go into a batch
     *  it keeps looking until it finds a sprite or gets to the end of the display
     *  scene graph
     */
    var previousRenderable2 = end;
    while(previousRenderable2 != this.root.first)
    {
        previousRenderable2 = previousRenderable2._iPrev;
        if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break;
    }
    this.insertAfter(end, previousRenderable2);
}

/**
 * Remove filter blocks
 *
 * @method removeFilterBlocks
 * @param start {FilterBlock}
 * @param end {FilterBlock}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
{
    this.removeObject(start);
    this.removeObject(end);
}

/**
 * Adds a display object and children to the webgl context
 *
 * @method addDisplayObjectAndChildren
 * @param displayObject {DisplayObject}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
    if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
    
    /*
     *  LOOK FOR THE PREVIOUS RENDERABLE
     *  This part looks for the closest previous sprite that can go into a batch
     *  It keeps going back until it finds a sprite or the stage
     */
    
    var previousRenderable = displayObject.first;
    while(previousRenderable != this.root.first)
    {
        previousRenderable = previousRenderable._iPrev;
        if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
    }
    
    /*
     *  LOOK FOR THE NEXT SPRITE
     *  This part looks for the closest next sprite that can go into a batch
     *  it keeps looking until it finds a sprite or gets to the end of the display
     *  scene graph
     */
    var nextRenderable = displayObject.last;
    while(nextRenderable._iNext)
    {
        nextRenderable = nextRenderable._iNext;
        if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
    }
    
    // one the display object hits this. we can break the loop  
    
    var tempObject = displayObject.first;
    var testObject = displayObject.last._iNext;
    do  
    {
        tempObject.__renderGroup = this;
        
        if(tempObject.renderable)
        {
        
            this.insertObject(tempObject, previousRenderable, nextRenderable);
            previousRenderable = tempObject;
        }
        
        tempObject = tempObject._iNext;
    }
    while(tempObject != testObject)
}

/**
 * Removes a display object and children to the webgl context
 *
 * @method removeDisplayObjectAndChildren
 * @param displayObject {DisplayObject}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{
    if(displayObject.__renderGroup != this)return;
    
//  var displayObject = displayObject.first;
    var lastObject = displayObject.last;
    do  
    {
        displayObject.__renderGroup = null;
        if(displayObject.renderable)this.removeObject(displayObject);
        displayObject = displayObject._iNext;
    }
    while(displayObject)
}

/**
 * Inserts a displayObject into the linked list
 *
 * @method insertObject
 * @param displayObject {DisplayObject}
 * @param previousObject {DisplayObject}
 * @param nextObject {DisplayObject}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousObject, nextObject)
{
    // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
    var previousSprite = previousObject;
    var nextSprite = nextObject;
    
    /*
     * so now we have the next renderable and the previous renderable
     * 
     */
    if(displayObject instanceof PIXI.Sprite)
    {
        var previousBatch
        var nextBatch
        
        if(previousSprite instanceof PIXI.Sprite)
        {
            previousBatch = previousSprite.batch;
            if(previousBatch)
            {
                if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode)
                {
                    previousBatch.insertAfter(displayObject, previousSprite);
                    return;
                }
            }
        }
        else
        {
            // TODO reword!
            previousBatch = previousSprite;
        }
    
        if(nextSprite)
        {
            if(nextSprite instanceof PIXI.Sprite)
            {
                nextBatch = nextSprite.batch;
            
                //batch may not exist if item was added to the display list but not to the webGL
                if(nextBatch)
                {
                    if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode)
                    {
                        nextBatch.insertBefore(displayObject, nextSprite);
                        return;
                    }
                    else
                    {
                        if(nextBatch == previousBatch)
                        {
                            // THERE IS A SPLIT IN THIS BATCH! //
                            var splitBatch = previousBatch.split(nextSprite);
                            // COOL!
                            // add it back into the array   
                            /*
                             * OOPS!
                             * seems the new sprite is in the middle of a batch
                             * lets split it.. 
                             */
                            var batch = PIXI.WebGLRenderer.getBatch();

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

        if(previousBatch) // if this is invalid it means 
        {
            var index = this.batchs.indexOf( previousBatch );
            this.batchs.splice(index+1, 0, batch);
        }
        else
        {
            this.batchs.push(batch);
        }
        
        return;
    }
    else if(displayObject instanceof PIXI.TilingSprite)
    {
        
        // add to a batch!!
        this.initTilingSprite(displayObject);
    //  this.batchs.push(displayObject);
        
    }
    else if(displayObject instanceof PIXI.Strip)
    {
        // add to a batch!!
        this.initStrip(displayObject);
    //  this.batchs.push(displayObject);
    }
    else if(displayObject)// instanceof PIXI.Graphics)
    {
        //displayObject.initWebGL(this);
        
        // add to a batch!!
        //this.initStrip(displayObject);
        //this.batchs.push(displayObject);
    }
    
    this.insertAfter(displayObject, previousSprite);
            
    // insert and SPLIT!

}

/**
 * Inserts a displayObject into the linked list
 *
 * @method insertAfter
 * @param item {DisplayObject}
 * @param displayObject {DisplayObject} The object to insert
 * @private
 */
PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
{
    if(displayObject instanceof PIXI.Sprite)
    {
        var previousBatch = displayObject.batch;
        
        if(previousBatch)
        {
            // so this object is in a batch!
            
            // is it not? need to split the batch
            if(previousBatch.tail == displayObject)
            {
                // is it tail? insert in to batchs  
                var index = this.batchs.indexOf( previousBatch );
                this.batchs.splice(index+1, 0, item);
            }
            else
            {
                // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //
                
                // THERE IS A SPLIT IN THIS BATCH! //
                var splitBatch = previousBatch.split(displayObject.__next);
                
                // COOL!
                // add it back into the array   
                /*
                 * OOPS!
                 * seems the new sprite is in the middle of a batch
                 * lets split it.. 
                 */
                var index = this.batchs.indexOf( previousBatch );
                this.batchs.splice(index+1, 0, item, splitBatch);
            }
        }
        else
        {
            this.batchs.push(item);
        }
    }
    else
    {
        var index = this.batchs.indexOf( displayObject );
        this.batchs.splice(index+1, 0, item);
    }
}

/**
 * Removes a displayObject from the linked list
 *
 * @method removeObject
 * @param displayObject {DisplayObject} The object to remove
 * @private
 */
PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
    // loop through children..
    // display object //
    
    // add a child from the render group..
    // remove it and all its children!
    //displayObject.cacheVisible = false;//displayObject.visible;

    /*
     * removing is a lot quicker..
     * 
     */
    var batchToRemove;
    
    if(displayObject instanceof PIXI.Sprite)
    {
        // should always have a batch!
        var batch = displayObject.batch;
        if(!batch)return; // this means the display list has been altered befre rendering
        
        batch.remove(displayObject);
        
        if(batch.size==0)
        {
            batchToRemove = batch;
        }
    }
    else
    {
        batchToRemove = displayObject;
    }
    
    /*
     * Looks like there is somthing that needs removing!
     */
    if(batchToRemove)   
    {
        var index = this.batchs.indexOf( batchToRemove );
        if(index == -1)return;// this means it was added then removed before rendered
        
        // ok so.. check to see if you adjacent batchs should be joined.
        // TODO may optimise?
        if(index == 0 || index == this.batchs.length-1)
        {
            // wha - eva! just get of the empty batch!
            this.batchs.splice(index, 1);
            if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
        
            return;
        }
        
        if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch)
        {
            if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
            {
                //console.log("MERGE")
                this.batchs[index-1].merge(this.batchs[index+1]);
                
                if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
                PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
                this.batchs.splice(index, 2);
                return;
            }
        }
        
        this.batchs.splice(index, 1);
        if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
    }
}


/**
 * Initializes a tiling sprite
 *
 * @method initTilingSprite
 * @param sprite {TilingSprite} The tiling sprite to initialize
 * @private
 */
PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
{
    var gl = this.gl;

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

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

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

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
    
//    return ( (x > 0) && ((x & (x - 1)) == 0) );

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

/**
 * Renders a Strip
 *
 * @method renderStrip
 * @param strip {Strip} The strip to render
 * @param projection {Object}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{
    var gl = this.gl;

    PIXI.activateStripShader();

    var shader = PIXI.stripShader;

    var program = shader.program;
    
    var m = PIXI.mat3.clone(strip.worldTransform);
    
    PIXI.mat3.transpose(m);
    
//  console.log(projection)
    // set the matrix transform for the 
    gl.uniformMatrix3fv(shader.translationMatrix, false, m);
    gl.uniform2f(shader.projectionVector, projection.x, projection.y);
    gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
    
    gl.uniform1f(shader.alpha, strip.worldAlpha);

    /*
    if(strip.blendMode == PIXI.blendModes.NORMAL)
    {
        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    }
    else
    {
        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
    }
    */
    
    //console.log("!!")
    if(!strip.dirty)
    {   
        gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
        gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
        gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
        
        // update the uvs
        gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
        gl.vertexAttribPointer(shader.aTextureCoord, 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(shader.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(shader.aVertexPosition, 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(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
            
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
    //  console.log(strip.texture.baseTexture._glTexture)
        gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
        gl.vertexAttribPointer(shader.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);
        
    }
    
    gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
    
    PIXI.deactivateStripShader();
    //gl.useProgram(PIXI.currentProgram);
}

/**
 * Renders a TilingSprite
 *
 * @method renderTilingSprite
 * @param sprite {TilingSprite} The tiling sprite to render
 * @param projectionMatrix {Object}
 * @private
 */
PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projectionMatrix)
{
    var gl = this.gl;


    var shaderProgram = PIXI.shaderProgram;
    
    var tilePosition = sprite.tilePosition;
    var tileScale = sprite.tileScale;
    
    var offsetX =  tilePosition.x/sprite.texture.baseTexture.width;
    var offsetY =  tilePosition.y/sprite.texture.baseTexture.height;
    
    var scaleX =  (sprite.width / sprite.texture.baseTexture.width)  / tileScale.x;
    var scaleY =  (sprite.height / sprite.texture.baseTexture.height) / tileScale.y;

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

/**
 * Initializes a strip to be rendered
 *
 * @method initStrip
 * @param strip {Strip} The strip to initialize
 * @private
 */
PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
{
    // build the strip!
    var gl = this.gl;
    var shaderProgram = this.shaderProgram;
    
    strip._vertexBuffer = gl.createBuffer();
    strip._indexBuffer = gl.createBuffer();
    strip._uvBuffer = gl.createBuffer();
    strip._colorBuffer = gl.createBuffer();
    
    gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);

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

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

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