diff --git a/src/filters/blur/BlurDirFilter.js b/src/filters/blur/BlurDirFilter.js new file mode 100644 index 0000000..f512c7b --- /dev/null +++ b/src/filters/blur/BlurDirFilter.js @@ -0,0 +1,143 @@ +var core = require('../../core'); +var fs = require('fs'); + +/** + * The BlurDirFilter applies a Gaussian blur toward a direction to an object. + * + * @class + * @param {number} dirX + * @param {number} dirY + * @extends AbstractFilter + * @memberof PIXI.filters + */ +function BlurDirFilter(dirX, dirY) +{ + core.AbstractFilter.call(this, + // vertex shader + fs.readFileSync(__dirname + '/blurDir.vert', 'utf8'), + // fragment shader + fs.readFileSync(__dirname + '/blurDir.frag', 'utf8'), + // set the uniforms + { + strength: { type: '1f', value: 1 }, + dirX: { type: '1f', value: dirX || 0 }, + dirY: { type: '1f', value: dirY || 0 } + } + ); + + this.defaultFilter = new core.AbstractFilter(); + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 1 + */ + this.passes = 1; + + /** + * Sets the X direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirX = dirX || 0; + + /** + * Sets the Y direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirY = dirY || 0; + + this.strength = 4; +} + +BlurDirFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurDirFilter.prototype.constructor = BlurDirFilter; +module.exports = BlurDirFilter; + +BlurDirFilter.prototype.applyFilter = function (renderer, input, output, clear) { + + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width); + + if (this.passes === 1) { + renderer.filterManager.applyFilter(shader, input, output, clear); + } else { + var renderTarget = renderer.filterManager.getRenderTarget(true); + + renderer.filterManager.applyFilter(shader, input, renderTarget, clear); + + for(var i = 0; i < this.passes-2; i++) + { + //this.uniforms.strength.value = this.strength / 4 / (this.passes+(i*2)) * (input.frame.width / input.size.width); + renderer.filterManager.applyFilter(shader, renderTarget, renderTarget, clear); + } + + renderer.filterManager.applyFilter(shader, renderTarget, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + +Object.defineProperties(BlurDirFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.strength; + }, + set: function (value) + { + this.padding = value * 0.5; + this.strength = value; + } + }, + /** + * Sets the X direction of the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 0 + */ + dirX: { + get: function () + { + return this.dirX; + }, + set: function (value) + { + this.uniforms.dirX.value = value; + } + }, + /** + * Sets the Y direction of the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + dirY: { + get: function () + { + return this.dirY; + }, + set: function (value) + { + this.uniforms.dirY.value = value; + } + } +}); diff --git a/src/filters/blur/BlurDirFilter.js b/src/filters/blur/BlurDirFilter.js new file mode 100644 index 0000000..f512c7b --- /dev/null +++ b/src/filters/blur/BlurDirFilter.js @@ -0,0 +1,143 @@ +var core = require('../../core'); +var fs = require('fs'); + +/** + * The BlurDirFilter applies a Gaussian blur toward a direction to an object. + * + * @class + * @param {number} dirX + * @param {number} dirY + * @extends AbstractFilter + * @memberof PIXI.filters + */ +function BlurDirFilter(dirX, dirY) +{ + core.AbstractFilter.call(this, + // vertex shader + fs.readFileSync(__dirname + '/blurDir.vert', 'utf8'), + // fragment shader + fs.readFileSync(__dirname + '/blurDir.frag', 'utf8'), + // set the uniforms + { + strength: { type: '1f', value: 1 }, + dirX: { type: '1f', value: dirX || 0 }, + dirY: { type: '1f', value: dirY || 0 } + } + ); + + this.defaultFilter = new core.AbstractFilter(); + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 1 + */ + this.passes = 1; + + /** + * Sets the X direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirX = dirX || 0; + + /** + * Sets the Y direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirY = dirY || 0; + + this.strength = 4; +} + +BlurDirFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurDirFilter.prototype.constructor = BlurDirFilter; +module.exports = BlurDirFilter; + +BlurDirFilter.prototype.applyFilter = function (renderer, input, output, clear) { + + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width); + + if (this.passes === 1) { + renderer.filterManager.applyFilter(shader, input, output, clear); + } else { + var renderTarget = renderer.filterManager.getRenderTarget(true); + + renderer.filterManager.applyFilter(shader, input, renderTarget, clear); + + for(var i = 0; i < this.passes-2; i++) + { + //this.uniforms.strength.value = this.strength / 4 / (this.passes+(i*2)) * (input.frame.width / input.size.width); + renderer.filterManager.applyFilter(shader, renderTarget, renderTarget, clear); + } + + renderer.filterManager.applyFilter(shader, renderTarget, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + +Object.defineProperties(BlurDirFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.strength; + }, + set: function (value) + { + this.padding = value * 0.5; + this.strength = value; + } + }, + /** + * Sets the X direction of the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 0 + */ + dirX: { + get: function () + { + return this.dirX; + }, + set: function (value) + { + this.uniforms.dirX.value = value; + } + }, + /** + * Sets the Y direction of the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + dirY: { + get: function () + { + return this.dirY; + }, + set: function (value) + { + this.uniforms.dirY.value = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index f6e46e2..20366ce 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -1,6 +1,5 @@ var core = require('../../core'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); + BlurDirFilter = require('./BlurDirFilter'); /** * The BlurFilter applies a Gaussian blur to an object. @@ -13,9 +12,19 @@ function BlurFilter() { core.AbstractFilter.call(this); + this.defaultFilter = new core.AbstractFilter(); - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); + this.blurFilters = [ + new BlurDirFilter( 1, 0), + new BlurDirFilter(-1, 0), + new BlurDirFilter( 0, 1), + new BlurDirFilter( 0,-1), + new BlurDirFilter( 0.7, 0.7), + new BlurDirFilter(-0.7, 0.7), + new BlurDirFilter( 0.7,-0.7), + new BlurDirFilter(-0.7,-0.7) + ]; + } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); @@ -26,12 +35,14 @@ { var renderTarget = renderer.filterManager.getRenderTarget(true); - this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); + for (var e = 0; e < this.blurFilters.length; e++) { + this.blurFilters[e].applyFilter(renderer, input, renderTarget); + } + + this.defaultFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); - }; Object.defineProperties(BlurFilter.prototype, { @@ -45,12 +56,14 @@ blur: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { this.padding = value * 0.5; - this.blurXFilter.blur = this.blurYFilter.blur = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].blur = value; + } } }, @@ -64,11 +77,13 @@ passes: { get: function () { - return this.blurXFilter.passes; + return this.blurFilters[0].passes; }, set: function (value) { - this.blurXFilter.passes = this.blurYFilter.passes = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].passes = value; + } } }, @@ -82,11 +97,18 @@ blurX: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { - this.blurXFilter.blur = value; + this.blurFilters[0].blur = value; + this.blurFilters[1].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[2].blur; + this.blurFilters[5].blur = value * this.blurFilters[2].blur; + + this.blurFilters[6].blur = value * this.blurFilters[3].blur; + this.blurFilters[7].blur = value * this.blurFilters[3].blur; } }, @@ -104,7 +126,14 @@ }, set: function (value) { - this.blurYFilter.blur = value; + this.blurFilters[2].blur = value; + this.blurFilters[3].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[0].blur; + this.blurFilters[5].blur = value * this.blurFilters[0].blur; + + this.blurFilters[6].blur = value * this.blurFilters[1].blur; + this.blurFilters[7].blur = value * this.blurFilters[1].blur; } } }); diff --git a/src/filters/blur/BlurDirFilter.js b/src/filters/blur/BlurDirFilter.js new file mode 100644 index 0000000..f512c7b --- /dev/null +++ b/src/filters/blur/BlurDirFilter.js @@ -0,0 +1,143 @@ +var core = require('../../core'); +var fs = require('fs'); + +/** + * The BlurDirFilter applies a Gaussian blur toward a direction to an object. + * + * @class + * @param {number} dirX + * @param {number} dirY + * @extends AbstractFilter + * @memberof PIXI.filters + */ +function BlurDirFilter(dirX, dirY) +{ + core.AbstractFilter.call(this, + // vertex shader + fs.readFileSync(__dirname + '/blurDir.vert', 'utf8'), + // fragment shader + fs.readFileSync(__dirname + '/blurDir.frag', 'utf8'), + // set the uniforms + { + strength: { type: '1f', value: 1 }, + dirX: { type: '1f', value: dirX || 0 }, + dirY: { type: '1f', value: dirY || 0 } + } + ); + + this.defaultFilter = new core.AbstractFilter(); + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 1 + */ + this.passes = 1; + + /** + * Sets the X direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirX = dirX || 0; + + /** + * Sets the Y direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirY = dirY || 0; + + this.strength = 4; +} + +BlurDirFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurDirFilter.prototype.constructor = BlurDirFilter; +module.exports = BlurDirFilter; + +BlurDirFilter.prototype.applyFilter = function (renderer, input, output, clear) { + + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width); + + if (this.passes === 1) { + renderer.filterManager.applyFilter(shader, input, output, clear); + } else { + var renderTarget = renderer.filterManager.getRenderTarget(true); + + renderer.filterManager.applyFilter(shader, input, renderTarget, clear); + + for(var i = 0; i < this.passes-2; i++) + { + //this.uniforms.strength.value = this.strength / 4 / (this.passes+(i*2)) * (input.frame.width / input.size.width); + renderer.filterManager.applyFilter(shader, renderTarget, renderTarget, clear); + } + + renderer.filterManager.applyFilter(shader, renderTarget, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + +Object.defineProperties(BlurDirFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.strength; + }, + set: function (value) + { + this.padding = value * 0.5; + this.strength = value; + } + }, + /** + * Sets the X direction of the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 0 + */ + dirX: { + get: function () + { + return this.dirX; + }, + set: function (value) + { + this.uniforms.dirX.value = value; + } + }, + /** + * Sets the Y direction of the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + dirY: { + get: function () + { + return this.dirY; + }, + set: function (value) + { + this.uniforms.dirY.value = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index f6e46e2..20366ce 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -1,6 +1,5 @@ var core = require('../../core'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); + BlurDirFilter = require('./BlurDirFilter'); /** * The BlurFilter applies a Gaussian blur to an object. @@ -13,9 +12,19 @@ function BlurFilter() { core.AbstractFilter.call(this); + this.defaultFilter = new core.AbstractFilter(); - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); + this.blurFilters = [ + new BlurDirFilter( 1, 0), + new BlurDirFilter(-1, 0), + new BlurDirFilter( 0, 1), + new BlurDirFilter( 0,-1), + new BlurDirFilter( 0.7, 0.7), + new BlurDirFilter(-0.7, 0.7), + new BlurDirFilter( 0.7,-0.7), + new BlurDirFilter(-0.7,-0.7) + ]; + } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); @@ -26,12 +35,14 @@ { var renderTarget = renderer.filterManager.getRenderTarget(true); - this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); + for (var e = 0; e < this.blurFilters.length; e++) { + this.blurFilters[e].applyFilter(renderer, input, renderTarget); + } + + this.defaultFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); - }; Object.defineProperties(BlurFilter.prototype, { @@ -45,12 +56,14 @@ blur: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { this.padding = value * 0.5; - this.blurXFilter.blur = this.blurYFilter.blur = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].blur = value; + } } }, @@ -64,11 +77,13 @@ passes: { get: function () { - return this.blurXFilter.passes; + return this.blurFilters[0].passes; }, set: function (value) { - this.blurXFilter.passes = this.blurYFilter.passes = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].passes = value; + } } }, @@ -82,11 +97,18 @@ blurX: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { - this.blurXFilter.blur = value; + this.blurFilters[0].blur = value; + this.blurFilters[1].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[2].blur; + this.blurFilters[5].blur = value * this.blurFilters[2].blur; + + this.blurFilters[6].blur = value * this.blurFilters[3].blur; + this.blurFilters[7].blur = value * this.blurFilters[3].blur; } }, @@ -104,7 +126,14 @@ }, set: function (value) { - this.blurYFilter.blur = value; + this.blurFilters[2].blur = value; + this.blurFilters[3].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[0].blur; + this.blurFilters[5].blur = value * this.blurFilters[0].blur; + + this.blurFilters[6].blur = value * this.blurFilters[1].blur; + this.blurFilters[7].blur = value * this.blurFilters[1].blur; } } }); diff --git a/src/filters/blur/blurDir.frag b/src/filters/blur/blurDir.frag new file mode 100644 index 0000000..81dffa7 --- /dev/null +++ b/src/filters/blur/blurDir.frag @@ -0,0 +1,17 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[3]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vTextureCoord ) * 0.3989422804014327; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.2419707245191454; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.05399096651318985; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.004431848411938341; +} diff --git a/src/filters/blur/BlurDirFilter.js b/src/filters/blur/BlurDirFilter.js new file mode 100644 index 0000000..f512c7b --- /dev/null +++ b/src/filters/blur/BlurDirFilter.js @@ -0,0 +1,143 @@ +var core = require('../../core'); +var fs = require('fs'); + +/** + * The BlurDirFilter applies a Gaussian blur toward a direction to an object. + * + * @class + * @param {number} dirX + * @param {number} dirY + * @extends AbstractFilter + * @memberof PIXI.filters + */ +function BlurDirFilter(dirX, dirY) +{ + core.AbstractFilter.call(this, + // vertex shader + fs.readFileSync(__dirname + '/blurDir.vert', 'utf8'), + // fragment shader + fs.readFileSync(__dirname + '/blurDir.frag', 'utf8'), + // set the uniforms + { + strength: { type: '1f', value: 1 }, + dirX: { type: '1f', value: dirX || 0 }, + dirY: { type: '1f', value: dirY || 0 } + } + ); + + this.defaultFilter = new core.AbstractFilter(); + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 1 + */ + this.passes = 1; + + /** + * Sets the X direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirX = dirX || 0; + + /** + * Sets the Y direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirY = dirY || 0; + + this.strength = 4; +} + +BlurDirFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurDirFilter.prototype.constructor = BlurDirFilter; +module.exports = BlurDirFilter; + +BlurDirFilter.prototype.applyFilter = function (renderer, input, output, clear) { + + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width); + + if (this.passes === 1) { + renderer.filterManager.applyFilter(shader, input, output, clear); + } else { + var renderTarget = renderer.filterManager.getRenderTarget(true); + + renderer.filterManager.applyFilter(shader, input, renderTarget, clear); + + for(var i = 0; i < this.passes-2; i++) + { + //this.uniforms.strength.value = this.strength / 4 / (this.passes+(i*2)) * (input.frame.width / input.size.width); + renderer.filterManager.applyFilter(shader, renderTarget, renderTarget, clear); + } + + renderer.filterManager.applyFilter(shader, renderTarget, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + +Object.defineProperties(BlurDirFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.strength; + }, + set: function (value) + { + this.padding = value * 0.5; + this.strength = value; + } + }, + /** + * Sets the X direction of the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 0 + */ + dirX: { + get: function () + { + return this.dirX; + }, + set: function (value) + { + this.uniforms.dirX.value = value; + } + }, + /** + * Sets the Y direction of the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + dirY: { + get: function () + { + return this.dirY; + }, + set: function (value) + { + this.uniforms.dirY.value = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index f6e46e2..20366ce 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -1,6 +1,5 @@ var core = require('../../core'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); + BlurDirFilter = require('./BlurDirFilter'); /** * The BlurFilter applies a Gaussian blur to an object. @@ -13,9 +12,19 @@ function BlurFilter() { core.AbstractFilter.call(this); + this.defaultFilter = new core.AbstractFilter(); - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); + this.blurFilters = [ + new BlurDirFilter( 1, 0), + new BlurDirFilter(-1, 0), + new BlurDirFilter( 0, 1), + new BlurDirFilter( 0,-1), + new BlurDirFilter( 0.7, 0.7), + new BlurDirFilter(-0.7, 0.7), + new BlurDirFilter( 0.7,-0.7), + new BlurDirFilter(-0.7,-0.7) + ]; + } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); @@ -26,12 +35,14 @@ { var renderTarget = renderer.filterManager.getRenderTarget(true); - this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); + for (var e = 0; e < this.blurFilters.length; e++) { + this.blurFilters[e].applyFilter(renderer, input, renderTarget); + } + + this.defaultFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); - }; Object.defineProperties(BlurFilter.prototype, { @@ -45,12 +56,14 @@ blur: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { this.padding = value * 0.5; - this.blurXFilter.blur = this.blurYFilter.blur = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].blur = value; + } } }, @@ -64,11 +77,13 @@ passes: { get: function () { - return this.blurXFilter.passes; + return this.blurFilters[0].passes; }, set: function (value) { - this.blurXFilter.passes = this.blurYFilter.passes = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].passes = value; + } } }, @@ -82,11 +97,18 @@ blurX: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { - this.blurXFilter.blur = value; + this.blurFilters[0].blur = value; + this.blurFilters[1].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[2].blur; + this.blurFilters[5].blur = value * this.blurFilters[2].blur; + + this.blurFilters[6].blur = value * this.blurFilters[3].blur; + this.blurFilters[7].blur = value * this.blurFilters[3].blur; } }, @@ -104,7 +126,14 @@ }, set: function (value) { - this.blurYFilter.blur = value; + this.blurFilters[2].blur = value; + this.blurFilters[3].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[0].blur; + this.blurFilters[5].blur = value * this.blurFilters[0].blur; + + this.blurFilters[6].blur = value * this.blurFilters[1].blur; + this.blurFilters[7].blur = value * this.blurFilters[1].blur; } } }); diff --git a/src/filters/blur/blurDir.frag b/src/filters/blur/blurDir.frag new file mode 100644 index 0000000..81dffa7 --- /dev/null +++ b/src/filters/blur/blurDir.frag @@ -0,0 +1,17 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[3]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vTextureCoord ) * 0.3989422804014327; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.2419707245191454; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.05399096651318985; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.004431848411938341; +} diff --git a/src/filters/blur/blurDir.vert b/src/filters/blur/blurDir.vert new file mode 100644 index 0000000..f032401 --- /dev/null +++ b/src/filters/blur/blurDir.vert @@ -0,0 +1,24 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform float strength; +uniform float dirX; +uniform float dirY; +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; +varying vec4 vColor; +varying vec2 vBlurTexCoords[3]; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + + vBlurTexCoords[0] = aTextureCoord + vec2( (0.004 * strength) * dirX, (0.004 * strength) * dirY ); + vBlurTexCoords[1] = aTextureCoord + vec2( (0.008 * strength) * dirX, (0.008 * strength) * dirY ); + vBlurTexCoords[2] = aTextureCoord + vec2( (0.012 * strength) * dirX, (0.012 * strength) * dirY ); + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/blur/BlurDirFilter.js b/src/filters/blur/BlurDirFilter.js new file mode 100644 index 0000000..f512c7b --- /dev/null +++ b/src/filters/blur/BlurDirFilter.js @@ -0,0 +1,143 @@ +var core = require('../../core'); +var fs = require('fs'); + +/** + * The BlurDirFilter applies a Gaussian blur toward a direction to an object. + * + * @class + * @param {number} dirX + * @param {number} dirY + * @extends AbstractFilter + * @memberof PIXI.filters + */ +function BlurDirFilter(dirX, dirY) +{ + core.AbstractFilter.call(this, + // vertex shader + fs.readFileSync(__dirname + '/blurDir.vert', 'utf8'), + // fragment shader + fs.readFileSync(__dirname + '/blurDir.frag', 'utf8'), + // set the uniforms + { + strength: { type: '1f', value: 1 }, + dirX: { type: '1f', value: dirX || 0 }, + dirY: { type: '1f', value: dirY || 0 } + } + ); + + this.defaultFilter = new core.AbstractFilter(); + + /** + * Sets the number of passes for blur. More passes means higher quaility bluring. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 1 + */ + this.passes = 1; + + /** + * Sets the X direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirX = dirX || 0; + + /** + * Sets the Y direction of the blur + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + this.dirY = dirY || 0; + + this.strength = 4; +} + +BlurDirFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurDirFilter.prototype.constructor = BlurDirFilter; +module.exports = BlurDirFilter; + +BlurDirFilter.prototype.applyFilter = function (renderer, input, output, clear) { + + var shader = this.getShader(renderer); + + this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width); + + if (this.passes === 1) { + renderer.filterManager.applyFilter(shader, input, output, clear); + } else { + var renderTarget = renderer.filterManager.getRenderTarget(true); + + renderer.filterManager.applyFilter(shader, input, renderTarget, clear); + + for(var i = 0; i < this.passes-2; i++) + { + //this.uniforms.strength.value = this.strength / 4 / (this.passes+(i*2)) * (input.frame.width / input.size.width); + renderer.filterManager.applyFilter(shader, renderTarget, renderTarget, clear); + } + + renderer.filterManager.applyFilter(shader, renderTarget, output, clear); + + renderer.filterManager.returnRenderTarget(renderTarget); + } +}; + + +Object.defineProperties(BlurDirFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.strength; + }, + set: function (value) + { + this.padding = value * 0.5; + this.strength = value; + } + }, + /** + * Sets the X direction of the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 0 + */ + dirX: { + get: function () + { + return this.dirX; + }, + set: function (value) + { + this.uniforms.dirX.value = value; + } + }, + /** + * Sets the Y direction of the blur. + * + * @member {number} + * @memberof BlurDirFilter# + * @default 0 + */ + dirY: { + get: function () + { + return this.dirY; + }, + set: function (value) + { + this.uniforms.dirY.value = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index f6e46e2..20366ce 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -1,6 +1,5 @@ var core = require('../../core'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); + BlurDirFilter = require('./BlurDirFilter'); /** * The BlurFilter applies a Gaussian blur to an object. @@ -13,9 +12,19 @@ function BlurFilter() { core.AbstractFilter.call(this); + this.defaultFilter = new core.AbstractFilter(); - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); + this.blurFilters = [ + new BlurDirFilter( 1, 0), + new BlurDirFilter(-1, 0), + new BlurDirFilter( 0, 1), + new BlurDirFilter( 0,-1), + new BlurDirFilter( 0.7, 0.7), + new BlurDirFilter(-0.7, 0.7), + new BlurDirFilter( 0.7,-0.7), + new BlurDirFilter(-0.7,-0.7) + ]; + } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); @@ -26,12 +35,14 @@ { var renderTarget = renderer.filterManager.getRenderTarget(true); - this.blurXFilter.applyFilter(renderer, input, renderTarget); - this.blurYFilter.applyFilter(renderer, renderTarget, output); + for (var e = 0; e < this.blurFilters.length; e++) { + this.blurFilters[e].applyFilter(renderer, input, renderTarget); + } + + this.defaultFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); - }; Object.defineProperties(BlurFilter.prototype, { @@ -45,12 +56,14 @@ blur: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { this.padding = value * 0.5; - this.blurXFilter.blur = this.blurYFilter.blur = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].blur = value; + } } }, @@ -64,11 +77,13 @@ passes: { get: function () { - return this.blurXFilter.passes; + return this.blurFilters[0].passes; }, set: function (value) { - this.blurXFilter.passes = this.blurYFilter.passes = value; + for (var i = 0; i < this.blurFilters.length; i++) { + this.blurFilters[i].passes = value; + } } }, @@ -82,11 +97,18 @@ blurX: { get: function () { - return this.blurXFilter.blur; + return this.blurFilters[0].blur; }, set: function (value) { - this.blurXFilter.blur = value; + this.blurFilters[0].blur = value; + this.blurFilters[1].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[2].blur; + this.blurFilters[5].blur = value * this.blurFilters[2].blur; + + this.blurFilters[6].blur = value * this.blurFilters[3].blur; + this.blurFilters[7].blur = value * this.blurFilters[3].blur; } }, @@ -104,7 +126,14 @@ }, set: function (value) { - this.blurYFilter.blur = value; + this.blurFilters[2].blur = value; + this.blurFilters[3].blur = value; + + this.blurFilters[4].blur = value * this.blurFilters[0].blur; + this.blurFilters[5].blur = value * this.blurFilters[0].blur; + + this.blurFilters[6].blur = value * this.blurFilters[1].blur; + this.blurFilters[7].blur = value * this.blurFilters[1].blur; } } }); diff --git a/src/filters/blur/blurDir.frag b/src/filters/blur/blurDir.frag new file mode 100644 index 0000000..81dffa7 --- /dev/null +++ b/src/filters/blur/blurDir.frag @@ -0,0 +1,17 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec2 vBlurTexCoords[3]; +varying vec4 vColor; + +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = vec4(0.0); + + gl_FragColor += texture2D(uSampler, vTextureCoord ) * 0.3989422804014327; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.2419707245191454; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.05399096651318985; + gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.004431848411938341; +} diff --git a/src/filters/blur/blurDir.vert b/src/filters/blur/blurDir.vert new file mode 100644 index 0000000..f032401 --- /dev/null +++ b/src/filters/blur/blurDir.vert @@ -0,0 +1,24 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform float strength; +uniform float dirX; +uniform float dirY; +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; +varying vec4 vColor; +varying vec2 vBlurTexCoords[3]; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + + vBlurTexCoords[0] = aTextureCoord + vec2( (0.004 * strength) * dirX, (0.004 * strength) * dirY ); + vBlurTexCoords[1] = aTextureCoord + vec2( (0.008 * strength) * dirX, (0.008 * strength) * dirY ); + vBlurTexCoords[2] = aTextureCoord + vec2( (0.012 * strength) * dirX, (0.012 * strength) * dirY ); + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/index.js b/src/filters/index.js index 674a244..0b79c6d 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,6 +19,7 @@ BlurFilter: require('./blur/BlurFilter'), BlurXFilter: require('./blur/BlurXFilter'), BlurYFilter: require('./blur/BlurYFilter'), + BlurDirFilter: require('./blur/BlurDirFilter'), ColorMatrixFilter: require('./color/ColorMatrixFilter'), ColorStepFilter: require('./color/ColorStepFilter'), ConvolutionFilter: require('./convolution/ConvolutionFilter'),