/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. * if a group of sprites all have the same baseTexture and blendMode then they can be grouped into a batch. All the sprites in a batch can then be drawn in one go by the GPU which is hugely efficient. ALL sprites in the webGL renderer are added to a batch even if the batch only contains one sprite. Batching is handled automatically by the webGL renderer. A good tip is: the smaller the number of batchs there are, the faster the webGL renderer will run. * @class WebGLBatch * @param an instance of the webGL context * @return {PIXI.renderers.WebGLBatch} WebGLBatch {@link PIXI.renderers.WebGLBatch} */ PIXI.WebGLRenderGroup = function(gl) { this.gl = gl; this.root; this.backgroundColor; this.batchs = []; this.toRemove = []; } // constructor PIXI.WebGLRenderGroup.constructor = PIXI.WebGLRenderGroup; PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); displayObject.worldVisible = displayObject.visible; // soooooo // // to check if any batchs exist already?? // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); } PIXI.WebGLRenderGroup.prototype.render = function(projection) { PIXI.WebGLRenderer.updateTextures(); var gl = this.gl; gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // TODO remove this by replacing visible with getter setters.. this.checkVisibility(this.root, this.root.visible); // will render all the elements in the group var renderable; for (var i=0; i < this.batchs.length; i++) { renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); } else if(renderable instanceof PIXI.TilingSprite) { if(renderable.visible)this.renderTilingSprite(renderable, projection); } else if(renderable instanceof PIXI.Strip) { if(renderable.visible)this.renderStrip(renderable, projection); } else if(renderable instanceof PIXI.Graphics) { if(renderable.visible && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable, projection);//, projectionMatrix); } else if(renderable instanceof PIXI.FilterBlock) { /* * for now only masks are supported.. */ if(renderable.open) { gl.enable(gl.STENCIL_TEST); gl.colorMask(false, false, false, false); gl.stencilFunc(gl.ALWAYS,1,0xff); gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE); PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection); gl.colorMask(true, true, true, false); gl.stencilFunc(gl.NOTEQUAL,0,0xff); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); } else { gl.disable(gl.STENCIL_TEST); } } } } PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection) { } PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection) { PIXI.WebGLRenderer.updateTextures(); var gl = this.gl; this.checkVisibility(displayObject, displayObject.visible); // gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix); gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y); // to do! // render part of the scene... var startIndex; var startBatchIndex; var endIndex; var endBatchIndex; /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch * it keeps looking until it finds a sprite or gets to the end of the display * scene graph */ var nextRenderable = displayObject.last; while(nextRenderable._iNext) { nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } var startBatch = nextRenderable.batch; if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; var head = startBatch.head; var next = head; // ok now we have the batch.. need to find the start index! if(head == nextRenderable) { startIndex = 0; } else { startIndex = 1; while(head.__next != nextRenderable) { startIndex++; head = head.__next; } } } else { startBatch = nextRenderable; } // Get the LAST renderable object var lastRenderable = displayObject; var endBatch; var lastItem = displayObject; while(lastItem.children.length > 0) { lastItem = lastItem.children[lastItem.children.length-1]; if(lastItem.renderable)lastRenderable = lastItem; } if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; var head = endBatch.head; if(head == lastRenderable) { endIndex = 0; } else { endIndex = 1; while(head.__next != lastRenderable) { endIndex++; head = head.__next; } } } else { endBatch = lastRenderable; } // TODO - need to fold this up a bit! if(startBatch == endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { startBatch.render(startIndex, endIndex+1); } else { this.renderSpecial(startBatch); } return; } // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { startBatch.render(startIndex); } else { this.renderSpecial(startBatch); } // DO the middle batchs.. for (var i=startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); } else { this.renderSpecial(renderable); } } // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { endBatch.render(0, endIndex+1); } else { this.renderSpecial(endBatch); } } PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable) { if(renderable instanceof PIXI.TilingSprite) { if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix); } else if(renderable instanceof PIXI.Strip) { if(renderable.visible)this.renderStrip(renderable, projectionMatrix); } else if(renderable instanceof PIXI.CustomRenderable) { if(renderable.visible) renderable.renderWebGL(this, projectionMatrix); } else if(renderable instanceof PIXI.Graphics) { if(renderable.visible && renderable.renderable) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix); } else if(renderable instanceof PIXI.FilterBlock) { /* * for now only masks are supported.. */ if(renderable.open) { gl.enable(gl.STENCIL_TEST); gl.colorMask(false, false, false, false); gl.stencilFunc(gl.ALWAYS,1,0xff); gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE); PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection); gl.colorMask(true, true, true, false); gl.stencilFunc(gl.NOTEQUAL,0,0xff); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); } else { gl.disable(gl.STENCIL_TEST); } } } PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible) { // give the dp a reference to its renderGroup... var children = displayObject.children; //displayObject.worldVisible = globalVisible; for (var i=0; i < children.length; i++) { var child = children[i]; // TODO optimize... should'nt need to loop through everything all the time child.worldVisible = child.visible && globalVisible; // everything should have a batch! // time to see whats new! if(child.textureChange) { child.textureChange = false; if(child.worldVisible)this.updateTexture(child); // update texture!! } if(child.children.length > 0) { this.checkVisibility(child, child.worldVisible); } }; } PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { // TODO definitely can optimse this function.. this.removeObject(displayObject); /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; while(previousRenderable != this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch * it keeps looking until it finds a sprite or gets to the end of the display * scene graph */ var nextRenderable = displayObject.last; while(nextRenderable._iNext) { nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } this.insertObject(displayObject, previousRenderable, nextRenderable); } PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end) { start.__renderGroup = this; end.__renderGroup = this; /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; while(previousRenderable != this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch * it keeps looking until it finds a sprite or gets to the end of the display * scene graph */ var previousRenderable2 = end; while(previousRenderable2 != this.root) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); } PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end) { this.removeObject(start); this.removeObject(end); } PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; while(previousRenderable != this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch * it keeps looking until it finds a sprite or gets to the end of the display * scene graph */ var nextRenderable = displayObject.last; while(nextRenderable._iNext) { nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } // one the display object hits this. we can break the loop var tempObject = displayObject.first; var testObject = displayObject.last._iNext; do { tempObject.__renderGroup = this; if(tempObject.renderable) { this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } tempObject = tempObject._iNext; } while(tempObject != testObject) } PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup != this)return; // var displayObject = displayObject.first; var lastObject = displayObject.last; do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } while(displayObject) } PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousObject, nextObject) { // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; /* * so now we have the next renderable and the previous renderable * */ if(displayObject instanceof PIXI.Sprite) { var previousBatch var nextBatch if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; } } } else { // TODO reword! previousBatch = previousSprite; } if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { if(nextBatch == previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch * lets split it.. */ var batch = PIXI.WebGLRenderer.getBatch(); var index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); return; } } } } else { // TODO re-word! nextBatch = nextSprite; } } /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ var batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); if(previousBatch) // if this is invalid it means { var index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } return; } else if(displayObject instanceof PIXI.TilingSprite) { // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); } else if(displayObject instanceof PIXI.Strip) { // add to a batch!! this.initStrip(displayObject); // this.batchs.push(displayObject); } else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } this.insertAfter(displayObject, previousSprite); // insert and SPLIT! } PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; if(previousBatch) { // so this object is in a batch! // is it not? need to split the batch if(previousBatch.tail == displayObject) { // is it tail? insert in to batchs var index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); // COOL! // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch * lets split it.. */ var index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } else { this.batchs.push(item); } } else { var index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } } PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject) { // loop through children.. // display object // // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. * */ var batchToRemove; if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering batch.remove(displayObject); if(batch.size==0) { batchToRemove = batch; } } else { batchToRemove = displayObject; } /* * Looks like there is somthing that needs removing! */ if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); if(index == -1)return;// this means it was added then removed before rendered // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? if(index == 0 || index == this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); return; } if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } } /** * @private */ /** * @private */ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite) { var gl = this.gl; // make the texture tilable.. sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); sprite.colors = new Float32Array([1,1,1,1]); sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.uvs, gl.DYNAMIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.colors, gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) { gl.bindTexture(gl.TEXTURE_2D, sprite.texture.baseTexture._glTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); sprite.texture.baseTexture._powerOf2 = true; } else { sprite.texture.baseTexture._powerOf2 = true; } } /** * @private */ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection) { var gl = this.gl; var shaderProgram = PIXI.shaderProgram; // mat //var mat4Real = PIXI.mat3.toMat4(strip.worldTransform); //PIXI.mat4.transpose(mat4Real); //PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real ) gl.useProgram(PIXI.stripShaderProgram); var m = PIXI.mat3.clone(strip.worldTransform); PIXI.mat3.transpose(m); // set the matrix transform for the gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m); gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y); gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha); /* if(strip.blendMode == PIXI.blendModes.NORMAL) { gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); } else { gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ if(!strip.dirty) { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } else { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); } //console.log(gl.TRIANGLE_STRIP); gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); gl.useProgram(PIXI.shaderProgram); } /** * @private */ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projectionMatrix) { var gl = this.gl; var shaderProgram = PIXI.shaderProgram; var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) this.renderStrip(sprite, projectionMatrix); } /** * @private */ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip) { // build the strip! var gl = this.gl; var shaderProgram = this.shaderProgram; strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); }