diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 3a84a7d..2536be9 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,8 +1,7 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** - * The BlurYFilter applies a vertical Gaussian blur to an object. + * The BlurYFilter applies a horizontal Gaussian blur to an object. * * @class * @extends AbstractFilter @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurY.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurY.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; module.exports = BlurYFilter; +BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurYFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 3a84a7d..2536be9 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,8 +1,7 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** - * The BlurYFilter applies a vertical Gaussian blur to an object. + * The BlurYFilter applies a horizontal Gaussian blur to an object. * * @class * @extends AbstractFilter @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurY.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurY.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; module.exports = BlurYFilter; +BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurYFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag new file mode 100644 index 0000000..621bca4 --- /dev/null +++ b/src/filters/blur/blur.frag @@ -0,0 +1,28 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[14]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; + gl_FragColor += texture2D(uSampler, vTextureCoord )*0.159576912161; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 3a84a7d..2536be9 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,8 +1,7 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** - * The BlurYFilter applies a vertical Gaussian blur to an object. + * The BlurYFilter applies a horizontal Gaussian blur to an object. * * @class * @extends AbstractFilter @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurY.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurY.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; module.exports = BlurYFilter; +BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurYFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag new file mode 100644 index 0000000..621bca4 --- /dev/null +++ b/src/filters/blur/blur.frag @@ -0,0 +1,28 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[14]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; + gl_FragColor += texture2D(uSampler, vTextureCoord )*0.159576912161; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; +} diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag deleted file mode 100644 index 26f2041..0000000 --- a/src/filters/blur/blurX.frag +++ /dev/null @@ -1,24 +0,0 @@ -precision lowp float; - -varying vec2 vTextureCoord; -varying vec4 vColor; - -uniform float blur; -uniform sampler2D uSampler; - -void main(void) -{ - vec4 sum = vec4(0.0); - - sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16; - sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05; - - gl_FragColor = sum; -} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 3a84a7d..2536be9 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,8 +1,7 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** - * The BlurYFilter applies a vertical Gaussian blur to an object. + * The BlurYFilter applies a horizontal Gaussian blur to an object. * * @class * @extends AbstractFilter @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurY.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurY.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; module.exports = BlurYFilter; +BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurYFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag new file mode 100644 index 0000000..621bca4 --- /dev/null +++ b/src/filters/blur/blur.frag @@ -0,0 +1,28 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[14]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; + gl_FragColor += texture2D(uSampler, vTextureCoord )*0.159576912161; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; +} diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag deleted file mode 100644 index 26f2041..0000000 --- a/src/filters/blur/blurX.frag +++ /dev/null @@ -1,24 +0,0 @@ -precision lowp float; - -varying vec2 vTextureCoord; -varying vec4 vColor; - -uniform float blur; -uniform sampler2D uSampler; - -void main(void) -{ - vec4 sum = vec4(0.0); - - sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16; - sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05; - - gl_FragColor = sum; -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert new file mode 100644 index 0000000..e5aba81 --- /dev/null +++ b/src/filters/blur/blurX.vert @@ -0,0 +1,33 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform float strength; +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; +varying vec4 vColor; +varying vec2 vBlurTexCoords[14]; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + + vBlurTexCoords[ 0] = aTextureCoord + vec2(-0.028 * strength, 0.0); + vBlurTexCoords[ 1] = aTextureCoord + vec2(-0.024 * strength, 0.0); + vBlurTexCoords[ 2] = aTextureCoord + vec2(-0.020 * strength, 0.0); + vBlurTexCoords[ 3] = aTextureCoord + vec2(-0.016 * strength, 0.0); + vBlurTexCoords[ 4] = aTextureCoord + vec2(-0.012 * strength, 0.0); + vBlurTexCoords[ 5] = aTextureCoord + vec2(-0.008 * strength, 0.0); + vBlurTexCoords[ 6] = aTextureCoord + vec2(-0.004 * strength, 0.0); + vBlurTexCoords[ 7] = aTextureCoord + vec2( 0.004 * strength, 0.0); + vBlurTexCoords[ 8] = aTextureCoord + vec2( 0.008 * strength, 0.0); + vBlurTexCoords[ 9] = aTextureCoord + vec2( 0.012 * strength, 0.0); + vBlurTexCoords[10] = aTextureCoord + vec2( 0.016 * strength, 0.0); + vBlurTexCoords[11] = aTextureCoord + vec2( 0.020 * strength, 0.0); + vBlurTexCoords[12] = aTextureCoord + vec2( 0.024 * strength, 0.0); + vBlurTexCoords[13] = aTextureCoord + vec2( 0.028 * strength, 0.0); + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 3a84a7d..2536be9 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,8 +1,7 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** - * The BlurYFilter applies a vertical Gaussian blur to an object. + * The BlurYFilter applies a horizontal Gaussian blur to an object. * * @class * @extends AbstractFilter @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurY.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurY.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; module.exports = BlurYFilter; +BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurYFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag new file mode 100644 index 0000000..621bca4 --- /dev/null +++ b/src/filters/blur/blur.frag @@ -0,0 +1,28 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[14]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; + gl_FragColor += texture2D(uSampler, vTextureCoord )*0.159576912161; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; +} diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag deleted file mode 100644 index 26f2041..0000000 --- a/src/filters/blur/blurX.frag +++ /dev/null @@ -1,24 +0,0 @@ -precision lowp float; - -varying vec2 vTextureCoord; -varying vec4 vColor; - -uniform float blur; -uniform sampler2D uSampler; - -void main(void) -{ - vec4 sum = vec4(0.0); - - sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16; - sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05; - - gl_FragColor = sum; -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert new file mode 100644 index 0000000..e5aba81 --- /dev/null +++ b/src/filters/blur/blurX.vert @@ -0,0 +1,33 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform float strength; +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; +varying vec4 vColor; +varying vec2 vBlurTexCoords[14]; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + + vBlurTexCoords[ 0] = aTextureCoord + vec2(-0.028 * strength, 0.0); + vBlurTexCoords[ 1] = aTextureCoord + vec2(-0.024 * strength, 0.0); + vBlurTexCoords[ 2] = aTextureCoord + vec2(-0.020 * strength, 0.0); + vBlurTexCoords[ 3] = aTextureCoord + vec2(-0.016 * strength, 0.0); + vBlurTexCoords[ 4] = aTextureCoord + vec2(-0.012 * strength, 0.0); + vBlurTexCoords[ 5] = aTextureCoord + vec2(-0.008 * strength, 0.0); + vBlurTexCoords[ 6] = aTextureCoord + vec2(-0.004 * strength, 0.0); + vBlurTexCoords[ 7] = aTextureCoord + vec2( 0.004 * strength, 0.0); + vBlurTexCoords[ 8] = aTextureCoord + vec2( 0.008 * strength, 0.0); + vBlurTexCoords[ 9] = aTextureCoord + vec2( 0.012 * strength, 0.0); + vBlurTexCoords[10] = aTextureCoord + vec2( 0.016 * strength, 0.0); + vBlurTexCoords[11] = aTextureCoord + vec2( 0.020 * strength, 0.0); + vBlurTexCoords[12] = aTextureCoord + vec2( 0.024 * strength, 0.0); + vBlurTexCoords[13] = aTextureCoord + vec2( 0.028 * strength, 0.0); + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/blur/blurY.frag b/src/filters/blur/blurY.frag deleted file mode 100644 index 994685d..0000000 --- a/src/filters/blur/blurY.frag +++ /dev/null @@ -1,24 +0,0 @@ -precision lowp float; - -varying vec2 vTextureCoord; -varying vec4 vColor; - -uniform float blur; -uniform sampler2D uSampler; - -void main(void) -{ - vec4 sum = vec4(0.0); - - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05; - - gl_FragColor = sum; -} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index a0d14a5..34120ff 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -27,10 +27,11 @@ var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); + + }; Object.defineProperties(BlurFilter.prototype, { @@ -48,11 +49,30 @@ }, set: function (value) { + this.padding = value * 1.5; this.blurXFilter.blur = this.blurYFilter.blur = value; } }, /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this.blurXFilter.passes; + }, + set: function (value) + { + this.blurXFilter.passes = this.blurYFilter.passes = value + } + }, + + /** * Sets the strength of the blurX property * * @member {number} @@ -87,4 +107,6 @@ this.blurYFilter.blur = value; } } + + }); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 962d41c..cedc7a9 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurX.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurX.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; module.exports = BlurXFilter; +BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurXFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurXFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 3a84a7d..2536be9 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,8 +1,7 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** - * The BlurYFilter applies a vertical Gaussian blur to an object. + * The BlurYFilter applies a horizontal Gaussian blur to an object. * * @class * @extends AbstractFilter @@ -12,20 +11,53 @@ { core.AbstractFilter.call(this, // vertex shader - null, + require('fs').readFileSync(__dirname + '/blurY.vert', 'utf8'), // fragment shader - require('fs').readFileSync(__dirname + '/blurY.frag', 'utf8'), + require('fs').readFileSync(__dirname + '/blur.frag', 'utf8'), // set the uniforms { - blur: { type: '1f', value: 1 / 512 } + strength: { type: '1f', value: 1 } } ); + + this._passes = 1; + this.stength = 8; } BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; module.exports = BlurYFilter; +BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear) +{ + var shader = this.getShader(renderer); + + 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(BlurYFilter.prototype, { /** * Sets the strength of both the blur. @@ -37,11 +69,32 @@ blur: { get: function () { - return this.uniforms.blur.value / blurFactor; + return this.strength; }, set: function (value) { - this.uniforms.blur.value = blurFactor * value; + this.padding = value; + this.strength = value; + this.uniforms.strength.value = value / 8 / this._passes; + } + }, + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurYFilter# + * @default 1 + */ + passes: { + get: function () + { + return this._passes; + }, + set: function (value) + { + this._passes = value; + this.uniforms.strength.value = this.strength / 8 / this._passes; } } }); diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag new file mode 100644 index 0000000..621bca4 --- /dev/null +++ b/src/filters/blur/blur.frag @@ -0,0 +1,28 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[14]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.0044299121055113265; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6])*0.147308056121; + gl_FragColor += texture2D(uSampler, vTextureCoord )*0.159576912161; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7])*0.147308056121; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8])*0.115876621105; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9])*0.0776744219933; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[10])*0.0443683338718; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[11])*0.0215963866053; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[12])*0.00895781211794; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[13])*0.0044299121055113265; +} diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag deleted file mode 100644 index 26f2041..0000000 --- a/src/filters/blur/blurX.frag +++ /dev/null @@ -1,24 +0,0 @@ -precision lowp float; - -varying vec2 vTextureCoord; -varying vec4 vColor; - -uniform float blur; -uniform sampler2D uSampler; - -void main(void) -{ - vec4 sum = vec4(0.0); - - sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16; - sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05; - - gl_FragColor = sum; -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert new file mode 100644 index 0000000..e5aba81 --- /dev/null +++ b/src/filters/blur/blurX.vert @@ -0,0 +1,33 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform float strength; +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; +varying vec4 vColor; +varying vec2 vBlurTexCoords[14]; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + + vBlurTexCoords[ 0] = aTextureCoord + vec2(-0.028 * strength, 0.0); + vBlurTexCoords[ 1] = aTextureCoord + vec2(-0.024 * strength, 0.0); + vBlurTexCoords[ 2] = aTextureCoord + vec2(-0.020 * strength, 0.0); + vBlurTexCoords[ 3] = aTextureCoord + vec2(-0.016 * strength, 0.0); + vBlurTexCoords[ 4] = aTextureCoord + vec2(-0.012 * strength, 0.0); + vBlurTexCoords[ 5] = aTextureCoord + vec2(-0.008 * strength, 0.0); + vBlurTexCoords[ 6] = aTextureCoord + vec2(-0.004 * strength, 0.0); + vBlurTexCoords[ 7] = aTextureCoord + vec2( 0.004 * strength, 0.0); + vBlurTexCoords[ 8] = aTextureCoord + vec2( 0.008 * strength, 0.0); + vBlurTexCoords[ 9] = aTextureCoord + vec2( 0.012 * strength, 0.0); + vBlurTexCoords[10] = aTextureCoord + vec2( 0.016 * strength, 0.0); + vBlurTexCoords[11] = aTextureCoord + vec2( 0.020 * strength, 0.0); + vBlurTexCoords[12] = aTextureCoord + vec2( 0.024 * strength, 0.0); + vBlurTexCoords[13] = aTextureCoord + vec2( 0.028 * strength, 0.0); + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/blur/blurY.frag b/src/filters/blur/blurY.frag deleted file mode 100644 index 994685d..0000000 --- a/src/filters/blur/blurY.frag +++ /dev/null @@ -1,24 +0,0 @@ -precision lowp float; - -varying vec2 vTextureCoord; -varying vec4 vColor; - -uniform float blur; -uniform sampler2D uSampler; - -void main(void) -{ - vec4 sum = vec4(0.0); - - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09; - sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05; - - gl_FragColor = sum; -} diff --git a/src/filters/blur/blurY.vert b/src/filters/blur/blurY.vert new file mode 100644 index 0000000..f29f30b --- /dev/null +++ b/src/filters/blur/blurY.vert @@ -0,0 +1,33 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform float strength; +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; +varying vec4 vColor; +varying vec2 vBlurTexCoords[14]; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 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); + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +}