diff --git a/src/core/display/Container.js b/src/core/display/Container.js index eff729e..0cdc2c1 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -428,61 +428,87 @@ return; } - var i, j; // do a quick check to see if this element has a mask or a filter. if (this._mask || this._filters) { - renderer.currentRenderer.flush(); - - // push filter first as we need to ensure the stencil buffer is correct for any masking - if (this._filters && this._filters.length) - { - renderer.filterManager.pushFilter(this, this._filters); - } - - if (this._mask) - { - renderer.maskManager.pushMask(this, this._mask); - } - - renderer.currentRenderer.start(); - - // add this object to the batch, only rendered if it has a texture. - this._renderWebGL(renderer); - - // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) - { - this.children[i].renderWebGL(renderer); - } - - renderer.currentRenderer.flush(); - - if (this._mask) - { - renderer.maskManager.popMask(this, this._mask); - } - - if (this._filters) - { - renderer.filterManager.popFilter(); - - } - renderer.currentRenderer.start(); + this.renderAdvancedWebGL(renderer); } else { this._renderWebGL(renderer); // simple render children! - for (i = 0, j = this.children.length; i < j; ++i) + for (var i = 0, j = this.children.length; i < j; ++i) { this.children[i].renderWebGL(renderer); } } }; +Container.prototype.renderAdvancedWebGL = function (renderer) +{ + renderer.currentRenderer.flush(); + + var filters = this._filters; + var mask = this._mask; + var i, j; + + // push filter first as we need to ensure the stencil buffer is correct for any masking + if ( filters ) + { + if(!this._enabledFilters) + { + this._enabledFilters = []; + } + + this._enabledFilters.length = 0; + + for (i = 0; i < filters.length; i++) + { + if(filters[i].enabled) + { + this._enabledFilters.push( filters[i] ); + } + } + + if( this._enabledFilters.length ) + { + renderer.filterManager.pushFilter(this, this._enabledFilters); + } + } + + if ( mask ) + { + renderer.maskManager.pushMask(this, this._mask); + } + + renderer.currentRenderer.start(); + + // add this object to the batch, only rendered if it has a texture. + this._renderWebGL(renderer); + + // now loop through the children and make sure they get rendered + for (i = 0, j = this.children.length; i < j; i++) + { + this.children[i].renderWebGL(renderer); + } + + renderer.currentRenderer.flush(); + + if ( mask ) + { + renderer.maskManager.popMask(this, this._mask); + } + + if ( this._enabledFilters.length ) + { + renderer.filterManager.popFilter(); + } + + renderer.currentRenderer.start(); +}; + /** * To be overridden by the subclass * diff --git a/src/core/display/Container.js b/src/core/display/Container.js index eff729e..0cdc2c1 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -428,61 +428,87 @@ return; } - var i, j; // do a quick check to see if this element has a mask or a filter. if (this._mask || this._filters) { - renderer.currentRenderer.flush(); - - // push filter first as we need to ensure the stencil buffer is correct for any masking - if (this._filters && this._filters.length) - { - renderer.filterManager.pushFilter(this, this._filters); - } - - if (this._mask) - { - renderer.maskManager.pushMask(this, this._mask); - } - - renderer.currentRenderer.start(); - - // add this object to the batch, only rendered if it has a texture. - this._renderWebGL(renderer); - - // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) - { - this.children[i].renderWebGL(renderer); - } - - renderer.currentRenderer.flush(); - - if (this._mask) - { - renderer.maskManager.popMask(this, this._mask); - } - - if (this._filters) - { - renderer.filterManager.popFilter(); - - } - renderer.currentRenderer.start(); + this.renderAdvancedWebGL(renderer); } else { this._renderWebGL(renderer); // simple render children! - for (i = 0, j = this.children.length; i < j; ++i) + for (var i = 0, j = this.children.length; i < j; ++i) { this.children[i].renderWebGL(renderer); } } }; +Container.prototype.renderAdvancedWebGL = function (renderer) +{ + renderer.currentRenderer.flush(); + + var filters = this._filters; + var mask = this._mask; + var i, j; + + // push filter first as we need to ensure the stencil buffer is correct for any masking + if ( filters ) + { + if(!this._enabledFilters) + { + this._enabledFilters = []; + } + + this._enabledFilters.length = 0; + + for (i = 0; i < filters.length; i++) + { + if(filters[i].enabled) + { + this._enabledFilters.push( filters[i] ); + } + } + + if( this._enabledFilters.length ) + { + renderer.filterManager.pushFilter(this, this._enabledFilters); + } + } + + if ( mask ) + { + renderer.maskManager.pushMask(this, this._mask); + } + + renderer.currentRenderer.start(); + + // add this object to the batch, only rendered if it has a texture. + this._renderWebGL(renderer); + + // now loop through the children and make sure they get rendered + for (i = 0, j = this.children.length; i < j; i++) + { + this.children[i].renderWebGL(renderer); + } + + renderer.currentRenderer.flush(); + + if ( mask ) + { + renderer.maskManager.popMask(this, this._mask); + } + + if ( this._enabledFilters.length ) + { + renderer.filterManager.popFilter(); + } + + renderer.currentRenderer.start(); +}; + /** * To be overridden by the subclass * diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 6d23345..83dc97f 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -79,6 +79,9 @@ */ this.filterArea = null; + this._filters = null; + this._enabledFilters = null; + /** * The bounds object, this is used to calculate and store the bounds of the displayObject * diff --git a/src/core/display/Container.js b/src/core/display/Container.js index eff729e..0cdc2c1 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -428,61 +428,87 @@ return; } - var i, j; // do a quick check to see if this element has a mask or a filter. if (this._mask || this._filters) { - renderer.currentRenderer.flush(); - - // push filter first as we need to ensure the stencil buffer is correct for any masking - if (this._filters && this._filters.length) - { - renderer.filterManager.pushFilter(this, this._filters); - } - - if (this._mask) - { - renderer.maskManager.pushMask(this, this._mask); - } - - renderer.currentRenderer.start(); - - // add this object to the batch, only rendered if it has a texture. - this._renderWebGL(renderer); - - // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) - { - this.children[i].renderWebGL(renderer); - } - - renderer.currentRenderer.flush(); - - if (this._mask) - { - renderer.maskManager.popMask(this, this._mask); - } - - if (this._filters) - { - renderer.filterManager.popFilter(); - - } - renderer.currentRenderer.start(); + this.renderAdvancedWebGL(renderer); } else { this._renderWebGL(renderer); // simple render children! - for (i = 0, j = this.children.length; i < j; ++i) + for (var i = 0, j = this.children.length; i < j; ++i) { this.children[i].renderWebGL(renderer); } } }; +Container.prototype.renderAdvancedWebGL = function (renderer) +{ + renderer.currentRenderer.flush(); + + var filters = this._filters; + var mask = this._mask; + var i, j; + + // push filter first as we need to ensure the stencil buffer is correct for any masking + if ( filters ) + { + if(!this._enabledFilters) + { + this._enabledFilters = []; + } + + this._enabledFilters.length = 0; + + for (i = 0; i < filters.length; i++) + { + if(filters[i].enabled) + { + this._enabledFilters.push( filters[i] ); + } + } + + if( this._enabledFilters.length ) + { + renderer.filterManager.pushFilter(this, this._enabledFilters); + } + } + + if ( mask ) + { + renderer.maskManager.pushMask(this, this._mask); + } + + renderer.currentRenderer.start(); + + // add this object to the batch, only rendered if it has a texture. + this._renderWebGL(renderer); + + // now loop through the children and make sure they get rendered + for (i = 0, j = this.children.length; i < j; i++) + { + this.children[i].renderWebGL(renderer); + } + + renderer.currentRenderer.flush(); + + if ( mask ) + { + renderer.maskManager.popMask(this, this._mask); + } + + if ( this._enabledFilters.length ) + { + renderer.filterManager.popFilter(); + } + + renderer.currentRenderer.start(); +}; + /** * To be overridden by the subclass * diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 6d23345..83dc97f 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -79,6 +79,9 @@ */ this.filterArea = null; + this._filters = null; + this._enabledFilters = null; + /** * The bounds object, this is used to calculate and store the bounds of the displayObject * diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3885822..cb90ed4 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -54,8 +54,22 @@ this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; + /** + * The padding of the filter. Some filters require extra space to breath such as a blur. Increasing this will add extra width and height to the bounds of the object that the filter is applied to. + */ this.padding = 4; + + /** + * The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter. + * @member {number} + */ this.resolution = 1; + + /** + * If enabled is true the filter is applied, if false it will not. + * @member {boolean} + */ + this.enabled = true; } // constructor