diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/renderers/webgl/shaders/StripShader.js b/src/core/renderers/webgl/shaders/StripShader.js index a7abcc6..f487381 100644 --- a/src/core/renderers/webgl/shaders/StripShader.js +++ b/src/core/renderers/webgl/shaders/StripShader.js @@ -21,8 +21,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;', '}' ].join('\n'), diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/renderers/webgl/shaders/StripShader.js b/src/core/renderers/webgl/shaders/StripShader.js index a7abcc6..f487381 100644 --- a/src/core/renderers/webgl/shaders/StripShader.js +++ b/src/core/renderers/webgl/shaders/StripShader.js @@ -21,8 +21,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/utils/GraphicsRenderer.js b/src/core/renderers/webgl/utils/GraphicsRenderer.js index c6cedf3..15526d9 100644 --- a/src/core/renderers/webgl/utils/GraphicsRenderer.js +++ b/src/core/renderers/webgl/utils/GraphicsRenderer.js @@ -30,7 +30,8 @@ GraphicsRenderer.prototype.start = function() { - // flush! + // set the shader.. + } GraphicsRenderer.prototype.stop = function() diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/renderers/webgl/shaders/StripShader.js b/src/core/renderers/webgl/shaders/StripShader.js index a7abcc6..f487381 100644 --- a/src/core/renderers/webgl/shaders/StripShader.js +++ b/src/core/renderers/webgl/shaders/StripShader.js @@ -21,8 +21,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/utils/GraphicsRenderer.js b/src/core/renderers/webgl/utils/GraphicsRenderer.js index c6cedf3..15526d9 100644 --- a/src/core/renderers/webgl/utils/GraphicsRenderer.js +++ b/src/core/renderers/webgl/utils/GraphicsRenderer.js @@ -30,7 +30,8 @@ GraphicsRenderer.prototype.start = function() { - // flush! + // set the shader.. + } GraphicsRenderer.prototype.stop = function() diff --git a/src/core/renderers/webgl/utils/SpriteRenderer.js b/src/core/renderers/webgl/utils/SpriteRenderer.js new file mode 100644 index 0000000..0f05978 --- /dev/null +++ b/src/core/renderers/webgl/utils/SpriteRenderer.js @@ -0,0 +1,660 @@ +var TextureUvs = require('../../../textures/TextureUvs'), + SpriteShader = require('../shaders/SpriteShader'); + +/** + * @author Mat Groves + * + * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ + * for creating the original pixi version! + * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer + * + * Heavily inspired by LibGDX's SpriteRenderer: + * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java + */ + +/** + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this sprite batch works for. + */ +function SpriteRenderer(renderer) +{ + /** + * + * + * @member {WebGLRenderer} + */ + this.renderer = renderer; + + /** + * + * + * @member {number} + */ + this.vertSize = 5; + + /** + * + * + * @member {number} + */ + this.vertByteSize = this.vertSize * 4; + + /** + * The number of images in the SpriteBatch before it flushes. + * + * @member {number} + */ + this.size = 2000;//Math.pow(2, 16) / this.vertSize; + + // the total number of bytes in our batch + var numVerts = this.size * 4 * this.vertByteSize; + // the total number of indices in our batch + var numIndices = this.size * 6; + + /** + * Holds the vertices + * + * @member {ArrayBuffer} + */ + this.vertices = new ArrayBuffer(numVerts); + + /** + * View on the vertices as a Float32Array + * + * @member {Float32Array} + */ + this.positions = new Float32Array(this.vertices); + + /** + * View on the vertices as a Uint32Array + * + * @member {Uint32Array} + */ + this.colors = new Uint32Array(this.vertices); + + /** + * Holds the indices + * + * @member {Uint16Array} + */ + this.indices = new Uint16Array(numIndices); + + /** + * + * + * @member {number} + */ + this.lastIndexCount = 0; + + for (var i=0, j=0; i < numIndices; i += 6, j += 4) + { + this.indices[i + 0] = j + 0; + this.indices[i + 1] = j + 1; + this.indices[i + 2] = j + 2; + this.indices[i + 3] = j + 0; + this.indices[i + 4] = j + 2; + this.indices[i + 5] = j + 3; + } + + /** + * + * + * @member {boolean} + */ + this.drawing = false; + + /** + * + * + * @member {number} + */ + this.currentBatchSize = 0; + + /** + * + * + * @member {BaseTexture} + */ + this.currentBaseTexture = null; + + /** + * + * + * @member {boolean} + */ + this.dirty = true; + + /** + * + * + * @member {Array} + */ + this.textures = []; + + /** + * + * + * @member {Array} + */ + this.blendModes = []; + + /** + * + * + * @member {Array} + */ + this.shaders = []; + + /** + * + * + * @member {Array} + */ + this.sprites = []; + + /** + * The default shader that is used if a sprite doesn't have a more specific one. + * + * @member {Shader} + */ + this.shader = null; + + // listen for context and update necessary buffers + var self = this; + this.renderer.on('context', function () + { + self.setupContext(); + }); +} + +SpriteRenderer.prototype.constructor = SpriteRenderer; +module.exports = SpriteRenderer; + +/** + * @param gl {WebGLContext} the current WebGL drawing context + */ +SpriteRenderer.prototype.setupContext = function () +{ + var gl = this.renderer.gl; + + // setup default shader + this.shader = new SpriteShader(gl); + + // create a couple of buffers + this.vertexBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // 65535 is max index, so 65535 / 6 = 10922. + + //upload the index data + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + + this.currentBlendMode = 99999; +}; + +/** + * + */ +SpriteRenderer.prototype.begin = function () +{ + // this.shader = this.renderer.shaderManager.defaultShader; + + this.start(); +}; + +/** + */ +SpriteRenderer.prototype.end = function () +{ + this.flush(); +}; + +/** + * @param sprite {Sprite} the sprite to render when using this spritebatch + */ +SpriteRenderer.prototype.render = function (sprite) +{ + var texture = sprite.texture; + + //TODO set blend modes.. + // check texture.. + if (this.currentBatchSize >= this.size) + { + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // get the uvs for the texture + var uvs = texture._uvs; + + // if the uvs have not updated then no point rendering just yet! + if (!uvs) + { + return; + } + + // TODO trim?? + var aX = sprite.anchor.x; + var aY = sprite.anchor.y; + + var w0, w1, h0, h1; + + if (texture.trim) + { + // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. + var trim = texture.trim; + + w1 = trim.x - aX * trim.width; + w0 = w1 + texture.crop.width; + + h1 = trim.y - aY * trim.height; + h0 = h1 + texture.crop.height; + + } + else + { + w0 = (texture.frame.width ) * (1-aX); + w1 = (texture.frame.width ) * -aX; + + h0 = texture.frame.height * (1-aY); + h1 = texture.frame.height * -aY; + } + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = sprite.worldTransform; + + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + + var colors = this.colors; + var positions = this.positions; + + if (this.renderer.roundPixels) + { + // xy + positions[index] = a * w1 + c * h1 + tx | 0; + positions[index+1] = d * h1 + b * w1 + ty | 0; + + // xy + positions[index+5] = a * w0 + c * h1 + tx | 0; + positions[index+6] = d * h1 + b * w0 + ty | 0; + + // xy + positions[index+10] = a * w0 + c * h0 + tx | 0; + positions[index+11] = d * h0 + b * w0 + ty | 0; + + // xy + positions[index+15] = a * w1 + c * h0 + tx | 0; + positions[index+16] = d * h0 + b * w1 + ty | 0; + } + else + { + // xy + positions[index] = a * w1 + c * h1 + tx; + positions[index+1] = d * h1 + b * w1 + ty; + + // xy + positions[index+5] = a * w0 + c * h1 + tx; + positions[index+6] = d * h1 + b * w0 + ty; + + // xy + positions[index+10] = a * w0 + c * h0 + tx; + positions[index+11] = d * h0 + b * w0 + ty; + + // xy + positions[index+15] = a * w1 + c * h0 + tx; + positions[index+16] = d * h0 + b * w1 + ty; + } + + // uv + positions[index+2] = uvs.x0; + positions[index+3] = uvs.y0; + + // uv + positions[index+7] = uvs.x1; + positions[index+8] = uvs.y1; + + // uv + positions[index+12] = uvs.x2; + positions[index+13] = uvs.y2; + + // uv + positions[index+17] = uvs.x3; + positions[index+18] = uvs.y3; + + // color and alpha + var tint = sprite.tint; + colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); + + // increment the batchsize + this.sprites[this.currentBatchSize++] = sprite; + + +}; + +/** + * Renders a TilingSprite using the spriteBatch. + * + * @param sprite {TilingSprite} the tilingSprite to render + */ +SpriteRenderer.prototype.renderTilingSprite = function (tilingSprite) +{ + var texture = tilingSprite.tilingTexture; + + // check texture.. + if (this.currentBatchSize >= this.size) + { + //return; + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // set the textures uvs temporarily + // TODO create a separate texture so that we can tile part of a texture + + if (!tilingSprite._uvs) + { + tilingSprite._uvs = new TextureUvs(); + } + + var uvs = tilingSprite._uvs; + + tilingSprite.tilePosition.x %= texture.baseTexture.width * tilingSprite.tileScaleOffset.x; + tilingSprite.tilePosition.y %= texture.baseTexture.height * tilingSprite.tileScaleOffset.y; + + var offsetX = tilingSprite.tilePosition.x/(texture.baseTexture.width*tilingSprite.tileScaleOffset.x); + var offsetY = tilingSprite.tilePosition.y/(texture.baseTexture.height*tilingSprite.tileScaleOffset.y); + + var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x); + var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y); + + uvs.x0 = 0 - offsetX; + uvs.y0 = 0 - offsetY; + + uvs.x1 = (1 * scaleX) - offsetX; + uvs.y1 = 0 - offsetY; + + uvs.x2 = (1 * scaleX) - offsetX; + uvs.y2 = (1 * scaleY) - offsetY; + + uvs.x3 = 0 - offsetX; + uvs.y3 = (1 * scaleY) - offsetY; + + // get the tilingSprites current alpha and tint and combining them into a single color + var tint = tilingSprite.tint; + var color = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (tilingSprite.alpha * 255 << 24); + + var positions = this.positions; + var colors = this.colors; + + var width = tilingSprite.width; + var height = tilingSprite.height; + + // TODO trim?? + var aX = tilingSprite.anchor.x; + var aY = tilingSprite.anchor.y; + var w0 = width * (1-aX); + var w1 = width * -aX; + + var h0 = height * (1-aY); + var h1 = height * -aY; + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = tilingSprite.worldTransform; + + var a = worldTransform.a / resolution;//[0]; + var b = worldTransform.b / resolution;//[3]; + var c = worldTransform.c / resolution;//[1]; + var d = worldTransform.d / resolution;//[4]; + var tx = worldTransform.tx;//[2]; + var ty = worldTransform.ty;//[5]; + + // xy + positions[index++] = a * w1 + c * h1 + tx; + positions[index++] = d * h1 + b * w1 + ty; + // uv + positions[index++] = uvs.x0; + positions[index++] = uvs.y0; + // color + colors[index++] = color; + + // xy + positions[index++] = (a * w0 + c * h1 + tx); + positions[index++] = d * h1 + b * w0 + ty; + // uv + positions[index++] = uvs.x1; + positions[index++] = uvs.y1; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w0 + c * h0 + tx; + positions[index++] = d * h0 + b * w0 + ty; + // uv + positions[index++] = uvs.x2; + positions[index++] = uvs.y2; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w1 + c * h0 + tx; + positions[index++] = d * h0 + b * w1 + ty; + // uv + positions[index++] = uvs.x3; + positions[index++] = uvs.y3; + // color + colors[index++] = color; + + // increment the batchsize + this.sprites[this.currentBatchSize++] = tilingSprite; +}; + +/** + * Renders the content and empties the current batch. + * + */ +SpriteRenderer.prototype.flush = function () +{ + // If the batch is length 0 then return as there is nothing to draw + if (this.currentBatchSize === 0) + { + return; + } + + var gl = this.renderer.gl; + var shader; + + if (this.dirty) + { + this.dirty = false; + // bind the main texture + gl.activeTexture(gl.TEXTURE0); + + // bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // this is the same for each shader? + var stride = this.vertByteSize; + gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + + // color attributes will be interpreted as unsigned bytes and normalized + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + } + + // upload the verts to the buffer + if (this.currentBatchSize > ( this.size * 0.5 ) ) + { + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); + } + else + { + var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); + } + + var nextTexture, nextBlendMode, nextShader; + var batchSize = 0; + var start = 0; + + var currentBaseTexture = null; + var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; + + for (var i = 0, j = this.currentBatchSize; i < j; i++) + { + + sprite = this.sprites[i]; + + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.shader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use uuidS??? + + if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) + { + this.renderBatch(currentBaseTexture, batchSize, start); + + start = i; + batchSize = 0; + currentBaseTexture = nextTexture; + + if (blendSwap) + { + currentBlendMode = nextBlendMode; + this.renderer.blendModeManager.setBlendMode( currentBlendMode ); + } + + if (shaderSwap) + { + currentShader = nextShader; + + shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; + + if (!shader) + { + shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderer.shaderManager.setShader(shader); + + if (shader.dirty) + { + shader.syncUniforms(); + } + + // both thease only need to be set if they are changing.. + // set the projection + var projection = this.renderer.projection; + gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); + + // TODO - this is temprorary! + var offsetVector = this.renderer.offset; + gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); + + // set the pointers + } + } + + batchSize++; + } + + this.renderBatch(currentBaseTexture, batchSize, start); + + // then reset the batch! + this.currentBatchSize = 0; +}; + +/** + * @param texture {Texture} + * @param size {number} + * @param startIndex {number} + */ +SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) +{ + if (size === 0) + { + return; + } + + var gl = this.renderer.gl; + + if (!texture._glTextures[gl.id]) + { + this.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + } + + // now draw those suckas! + gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); + + // increment the draw count + this.renderer.drawCount++; +}; + +/** + * + */ +SpriteRenderer.prototype.stop = function () +{ + this.flush(); + this.dirty = true; +}; + +/** + * + */ +SpriteRenderer.prototype.start = function () +{ + this.dirty = true; +}; + +/** + * Destroys the SpriteBatch. + * + */ +SpriteRenderer.prototype.destroy = function () +{ + this.renderer.gl.deleteBuffer(this.vertexBuffer); + this.renderer.gl.deleteBuffer(this.indexBuffer); + + this.vertices = null; + this.indices = null; + + this.vertexBuffer = null; + this.indexBuffer = null; + + this.currentBaseTexture = null; + + this.renderer = null; +}; diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/renderers/webgl/shaders/StripShader.js b/src/core/renderers/webgl/shaders/StripShader.js index a7abcc6..f487381 100644 --- a/src/core/renderers/webgl/shaders/StripShader.js +++ b/src/core/renderers/webgl/shaders/StripShader.js @@ -21,8 +21,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/utils/GraphicsRenderer.js b/src/core/renderers/webgl/utils/GraphicsRenderer.js index c6cedf3..15526d9 100644 --- a/src/core/renderers/webgl/utils/GraphicsRenderer.js +++ b/src/core/renderers/webgl/utils/GraphicsRenderer.js @@ -30,7 +30,8 @@ GraphicsRenderer.prototype.start = function() { - // flush! + // set the shader.. + } GraphicsRenderer.prototype.stop = function() diff --git a/src/core/renderers/webgl/utils/SpriteRenderer.js b/src/core/renderers/webgl/utils/SpriteRenderer.js new file mode 100644 index 0000000..0f05978 --- /dev/null +++ b/src/core/renderers/webgl/utils/SpriteRenderer.js @@ -0,0 +1,660 @@ +var TextureUvs = require('../../../textures/TextureUvs'), + SpriteShader = require('../shaders/SpriteShader'); + +/** + * @author Mat Groves + * + * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ + * for creating the original pixi version! + * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer + * + * Heavily inspired by LibGDX's SpriteRenderer: + * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java + */ + +/** + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this sprite batch works for. + */ +function SpriteRenderer(renderer) +{ + /** + * + * + * @member {WebGLRenderer} + */ + this.renderer = renderer; + + /** + * + * + * @member {number} + */ + this.vertSize = 5; + + /** + * + * + * @member {number} + */ + this.vertByteSize = this.vertSize * 4; + + /** + * The number of images in the SpriteBatch before it flushes. + * + * @member {number} + */ + this.size = 2000;//Math.pow(2, 16) / this.vertSize; + + // the total number of bytes in our batch + var numVerts = this.size * 4 * this.vertByteSize; + // the total number of indices in our batch + var numIndices = this.size * 6; + + /** + * Holds the vertices + * + * @member {ArrayBuffer} + */ + this.vertices = new ArrayBuffer(numVerts); + + /** + * View on the vertices as a Float32Array + * + * @member {Float32Array} + */ + this.positions = new Float32Array(this.vertices); + + /** + * View on the vertices as a Uint32Array + * + * @member {Uint32Array} + */ + this.colors = new Uint32Array(this.vertices); + + /** + * Holds the indices + * + * @member {Uint16Array} + */ + this.indices = new Uint16Array(numIndices); + + /** + * + * + * @member {number} + */ + this.lastIndexCount = 0; + + for (var i=0, j=0; i < numIndices; i += 6, j += 4) + { + this.indices[i + 0] = j + 0; + this.indices[i + 1] = j + 1; + this.indices[i + 2] = j + 2; + this.indices[i + 3] = j + 0; + this.indices[i + 4] = j + 2; + this.indices[i + 5] = j + 3; + } + + /** + * + * + * @member {boolean} + */ + this.drawing = false; + + /** + * + * + * @member {number} + */ + this.currentBatchSize = 0; + + /** + * + * + * @member {BaseTexture} + */ + this.currentBaseTexture = null; + + /** + * + * + * @member {boolean} + */ + this.dirty = true; + + /** + * + * + * @member {Array} + */ + this.textures = []; + + /** + * + * + * @member {Array} + */ + this.blendModes = []; + + /** + * + * + * @member {Array} + */ + this.shaders = []; + + /** + * + * + * @member {Array} + */ + this.sprites = []; + + /** + * The default shader that is used if a sprite doesn't have a more specific one. + * + * @member {Shader} + */ + this.shader = null; + + // listen for context and update necessary buffers + var self = this; + this.renderer.on('context', function () + { + self.setupContext(); + }); +} + +SpriteRenderer.prototype.constructor = SpriteRenderer; +module.exports = SpriteRenderer; + +/** + * @param gl {WebGLContext} the current WebGL drawing context + */ +SpriteRenderer.prototype.setupContext = function () +{ + var gl = this.renderer.gl; + + // setup default shader + this.shader = new SpriteShader(gl); + + // create a couple of buffers + this.vertexBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // 65535 is max index, so 65535 / 6 = 10922. + + //upload the index data + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + + this.currentBlendMode = 99999; +}; + +/** + * + */ +SpriteRenderer.prototype.begin = function () +{ + // this.shader = this.renderer.shaderManager.defaultShader; + + this.start(); +}; + +/** + */ +SpriteRenderer.prototype.end = function () +{ + this.flush(); +}; + +/** + * @param sprite {Sprite} the sprite to render when using this spritebatch + */ +SpriteRenderer.prototype.render = function (sprite) +{ + var texture = sprite.texture; + + //TODO set blend modes.. + // check texture.. + if (this.currentBatchSize >= this.size) + { + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // get the uvs for the texture + var uvs = texture._uvs; + + // if the uvs have not updated then no point rendering just yet! + if (!uvs) + { + return; + } + + // TODO trim?? + var aX = sprite.anchor.x; + var aY = sprite.anchor.y; + + var w0, w1, h0, h1; + + if (texture.trim) + { + // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. + var trim = texture.trim; + + w1 = trim.x - aX * trim.width; + w0 = w1 + texture.crop.width; + + h1 = trim.y - aY * trim.height; + h0 = h1 + texture.crop.height; + + } + else + { + w0 = (texture.frame.width ) * (1-aX); + w1 = (texture.frame.width ) * -aX; + + h0 = texture.frame.height * (1-aY); + h1 = texture.frame.height * -aY; + } + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = sprite.worldTransform; + + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + + var colors = this.colors; + var positions = this.positions; + + if (this.renderer.roundPixels) + { + // xy + positions[index] = a * w1 + c * h1 + tx | 0; + positions[index+1] = d * h1 + b * w1 + ty | 0; + + // xy + positions[index+5] = a * w0 + c * h1 + tx | 0; + positions[index+6] = d * h1 + b * w0 + ty | 0; + + // xy + positions[index+10] = a * w0 + c * h0 + tx | 0; + positions[index+11] = d * h0 + b * w0 + ty | 0; + + // xy + positions[index+15] = a * w1 + c * h0 + tx | 0; + positions[index+16] = d * h0 + b * w1 + ty | 0; + } + else + { + // xy + positions[index] = a * w1 + c * h1 + tx; + positions[index+1] = d * h1 + b * w1 + ty; + + // xy + positions[index+5] = a * w0 + c * h1 + tx; + positions[index+6] = d * h1 + b * w0 + ty; + + // xy + positions[index+10] = a * w0 + c * h0 + tx; + positions[index+11] = d * h0 + b * w0 + ty; + + // xy + positions[index+15] = a * w1 + c * h0 + tx; + positions[index+16] = d * h0 + b * w1 + ty; + } + + // uv + positions[index+2] = uvs.x0; + positions[index+3] = uvs.y0; + + // uv + positions[index+7] = uvs.x1; + positions[index+8] = uvs.y1; + + // uv + positions[index+12] = uvs.x2; + positions[index+13] = uvs.y2; + + // uv + positions[index+17] = uvs.x3; + positions[index+18] = uvs.y3; + + // color and alpha + var tint = sprite.tint; + colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); + + // increment the batchsize + this.sprites[this.currentBatchSize++] = sprite; + + +}; + +/** + * Renders a TilingSprite using the spriteBatch. + * + * @param sprite {TilingSprite} the tilingSprite to render + */ +SpriteRenderer.prototype.renderTilingSprite = function (tilingSprite) +{ + var texture = tilingSprite.tilingTexture; + + // check texture.. + if (this.currentBatchSize >= this.size) + { + //return; + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // set the textures uvs temporarily + // TODO create a separate texture so that we can tile part of a texture + + if (!tilingSprite._uvs) + { + tilingSprite._uvs = new TextureUvs(); + } + + var uvs = tilingSprite._uvs; + + tilingSprite.tilePosition.x %= texture.baseTexture.width * tilingSprite.tileScaleOffset.x; + tilingSprite.tilePosition.y %= texture.baseTexture.height * tilingSprite.tileScaleOffset.y; + + var offsetX = tilingSprite.tilePosition.x/(texture.baseTexture.width*tilingSprite.tileScaleOffset.x); + var offsetY = tilingSprite.tilePosition.y/(texture.baseTexture.height*tilingSprite.tileScaleOffset.y); + + var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x); + var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y); + + uvs.x0 = 0 - offsetX; + uvs.y0 = 0 - offsetY; + + uvs.x1 = (1 * scaleX) - offsetX; + uvs.y1 = 0 - offsetY; + + uvs.x2 = (1 * scaleX) - offsetX; + uvs.y2 = (1 * scaleY) - offsetY; + + uvs.x3 = 0 - offsetX; + uvs.y3 = (1 * scaleY) - offsetY; + + // get the tilingSprites current alpha and tint and combining them into a single color + var tint = tilingSprite.tint; + var color = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (tilingSprite.alpha * 255 << 24); + + var positions = this.positions; + var colors = this.colors; + + var width = tilingSprite.width; + var height = tilingSprite.height; + + // TODO trim?? + var aX = tilingSprite.anchor.x; + var aY = tilingSprite.anchor.y; + var w0 = width * (1-aX); + var w1 = width * -aX; + + var h0 = height * (1-aY); + var h1 = height * -aY; + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = tilingSprite.worldTransform; + + var a = worldTransform.a / resolution;//[0]; + var b = worldTransform.b / resolution;//[3]; + var c = worldTransform.c / resolution;//[1]; + var d = worldTransform.d / resolution;//[4]; + var tx = worldTransform.tx;//[2]; + var ty = worldTransform.ty;//[5]; + + // xy + positions[index++] = a * w1 + c * h1 + tx; + positions[index++] = d * h1 + b * w1 + ty; + // uv + positions[index++] = uvs.x0; + positions[index++] = uvs.y0; + // color + colors[index++] = color; + + // xy + positions[index++] = (a * w0 + c * h1 + tx); + positions[index++] = d * h1 + b * w0 + ty; + // uv + positions[index++] = uvs.x1; + positions[index++] = uvs.y1; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w0 + c * h0 + tx; + positions[index++] = d * h0 + b * w0 + ty; + // uv + positions[index++] = uvs.x2; + positions[index++] = uvs.y2; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w1 + c * h0 + tx; + positions[index++] = d * h0 + b * w1 + ty; + // uv + positions[index++] = uvs.x3; + positions[index++] = uvs.y3; + // color + colors[index++] = color; + + // increment the batchsize + this.sprites[this.currentBatchSize++] = tilingSprite; +}; + +/** + * Renders the content and empties the current batch. + * + */ +SpriteRenderer.prototype.flush = function () +{ + // If the batch is length 0 then return as there is nothing to draw + if (this.currentBatchSize === 0) + { + return; + } + + var gl = this.renderer.gl; + var shader; + + if (this.dirty) + { + this.dirty = false; + // bind the main texture + gl.activeTexture(gl.TEXTURE0); + + // bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // this is the same for each shader? + var stride = this.vertByteSize; + gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + + // color attributes will be interpreted as unsigned bytes and normalized + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + } + + // upload the verts to the buffer + if (this.currentBatchSize > ( this.size * 0.5 ) ) + { + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); + } + else + { + var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); + } + + var nextTexture, nextBlendMode, nextShader; + var batchSize = 0; + var start = 0; + + var currentBaseTexture = null; + var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; + + for (var i = 0, j = this.currentBatchSize; i < j; i++) + { + + sprite = this.sprites[i]; + + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.shader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use uuidS??? + + if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) + { + this.renderBatch(currentBaseTexture, batchSize, start); + + start = i; + batchSize = 0; + currentBaseTexture = nextTexture; + + if (blendSwap) + { + currentBlendMode = nextBlendMode; + this.renderer.blendModeManager.setBlendMode( currentBlendMode ); + } + + if (shaderSwap) + { + currentShader = nextShader; + + shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; + + if (!shader) + { + shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderer.shaderManager.setShader(shader); + + if (shader.dirty) + { + shader.syncUniforms(); + } + + // both thease only need to be set if they are changing.. + // set the projection + var projection = this.renderer.projection; + gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); + + // TODO - this is temprorary! + var offsetVector = this.renderer.offset; + gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); + + // set the pointers + } + } + + batchSize++; + } + + this.renderBatch(currentBaseTexture, batchSize, start); + + // then reset the batch! + this.currentBatchSize = 0; +}; + +/** + * @param texture {Texture} + * @param size {number} + * @param startIndex {number} + */ +SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) +{ + if (size === 0) + { + return; + } + + var gl = this.renderer.gl; + + if (!texture._glTextures[gl.id]) + { + this.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + } + + // now draw those suckas! + gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); + + // increment the draw count + this.renderer.drawCount++; +}; + +/** + * + */ +SpriteRenderer.prototype.stop = function () +{ + this.flush(); + this.dirty = true; +}; + +/** + * + */ +SpriteRenderer.prototype.start = function () +{ + this.dirty = true; +}; + +/** + * Destroys the SpriteBatch. + * + */ +SpriteRenderer.prototype.destroy = function () +{ + this.renderer.gl.deleteBuffer(this.vertexBuffer); + this.renderer.gl.deleteBuffer(this.indexBuffer); + + this.vertices = null; + this.indices = null; + + this.vertexBuffer = null; + this.indexBuffer = null; + + this.currentBaseTexture = null; + + this.renderer = null; +}; diff --git a/src/core/renderers/webgl/utils/WebGLGraphics.js b/src/core/renderers/webgl/utils/WebGLGraphics.js deleted file mode 100644 index ab8f46e..0000000 --- a/src/core/renderers/webgl/utils/WebGLGraphics.js +++ /dev/null @@ -1,860 +0,0 @@ -var utils = require('../../../utils'), - math = require('../../../math'), - CONST = require('../../../const'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * A set of functions used by the webGL renderer to draw the primitive graphics data - * - * @namespace PIXI - * @private - */ -var WebGLGraphics = module.exports = {}; - -/** - * Renders the graphics object - * - * @static - * @private - * @param graphics {Graphics} - * @param renderer {WebGLRenderer} - */ -WebGLGraphics.renderGraphics = function (graphics, renderer) {//projection, offset) -{ - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - WebGLGraphics.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.stencilManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.stencilManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -WebGLGraphics.updateGraphics = function (graphics, gl) -{ - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; - } - - // flag the graphics as not dirty as we are about to update it... - graphics.dirty = false; - - var i; - - // if the user cleared the graphics object we will need to clear every object - if (graphics.clearDirty) - { - graphics.clearDirty = false; - - // lop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) - { - var graphicsData = webGL.data[i]; - graphicsData.reset(); - WebGLGraphics.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // need to add the points the the graphics object.. - data.points = data.shape.points.slice(); - if (data.shape.closed) - { - // close the poly if the value is true! - if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1]) - { - data.points.push(data.points[0], data.points[1]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - - var canDrawUsingSimple = WebGLGraphics.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = WebGLGraphics.switchMode(webGL, 1); - WebGLGraphics.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = WebGLGraphics.switchMode(webGL, 1); - WebGLGraphics.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - WebGLGraphics.buildLine(data, webGLData); - - } - } - else - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - WebGLGraphics.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - WebGLGraphics.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - WebGLGraphics.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * @static - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -WebGLGraphics.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = WebGLGraphics.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = WebGLGraphics.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - var rectData = graphicsData.shape; - var x = rectData.x; - var y = rectData.y; - var width = rectData.width; - var height = rectData.height; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vertPos = verts.length/6; - - // start - verts.push(x, y); - verts.push(r, g, b, alpha); - - verts.push(x + width, y); - verts.push(r, g, b, alpha); - - verts.push(x , y + height); - verts.push(r, g, b, alpha); - - verts.push(x + width, y + height); - verts.push(r, g, b, alpha); - - // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = [x, y, - x + width, y, - x + width, y + height, - x, y + height, - x, y]; - - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildRoundedRectangle = function (graphicsData, webGLData) -{ - var rrectData = graphicsData.shape; - var x = rrectData.x; - var y = rrectData.y; - var width = rrectData.width; - var height = rrectData.height; - - var radius = rrectData.radius; - - var recPoints = []; - recPoints.push(x, y + radius); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vecPos = verts.length/6; - - var triangles = utils.PolyK.Triangulate(recPoints); - - // - - var i = 0; - for (i = 0; i < triangles.length; i+=3) - { - indices.push(triangles[i] + vecPos); - indices.push(triangles[i] + vecPos); - indices.push(triangles[i+1] + vecPos); - indices.push(triangles[i+2] + vecPos); - indices.push(triangles[i+2] + vecPos); - } - - - for (i = 0; i < recPoints.length; i++) - { - verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); - } - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = recPoints; - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @static - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - points = []; - - function getPt(n1 , n2, perc) - { - var diff = n2 - n1; - - return n1 + ( diff * perc ); - } - - var j = 0; - for (var i = 0; i <= n; i++ ) - { - j = i / n; - - // The Green Line - xa = getPt( fromX , cpX , j ); - ya = getPt( fromY , cpY , j ); - xb = getPt( cpX , toX , j ); - yb = getPt( cpY , toY , j ); - - // The Black Dot - x = getPt( xa , xb , j ); - y = getPt( ya , yb , j ); - - points.push(x, y); - } - return points; -}; - -/** - * Builds a circle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -WebGLGraphics.buildCircle = function (graphicsData, webGLData) -{ - // need to convert points to a nice regular data - var circleData = graphicsData.shape; - var x = circleData.x; - var y = circleData.y; - var width; - var height; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vecPos = verts.length/6; - - indices.push(vecPos); - - for (i = 0; i < totalSegs + 1 ; i++) - { - verts.push(x,y, r, g, b, alpha); - - verts.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height, - r, g, b, alpha); - - indices.push(vecPos++, vecPos++); - } - - indices.push(vecPos-1); - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = []; - - for (i = 0; i < totalSegs + 1; i++) - { - graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height); - } - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - var i = 0; - var points = graphicsData.points; - - if (points.length === 0) - { - return; - } - - // if the line width is an odd number add 0.5 to align to a whole pixel - if (graphicsData.lineWidth%2) - { - for (i = 0; i < points.length; i++) - { - points[i] += 0.5; - } - } - - // get first and last point.. figure out the middle! - var firstPoint = new math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - gonna have issues :) - if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) - { - // need to clone as we are going to slightly modify the shape.. - points = points.slice(); - - points.pop(); - points.pop(); - - lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - - points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY); - } - - var verts = webGLData.points; - var indices = webGLData.indices; - var length = points.length / 2; - var indexCount = points.length; - var indexStart = verts.length/6; - - // DRAW the Line - var width = graphicsData.lineWidth / 2; - - // sort color - var color = utils.hex2rgb(graphicsData.lineColor); - var alpha = graphicsData.lineAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var px, py, p1x, p1y, p2x, p2y, p3x, p3y; - var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var a1, b1, c1, a2, b2, c2; - var denom, pdist, dist; - - p1x = points[0]; - p1y = points[1]; - - p2x = points[2]; - p2y = points[3]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - // start - verts.push(p1x - perpx , p1y - perpy, - r, g, b, alpha); - - verts.push(p1x + perpx , p1y + perpy, - r, g, b, alpha); - - for (i = 1; i < length-1; i++) - { - p1x = points[(i-1)*2]; - p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2]; - p2y = points[(i)*2 + 1]; - - p3x = points[(i+1)*2]; - p3y = points[(i+1)*2 + 1]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - perp2x = -(p2y - p3y); - perp2y = p2x - p3x; - - dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); - perp2x /= dist; - perp2y /= dist; - perp2x *= width; - perp2y *= width; - - a1 = (-perpy + p1y) - (-perpy + p2y); - b1 = (-perpx + p2x) - (-perpx + p1x); - c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); - a2 = (-perp2y + p3y) - (-perp2y + p2y); - b2 = (-perp2x + p2x) - (-perp2x + p3x); - c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - - denom = a1*b2 - a2*b1; - - if (Math.abs(denom) < 0.1 ) - { - - denom+=10.1; - verts.push(p2x - perpx , p2y - perpy, - r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy, - r, g, b, alpha); - - continue; - } - - px = (b1*c2 - b2*c1)/denom; - py = (a2*c1 - a1*c2)/denom; - - - pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - - - if (pdist > 140 * 140) - { - perp3x = perpx - perp2x; - perp3y = perpy - perp2y; - - dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); - perp3x /= dist; - perp3y /= dist; - perp3x *= width; - perp3y *= width; - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(r, g, b, alpha); - } - } - - p1x = points[(length-2)*2]; - p1y = points[(length-2)*2 + 1]; - - p2x = points[(length-1)*2]; - p2y = points[(length-1)*2 + 1]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - verts.push(p2x - perpx , p2y - perpy); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - var points = graphicsData.points.slice(); - - if (points.length < 6) - { - return; - } - - // get first and last point.. figure out the middle! - var indices = webGLData.indices; - webGLData.points = points; - webGLData.alpha = graphicsData.fillAlpha; - webGLData.color = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get size.. - for (var i = 0; i < points.length; i+=2) - { - x = points[i]; - y = points[i+1]; - - minX = x < minX ? x : minX; - maxX = x > maxX ? x : maxX; - - minY = y < minY ? y : minY; - maxY = y > maxY ? y : maxY; - } - - // add a quad to the end cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildPoly = function (graphicsData, webGLData) -{ - var points = graphicsData.points; - - if (points.length < 6) - { - return; - } - // get first and last point.. figure out the middle! - var verts = webGLData.points; - var indices = webGLData.indices; - - var length = points.length / 2; - - // sort color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - if (!triangles) - { - return false; - } - - var vertPos = verts.length / 6; - - var i = 0; - - for (i = 0; i < triangles.length; i+=3) - { - indices.push(triangles[i] + vertPos); - indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); - } - - for (i = 0; i < length; i++) - { - verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); - } - - return true; -}; - -WebGLGraphics.graphicsDataPool = []; diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/renderers/webgl/shaders/StripShader.js b/src/core/renderers/webgl/shaders/StripShader.js index a7abcc6..f487381 100644 --- a/src/core/renderers/webgl/shaders/StripShader.js +++ b/src/core/renderers/webgl/shaders/StripShader.js @@ -21,8 +21,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/utils/GraphicsRenderer.js b/src/core/renderers/webgl/utils/GraphicsRenderer.js index c6cedf3..15526d9 100644 --- a/src/core/renderers/webgl/utils/GraphicsRenderer.js +++ b/src/core/renderers/webgl/utils/GraphicsRenderer.js @@ -30,7 +30,8 @@ GraphicsRenderer.prototype.start = function() { - // flush! + // set the shader.. + } GraphicsRenderer.prototype.stop = function() diff --git a/src/core/renderers/webgl/utils/SpriteRenderer.js b/src/core/renderers/webgl/utils/SpriteRenderer.js new file mode 100644 index 0000000..0f05978 --- /dev/null +++ b/src/core/renderers/webgl/utils/SpriteRenderer.js @@ -0,0 +1,660 @@ +var TextureUvs = require('../../../textures/TextureUvs'), + SpriteShader = require('../shaders/SpriteShader'); + +/** + * @author Mat Groves + * + * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ + * for creating the original pixi version! + * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer + * + * Heavily inspired by LibGDX's SpriteRenderer: + * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java + */ + +/** + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this sprite batch works for. + */ +function SpriteRenderer(renderer) +{ + /** + * + * + * @member {WebGLRenderer} + */ + this.renderer = renderer; + + /** + * + * + * @member {number} + */ + this.vertSize = 5; + + /** + * + * + * @member {number} + */ + this.vertByteSize = this.vertSize * 4; + + /** + * The number of images in the SpriteBatch before it flushes. + * + * @member {number} + */ + this.size = 2000;//Math.pow(2, 16) / this.vertSize; + + // the total number of bytes in our batch + var numVerts = this.size * 4 * this.vertByteSize; + // the total number of indices in our batch + var numIndices = this.size * 6; + + /** + * Holds the vertices + * + * @member {ArrayBuffer} + */ + this.vertices = new ArrayBuffer(numVerts); + + /** + * View on the vertices as a Float32Array + * + * @member {Float32Array} + */ + this.positions = new Float32Array(this.vertices); + + /** + * View on the vertices as a Uint32Array + * + * @member {Uint32Array} + */ + this.colors = new Uint32Array(this.vertices); + + /** + * Holds the indices + * + * @member {Uint16Array} + */ + this.indices = new Uint16Array(numIndices); + + /** + * + * + * @member {number} + */ + this.lastIndexCount = 0; + + for (var i=0, j=0; i < numIndices; i += 6, j += 4) + { + this.indices[i + 0] = j + 0; + this.indices[i + 1] = j + 1; + this.indices[i + 2] = j + 2; + this.indices[i + 3] = j + 0; + this.indices[i + 4] = j + 2; + this.indices[i + 5] = j + 3; + } + + /** + * + * + * @member {boolean} + */ + this.drawing = false; + + /** + * + * + * @member {number} + */ + this.currentBatchSize = 0; + + /** + * + * + * @member {BaseTexture} + */ + this.currentBaseTexture = null; + + /** + * + * + * @member {boolean} + */ + this.dirty = true; + + /** + * + * + * @member {Array} + */ + this.textures = []; + + /** + * + * + * @member {Array} + */ + this.blendModes = []; + + /** + * + * + * @member {Array} + */ + this.shaders = []; + + /** + * + * + * @member {Array} + */ + this.sprites = []; + + /** + * The default shader that is used if a sprite doesn't have a more specific one. + * + * @member {Shader} + */ + this.shader = null; + + // listen for context and update necessary buffers + var self = this; + this.renderer.on('context', function () + { + self.setupContext(); + }); +} + +SpriteRenderer.prototype.constructor = SpriteRenderer; +module.exports = SpriteRenderer; + +/** + * @param gl {WebGLContext} the current WebGL drawing context + */ +SpriteRenderer.prototype.setupContext = function () +{ + var gl = this.renderer.gl; + + // setup default shader + this.shader = new SpriteShader(gl); + + // create a couple of buffers + this.vertexBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // 65535 is max index, so 65535 / 6 = 10922. + + //upload the index data + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + + this.currentBlendMode = 99999; +}; + +/** + * + */ +SpriteRenderer.prototype.begin = function () +{ + // this.shader = this.renderer.shaderManager.defaultShader; + + this.start(); +}; + +/** + */ +SpriteRenderer.prototype.end = function () +{ + this.flush(); +}; + +/** + * @param sprite {Sprite} the sprite to render when using this spritebatch + */ +SpriteRenderer.prototype.render = function (sprite) +{ + var texture = sprite.texture; + + //TODO set blend modes.. + // check texture.. + if (this.currentBatchSize >= this.size) + { + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // get the uvs for the texture + var uvs = texture._uvs; + + // if the uvs have not updated then no point rendering just yet! + if (!uvs) + { + return; + } + + // TODO trim?? + var aX = sprite.anchor.x; + var aY = sprite.anchor.y; + + var w0, w1, h0, h1; + + if (texture.trim) + { + // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. + var trim = texture.trim; + + w1 = trim.x - aX * trim.width; + w0 = w1 + texture.crop.width; + + h1 = trim.y - aY * trim.height; + h0 = h1 + texture.crop.height; + + } + else + { + w0 = (texture.frame.width ) * (1-aX); + w1 = (texture.frame.width ) * -aX; + + h0 = texture.frame.height * (1-aY); + h1 = texture.frame.height * -aY; + } + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = sprite.worldTransform; + + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + + var colors = this.colors; + var positions = this.positions; + + if (this.renderer.roundPixels) + { + // xy + positions[index] = a * w1 + c * h1 + tx | 0; + positions[index+1] = d * h1 + b * w1 + ty | 0; + + // xy + positions[index+5] = a * w0 + c * h1 + tx | 0; + positions[index+6] = d * h1 + b * w0 + ty | 0; + + // xy + positions[index+10] = a * w0 + c * h0 + tx | 0; + positions[index+11] = d * h0 + b * w0 + ty | 0; + + // xy + positions[index+15] = a * w1 + c * h0 + tx | 0; + positions[index+16] = d * h0 + b * w1 + ty | 0; + } + else + { + // xy + positions[index] = a * w1 + c * h1 + tx; + positions[index+1] = d * h1 + b * w1 + ty; + + // xy + positions[index+5] = a * w0 + c * h1 + tx; + positions[index+6] = d * h1 + b * w0 + ty; + + // xy + positions[index+10] = a * w0 + c * h0 + tx; + positions[index+11] = d * h0 + b * w0 + ty; + + // xy + positions[index+15] = a * w1 + c * h0 + tx; + positions[index+16] = d * h0 + b * w1 + ty; + } + + // uv + positions[index+2] = uvs.x0; + positions[index+3] = uvs.y0; + + // uv + positions[index+7] = uvs.x1; + positions[index+8] = uvs.y1; + + // uv + positions[index+12] = uvs.x2; + positions[index+13] = uvs.y2; + + // uv + positions[index+17] = uvs.x3; + positions[index+18] = uvs.y3; + + // color and alpha + var tint = sprite.tint; + colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); + + // increment the batchsize + this.sprites[this.currentBatchSize++] = sprite; + + +}; + +/** + * Renders a TilingSprite using the spriteBatch. + * + * @param sprite {TilingSprite} the tilingSprite to render + */ +SpriteRenderer.prototype.renderTilingSprite = function (tilingSprite) +{ + var texture = tilingSprite.tilingTexture; + + // check texture.. + if (this.currentBatchSize >= this.size) + { + //return; + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // set the textures uvs temporarily + // TODO create a separate texture so that we can tile part of a texture + + if (!tilingSprite._uvs) + { + tilingSprite._uvs = new TextureUvs(); + } + + var uvs = tilingSprite._uvs; + + tilingSprite.tilePosition.x %= texture.baseTexture.width * tilingSprite.tileScaleOffset.x; + tilingSprite.tilePosition.y %= texture.baseTexture.height * tilingSprite.tileScaleOffset.y; + + var offsetX = tilingSprite.tilePosition.x/(texture.baseTexture.width*tilingSprite.tileScaleOffset.x); + var offsetY = tilingSprite.tilePosition.y/(texture.baseTexture.height*tilingSprite.tileScaleOffset.y); + + var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x); + var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y); + + uvs.x0 = 0 - offsetX; + uvs.y0 = 0 - offsetY; + + uvs.x1 = (1 * scaleX) - offsetX; + uvs.y1 = 0 - offsetY; + + uvs.x2 = (1 * scaleX) - offsetX; + uvs.y2 = (1 * scaleY) - offsetY; + + uvs.x3 = 0 - offsetX; + uvs.y3 = (1 * scaleY) - offsetY; + + // get the tilingSprites current alpha and tint and combining them into a single color + var tint = tilingSprite.tint; + var color = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (tilingSprite.alpha * 255 << 24); + + var positions = this.positions; + var colors = this.colors; + + var width = tilingSprite.width; + var height = tilingSprite.height; + + // TODO trim?? + var aX = tilingSprite.anchor.x; + var aY = tilingSprite.anchor.y; + var w0 = width * (1-aX); + var w1 = width * -aX; + + var h0 = height * (1-aY); + var h1 = height * -aY; + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = tilingSprite.worldTransform; + + var a = worldTransform.a / resolution;//[0]; + var b = worldTransform.b / resolution;//[3]; + var c = worldTransform.c / resolution;//[1]; + var d = worldTransform.d / resolution;//[4]; + var tx = worldTransform.tx;//[2]; + var ty = worldTransform.ty;//[5]; + + // xy + positions[index++] = a * w1 + c * h1 + tx; + positions[index++] = d * h1 + b * w1 + ty; + // uv + positions[index++] = uvs.x0; + positions[index++] = uvs.y0; + // color + colors[index++] = color; + + // xy + positions[index++] = (a * w0 + c * h1 + tx); + positions[index++] = d * h1 + b * w0 + ty; + // uv + positions[index++] = uvs.x1; + positions[index++] = uvs.y1; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w0 + c * h0 + tx; + positions[index++] = d * h0 + b * w0 + ty; + // uv + positions[index++] = uvs.x2; + positions[index++] = uvs.y2; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w1 + c * h0 + tx; + positions[index++] = d * h0 + b * w1 + ty; + // uv + positions[index++] = uvs.x3; + positions[index++] = uvs.y3; + // color + colors[index++] = color; + + // increment the batchsize + this.sprites[this.currentBatchSize++] = tilingSprite; +}; + +/** + * Renders the content and empties the current batch. + * + */ +SpriteRenderer.prototype.flush = function () +{ + // If the batch is length 0 then return as there is nothing to draw + if (this.currentBatchSize === 0) + { + return; + } + + var gl = this.renderer.gl; + var shader; + + if (this.dirty) + { + this.dirty = false; + // bind the main texture + gl.activeTexture(gl.TEXTURE0); + + // bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // this is the same for each shader? + var stride = this.vertByteSize; + gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + + // color attributes will be interpreted as unsigned bytes and normalized + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + } + + // upload the verts to the buffer + if (this.currentBatchSize > ( this.size * 0.5 ) ) + { + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); + } + else + { + var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); + } + + var nextTexture, nextBlendMode, nextShader; + var batchSize = 0; + var start = 0; + + var currentBaseTexture = null; + var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; + + for (var i = 0, j = this.currentBatchSize; i < j; i++) + { + + sprite = this.sprites[i]; + + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.shader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use uuidS??? + + if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) + { + this.renderBatch(currentBaseTexture, batchSize, start); + + start = i; + batchSize = 0; + currentBaseTexture = nextTexture; + + if (blendSwap) + { + currentBlendMode = nextBlendMode; + this.renderer.blendModeManager.setBlendMode( currentBlendMode ); + } + + if (shaderSwap) + { + currentShader = nextShader; + + shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; + + if (!shader) + { + shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderer.shaderManager.setShader(shader); + + if (shader.dirty) + { + shader.syncUniforms(); + } + + // both thease only need to be set if they are changing.. + // set the projection + var projection = this.renderer.projection; + gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); + + // TODO - this is temprorary! + var offsetVector = this.renderer.offset; + gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); + + // set the pointers + } + } + + batchSize++; + } + + this.renderBatch(currentBaseTexture, batchSize, start); + + // then reset the batch! + this.currentBatchSize = 0; +}; + +/** + * @param texture {Texture} + * @param size {number} + * @param startIndex {number} + */ +SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) +{ + if (size === 0) + { + return; + } + + var gl = this.renderer.gl; + + if (!texture._glTextures[gl.id]) + { + this.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + } + + // now draw those suckas! + gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); + + // increment the draw count + this.renderer.drawCount++; +}; + +/** + * + */ +SpriteRenderer.prototype.stop = function () +{ + this.flush(); + this.dirty = true; +}; + +/** + * + */ +SpriteRenderer.prototype.start = function () +{ + this.dirty = true; +}; + +/** + * Destroys the SpriteBatch. + * + */ +SpriteRenderer.prototype.destroy = function () +{ + this.renderer.gl.deleteBuffer(this.vertexBuffer); + this.renderer.gl.deleteBuffer(this.indexBuffer); + + this.vertices = null; + this.indices = null; + + this.vertexBuffer = null; + this.indexBuffer = null; + + this.currentBaseTexture = null; + + this.renderer = null; +}; diff --git a/src/core/renderers/webgl/utils/WebGLGraphics.js b/src/core/renderers/webgl/utils/WebGLGraphics.js deleted file mode 100644 index ab8f46e..0000000 --- a/src/core/renderers/webgl/utils/WebGLGraphics.js +++ /dev/null @@ -1,860 +0,0 @@ -var utils = require('../../../utils'), - math = require('../../../math'), - CONST = require('../../../const'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * A set of functions used by the webGL renderer to draw the primitive graphics data - * - * @namespace PIXI - * @private - */ -var WebGLGraphics = module.exports = {}; - -/** - * Renders the graphics object - * - * @static - * @private - * @param graphics {Graphics} - * @param renderer {WebGLRenderer} - */ -WebGLGraphics.renderGraphics = function (graphics, renderer) {//projection, offset) -{ - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - WebGLGraphics.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.stencilManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.stencilManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -WebGLGraphics.updateGraphics = function (graphics, gl) -{ - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; - } - - // flag the graphics as not dirty as we are about to update it... - graphics.dirty = false; - - var i; - - // if the user cleared the graphics object we will need to clear every object - if (graphics.clearDirty) - { - graphics.clearDirty = false; - - // lop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) - { - var graphicsData = webGL.data[i]; - graphicsData.reset(); - WebGLGraphics.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // need to add the points the the graphics object.. - data.points = data.shape.points.slice(); - if (data.shape.closed) - { - // close the poly if the value is true! - if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1]) - { - data.points.push(data.points[0], data.points[1]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - - var canDrawUsingSimple = WebGLGraphics.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = WebGLGraphics.switchMode(webGL, 1); - WebGLGraphics.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = WebGLGraphics.switchMode(webGL, 1); - WebGLGraphics.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - WebGLGraphics.buildLine(data, webGLData); - - } - } - else - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - WebGLGraphics.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - WebGLGraphics.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - WebGLGraphics.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * @static - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -WebGLGraphics.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = WebGLGraphics.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = WebGLGraphics.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - var rectData = graphicsData.shape; - var x = rectData.x; - var y = rectData.y; - var width = rectData.width; - var height = rectData.height; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vertPos = verts.length/6; - - // start - verts.push(x, y); - verts.push(r, g, b, alpha); - - verts.push(x + width, y); - verts.push(r, g, b, alpha); - - verts.push(x , y + height); - verts.push(r, g, b, alpha); - - verts.push(x + width, y + height); - verts.push(r, g, b, alpha); - - // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = [x, y, - x + width, y, - x + width, y + height, - x, y + height, - x, y]; - - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildRoundedRectangle = function (graphicsData, webGLData) -{ - var rrectData = graphicsData.shape; - var x = rrectData.x; - var y = rrectData.y; - var width = rrectData.width; - var height = rrectData.height; - - var radius = rrectData.radius; - - var recPoints = []; - recPoints.push(x, y + radius); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vecPos = verts.length/6; - - var triangles = utils.PolyK.Triangulate(recPoints); - - // - - var i = 0; - for (i = 0; i < triangles.length; i+=3) - { - indices.push(triangles[i] + vecPos); - indices.push(triangles[i] + vecPos); - indices.push(triangles[i+1] + vecPos); - indices.push(triangles[i+2] + vecPos); - indices.push(triangles[i+2] + vecPos); - } - - - for (i = 0; i < recPoints.length; i++) - { - verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); - } - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = recPoints; - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @static - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - points = []; - - function getPt(n1 , n2, perc) - { - var diff = n2 - n1; - - return n1 + ( diff * perc ); - } - - var j = 0; - for (var i = 0; i <= n; i++ ) - { - j = i / n; - - // The Green Line - xa = getPt( fromX , cpX , j ); - ya = getPt( fromY , cpY , j ); - xb = getPt( cpX , toX , j ); - yb = getPt( cpY , toY , j ); - - // The Black Dot - x = getPt( xa , xb , j ); - y = getPt( ya , yb , j ); - - points.push(x, y); - } - return points; -}; - -/** - * Builds a circle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -WebGLGraphics.buildCircle = function (graphicsData, webGLData) -{ - // need to convert points to a nice regular data - var circleData = graphicsData.shape; - var x = circleData.x; - var y = circleData.y; - var width; - var height; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vecPos = verts.length/6; - - indices.push(vecPos); - - for (i = 0; i < totalSegs + 1 ; i++) - { - verts.push(x,y, r, g, b, alpha); - - verts.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height, - r, g, b, alpha); - - indices.push(vecPos++, vecPos++); - } - - indices.push(vecPos-1); - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = []; - - for (i = 0; i < totalSegs + 1; i++) - { - graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height); - } - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - var i = 0; - var points = graphicsData.points; - - if (points.length === 0) - { - return; - } - - // if the line width is an odd number add 0.5 to align to a whole pixel - if (graphicsData.lineWidth%2) - { - for (i = 0; i < points.length; i++) - { - points[i] += 0.5; - } - } - - // get first and last point.. figure out the middle! - var firstPoint = new math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - gonna have issues :) - if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) - { - // need to clone as we are going to slightly modify the shape.. - points = points.slice(); - - points.pop(); - points.pop(); - - lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - - points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY); - } - - var verts = webGLData.points; - var indices = webGLData.indices; - var length = points.length / 2; - var indexCount = points.length; - var indexStart = verts.length/6; - - // DRAW the Line - var width = graphicsData.lineWidth / 2; - - // sort color - var color = utils.hex2rgb(graphicsData.lineColor); - var alpha = graphicsData.lineAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var px, py, p1x, p1y, p2x, p2y, p3x, p3y; - var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var a1, b1, c1, a2, b2, c2; - var denom, pdist, dist; - - p1x = points[0]; - p1y = points[1]; - - p2x = points[2]; - p2y = points[3]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - // start - verts.push(p1x - perpx , p1y - perpy, - r, g, b, alpha); - - verts.push(p1x + perpx , p1y + perpy, - r, g, b, alpha); - - for (i = 1; i < length-1; i++) - { - p1x = points[(i-1)*2]; - p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2]; - p2y = points[(i)*2 + 1]; - - p3x = points[(i+1)*2]; - p3y = points[(i+1)*2 + 1]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - perp2x = -(p2y - p3y); - perp2y = p2x - p3x; - - dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); - perp2x /= dist; - perp2y /= dist; - perp2x *= width; - perp2y *= width; - - a1 = (-perpy + p1y) - (-perpy + p2y); - b1 = (-perpx + p2x) - (-perpx + p1x); - c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); - a2 = (-perp2y + p3y) - (-perp2y + p2y); - b2 = (-perp2x + p2x) - (-perp2x + p3x); - c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - - denom = a1*b2 - a2*b1; - - if (Math.abs(denom) < 0.1 ) - { - - denom+=10.1; - verts.push(p2x - perpx , p2y - perpy, - r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy, - r, g, b, alpha); - - continue; - } - - px = (b1*c2 - b2*c1)/denom; - py = (a2*c1 - a1*c2)/denom; - - - pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - - - if (pdist > 140 * 140) - { - perp3x = perpx - perp2x; - perp3y = perpy - perp2y; - - dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); - perp3x /= dist; - perp3y /= dist; - perp3x *= width; - perp3y *= width; - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(r, g, b, alpha); - } - } - - p1x = points[(length-2)*2]; - p1y = points[(length-2)*2 + 1]; - - p2x = points[(length-1)*2]; - p2y = points[(length-1)*2 + 1]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - verts.push(p2x - perpx , p2y - perpy); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - var points = graphicsData.points.slice(); - - if (points.length < 6) - { - return; - } - - // get first and last point.. figure out the middle! - var indices = webGLData.indices; - webGLData.points = points; - webGLData.alpha = graphicsData.fillAlpha; - webGLData.color = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get size.. - for (var i = 0; i < points.length; i+=2) - { - x = points[i]; - y = points[i+1]; - - minX = x < minX ? x : minX; - maxX = x > maxX ? x : maxX; - - minY = y < minY ? y : minY; - maxY = y > maxY ? y : maxY; - } - - // add a quad to the end cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildPoly = function (graphicsData, webGLData) -{ - var points = graphicsData.points; - - if (points.length < 6) - { - return; - } - // get first and last point.. figure out the middle! - var verts = webGLData.points; - var indices = webGLData.indices; - - var length = points.length / 2; - - // sort color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - if (!triangles) - { - return false; - } - - var vertPos = verts.length / 6; - - var i = 0; - - for (i = 0; i < triangles.length; i+=3) - { - indices.push(triangles[i] + vertPos); - indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); - } - - for (i = 0; i < length; i++) - { - verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); - } - - return true; -}; - -WebGLGraphics.graphicsDataPool = []; diff --git a/src/core/renderers/webgl/utils/WebGLSpriteBatch.js b/src/core/renderers/webgl/utils/WebGLSpriteBatch.js deleted file mode 100644 index 55befbb..0000000 --- a/src/core/renderers/webgl/utils/WebGLSpriteBatch.js +++ /dev/null @@ -1,660 +0,0 @@ -var TextureUvs = require('../../../textures/TextureUvs'), - Shader = require('../shaders/Shader'); - -/** - * @author Mat Groves - * - * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! - * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer - * - * Heavily inspired by LibGDX's WebGLSpriteBatch: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java - */ - -/** - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this sprite batch works for. - */ -function WebGLSpriteBatch(renderer) -{ - /** - * - * - * @member {WebGLRenderer} - */ - this.renderer = renderer; - - /** - * - * - * @member {number} - */ - this.vertSize = 5; - - /** - * - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** - * The number of images in the SpriteBatch before it flushes. - * - * @member {number} - */ - this.size = 2000;//Math.pow(2, 16) / this.vertSize; - - // the total number of bytes in our batch - var numVerts = this.size * 4 * this.vertByteSize; - // the total number of indices in our batch - var numIndices = this.size * 6; - - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new ArrayBuffer(numVerts); - - /** - * View on the vertices as a Float32Array - * - * @member {Float32Array} - */ - this.positions = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array - * - * @member {Uint32Array} - */ - this.colors = new Uint32Array(this.vertices); - - /** - * Holds the indices - * - * @member {Uint16Array} - */ - this.indices = new Uint16Array(numIndices); - - /** - * - * - * @member {number} - */ - this.lastIndexCount = 0; - - for (var i=0, j=0; i < numIndices; i += 6, j += 4) - { - this.indices[i + 0] = j + 0; - this.indices[i + 1] = j + 1; - this.indices[i + 2] = j + 2; - this.indices[i + 3] = j + 0; - this.indices[i + 4] = j + 2; - this.indices[i + 5] = j + 3; - } - - /** - * - * - * @member {boolean} - */ - this.drawing = false; - - /** - * - * - * @member {number} - */ - this.currentBatchSize = 0; - - /** - * - * - * @member {BaseTexture} - */ - this.currentBaseTexture = null; - - /** - * - * - * @member {boolean} - */ - this.dirty = true; - - /** - * - * - * @member {Array} - */ - this.textures = []; - - /** - * - * - * @member {Array} - */ - this.blendModes = []; - - /** - * - * - * @member {Array} - */ - this.shaders = []; - - /** - * - * - * @member {Array} - */ - this.sprites = []; - - /** - * The default shader that is used if a sprite doesn't have a more specific one. - * - * @member {Shader} - */ - this.shader = null; - - // listen for context and update necessary buffers - var self = this; - this.renderer.on('context', function () - { - self.setupContext(); - }); -} - -WebGLSpriteBatch.prototype.constructor = WebGLSpriteBatch; -module.exports = WebGLSpriteBatch; - -/** - * @param gl {WebGLContext} the current WebGL drawing context - */ -WebGLSpriteBatch.prototype.setupContext = function () -{ - var gl = this.renderer.gl; - - // setup default shader - this.shader = new Shader(gl); - - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // 65535 is max index, so 65535 / 6 = 10922. - - //upload the index data - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); - - this.currentBlendMode = 99999; -}; - -/** - * - */ -WebGLSpriteBatch.prototype.begin = function () -{ - // this.shader = this.renderer.shaderManager.defaultShader; - - this.start(); -}; - -/** - */ -WebGLSpriteBatch.prototype.end = function () -{ - this.flush(); -}; - -/** - * @param sprite {Sprite} the sprite to render when using this spritebatch - */ -WebGLSpriteBatch.prototype.render = function (sprite) -{ - var texture = sprite.texture; - - //TODO set blend modes.. - // check texture.. - if (this.currentBatchSize >= this.size) - { - this.flush(); - this.currentBaseTexture = texture.baseTexture; - } - - // get the uvs for the texture - var uvs = texture._uvs; - - // if the uvs have not updated then no point rendering just yet! - if (!uvs) - { - return; - } - - // TODO trim?? - var aX = sprite.anchor.x; - var aY = sprite.anchor.y; - - var w0, w1, h0, h1; - - if (texture.trim) - { - // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. - var trim = texture.trim; - - w1 = trim.x - aX * trim.width; - w0 = w1 + texture.crop.width; - - h1 = trim.y - aY * trim.height; - h0 = h1 + texture.crop.height; - - } - else - { - w0 = (texture.frame.width ) * (1-aX); - w1 = (texture.frame.width ) * -aX; - - h0 = texture.frame.height * (1-aY); - h1 = texture.frame.height * -aY; - } - - var index = this.currentBatchSize * this.vertByteSize; - - var resolution = texture.baseTexture.resolution; - - var worldTransform = sprite.worldTransform; - - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; - var tx = worldTransform.tx; - var ty = worldTransform.ty; - - var colors = this.colors; - var positions = this.positions; - - if (this.renderer.roundPixels) - { - // xy - positions[index] = a * w1 + c * h1 + tx | 0; - positions[index+1] = d * h1 + b * w1 + ty | 0; - - // xy - positions[index+5] = a * w0 + c * h1 + tx | 0; - positions[index+6] = d * h1 + b * w0 + ty | 0; - - // xy - positions[index+10] = a * w0 + c * h0 + tx | 0; - positions[index+11] = d * h0 + b * w0 + ty | 0; - - // xy - positions[index+15] = a * w1 + c * h0 + tx | 0; - positions[index+16] = d * h0 + b * w1 + ty | 0; - } - else - { - // xy - positions[index] = a * w1 + c * h1 + tx; - positions[index+1] = d * h1 + b * w1 + ty; - - // xy - positions[index+5] = a * w0 + c * h1 + tx; - positions[index+6] = d * h1 + b * w0 + ty; - - // xy - positions[index+10] = a * w0 + c * h0 + tx; - positions[index+11] = d * h0 + b * w0 + ty; - - // xy - positions[index+15] = a * w1 + c * h0 + tx; - positions[index+16] = d * h0 + b * w1 + ty; - } - - // uv - positions[index+2] = uvs.x0; - positions[index+3] = uvs.y0; - - // uv - positions[index+7] = uvs.x1; - positions[index+8] = uvs.y1; - - // uv - positions[index+12] = uvs.x2; - positions[index+13] = uvs.y2; - - // uv - positions[index+17] = uvs.x3; - positions[index+18] = uvs.y3; - - // color and alpha - var tint = sprite.tint; - colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); - - // increment the batchsize - this.sprites[this.currentBatchSize++] = sprite; - - -}; - -/** - * Renders a TilingSprite using the spriteBatch. - * - * @param sprite {TilingSprite} the tilingSprite to render - */ -WebGLSpriteBatch.prototype.renderTilingSprite = function (tilingSprite) -{ - var texture = tilingSprite.tilingTexture; - - // check texture.. - if (this.currentBatchSize >= this.size) - { - //return; - this.flush(); - this.currentBaseTexture = texture.baseTexture; - } - - // set the textures uvs temporarily - // TODO create a separate texture so that we can tile part of a texture - - if (!tilingSprite._uvs) - { - tilingSprite._uvs = new TextureUvs(); - } - - var uvs = tilingSprite._uvs; - - tilingSprite.tilePosition.x %= texture.baseTexture.width * tilingSprite.tileScaleOffset.x; - tilingSprite.tilePosition.y %= texture.baseTexture.height * tilingSprite.tileScaleOffset.y; - - var offsetX = tilingSprite.tilePosition.x/(texture.baseTexture.width*tilingSprite.tileScaleOffset.x); - var offsetY = tilingSprite.tilePosition.y/(texture.baseTexture.height*tilingSprite.tileScaleOffset.y); - - var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x); - var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y); - - uvs.x0 = 0 - offsetX; - uvs.y0 = 0 - offsetY; - - uvs.x1 = (1 * scaleX) - offsetX; - uvs.y1 = 0 - offsetY; - - uvs.x2 = (1 * scaleX) - offsetX; - uvs.y2 = (1 * scaleY) - offsetY; - - uvs.x3 = 0 - offsetX; - uvs.y3 = (1 * scaleY) - offsetY; - - // get the tilingSprites current alpha and tint and combining them into a single color - var tint = tilingSprite.tint; - var color = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (tilingSprite.alpha * 255 << 24); - - var positions = this.positions; - var colors = this.colors; - - var width = tilingSprite.width; - var height = tilingSprite.height; - - // TODO trim?? - var aX = tilingSprite.anchor.x; - var aY = tilingSprite.anchor.y; - var w0 = width * (1-aX); - var w1 = width * -aX; - - var h0 = height * (1-aY); - var h1 = height * -aY; - - var index = this.currentBatchSize * this.vertByteSize; - - var resolution = texture.baseTexture.resolution; - - var worldTransform = tilingSprite.worldTransform; - - var a = worldTransform.a / resolution;//[0]; - var b = worldTransform.b / resolution;//[3]; - var c = worldTransform.c / resolution;//[1]; - var d = worldTransform.d / resolution;//[4]; - var tx = worldTransform.tx;//[2]; - var ty = worldTransform.ty;//[5]; - - // xy - positions[index++] = a * w1 + c * h1 + tx; - positions[index++] = d * h1 + b * w1 + ty; - // uv - positions[index++] = uvs.x0; - positions[index++] = uvs.y0; - // color - colors[index++] = color; - - // xy - positions[index++] = (a * w0 + c * h1 + tx); - positions[index++] = d * h1 + b * w0 + ty; - // uv - positions[index++] = uvs.x1; - positions[index++] = uvs.y1; - // color - colors[index++] = color; - - // xy - positions[index++] = a * w0 + c * h0 + tx; - positions[index++] = d * h0 + b * w0 + ty; - // uv - positions[index++] = uvs.x2; - positions[index++] = uvs.y2; - // color - colors[index++] = color; - - // xy - positions[index++] = a * w1 + c * h0 + tx; - positions[index++] = d * h0 + b * w1 + ty; - // uv - positions[index++] = uvs.x3; - positions[index++] = uvs.y3; - // color - colors[index++] = color; - - // increment the batchsize - this.sprites[this.currentBatchSize++] = tilingSprite; -}; - -/** - * Renders the content and empties the current batch. - * - */ -WebGLSpriteBatch.prototype.flush = function () -{ - // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize === 0) - { - return; - } - - var gl = this.renderer.gl; - var shader; - - if (this.dirty) - { - this.dirty = false; - // bind the main texture - gl.activeTexture(gl.TEXTURE0); - - // bind the buffers - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // this is the same for each shader? - var stride = this.vertByteSize; - gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - - // color attributes will be interpreted as unsigned bytes and normalized - gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); - } - - // upload the verts to the buffer - if (this.currentBatchSize > ( this.size * 0.5 ) ) - { - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); - } - else - { - var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); - } - - var nextTexture, nextBlendMode, nextShader; - var batchSize = 0; - var start = 0; - - var currentBaseTexture = null; - var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; - var currentShader = null; - - var blendSwap = false; - var shaderSwap = false; - var sprite; - - for (var i = 0, j = this.currentBatchSize; i < j; i++) - { - - sprite = this.sprites[i]; - - nextTexture = sprite.texture.baseTexture; - nextBlendMode = sprite.blendMode; - nextShader = sprite.shader || this.shader; - - blendSwap = currentBlendMode !== nextBlendMode; - shaderSwap = currentShader !== nextShader; // should I use uuidS??? - - if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) - { - this.renderBatch(currentBaseTexture, batchSize, start); - - start = i; - batchSize = 0; - currentBaseTexture = nextTexture; - - if (blendSwap) - { - currentBlendMode = nextBlendMode; - this.renderer.blendModeManager.setBlendMode( currentBlendMode ); - } - - if (shaderSwap) - { - currentShader = nextShader; - - shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; - - if (!shader) - { - shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); - currentShader.shaders[gl.id] = shader; - } - - // set shader function??? - this.renderer.shaderManager.setShader(shader); - - if (shader.dirty) - { - shader.syncUniforms(); - } - - // both thease only need to be set if they are changing.. - // set the projection - var projection = this.renderer.projection; - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); - - // TODO - this is temprorary! - var offsetVector = this.renderer.offset; - gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); - - // set the pointers - } - } - - batchSize++; - } - - this.renderBatch(currentBaseTexture, batchSize, start); - - // then reset the batch! - this.currentBatchSize = 0; -}; - -/** - * @param texture {Texture} - * @param size {number} - * @param startIndex {number} - */ -WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) -{ - if (size === 0) - { - return; - } - - var gl = this.renderer.gl; - - if (!texture._glTextures[gl.id]) - { - this.renderer.updateTexture(texture); - } - else - { - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - } - - // now draw those suckas! - gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); - - // increment the draw count - this.renderer.drawCount++; -}; - -/** - * - */ -WebGLSpriteBatch.prototype.stop = function () -{ - this.flush(); - this.dirty = true; -}; - -/** - * - */ -WebGLSpriteBatch.prototype.start = function () -{ - this.dirty = true; -}; - -/** - * Destroys the SpriteBatch. - * - */ -WebGLSpriteBatch.prototype.destroy = function () -{ - this.renderer.gl.deleteBuffer(this.vertexBuffer); - this.renderer.gl.deleteBuffer(this.indexBuffer); - - this.vertices = null; - this.indices = null; - - this.vertexBuffer = null; - this.indexBuffer = null; - - this.currentBaseTexture = null; - - this.renderer = null; -}; diff --git a/src/core/display/DisplayObjectContainer.js b/src/core/display/DisplayObjectContainer.js index 4625ee8..0669e79 100644 --- a/src/core/display/DisplayObjectContainer.js +++ b/src/core/display/DisplayObjectContainer.js @@ -500,15 +500,13 @@ // push filter first as we need to ensure the stencil buffer is correct for any masking if (this._filters) { - renderer.spriteBatch.flush(); + renderer.spriteRenderer.flush(); renderer.filterManager.pushFilter(this._filterBlock); } if (this._mask) { - renderer.spriteBatch.stop(); renderer.maskManager.pushMask(this.mask, renderer); - renderer.spriteBatch.start(); } // add this object to the batch, only rendered if it has a texture. @@ -520,8 +518,6 @@ this.children[i].renderWebGL(renderer); } - // time to stop the sprite batch as either a mask element or a filter draw will happen next - renderer.spriteBatch.stop(); if (this._mask) { @@ -533,7 +529,6 @@ renderer.filterManager.popFilter(); } - renderer.spriteBatch.start(); } else { diff --git a/src/core/display/Sprite.js b/src/core/display/Sprite.js index 5862aef..e565208 100644 --- a/src/core/display/Sprite.js +++ b/src/core/display/Sprite.js @@ -204,8 +204,8 @@ // this is where content gets renderd.. // watch this space for a little render state manager.. - renderer.setObjectRendererer(renderer.spriteBatch); - renderer.spriteBatch.render(this); + renderer.setObjectRendererer(renderer.spriteRenderer); + renderer.spriteRenderer.render(this); }; /** diff --git a/src/core/index.js b/src/core/index.js index eb4a82b..c620978 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -18,6 +18,9 @@ // display DisplayObject: require('./display/DisplayObject'), DisplayObjectContainer: require('./display/DisplayObjectContainer'), + + Stage: require('./display/DisplayObjectContainer'), + Sprite: require('./display/Sprite'), SpriteBatch: require('./display/SpriteBatch'), @@ -38,7 +41,7 @@ // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), /** * This helper function will automatically detect which renderer you should be using. diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js index e902d2a..e5cee2f 100644 --- a/src/core/primitives/Graphics.js +++ b/src/core/primitives/Graphics.js @@ -3,7 +3,7 @@ Texture = require('../textures/Texture'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), - WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), + // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), CONST = require('../const'); @@ -738,24 +738,18 @@ return; } - else */ + + */ + + if (this.glDirty) + { + this.dirty = true; + this.glDirty = false; + } - renderer.spriteBatch.stop(); - renderer.blendModeManager.setBlendMode(this.blendMode); + renderer.setObjectRendererer(renderer.graphicsRenderer); + renderer.graphicsRenderer.render(this); - // check blend mode - renderer.blendModeManager.setBlendMode( this.blendMode ); - - // check if the webgl graphic needs to be updated - if (this.glDirty) - { - this.dirty = true; - this.glDirty = false; - } - - WebGLGraphics.renderGraphics(this, renderer); - - renderer.spriteBatch.start(); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 1f3e655..5d90e91 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,4 @@ -var WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), +var SpriteRenderer = require('./utils/SpriteRenderer'), GraphicsRenderer = require('./utils/GraphicsRenderer'), WebGLFastSpriteBatch = require('./utils/WebGLFastSpriteBatch'), WebGLShaderManager = require('./managers/WebGLShaderManager'), @@ -191,9 +191,9 @@ /** * Manages the rendering of sprites - * @member {WebGLSpriteBatch} + * @member {SpriteRenderer} */ - this.spriteBatch = new WebGLSpriteBatch(this); + this.spriteRenderer = new SpriteRenderer(this); this.graphicsRenderer = new GraphicsRenderer(this); @@ -245,7 +245,7 @@ */ this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1}; - this.currentRenderer = this.spriteBatch; + this.currentRenderer = this.spriteRenderer; } @@ -377,7 +377,7 @@ this.offset = this.offset; // start the sprite batch - this.spriteBatch.begin(); + this.spriteRenderer.begin(); // start the filter manager this.filterManager.begin(buffer); @@ -386,7 +386,7 @@ displayObject.renderWebGL(this); // finish the sprite batch - this.spriteBatch.end(); + this.spriteRenderer.end(); }; WebGLRenderer.prototype.setObjectRendererer = function (objectRenderer) @@ -544,7 +544,7 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); - this.spriteBatch.destroy(); + this.spriteRenderer.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -577,7 +577,7 @@ this.drawCount = 0; this.shaderManager = null; - this.spriteBatch = null; + this.spriteRenderer = null; this.maskManager = null; this.filterManager = null; this.stencilManager = null; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index e568812..773cc5d 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -1,6 +1,4 @@ -var WebGLManager = require('./WebGLManager'), - WebGLGraphics = require('../utils/WebGLGraphics'); - +var WebGLManager = require('./WebGLManager') /** * @class * @namespace PIXI @@ -22,9 +20,11 @@ */ WebGLMaskManager.prototype.pushMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + if (maskData.dirty) { - WebGLGraphics.updateGraphics(maskData, this.renderer.gl); + this.renderer.graphicsRenderer.updateGraphics(maskData, this.renderer.gl); } if (!maskData._webGL[this.renderer.gl.id].data.length) @@ -42,5 +42,7 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { + this.renderer.setObjectRenderer( this.renderer.graphicsRenderer ); + this.renderer.stencilManager.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer); }; diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index 1ea7d19..cb200d1 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -25,8 +25,7 @@ 'uniform float flipY;', 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -39,8 +38,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/FastShader.js b/src/core/renderers/webgl/shaders/FastShader.js index 2e5e060..d198f10 100644 --- a/src/core/renderers/webgl/shaders/FastShader.js +++ b/src/core/renderers/webgl/shaders/FastShader.js @@ -29,8 +29,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', @@ -51,8 +50,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index a25f54f..1446f28 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -24,8 +24,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec4 vColor;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), @@ -49,6 +47,9 @@ flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aColor:0 } ); } diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index fd75ef5..4fc4232 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -40,9 +40,7 @@ } this.attributes = { - aVertexPosition: 0, - aTextureCoord: 0, - aColor: 0 + aVertexPosition: 0 }; for (var a in customAttributes) @@ -69,8 +67,7 @@ 'const vec2 center = vec2(-1.0, 1.0);', - 'void main(void) - {', + 'void main(void){', ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', @@ -89,8 +86,7 @@ 'uniform sampler2D uSampler;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ].join('\n'); @@ -134,8 +130,7 @@ // maybe its something to do with the current state of the gl context. // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) - // if (this.attributes.aColor === -1) - { + // if (this.attributes.aColor === -1){ // this.attributes.aColor = 2; // } @@ -505,4 +500,4 @@ } return shader; -}; +}; \ No newline at end of file diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js new file mode 100644 index 0000000..d8190c3 --- /dev/null +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -0,0 +1,64 @@ +var utils = require('../../../utils'); + +var Shader = require('./Shader'); + +/** + * @class + * @namespace PIXI + * @param gl {WebGLContext} the current WebGL drawing context + */ +function SpriteShader(gl) +{ + Shader.call(this, + gl, + // vertex shader + [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute vec4 aColor;', + + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void){', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', + '}' + + ].join('\n'), + // fragment shader + [ + 'precision lowp float;', + + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform sampler2D uSampler;', + + 'void main(void){', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ].join('\n'), + // custom uniforms + { + tint: { type: '3f', value: [0, 0, 0] }, + flipY: { type: '1f', value: 0 }, + alpha: { type: '1f', value: 0 }, + translationMatrix: { type: 'mat3', value: new Float32Array(9) } + }, + { + aTextureCoord: 0, + aColor: 0 + } + ); +} + +SpriteShader.prototype = Object.create(Shader.prototype); +SpriteShader.prototype.constructor = SpriteShader; +module.exports = SpriteShader; diff --git a/src/core/renderers/webgl/shaders/StripShader.js b/src/core/renderers/webgl/shaders/StripShader.js index a7abcc6..f487381 100644 --- a/src/core/renderers/webgl/shaders/StripShader.js +++ b/src/core/renderers/webgl/shaders/StripShader.js @@ -21,8 +21,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', ' v -= offsetVector.xyx;', ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', @@ -38,8 +37,7 @@ 'varying vec2 vTextureCoord;', - 'void main(void) - {', + 'void main(void){', ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/utils/GraphicsRenderer.js b/src/core/renderers/webgl/utils/GraphicsRenderer.js index c6cedf3..15526d9 100644 --- a/src/core/renderers/webgl/utils/GraphicsRenderer.js +++ b/src/core/renderers/webgl/utils/GraphicsRenderer.js @@ -30,7 +30,8 @@ GraphicsRenderer.prototype.start = function() { - // flush! + // set the shader.. + } GraphicsRenderer.prototype.stop = function() diff --git a/src/core/renderers/webgl/utils/SpriteRenderer.js b/src/core/renderers/webgl/utils/SpriteRenderer.js new file mode 100644 index 0000000..0f05978 --- /dev/null +++ b/src/core/renderers/webgl/utils/SpriteRenderer.js @@ -0,0 +1,660 @@ +var TextureUvs = require('../../../textures/TextureUvs'), + SpriteShader = require('../shaders/SpriteShader'); + +/** + * @author Mat Groves + * + * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ + * for creating the original pixi version! + * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer + * + * Heavily inspired by LibGDX's SpriteRenderer: + * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java + */ + +/** + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this sprite batch works for. + */ +function SpriteRenderer(renderer) +{ + /** + * + * + * @member {WebGLRenderer} + */ + this.renderer = renderer; + + /** + * + * + * @member {number} + */ + this.vertSize = 5; + + /** + * + * + * @member {number} + */ + this.vertByteSize = this.vertSize * 4; + + /** + * The number of images in the SpriteBatch before it flushes. + * + * @member {number} + */ + this.size = 2000;//Math.pow(2, 16) / this.vertSize; + + // the total number of bytes in our batch + var numVerts = this.size * 4 * this.vertByteSize; + // the total number of indices in our batch + var numIndices = this.size * 6; + + /** + * Holds the vertices + * + * @member {ArrayBuffer} + */ + this.vertices = new ArrayBuffer(numVerts); + + /** + * View on the vertices as a Float32Array + * + * @member {Float32Array} + */ + this.positions = new Float32Array(this.vertices); + + /** + * View on the vertices as a Uint32Array + * + * @member {Uint32Array} + */ + this.colors = new Uint32Array(this.vertices); + + /** + * Holds the indices + * + * @member {Uint16Array} + */ + this.indices = new Uint16Array(numIndices); + + /** + * + * + * @member {number} + */ + this.lastIndexCount = 0; + + for (var i=0, j=0; i < numIndices; i += 6, j += 4) + { + this.indices[i + 0] = j + 0; + this.indices[i + 1] = j + 1; + this.indices[i + 2] = j + 2; + this.indices[i + 3] = j + 0; + this.indices[i + 4] = j + 2; + this.indices[i + 5] = j + 3; + } + + /** + * + * + * @member {boolean} + */ + this.drawing = false; + + /** + * + * + * @member {number} + */ + this.currentBatchSize = 0; + + /** + * + * + * @member {BaseTexture} + */ + this.currentBaseTexture = null; + + /** + * + * + * @member {boolean} + */ + this.dirty = true; + + /** + * + * + * @member {Array} + */ + this.textures = []; + + /** + * + * + * @member {Array} + */ + this.blendModes = []; + + /** + * + * + * @member {Array} + */ + this.shaders = []; + + /** + * + * + * @member {Array} + */ + this.sprites = []; + + /** + * The default shader that is used if a sprite doesn't have a more specific one. + * + * @member {Shader} + */ + this.shader = null; + + // listen for context and update necessary buffers + var self = this; + this.renderer.on('context', function () + { + self.setupContext(); + }); +} + +SpriteRenderer.prototype.constructor = SpriteRenderer; +module.exports = SpriteRenderer; + +/** + * @param gl {WebGLContext} the current WebGL drawing context + */ +SpriteRenderer.prototype.setupContext = function () +{ + var gl = this.renderer.gl; + + // setup default shader + this.shader = new SpriteShader(gl); + + // create a couple of buffers + this.vertexBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // 65535 is max index, so 65535 / 6 = 10922. + + //upload the index data + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + + this.currentBlendMode = 99999; +}; + +/** + * + */ +SpriteRenderer.prototype.begin = function () +{ + // this.shader = this.renderer.shaderManager.defaultShader; + + this.start(); +}; + +/** + */ +SpriteRenderer.prototype.end = function () +{ + this.flush(); +}; + +/** + * @param sprite {Sprite} the sprite to render when using this spritebatch + */ +SpriteRenderer.prototype.render = function (sprite) +{ + var texture = sprite.texture; + + //TODO set blend modes.. + // check texture.. + if (this.currentBatchSize >= this.size) + { + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // get the uvs for the texture + var uvs = texture._uvs; + + // if the uvs have not updated then no point rendering just yet! + if (!uvs) + { + return; + } + + // TODO trim?? + var aX = sprite.anchor.x; + var aY = sprite.anchor.y; + + var w0, w1, h0, h1; + + if (texture.trim) + { + // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. + var trim = texture.trim; + + w1 = trim.x - aX * trim.width; + w0 = w1 + texture.crop.width; + + h1 = trim.y - aY * trim.height; + h0 = h1 + texture.crop.height; + + } + else + { + w0 = (texture.frame.width ) * (1-aX); + w1 = (texture.frame.width ) * -aX; + + h0 = texture.frame.height * (1-aY); + h1 = texture.frame.height * -aY; + } + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = sprite.worldTransform; + + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + + var colors = this.colors; + var positions = this.positions; + + if (this.renderer.roundPixels) + { + // xy + positions[index] = a * w1 + c * h1 + tx | 0; + positions[index+1] = d * h1 + b * w1 + ty | 0; + + // xy + positions[index+5] = a * w0 + c * h1 + tx | 0; + positions[index+6] = d * h1 + b * w0 + ty | 0; + + // xy + positions[index+10] = a * w0 + c * h0 + tx | 0; + positions[index+11] = d * h0 + b * w0 + ty | 0; + + // xy + positions[index+15] = a * w1 + c * h0 + tx | 0; + positions[index+16] = d * h0 + b * w1 + ty | 0; + } + else + { + // xy + positions[index] = a * w1 + c * h1 + tx; + positions[index+1] = d * h1 + b * w1 + ty; + + // xy + positions[index+5] = a * w0 + c * h1 + tx; + positions[index+6] = d * h1 + b * w0 + ty; + + // xy + positions[index+10] = a * w0 + c * h0 + tx; + positions[index+11] = d * h0 + b * w0 + ty; + + // xy + positions[index+15] = a * w1 + c * h0 + tx; + positions[index+16] = d * h0 + b * w1 + ty; + } + + // uv + positions[index+2] = uvs.x0; + positions[index+3] = uvs.y0; + + // uv + positions[index+7] = uvs.x1; + positions[index+8] = uvs.y1; + + // uv + positions[index+12] = uvs.x2; + positions[index+13] = uvs.y2; + + // uv + positions[index+17] = uvs.x3; + positions[index+18] = uvs.y3; + + // color and alpha + var tint = sprite.tint; + colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); + + // increment the batchsize + this.sprites[this.currentBatchSize++] = sprite; + + +}; + +/** + * Renders a TilingSprite using the spriteBatch. + * + * @param sprite {TilingSprite} the tilingSprite to render + */ +SpriteRenderer.prototype.renderTilingSprite = function (tilingSprite) +{ + var texture = tilingSprite.tilingTexture; + + // check texture.. + if (this.currentBatchSize >= this.size) + { + //return; + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // set the textures uvs temporarily + // TODO create a separate texture so that we can tile part of a texture + + if (!tilingSprite._uvs) + { + tilingSprite._uvs = new TextureUvs(); + } + + var uvs = tilingSprite._uvs; + + tilingSprite.tilePosition.x %= texture.baseTexture.width * tilingSprite.tileScaleOffset.x; + tilingSprite.tilePosition.y %= texture.baseTexture.height * tilingSprite.tileScaleOffset.y; + + var offsetX = tilingSprite.tilePosition.x/(texture.baseTexture.width*tilingSprite.tileScaleOffset.x); + var offsetY = tilingSprite.tilePosition.y/(texture.baseTexture.height*tilingSprite.tileScaleOffset.y); + + var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x); + var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y); + + uvs.x0 = 0 - offsetX; + uvs.y0 = 0 - offsetY; + + uvs.x1 = (1 * scaleX) - offsetX; + uvs.y1 = 0 - offsetY; + + uvs.x2 = (1 * scaleX) - offsetX; + uvs.y2 = (1 * scaleY) - offsetY; + + uvs.x3 = 0 - offsetX; + uvs.y3 = (1 * scaleY) - offsetY; + + // get the tilingSprites current alpha and tint and combining them into a single color + var tint = tilingSprite.tint; + var color = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (tilingSprite.alpha * 255 << 24); + + var positions = this.positions; + var colors = this.colors; + + var width = tilingSprite.width; + var height = tilingSprite.height; + + // TODO trim?? + var aX = tilingSprite.anchor.x; + var aY = tilingSprite.anchor.y; + var w0 = width * (1-aX); + var w1 = width * -aX; + + var h0 = height * (1-aY); + var h1 = height * -aY; + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = tilingSprite.worldTransform; + + var a = worldTransform.a / resolution;//[0]; + var b = worldTransform.b / resolution;//[3]; + var c = worldTransform.c / resolution;//[1]; + var d = worldTransform.d / resolution;//[4]; + var tx = worldTransform.tx;//[2]; + var ty = worldTransform.ty;//[5]; + + // xy + positions[index++] = a * w1 + c * h1 + tx; + positions[index++] = d * h1 + b * w1 + ty; + // uv + positions[index++] = uvs.x0; + positions[index++] = uvs.y0; + // color + colors[index++] = color; + + // xy + positions[index++] = (a * w0 + c * h1 + tx); + positions[index++] = d * h1 + b * w0 + ty; + // uv + positions[index++] = uvs.x1; + positions[index++] = uvs.y1; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w0 + c * h0 + tx; + positions[index++] = d * h0 + b * w0 + ty; + // uv + positions[index++] = uvs.x2; + positions[index++] = uvs.y2; + // color + colors[index++] = color; + + // xy + positions[index++] = a * w1 + c * h0 + tx; + positions[index++] = d * h0 + b * w1 + ty; + // uv + positions[index++] = uvs.x3; + positions[index++] = uvs.y3; + // color + colors[index++] = color; + + // increment the batchsize + this.sprites[this.currentBatchSize++] = tilingSprite; +}; + +/** + * Renders the content and empties the current batch. + * + */ +SpriteRenderer.prototype.flush = function () +{ + // If the batch is length 0 then return as there is nothing to draw + if (this.currentBatchSize === 0) + { + return; + } + + var gl = this.renderer.gl; + var shader; + + if (this.dirty) + { + this.dirty = false; + // bind the main texture + gl.activeTexture(gl.TEXTURE0); + + // bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // this is the same for each shader? + var stride = this.vertByteSize; + gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + + // color attributes will be interpreted as unsigned bytes and normalized + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + } + + // upload the verts to the buffer + if (this.currentBatchSize > ( this.size * 0.5 ) ) + { + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); + } + else + { + var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); + } + + var nextTexture, nextBlendMode, nextShader; + var batchSize = 0; + var start = 0; + + var currentBaseTexture = null; + var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; + + for (var i = 0, j = this.currentBatchSize; i < j; i++) + { + + sprite = this.sprites[i]; + + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.shader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use uuidS??? + + if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) + { + this.renderBatch(currentBaseTexture, batchSize, start); + + start = i; + batchSize = 0; + currentBaseTexture = nextTexture; + + if (blendSwap) + { + currentBlendMode = nextBlendMode; + this.renderer.blendModeManager.setBlendMode( currentBlendMode ); + } + + if (shaderSwap) + { + currentShader = nextShader; + + shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; + + if (!shader) + { + shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderer.shaderManager.setShader(shader); + + if (shader.dirty) + { + shader.syncUniforms(); + } + + // both thease only need to be set if they are changing.. + // set the projection + var projection = this.renderer.projection; + gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); + + // TODO - this is temprorary! + var offsetVector = this.renderer.offset; + gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); + + // set the pointers + } + } + + batchSize++; + } + + this.renderBatch(currentBaseTexture, batchSize, start); + + // then reset the batch! + this.currentBatchSize = 0; +}; + +/** + * @param texture {Texture} + * @param size {number} + * @param startIndex {number} + */ +SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) +{ + if (size === 0) + { + return; + } + + var gl = this.renderer.gl; + + if (!texture._glTextures[gl.id]) + { + this.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + } + + // now draw those suckas! + gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); + + // increment the draw count + this.renderer.drawCount++; +}; + +/** + * + */ +SpriteRenderer.prototype.stop = function () +{ + this.flush(); + this.dirty = true; +}; + +/** + * + */ +SpriteRenderer.prototype.start = function () +{ + this.dirty = true; +}; + +/** + * Destroys the SpriteBatch. + * + */ +SpriteRenderer.prototype.destroy = function () +{ + this.renderer.gl.deleteBuffer(this.vertexBuffer); + this.renderer.gl.deleteBuffer(this.indexBuffer); + + this.vertices = null; + this.indices = null; + + this.vertexBuffer = null; + this.indexBuffer = null; + + this.currentBaseTexture = null; + + this.renderer = null; +}; diff --git a/src/core/renderers/webgl/utils/WebGLGraphics.js b/src/core/renderers/webgl/utils/WebGLGraphics.js deleted file mode 100644 index ab8f46e..0000000 --- a/src/core/renderers/webgl/utils/WebGLGraphics.js +++ /dev/null @@ -1,860 +0,0 @@ -var utils = require('../../../utils'), - math = require('../../../math'), - CONST = require('../../../const'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * A set of functions used by the webGL renderer to draw the primitive graphics data - * - * @namespace PIXI - * @private - */ -var WebGLGraphics = module.exports = {}; - -/** - * Renders the graphics object - * - * @static - * @private - * @param graphics {Graphics} - * @param renderer {WebGLRenderer} - */ -WebGLGraphics.renderGraphics = function (graphics, renderer) {//projection, offset) -{ - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - WebGLGraphics.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.stencilManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.stencilManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -WebGLGraphics.updateGraphics = function (graphics, gl) -{ - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; - } - - // flag the graphics as not dirty as we are about to update it... - graphics.dirty = false; - - var i; - - // if the user cleared the graphics object we will need to clear every object - if (graphics.clearDirty) - { - graphics.clearDirty = false; - - // lop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) - { - var graphicsData = webGL.data[i]; - graphicsData.reset(); - WebGLGraphics.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // need to add the points the the graphics object.. - data.points = data.shape.points.slice(); - if (data.shape.closed) - { - // close the poly if the value is true! - if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1]) - { - data.points.push(data.points[0], data.points[1]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - - var canDrawUsingSimple = WebGLGraphics.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = WebGLGraphics.switchMode(webGL, 1); - WebGLGraphics.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = WebGLGraphics.switchMode(webGL, 1); - WebGLGraphics.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - WebGLGraphics.buildLine(data, webGLData); - - } - } - else - { - webGLData = WebGLGraphics.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - WebGLGraphics.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - WebGLGraphics.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - WebGLGraphics.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * @static - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -WebGLGraphics.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = WebGLGraphics.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = WebGLGraphics.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - var rectData = graphicsData.shape; - var x = rectData.x; - var y = rectData.y; - var width = rectData.width; - var height = rectData.height; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vertPos = verts.length/6; - - // start - verts.push(x, y); - verts.push(r, g, b, alpha); - - verts.push(x + width, y); - verts.push(r, g, b, alpha); - - verts.push(x , y + height); - verts.push(r, g, b, alpha); - - verts.push(x + width, y + height); - verts.push(r, g, b, alpha); - - // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = [x, y, - x + width, y, - x + width, y + height, - x, y + height, - x, y]; - - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildRoundedRectangle = function (graphicsData, webGLData) -{ - var rrectData = graphicsData.shape; - var x = rrectData.x; - var y = rrectData.y; - var width = rrectData.width; - var height = rrectData.height; - - var radius = rrectData.radius; - - var recPoints = []; - recPoints.push(x, y + radius); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vecPos = verts.length/6; - - var triangles = utils.PolyK.Triangulate(recPoints); - - // - - var i = 0; - for (i = 0; i < triangles.length; i+=3) - { - indices.push(triangles[i] + vecPos); - indices.push(triangles[i] + vecPos); - indices.push(triangles[i+1] + vecPos); - indices.push(triangles[i+2] + vecPos); - indices.push(triangles[i+2] + vecPos); - } - - - for (i = 0; i < recPoints.length; i++) - { - verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); - } - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = recPoints; - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @static - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - points = []; - - function getPt(n1 , n2, perc) - { - var diff = n2 - n1; - - return n1 + ( diff * perc ); - } - - var j = 0; - for (var i = 0; i <= n; i++ ) - { - j = i / n; - - // The Green Line - xa = getPt( fromX , cpX , j ); - ya = getPt( fromY , cpY , j ); - xb = getPt( cpX , toX , j ); - yb = getPt( cpY , toY , j ); - - // The Black Dot - x = getPt( xa , xb , j ); - y = getPt( ya , yb , j ); - - points.push(x, y); - } - return points; -}; - -/** - * Builds a circle to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -WebGLGraphics.buildCircle = function (graphicsData, webGLData) -{ - // need to convert points to a nice regular data - var circleData = graphicsData.shape; - var x = circleData.x; - var y = circleData.y; - var width; - var height; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var verts = webGLData.points; - var indices = webGLData.indices; - - var vecPos = verts.length/6; - - indices.push(vecPos); - - for (i = 0; i < totalSegs + 1 ; i++) - { - verts.push(x,y, r, g, b, alpha); - - verts.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height, - r, g, b, alpha); - - indices.push(vecPos++, vecPos++); - } - - indices.push(vecPos-1); - } - - if (graphicsData.lineWidth) - { - var tempPoints = graphicsData.points; - - graphicsData.points = []; - - for (i = 0; i < totalSegs + 1; i++) - { - graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height); - } - - WebGLGraphics.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - var i = 0; - var points = graphicsData.points; - - if (points.length === 0) - { - return; - } - - // if the line width is an odd number add 0.5 to align to a whole pixel - if (graphicsData.lineWidth%2) - { - for (i = 0; i < points.length; i++) - { - points[i] += 0.5; - } - } - - // get first and last point.. figure out the middle! - var firstPoint = new math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - gonna have issues :) - if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) - { - // need to clone as we are going to slightly modify the shape.. - points = points.slice(); - - points.pop(); - points.pop(); - - lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - - points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY); - } - - var verts = webGLData.points; - var indices = webGLData.indices; - var length = points.length / 2; - var indexCount = points.length; - var indexStart = verts.length/6; - - // DRAW the Line - var width = graphicsData.lineWidth / 2; - - // sort color - var color = utils.hex2rgb(graphicsData.lineColor); - var alpha = graphicsData.lineAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var px, py, p1x, p1y, p2x, p2y, p3x, p3y; - var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var a1, b1, c1, a2, b2, c2; - var denom, pdist, dist; - - p1x = points[0]; - p1y = points[1]; - - p2x = points[2]; - p2y = points[3]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - // start - verts.push(p1x - perpx , p1y - perpy, - r, g, b, alpha); - - verts.push(p1x + perpx , p1y + perpy, - r, g, b, alpha); - - for (i = 1; i < length-1; i++) - { - p1x = points[(i-1)*2]; - p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2]; - p2y = points[(i)*2 + 1]; - - p3x = points[(i+1)*2]; - p3y = points[(i+1)*2 + 1]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - perp2x = -(p2y - p3y); - perp2y = p2x - p3x; - - dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); - perp2x /= dist; - perp2y /= dist; - perp2x *= width; - perp2y *= width; - - a1 = (-perpy + p1y) - (-perpy + p2y); - b1 = (-perpx + p2x) - (-perpx + p1x); - c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); - a2 = (-perp2y + p3y) - (-perp2y + p2y); - b2 = (-perp2x + p2x) - (-perp2x + p3x); - c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - - denom = a1*b2 - a2*b1; - - if (Math.abs(denom) < 0.1 ) - { - - denom+=10.1; - verts.push(p2x - perpx , p2y - perpy, - r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy, - r, g, b, alpha); - - continue; - } - - px = (b1*c2 - b2*c1)/denom; - py = (a2*c1 - a1*c2)/denom; - - - pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - - - if (pdist > 140 * 140) - { - perp3x = perpx - perp2x; - perp3y = perpy - perp2y; - - dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); - perp3x /= dist; - perp3y /= dist; - perp3x *= width; - perp3y *= width; - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(r, g, b, alpha); - } - } - - p1x = points[(length-2)*2]; - p1y = points[(length-2)*2 + 1]; - - p2x = points[(length-1)*2]; - p2y = points[(length-1)*2 + 1]; - - perpx = -(p1y - p2y); - perpy = p1x - p2x; - - dist = Math.sqrt(perpx*perpx + perpy*perpy); - perpx /= dist; - perpy /= dist; - perpx *= width; - perpy *= width; - - verts.push(p2x - perpx , p2y - perpy); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - var points = graphicsData.points.slice(); - - if (points.length < 6) - { - return; - } - - // get first and last point.. figure out the middle! - var indices = webGLData.indices; - webGLData.points = points; - webGLData.alpha = graphicsData.fillAlpha; - webGLData.color = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get size.. - for (var i = 0; i < points.length; i+=2) - { - x = points[i]; - y = points[i+1]; - - minX = x < minX ? x : minX; - maxX = x > maxX ? x : maxX; - - minY = y < minY ? y : minY; - maxY = y > maxY ? y : maxY; - } - - // add a quad to the end cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @static - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -WebGLGraphics.buildPoly = function (graphicsData, webGLData) -{ - var points = graphicsData.points; - - if (points.length < 6) - { - return; - } - // get first and last point.. figure out the middle! - var verts = webGLData.points; - var indices = webGLData.indices; - - var length = points.length / 2; - - // sort color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - if (!triangles) - { - return false; - } - - var vertPos = verts.length / 6; - - var i = 0; - - for (i = 0; i < triangles.length; i+=3) - { - indices.push(triangles[i] + vertPos); - indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); - } - - for (i = 0; i < length; i++) - { - verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); - } - - return true; -}; - -WebGLGraphics.graphicsDataPool = []; diff --git a/src/core/renderers/webgl/utils/WebGLSpriteBatch.js b/src/core/renderers/webgl/utils/WebGLSpriteBatch.js deleted file mode 100644 index 55befbb..0000000 --- a/src/core/renderers/webgl/utils/WebGLSpriteBatch.js +++ /dev/null @@ -1,660 +0,0 @@ -var TextureUvs = require('../../../textures/TextureUvs'), - Shader = require('../shaders/Shader'); - -/** - * @author Mat Groves - * - * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! - * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer - * - * Heavily inspired by LibGDX's WebGLSpriteBatch: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java - */ - -/** - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this sprite batch works for. - */ -function WebGLSpriteBatch(renderer) -{ - /** - * - * - * @member {WebGLRenderer} - */ - this.renderer = renderer; - - /** - * - * - * @member {number} - */ - this.vertSize = 5; - - /** - * - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** - * The number of images in the SpriteBatch before it flushes. - * - * @member {number} - */ - this.size = 2000;//Math.pow(2, 16) / this.vertSize; - - // the total number of bytes in our batch - var numVerts = this.size * 4 * this.vertByteSize; - // the total number of indices in our batch - var numIndices = this.size * 6; - - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new ArrayBuffer(numVerts); - - /** - * View on the vertices as a Float32Array - * - * @member {Float32Array} - */ - this.positions = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array - * - * @member {Uint32Array} - */ - this.colors = new Uint32Array(this.vertices); - - /** - * Holds the indices - * - * @member {Uint16Array} - */ - this.indices = new Uint16Array(numIndices); - - /** - * - * - * @member {number} - */ - this.lastIndexCount = 0; - - for (var i=0, j=0; i < numIndices; i += 6, j += 4) - { - this.indices[i + 0] = j + 0; - this.indices[i + 1] = j + 1; - this.indices[i + 2] = j + 2; - this.indices[i + 3] = j + 0; - this.indices[i + 4] = j + 2; - this.indices[i + 5] = j + 3; - } - - /** - * - * - * @member {boolean} - */ - this.drawing = false; - - /** - * - * - * @member {number} - */ - this.currentBatchSize = 0; - - /** - * - * - * @member {BaseTexture} - */ - this.currentBaseTexture = null; - - /** - * - * - * @member {boolean} - */ - this.dirty = true; - - /** - * - * - * @member {Array} - */ - this.textures = []; - - /** - * - * - * @member {Array} - */ - this.blendModes = []; - - /** - * - * - * @member {Array} - */ - this.shaders = []; - - /** - * - * - * @member {Array} - */ - this.sprites = []; - - /** - * The default shader that is used if a sprite doesn't have a more specific one. - * - * @member {Shader} - */ - this.shader = null; - - // listen for context and update necessary buffers - var self = this; - this.renderer.on('context', function () - { - self.setupContext(); - }); -} - -WebGLSpriteBatch.prototype.constructor = WebGLSpriteBatch; -module.exports = WebGLSpriteBatch; - -/** - * @param gl {WebGLContext} the current WebGL drawing context - */ -WebGLSpriteBatch.prototype.setupContext = function () -{ - var gl = this.renderer.gl; - - // setup default shader - this.shader = new Shader(gl); - - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // 65535 is max index, so 65535 / 6 = 10922. - - //upload the index data - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); - - this.currentBlendMode = 99999; -}; - -/** - * - */ -WebGLSpriteBatch.prototype.begin = function () -{ - // this.shader = this.renderer.shaderManager.defaultShader; - - this.start(); -}; - -/** - */ -WebGLSpriteBatch.prototype.end = function () -{ - this.flush(); -}; - -/** - * @param sprite {Sprite} the sprite to render when using this spritebatch - */ -WebGLSpriteBatch.prototype.render = function (sprite) -{ - var texture = sprite.texture; - - //TODO set blend modes.. - // check texture.. - if (this.currentBatchSize >= this.size) - { - this.flush(); - this.currentBaseTexture = texture.baseTexture; - } - - // get the uvs for the texture - var uvs = texture._uvs; - - // if the uvs have not updated then no point rendering just yet! - if (!uvs) - { - return; - } - - // TODO trim?? - var aX = sprite.anchor.x; - var aY = sprite.anchor.y; - - var w0, w1, h0, h1; - - if (texture.trim) - { - // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. - var trim = texture.trim; - - w1 = trim.x - aX * trim.width; - w0 = w1 + texture.crop.width; - - h1 = trim.y - aY * trim.height; - h0 = h1 + texture.crop.height; - - } - else - { - w0 = (texture.frame.width ) * (1-aX); - w1 = (texture.frame.width ) * -aX; - - h0 = texture.frame.height * (1-aY); - h1 = texture.frame.height * -aY; - } - - var index = this.currentBatchSize * this.vertByteSize; - - var resolution = texture.baseTexture.resolution; - - var worldTransform = sprite.worldTransform; - - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; - var tx = worldTransform.tx; - var ty = worldTransform.ty; - - var colors = this.colors; - var positions = this.positions; - - if (this.renderer.roundPixels) - { - // xy - positions[index] = a * w1 + c * h1 + tx | 0; - positions[index+1] = d * h1 + b * w1 + ty | 0; - - // xy - positions[index+5] = a * w0 + c * h1 + tx | 0; - positions[index+6] = d * h1 + b * w0 + ty | 0; - - // xy - positions[index+10] = a * w0 + c * h0 + tx | 0; - positions[index+11] = d * h0 + b * w0 + ty | 0; - - // xy - positions[index+15] = a * w1 + c * h0 + tx | 0; - positions[index+16] = d * h0 + b * w1 + ty | 0; - } - else - { - // xy - positions[index] = a * w1 + c * h1 + tx; - positions[index+1] = d * h1 + b * w1 + ty; - - // xy - positions[index+5] = a * w0 + c * h1 + tx; - positions[index+6] = d * h1 + b * w0 + ty; - - // xy - positions[index+10] = a * w0 + c * h0 + tx; - positions[index+11] = d * h0 + b * w0 + ty; - - // xy - positions[index+15] = a * w1 + c * h0 + tx; - positions[index+16] = d * h0 + b * w1 + ty; - } - - // uv - positions[index+2] = uvs.x0; - positions[index+3] = uvs.y0; - - // uv - positions[index+7] = uvs.x1; - positions[index+8] = uvs.y1; - - // uv - positions[index+12] = uvs.x2; - positions[index+13] = uvs.y2; - - // uv - positions[index+17] = uvs.x3; - positions[index+18] = uvs.y3; - - // color and alpha - var tint = sprite.tint; - colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); - - // increment the batchsize - this.sprites[this.currentBatchSize++] = sprite; - - -}; - -/** - * Renders a TilingSprite using the spriteBatch. - * - * @param sprite {TilingSprite} the tilingSprite to render - */ -WebGLSpriteBatch.prototype.renderTilingSprite = function (tilingSprite) -{ - var texture = tilingSprite.tilingTexture; - - // check texture.. - if (this.currentBatchSize >= this.size) - { - //return; - this.flush(); - this.currentBaseTexture = texture.baseTexture; - } - - // set the textures uvs temporarily - // TODO create a separate texture so that we can tile part of a texture - - if (!tilingSprite._uvs) - { - tilingSprite._uvs = new TextureUvs(); - } - - var uvs = tilingSprite._uvs; - - tilingSprite.tilePosition.x %= texture.baseTexture.width * tilingSprite.tileScaleOffset.x; - tilingSprite.tilePosition.y %= texture.baseTexture.height * tilingSprite.tileScaleOffset.y; - - var offsetX = tilingSprite.tilePosition.x/(texture.baseTexture.width*tilingSprite.tileScaleOffset.x); - var offsetY = tilingSprite.tilePosition.y/(texture.baseTexture.height*tilingSprite.tileScaleOffset.y); - - var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x); - var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y); - - uvs.x0 = 0 - offsetX; - uvs.y0 = 0 - offsetY; - - uvs.x1 = (1 * scaleX) - offsetX; - uvs.y1 = 0 - offsetY; - - uvs.x2 = (1 * scaleX) - offsetX; - uvs.y2 = (1 * scaleY) - offsetY; - - uvs.x3 = 0 - offsetX; - uvs.y3 = (1 * scaleY) - offsetY; - - // get the tilingSprites current alpha and tint and combining them into a single color - var tint = tilingSprite.tint; - var color = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (tilingSprite.alpha * 255 << 24); - - var positions = this.positions; - var colors = this.colors; - - var width = tilingSprite.width; - var height = tilingSprite.height; - - // TODO trim?? - var aX = tilingSprite.anchor.x; - var aY = tilingSprite.anchor.y; - var w0 = width * (1-aX); - var w1 = width * -aX; - - var h0 = height * (1-aY); - var h1 = height * -aY; - - var index = this.currentBatchSize * this.vertByteSize; - - var resolution = texture.baseTexture.resolution; - - var worldTransform = tilingSprite.worldTransform; - - var a = worldTransform.a / resolution;//[0]; - var b = worldTransform.b / resolution;//[3]; - var c = worldTransform.c / resolution;//[1]; - var d = worldTransform.d / resolution;//[4]; - var tx = worldTransform.tx;//[2]; - var ty = worldTransform.ty;//[5]; - - // xy - positions[index++] = a * w1 + c * h1 + tx; - positions[index++] = d * h1 + b * w1 + ty; - // uv - positions[index++] = uvs.x0; - positions[index++] = uvs.y0; - // color - colors[index++] = color; - - // xy - positions[index++] = (a * w0 + c * h1 + tx); - positions[index++] = d * h1 + b * w0 + ty; - // uv - positions[index++] = uvs.x1; - positions[index++] = uvs.y1; - // color - colors[index++] = color; - - // xy - positions[index++] = a * w0 + c * h0 + tx; - positions[index++] = d * h0 + b * w0 + ty; - // uv - positions[index++] = uvs.x2; - positions[index++] = uvs.y2; - // color - colors[index++] = color; - - // xy - positions[index++] = a * w1 + c * h0 + tx; - positions[index++] = d * h0 + b * w1 + ty; - // uv - positions[index++] = uvs.x3; - positions[index++] = uvs.y3; - // color - colors[index++] = color; - - // increment the batchsize - this.sprites[this.currentBatchSize++] = tilingSprite; -}; - -/** - * Renders the content and empties the current batch. - * - */ -WebGLSpriteBatch.prototype.flush = function () -{ - // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize === 0) - { - return; - } - - var gl = this.renderer.gl; - var shader; - - if (this.dirty) - { - this.dirty = false; - // bind the main texture - gl.activeTexture(gl.TEXTURE0); - - // bind the buffers - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // this is the same for each shader? - var stride = this.vertByteSize; - gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - - // color attributes will be interpreted as unsigned bytes and normalized - gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); - } - - // upload the verts to the buffer - if (this.currentBatchSize > ( this.size * 0.5 ) ) - { - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); - } - else - { - var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); - } - - var nextTexture, nextBlendMode, nextShader; - var batchSize = 0; - var start = 0; - - var currentBaseTexture = null; - var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; - var currentShader = null; - - var blendSwap = false; - var shaderSwap = false; - var sprite; - - for (var i = 0, j = this.currentBatchSize; i < j; i++) - { - - sprite = this.sprites[i]; - - nextTexture = sprite.texture.baseTexture; - nextBlendMode = sprite.blendMode; - nextShader = sprite.shader || this.shader; - - blendSwap = currentBlendMode !== nextBlendMode; - shaderSwap = currentShader !== nextShader; // should I use uuidS??? - - if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) - { - this.renderBatch(currentBaseTexture, batchSize, start); - - start = i; - batchSize = 0; - currentBaseTexture = nextTexture; - - if (blendSwap) - { - currentBlendMode = nextBlendMode; - this.renderer.blendModeManager.setBlendMode( currentBlendMode ); - } - - if (shaderSwap) - { - currentShader = nextShader; - - shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; - - if (!shader) - { - shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); - currentShader.shaders[gl.id] = shader; - } - - // set shader function??? - this.renderer.shaderManager.setShader(shader); - - if (shader.dirty) - { - shader.syncUniforms(); - } - - // both thease only need to be set if they are changing.. - // set the projection - var projection = this.renderer.projection; - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); - - // TODO - this is temprorary! - var offsetVector = this.renderer.offset; - gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); - - // set the pointers - } - } - - batchSize++; - } - - this.renderBatch(currentBaseTexture, batchSize, start); - - // then reset the batch! - this.currentBatchSize = 0; -}; - -/** - * @param texture {Texture} - * @param size {number} - * @param startIndex {number} - */ -WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) -{ - if (size === 0) - { - return; - } - - var gl = this.renderer.gl; - - if (!texture._glTextures[gl.id]) - { - this.renderer.updateTexture(texture); - } - else - { - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - } - - // now draw those suckas! - gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); - - // increment the draw count - this.renderer.drawCount++; -}; - -/** - * - */ -WebGLSpriteBatch.prototype.stop = function () -{ - this.flush(); - this.dirty = true; -}; - -/** - * - */ -WebGLSpriteBatch.prototype.start = function () -{ - this.dirty = true; -}; - -/** - * Destroys the SpriteBatch. - * - */ -WebGLSpriteBatch.prototype.destroy = function () -{ - this.renderer.gl.deleteBuffer(this.vertexBuffer); - this.renderer.gl.deleteBuffer(this.indexBuffer); - - this.vertices = null; - this.indices = null; - - this.vertexBuffer = null; - this.indexBuffer = null; - - this.currentBaseTexture = null; - - this.renderer = null; -}; diff --git a/src/index.js b/src/index.js index f864027..83eb4b0 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ // plugins: core.extras = require('./extras'); -core.filters = require('./filters'); +//core.filters = require('./filters'); core.interaction = require('./interaction'); core.loaders = require('./loaders'); core.spine = require('./spine');