diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 7ccdae8..f6e46e2 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -49,7 +49,7 @@ }, set: function (value) { - this.padding = value * 1.5; + this.padding = value * 0.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 7ccdae8..f6e46e2 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -49,7 +49,7 @@ }, set: function (value) { - this.padding = value * 1.5; + this.padding = value * 0.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 6493159..27b5e25 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -84,7 +84,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 7ccdae8..f6e46e2 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -49,7 +49,7 @@ }, set: function (value) { - this.padding = value * 1.5; + this.padding = value * 0.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 6493159..27b5e25 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -84,7 +84,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1b76088..8a8b47f 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -76,7 +76,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 7ccdae8..f6e46e2 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -49,7 +49,7 @@ }, set: function (value) { - this.padding = value * 1.5; + this.padding = value * 0.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 6493159..27b5e25 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -84,7 +84,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1b76088..8a8b47f 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -76,7 +76,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/dropshadow/BlurYTintFilter.js b/src/filters/dropshadow/BlurYTintFilter.js index 6c862be..7e68d1b 100644 --- a/src/filters/dropshadow/BlurYTintFilter.js +++ b/src/filters/dropshadow/BlurYTintFilter.js @@ -21,31 +21,68 @@ blur: { type: '1f', value: 1 / 512 }, color: { type: 'c', value: [0,0,0]}, alpha: { type: '1f', value: 0.7 }, - offset: { type: '2f', value:[5, 5]} + offset: { type: '2f', value:[5, 5]}, + strength: { type: '1f', value:1} } ); + + this.passes = 1; + this.strength = 4; } BlurYTintFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYTintFilter.prototype.constructor = BlurYTintFilter; module.exports = BlurYTintFilter; +BlurYTintFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.height / input.size.height); + + if(this.passes === 1) + { + renderer.filterManager.applyFilter(shader, input, output, clear); + } + else + { + var renderTarget = renderer.filterManager.getRenderTarget(true); + var flip = input; + var flop = renderTarget; + + for(var i = 0; i < this.passes-1; i++) + { + renderer.filterManager.applyFilter(shader, flip, flop, clear); + + var temp = flop; + flop = flip; + flip = temp; + } + + renderer.filterManager.applyFilter(shader, flip, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + Object.defineProperties(BlurYTintFilter.prototype, { /** * Sets the strength of both the blur. * * @member {number} - * @memberof BlurYTintFilter# + * @memberof BlurYFilter# * @default 2 */ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value * 0.5; + this.strength = value; } - } + }, }); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 7ccdae8..f6e46e2 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -49,7 +49,7 @@ }, set: function (value) { - this.padding = value * 1.5; + this.padding = value * 0.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 6493159..27b5e25 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -84,7 +84,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1b76088..8a8b47f 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -76,7 +76,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/dropshadow/BlurYTintFilter.js b/src/filters/dropshadow/BlurYTintFilter.js index 6c862be..7e68d1b 100644 --- a/src/filters/dropshadow/BlurYTintFilter.js +++ b/src/filters/dropshadow/BlurYTintFilter.js @@ -21,31 +21,68 @@ blur: { type: '1f', value: 1 / 512 }, color: { type: 'c', value: [0,0,0]}, alpha: { type: '1f', value: 0.7 }, - offset: { type: '2f', value:[5, 5]} + offset: { type: '2f', value:[5, 5]}, + strength: { type: '1f', value:1} } ); + + this.passes = 1; + this.strength = 4; } BlurYTintFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYTintFilter.prototype.constructor = BlurYTintFilter; module.exports = BlurYTintFilter; +BlurYTintFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.height / input.size.height); + + if(this.passes === 1) + { + renderer.filterManager.applyFilter(shader, input, output, clear); + } + else + { + var renderTarget = renderer.filterManager.getRenderTarget(true); + var flip = input; + var flop = renderTarget; + + for(var i = 0; i < this.passes-1; i++) + { + renderer.filterManager.applyFilter(shader, flip, flop, clear); + + var temp = flop; + flop = flip; + flip = temp; + } + + renderer.filterManager.applyFilter(shader, flip, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + Object.defineProperties(BlurYTintFilter.prototype, { /** * Sets the strength of both the blur. * * @member {number} - * @memberof BlurYTintFilter# + * @memberof BlurYFilter# * @default 2 */ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value * 0.5; + this.strength = value; } - } + }, }); diff --git a/src/filters/dropshadow/blurYTint.frag b/src/filters/dropshadow/blurYTint.frag index 858ebd1..650e093 100644 --- a/src/filters/dropshadow/blurYTint.frag +++ b/src/filters/dropshadow/blurYTint.frag @@ -1,10 +1,9 @@ precision lowp float; varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[14]; +varying vec2 vBlurTexCoords[6]; varying vec4 vColor; -uniform float blur; uniform vec3 color; uniform float alpha; @@ -14,21 +13,13 @@ { vec4 sum = vec4(0.0); - sum += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; - sum += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; - sum += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; - sum += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; - sum += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; - sum += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; - sum += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; - sum += texture2D(uSampler, vTextureCoord )*0.159576912161; - sum += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; - sum += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; - sum += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; - sum += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; - sum += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; - sum += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; - sum += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; + sum += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341; + sum += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985; + sum += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454; + sum += texture2D(uSampler, vTextureCoord )*0.3989422804014327; + sum += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454; + sum += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985; + sum += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341; gl_FragColor = vec4( color.rgb * sum.a * alpha, sum.a * alpha ); } diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 07c45f2..c8b0dbe 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -73,6 +73,7 @@ { // get the bounds of the object.. var bounds = target.filterArea || target.getBounds(); + //bounds = bounds.clone(); // round off the rectangle to get a nice smoooooooth filter :) bounds.x = bounds.x | 0; @@ -82,7 +83,7 @@ // padding! - var padding = filters[0].padding; + var padding = filters[0].padding | 0; bounds.x -= padding; bounds.y -= padding; bounds.width += padding * 2; @@ -148,12 +149,18 @@ this.quad.map(this.textureSize, input.frame); + // TODO.. this probably only needs to be done once! gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer); var filters = filterData.filter; + // assuming all filters follow the correct format?? + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); + gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); + if (filters.length === 1) { // TODO (cengler) - There has to be a better way then setting this each time? @@ -257,10 +264,11 @@ //TODO can this be optimised? shader.syncUniforms(); - +/* gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4); gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4); +*/ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 7ccdae8..f6e46e2 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -49,7 +49,7 @@ }, set: function (value) { - this.padding = value * 1.5; + this.padding = value * 0.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 6493159..27b5e25 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -84,7 +84,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1b76088..8a8b47f 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -76,7 +76,7 @@ }, set: function (value) { - this.padding = value; + this.padding = value * 0.5; this.strength = value; } }, diff --git a/src/filters/dropshadow/BlurYTintFilter.js b/src/filters/dropshadow/BlurYTintFilter.js index 6c862be..7e68d1b 100644 --- a/src/filters/dropshadow/BlurYTintFilter.js +++ b/src/filters/dropshadow/BlurYTintFilter.js @@ -21,31 +21,68 @@ blur: { type: '1f', value: 1 / 512 }, color: { type: 'c', value: [0,0,0]}, alpha: { type: '1f', value: 0.7 }, - offset: { type: '2f', value:[5, 5]} + offset: { type: '2f', value:[5, 5]}, + strength: { type: '1f', value:1} } ); + + this.passes = 1; + this.strength = 4; } BlurYTintFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYTintFilter.prototype.constructor = BlurYTintFilter; module.exports = BlurYTintFilter; +BlurYTintFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.height / input.size.height); + + if(this.passes === 1) + { + renderer.filterManager.applyFilter(shader, input, output, clear); + } + else + { + var renderTarget = renderer.filterManager.getRenderTarget(true); + var flip = input; + var flop = renderTarget; + + for(var i = 0; i < this.passes-1; i++) + { + renderer.filterManager.applyFilter(shader, flip, flop, clear); + + var temp = flop; + flop = flip; + flip = temp; + } + + renderer.filterManager.applyFilter(shader, flip, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + Object.defineProperties(BlurYTintFilter.prototype, { /** * Sets the strength of both the blur. * * @member {number} - * @memberof BlurYTintFilter# + * @memberof BlurYFilter# * @default 2 */ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value * 0.5; + this.strength = value; } - } + }, }); diff --git a/src/filters/dropshadow/blurYTint.frag b/src/filters/dropshadow/blurYTint.frag index 858ebd1..650e093 100644 --- a/src/filters/dropshadow/blurYTint.frag +++ b/src/filters/dropshadow/blurYTint.frag @@ -1,10 +1,9 @@ precision lowp float; varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[14]; +varying vec2 vBlurTexCoords[6]; varying vec4 vColor; -uniform float blur; uniform vec3 color; uniform float alpha; @@ -14,21 +13,13 @@ { vec4 sum = vec4(0.0); - sum += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; - sum += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; - sum += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; - sum += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; - sum += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; - sum += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; - sum += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; - sum += texture2D(uSampler, vTextureCoord )*0.159576912161; - sum += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; - sum += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; - sum += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; - sum += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; - sum += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; - sum += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; - sum += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; + sum += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341; + sum += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985; + sum += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454; + sum += texture2D(uSampler, vTextureCoord )*0.3989422804014327; + sum += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454; + sum += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985; + sum += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341; gl_FragColor = vec4( color.rgb * sum.a * alpha, sum.a * alpha ); } diff --git a/src/filters/dropshadow/blurYTint.vert b/src/filters/dropshadow/blurYTint.vert index 8a52a1c..7262333 100644 --- a/src/filters/dropshadow/blurYTint.vert +++ b/src/filters/dropshadow/blurYTint.vert @@ -9,27 +9,19 @@ varying vec2 vTextureCoord; varying vec4 vColor; -varying vec2 vBlurTexCoords[14]; +varying vec2 vBlurTexCoords[6]; void main(void) { gl_Position = vec4((projectionMatrix * vec3((aVertexPosition+offset), 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; - vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -0.028 * strength); - vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -0.024 * strength); - vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -0.020 * strength); - vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, -0.016 * strength); - vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, -0.012 * strength); - vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, -0.008 * strength); - vBlurTexCoords[ 6] = aTextureCoord + vec2(0.0, -0.004 * strength); - vBlurTexCoords[ 7] = aTextureCoord + vec2(0.0, 0.004 * strength); - vBlurTexCoords[ 8] = aTextureCoord + vec2(0.0, 0.008 * strength); - vBlurTexCoords[ 9] = aTextureCoord + vec2(0.0, 0.012 * strength); - vBlurTexCoords[10] = aTextureCoord + vec2(0.0, 0.016 * strength); - vBlurTexCoords[11] = aTextureCoord + vec2(0.0, 0.020 * strength); - vBlurTexCoords[12] = aTextureCoord + vec2(0.0, 0.024 * strength); - vBlurTexCoords[13] = aTextureCoord + vec2(0.0, 0.028 * strength); + vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -0.012 * strength); + vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -0.008 * strength); + vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -0.004 * strength); + vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, 0.004 * strength); + vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, 0.008 * strength); + vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, 0.012 * strength); vColor = vec4(aColor.rgb * aColor.a, aColor.a); }