diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 01b15f2..3da522c 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -109,7 +109,7 @@ // use program var gl = this.renderer.gl; - var filter = filterData.filter[0]; + this.currentFrame = input.frame; @@ -119,18 +119,43 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); - // this.__TEMP__ = filter.sprite; - filter.applyFilter( this.renderer, input, output ); + var filters = filterData.filter; - this.returnRenderTarget( input ); + if(filters.length === 1) + { + filters[0].applyFilter( this.renderer, input, output ); + this.returnRenderTarget( input ); + + } + else + { + var flipTexture = input; + var flopTexture = this.getRenderTarget(true); + + for (var i = 0; i < filters.length-1; i++) + { + var filter = filters[i]; + filter.applyFilter( this.renderer, flipTexture, flopTexture ); + + var temp = flipTexture; + flipTexture = flopTexture; + flopTexture = temp; + } + + filters[filters.length-1].applyFilter( this.renderer, flipTexture, output ); + + this.returnRenderTarget( flipTexture ); + this.returnRenderTarget( flopTexture ); + } return filterData.filter; }; -FilterManager.prototype.getRenderTarget = function () +FilterManager.prototype.getRenderTarget = function ( clear ) { var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height); renderTarget.frame = this.currentFrame; + if(clear)renderTarget.clear(); return renderTarget; }; @@ -174,7 +199,7 @@ FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix) { var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), - texture = sprite.texture.baseTexture; + texture = sprite._texture.baseTexture; var mappedMatrix = outputMatrix.identity(); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 01b15f2..3da522c 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -109,7 +109,7 @@ // use program var gl = this.renderer.gl; - var filter = filterData.filter[0]; + this.currentFrame = input.frame; @@ -119,18 +119,43 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); - // this.__TEMP__ = filter.sprite; - filter.applyFilter( this.renderer, input, output ); + var filters = filterData.filter; - this.returnRenderTarget( input ); + if(filters.length === 1) + { + filters[0].applyFilter( this.renderer, input, output ); + this.returnRenderTarget( input ); + + } + else + { + var flipTexture = input; + var flopTexture = this.getRenderTarget(true); + + for (var i = 0; i < filters.length-1; i++) + { + var filter = filters[i]; + filter.applyFilter( this.renderer, flipTexture, flopTexture ); + + var temp = flipTexture; + flipTexture = flopTexture; + flopTexture = temp; + } + + filters[filters.length-1].applyFilter( this.renderer, flipTexture, output ); + + this.returnRenderTarget( flipTexture ); + this.returnRenderTarget( flopTexture ); + } return filterData.filter; }; -FilterManager.prototype.getRenderTarget = function () +FilterManager.prototype.getRenderTarget = function ( clear ) { var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height); renderTarget.frame = this.currentFrame; + if(clear)renderTarget.clear(); return renderTarget; }; @@ -174,7 +199,7 @@ FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix) { var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), - texture = sprite.texture.baseTexture; + texture = sprite._texture.baseTexture; var mappedMatrix = outputMatrix.identity(); diff --git a/src/core/renderers/webgl/shaders/TextureShader.js b/src/core/renderers/webgl/shaders/TextureShader.js index dee908d..994208b 100644 --- a/src/core/renderers/webgl/shaders/TextureShader.js +++ b/src/core/renderers/webgl/shaders/TextureShader.js @@ -47,6 +47,7 @@ * @member {Array} */ vertexSrc = vertexSrc || [ + 'precision highp float;', 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', @@ -68,7 +69,7 @@ * @member {Array} */ fragmentSrc = fragmentSrc || [ - 'precision lowp float;', + 'precision highp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 01b15f2..3da522c 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -109,7 +109,7 @@ // use program var gl = this.renderer.gl; - var filter = filterData.filter[0]; + this.currentFrame = input.frame; @@ -119,18 +119,43 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); - // this.__TEMP__ = filter.sprite; - filter.applyFilter( this.renderer, input, output ); + var filters = filterData.filter; - this.returnRenderTarget( input ); + if(filters.length === 1) + { + filters[0].applyFilter( this.renderer, input, output ); + this.returnRenderTarget( input ); + + } + else + { + var flipTexture = input; + var flopTexture = this.getRenderTarget(true); + + for (var i = 0; i < filters.length-1; i++) + { + var filter = filters[i]; + filter.applyFilter( this.renderer, flipTexture, flopTexture ); + + var temp = flipTexture; + flipTexture = flopTexture; + flopTexture = temp; + } + + filters[filters.length-1].applyFilter( this.renderer, flipTexture, output ); + + this.returnRenderTarget( flipTexture ); + this.returnRenderTarget( flopTexture ); + } return filterData.filter; }; -FilterManager.prototype.getRenderTarget = function () +FilterManager.prototype.getRenderTarget = function ( clear ) { var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height); renderTarget.frame = this.currentFrame; + if(clear)renderTarget.clear(); return renderTarget; }; @@ -174,7 +199,7 @@ FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix) { var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), - texture = sprite.texture.baseTexture; + texture = sprite._texture.baseTexture; var mappedMatrix = outputMatrix.identity(); diff --git a/src/core/renderers/webgl/shaders/TextureShader.js b/src/core/renderers/webgl/shaders/TextureShader.js index dee908d..994208b 100644 --- a/src/core/renderers/webgl/shaders/TextureShader.js +++ b/src/core/renderers/webgl/shaders/TextureShader.js @@ -47,6 +47,7 @@ * @member {Array} */ vertexSrc = vertexSrc || [ + 'precision highp float;', 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', @@ -68,7 +69,7 @@ * @member {Array} */ fragmentSrc = fragmentSrc || [ - 'precision lowp float;', + 'precision highp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index e7ed9da..96aba37 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -104,7 +104,7 @@ RenderTarget.prototype.clear = function() { var gl = this.gl; - + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); }; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 01b15f2..3da522c 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -109,7 +109,7 @@ // use program var gl = this.renderer.gl; - var filter = filterData.filter[0]; + this.currentFrame = input.frame; @@ -119,18 +119,43 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); - // this.__TEMP__ = filter.sprite; - filter.applyFilter( this.renderer, input, output ); + var filters = filterData.filter; - this.returnRenderTarget( input ); + if(filters.length === 1) + { + filters[0].applyFilter( this.renderer, input, output ); + this.returnRenderTarget( input ); + + } + else + { + var flipTexture = input; + var flopTexture = this.getRenderTarget(true); + + for (var i = 0; i < filters.length-1; i++) + { + var filter = filters[i]; + filter.applyFilter( this.renderer, flipTexture, flopTexture ); + + var temp = flipTexture; + flipTexture = flopTexture; + flopTexture = temp; + } + + filters[filters.length-1].applyFilter( this.renderer, flipTexture, output ); + + this.returnRenderTarget( flipTexture ); + this.returnRenderTarget( flopTexture ); + } return filterData.filter; }; -FilterManager.prototype.getRenderTarget = function () +FilterManager.prototype.getRenderTarget = function ( clear ) { var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height); renderTarget.frame = this.currentFrame; + if(clear)renderTarget.clear(); return renderTarget; }; @@ -174,7 +199,7 @@ FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix) { var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), - texture = sprite.texture.baseTexture; + texture = sprite._texture.baseTexture; var mappedMatrix = outputMatrix.identity(); diff --git a/src/core/renderers/webgl/shaders/TextureShader.js b/src/core/renderers/webgl/shaders/TextureShader.js index dee908d..994208b 100644 --- a/src/core/renderers/webgl/shaders/TextureShader.js +++ b/src/core/renderers/webgl/shaders/TextureShader.js @@ -47,6 +47,7 @@ * @member {Array} */ vertexSrc = vertexSrc || [ + 'precision highp float;', 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', @@ -68,7 +69,7 @@ * @member {Array} */ fragmentSrc = fragmentSrc || [ - 'precision lowp float;', + 'precision highp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index e7ed9da..96aba37 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -104,7 +104,7 @@ RenderTarget.prototype.clear = function() { var gl = this.gl; - + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); }; diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js index f8a867c..c10c658 100644 --- a/src/filters/BloomFilter.js +++ b/src/filters/BloomFilter.js @@ -29,17 +29,19 @@ { var filterManager = renderer.filterManager; - var renderTarget = filterManager.getRenderTarget(); + var renderTarget = filterManager.getRenderTarget( true ); //TODO - copyTexSubImage2D could be used here? this.defaultFilter.applyFilter(renderer, input, output); - this.blurXFilter.applyFilter(renderer, input, renderTarget, true); + this.blurXFilter.applyFilter(renderer, input, renderTarget); renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); this.blurYFilter.applyFilter(renderer, renderTarget, output); + renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); + filterManager.returnRenderTarget( renderTarget ); }; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 01b15f2..3da522c 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -109,7 +109,7 @@ // use program var gl = this.renderer.gl; - var filter = filterData.filter[0]; + this.currentFrame = input.frame; @@ -119,18 +119,43 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); - // this.__TEMP__ = filter.sprite; - filter.applyFilter( this.renderer, input, output ); + var filters = filterData.filter; - this.returnRenderTarget( input ); + if(filters.length === 1) + { + filters[0].applyFilter( this.renderer, input, output ); + this.returnRenderTarget( input ); + + } + else + { + var flipTexture = input; + var flopTexture = this.getRenderTarget(true); + + for (var i = 0; i < filters.length-1; i++) + { + var filter = filters[i]; + filter.applyFilter( this.renderer, flipTexture, flopTexture ); + + var temp = flipTexture; + flipTexture = flopTexture; + flopTexture = temp; + } + + filters[filters.length-1].applyFilter( this.renderer, flipTexture, output ); + + this.returnRenderTarget( flipTexture ); + this.returnRenderTarget( flopTexture ); + } return filterData.filter; }; -FilterManager.prototype.getRenderTarget = function () +FilterManager.prototype.getRenderTarget = function ( clear ) { var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height); renderTarget.frame = this.currentFrame; + if(clear)renderTarget.clear(); return renderTarget; }; @@ -174,7 +199,7 @@ FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix) { var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), - texture = sprite.texture.baseTexture; + texture = sprite._texture.baseTexture; var mappedMatrix = outputMatrix.identity(); diff --git a/src/core/renderers/webgl/shaders/TextureShader.js b/src/core/renderers/webgl/shaders/TextureShader.js index dee908d..994208b 100644 --- a/src/core/renderers/webgl/shaders/TextureShader.js +++ b/src/core/renderers/webgl/shaders/TextureShader.js @@ -47,6 +47,7 @@ * @member {Array} */ vertexSrc = vertexSrc || [ + 'precision highp float;', 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', @@ -68,7 +69,7 @@ * @member {Array} */ fragmentSrc = fragmentSrc || [ - 'precision lowp float;', + 'precision highp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index e7ed9da..96aba37 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -104,7 +104,7 @@ RenderTarget.prototype.clear = function() { var gl = this.gl; - + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); }; diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js index f8a867c..c10c658 100644 --- a/src/filters/BloomFilter.js +++ b/src/filters/BloomFilter.js @@ -29,17 +29,19 @@ { var filterManager = renderer.filterManager; - var renderTarget = filterManager.getRenderTarget(); + var renderTarget = filterManager.getRenderTarget( true ); //TODO - copyTexSubImage2D could be used here? this.defaultFilter.applyFilter(renderer, input, output); - this.blurXFilter.applyFilter(renderer, input, renderTarget, true); + this.blurXFilter.applyFilter(renderer, input, renderTarget); renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); this.blurYFilter.applyFilter(renderer, renderTarget, output); + renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); + filterManager.returnRenderTarget( renderTarget ); }; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 7f6663b..bddd4dd 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -15,7 +15,7 @@ null, // fragment shader [ - 'precision mediump float;', + 'precision lowp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 01b15f2..3da522c 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -109,7 +109,7 @@ // use program var gl = this.renderer.gl; - var filter = filterData.filter[0]; + this.currentFrame = input.frame; @@ -119,18 +119,43 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); - // this.__TEMP__ = filter.sprite; - filter.applyFilter( this.renderer, input, output ); + var filters = filterData.filter; - this.returnRenderTarget( input ); + if(filters.length === 1) + { + filters[0].applyFilter( this.renderer, input, output ); + this.returnRenderTarget( input ); + + } + else + { + var flipTexture = input; + var flopTexture = this.getRenderTarget(true); + + for (var i = 0; i < filters.length-1; i++) + { + var filter = filters[i]; + filter.applyFilter( this.renderer, flipTexture, flopTexture ); + + var temp = flipTexture; + flipTexture = flopTexture; + flopTexture = temp; + } + + filters[filters.length-1].applyFilter( this.renderer, flipTexture, output ); + + this.returnRenderTarget( flipTexture ); + this.returnRenderTarget( flopTexture ); + } return filterData.filter; }; -FilterManager.prototype.getRenderTarget = function () +FilterManager.prototype.getRenderTarget = function ( clear ) { var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height); renderTarget.frame = this.currentFrame; + if(clear)renderTarget.clear(); return renderTarget; }; @@ -174,7 +199,7 @@ FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix) { var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), - texture = sprite.texture.baseTexture; + texture = sprite._texture.baseTexture; var mappedMatrix = outputMatrix.identity(); diff --git a/src/core/renderers/webgl/shaders/TextureShader.js b/src/core/renderers/webgl/shaders/TextureShader.js index dee908d..994208b 100644 --- a/src/core/renderers/webgl/shaders/TextureShader.js +++ b/src/core/renderers/webgl/shaders/TextureShader.js @@ -47,6 +47,7 @@ * @member {Array} */ vertexSrc = vertexSrc || [ + 'precision highp float;', 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', @@ -68,7 +69,7 @@ * @member {Array} */ fragmentSrc = fragmentSrc || [ - 'precision lowp float;', + 'precision highp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index e7ed9da..96aba37 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -104,7 +104,7 @@ RenderTarget.prototype.clear = function() { var gl = this.gl; - + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); }; diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js index f8a867c..c10c658 100644 --- a/src/filters/BloomFilter.js +++ b/src/filters/BloomFilter.js @@ -29,17 +29,19 @@ { var filterManager = renderer.filterManager; - var renderTarget = filterManager.getRenderTarget(); + var renderTarget = filterManager.getRenderTarget( true ); //TODO - copyTexSubImage2D could be used here? this.defaultFilter.applyFilter(renderer, input, output); - this.blurXFilter.applyFilter(renderer, input, renderTarget, true); + this.blurXFilter.applyFilter(renderer, input, renderTarget); renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); this.blurYFilter.applyFilter(renderer, renderTarget, output); + renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); + filterManager.returnRenderTarget( renderTarget ); }; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 7f6663b..bddd4dd 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -15,7 +15,7 @@ null, // fragment shader [ - 'precision mediump float;', + 'precision lowp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index bd04819..5496dac 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -13,7 +13,7 @@ AbstractFilter.call(this, null, [ - 'precision mediump float;', + 'precision lowp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;',