/** * @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; }