diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js new file mode 100644 index 0000000..0d6995c --- /dev/null +++ b/src/filters/blur/BlurYFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurYFilter applies a vertical Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; + +Object.defineProperties(BlurYFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js new file mode 100644 index 0000000..0d6995c --- /dev/null +++ b/src/filters/blur/BlurYFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurYFilter applies a vertical Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; + +Object.defineProperties(BlurYFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag new file mode 100644 index 0000000..d173e9f --- /dev/null +++ b/src/filters/blur/blurX.frag @@ -0,0 +1,24 @@ +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/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js new file mode 100644 index 0000000..0d6995c --- /dev/null +++ b/src/filters/blur/BlurYFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurYFilter applies a vertical Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; + +Object.defineProperties(BlurYFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag new file mode 100644 index 0000000..d173e9f --- /dev/null +++ b/src/filters/blur/blurX.frag @@ -0,0 +1,24 @@ +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/blurY.frag b/src/filters/blur/blurY.frag new file mode 100644 index 0000000..4bed2d2 --- /dev/null +++ b/src/filters/blur/blurY.frag @@ -0,0 +1,24 @@ +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/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js new file mode 100644 index 0000000..0d6995c --- /dev/null +++ b/src/filters/blur/BlurYFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurYFilter applies a vertical Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; + +Object.defineProperties(BlurYFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag new file mode 100644 index 0000000..d173e9f --- /dev/null +++ b/src/filters/blur/blurX.frag @@ -0,0 +1,24 @@ +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/blurY.frag b/src/filters/blur/blurY.frag new file mode 100644 index 0000000..4bed2d2 --- /dev/null +++ b/src/filters/blur/blurY.frag @@ -0,0 +1,24 @@ +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/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js new file mode 100644 index 0000000..4e41cf7 --- /dev/null +++ b/src/filters/gray/GrayFilter.js @@ -0,0 +1,45 @@ +var core = require('../core'); + +/** + * This greyscales the palette of your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function GrayFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./gray.frag'), + // set the uniforms + { + gray: { type: '1f', value: 1 } + } + ); +} + +GrayFilter.prototype = Object.create(core.AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; + +Object.defineProperties(GrayFilter.prototype, { + /** + * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. + * + * @member {number} + * @memberof GrayFilter# + */ + gray: { + get: function () + { + return this.uniforms.gray.value; + }, + set: function (value) + { + this.uniforms.gray.value = value; + } + } +}); diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js new file mode 100644 index 0000000..0d6995c --- /dev/null +++ b/src/filters/blur/BlurYFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurYFilter applies a vertical Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; + +Object.defineProperties(BlurYFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag new file mode 100644 index 0000000..d173e9f --- /dev/null +++ b/src/filters/blur/blurX.frag @@ -0,0 +1,24 @@ +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/blurY.frag b/src/filters/blur/blurY.frag new file mode 100644 index 0000000..4bed2d2 --- /dev/null +++ b/src/filters/blur/blurY.frag @@ -0,0 +1,24 @@ +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/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js new file mode 100644 index 0000000..4e41cf7 --- /dev/null +++ b/src/filters/gray/GrayFilter.js @@ -0,0 +1,45 @@ +var core = require('../core'); + +/** + * This greyscales the palette of your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function GrayFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./gray.frag'), + // set the uniforms + { + gray: { type: '1f', value: 1 } + } + ); +} + +GrayFilter.prototype = Object.create(core.AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; + +Object.defineProperties(GrayFilter.prototype, { + /** + * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. + * + * @member {number} + * @memberof GrayFilter# + */ + gray: { + get: function () + { + return this.uniforms.gray.value; + }, + set: function (value) + { + this.uniforms.gray.value = value; + } + } +}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag new file mode 100644 index 0000000..52feaa5 --- /dev/null +++ b/src/filters/gray/gray.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform float gray; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); +} diff --git a/src/core/index.js b/src/core/index.js index be4b1b3..d533cf9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -49,6 +49,9 @@ ShaderManager: require('./renderers/webgl/managers/ShaderManager'), Shader: require('./renderers/webgl/shaders/Shader'), + // filters - webgl + AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'), + /** * This helper function will automatically detect which renderer you should be using. * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by diff --git a/src/core/renderers/webgl/filters/AbstractFilter.js b/src/core/renderers/webgl/filters/AbstractFilter.js index c440914..8bb35e4 100644 --- a/src/core/renderers/webgl/filters/AbstractFilter.js +++ b/src/core/renderers/webgl/filters/AbstractFilter.js @@ -37,9 +37,9 @@ */ this.uniforms = uniforms || {}; - + this.vertexSrc = vertexSrc; - + /** * @member {string[]} * @private @@ -71,17 +71,15 @@ this.shaders[gl.id] = shader; } - + return shader; }; AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear) { - var filterManager = renderer.filterManager, - shader = this.getShader(renderer); + var shader = this.getShader(renderer); - // draw the filter... - filterManager.applyFilter(shader, input, output, clear); + renderer.filterManager.applyFilter(shader, input, output, clear); }; /** diff --git a/src/filters/BloomFilter.js b/src/filters/BloomFilter.js deleted file mode 100644 index 23f2441..0000000 --- a/src/filters/BloomFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'), - CONST = require('../core/const'); - -/** - * The BloomFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BloomFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BloomFilter.prototype = Object.create( AbstractFilter.prototype ); -BloomFilter.prototype.constructor = BloomFilter; -module.exports = BloomFilter; - -BloomFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget( true ); - - //TODO - copyTexSubImage2D could be used here? - this.defaultFilter.applyFilter(renderer, input, output); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.SCREEN ); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - renderer.blendModeManager.setBlendMode( CONST.blendModes.NORMAL ); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BloomFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BloomFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js deleted file mode 100644 index 0907032..0000000 --- a/src/filters/BlurFilter.js +++ /dev/null @@ -1,94 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - BlurXFilter = require('./BlurXFilter'), - BlurYFilter = require('./BlurYFilter'); - -/** - * The BlurFilter applies a Gaussian blur to an object. - * The strength of the blur can be set for x- and y-axis separately. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurFilter() -{ - AbstractFilter.call(this); - - this.blurXFilter = new BlurXFilter(); - this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new AbstractFilter(); -} - -BlurFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurFilter.prototype.constructor = BlurFilter; -module.exports = BlurFilter; - -BlurFilter.prototype.applyFilter = function (renderer, input, output) -{ - var filterManager = renderer.filterManager; - - var renderTarget = filterManager.getRenderTarget(true); - - this.blurXFilter.applyFilter(renderer, input, renderTarget); - - this.blurYFilter.applyFilter(renderer, renderTarget, output); - - filterManager.returnRenderTarget( renderTarget ); -}; - -Object.defineProperties(BlurFilter.prototype, { - /** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurX property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurX: { - get: function () - { - return this.blurXFilter.blur; - }, - set: function (value) - { - this.blurXFilter.blur = value; - } - }, - - /** - * Sets the strength of the blurY property - * - * @member {number} - * @memberOf BlurFilter# - * @default 2 - */ - blurY: { - get: function () - { - return this.blurYFilter.blur; - }, - set: function (value) - { - this.blurYFilter.blur = value; - } - } -}); diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js deleted file mode 100644 index d56401a..0000000 --- a/src/filters/BlurXFilter.js +++ /dev/null @@ -1,72 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurXFilter applies a horizontal Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurXFilter() -{ - AbstractFilter.call(this, - // vertex shader - null, - // fragment shader - [ - '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;', - '}' - ].join('\n'), - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); - -} - -BlurXFilter.prototype = Object.create( AbstractFilter.prototype ); -BlurXFilter.prototype.constructor = BlurXFilter; -module.exports = BlurXFilter; - -Object.defineProperties(BlurXFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurXFilter# - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js deleted file mode 100644 index 515adf6..0000000 --- a/src/filters/BlurYFilter.js +++ /dev/null @@ -1,71 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'), - blurFactor = 1 / 7000; - -/** - * The BlurYFilter applies a vertical Gaussian blur to an object. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function BlurYFilter() -{ - AbstractFilter.call(this, - null, - [ - '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;', - '}' - ].join('\n'), - - // set the uniforms - { - blur: { type: '1f', value: 1 / 512 } - }); -} - -BlurYFilter.prototype = Object.create(AbstractFilter.prototype); -BlurYFilter.prototype.constructor = BlurYFilter; -module.exports = BlurYFilter; - -Object.defineProperties(BlurYFilter.prototype, { - /** - * Sets the strength of both the blur. - * - * @member {number} - * @memberof BlurYFilter - * @default 2 - */ - blur: { - get: function () - { - return this.uniforms.blur.value / blurFactor; - }, - set: function (value) - { - //this.padding = value; - this.uniforms.blur.value = blurFactor * value; - } - } -}); diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js deleted file mode 100644 index a799ce8..0000000 --- a/src/filters/GrayFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('../core/renderers/webGL/filters/AbstractFilter'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function GrayFilter() -{ - AbstractFilter.call(this, - null, - // fragment - [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform float gray;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', - // ' gl_FragColor = gl_FragColor;', - '}' - ].join('\n'), - // set the uniforms - { - gray: { type: '1f', value: 1 } - }); - -} - -GrayFilter.prototype = Object.create(AbstractFilter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray.value; - }, - set: function (value) - { - this.uniforms.gray.value = value; - } - } -}); diff --git a/src/filters/bloom/BloomFilter.js b/src/filters/bloom/BloomFilter.js new file mode 100644 index 0000000..781caef --- /dev/null +++ b/src/filters/bloom/BloomFilter.js @@ -0,0 +1,100 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'), + CONST = require('../core/const'); + +/** + * The BloomFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BloomFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BloomFilter.prototype = Object.create(core.AbstractFilter.prototype); +BloomFilter.prototype.constructor = BloomFilter; +module.exports = BloomFilter; + +BloomFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + //TODO - copyTexSubImage2D could be used here? + this.defaultFilter.applyFilter(renderer, input, output); + + this.blurXFilter.applyFilter(renderer, input, renderTarget); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.SCREEN); + + this.blurYFilter.applyFilter(renderer, renderTarget, output); + + renderer.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(BloomFilter.prototype, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BloomFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js new file mode 100644 index 0000000..38bdff6 --- /dev/null +++ b/src/filters/blur/BlurFilter.js @@ -0,0 +1,92 @@ +var core = require('../core'), + BlurXFilter = require('./BlurXFilter'), + BlurYFilter = require('./BlurYFilter'); + +/** + * The BlurFilter applies a Gaussian blur to an object. + * The strength of the blur can be set for x- and y-axis separately. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurFilter() +{ + core.AbstractFilter.call(this); + + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.defaultFilter = new core.AbstractFilter(); +} + +BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; + +BlurFilter.prototype.applyFilter = function (renderer, input, output) +{ + 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, { + /** + * Sets the strength of both the blurX and blurY properties simultaneously + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = this.blurYFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurX property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurX: { + get: function () + { + return this.blurXFilter.blur; + }, + set: function (value) + { + this.blurXFilter.blur = value; + } + }, + + /** + * Sets the strength of the blurY property + * + * @member {number} + * @memberOf BlurFilter# + * @default 2 + */ + blurY: { + get: function () + { + return this.blurYFilter.blur; + }, + set: function (value) + { + this.blurYFilter.blur = value; + } + } +}); diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js new file mode 100644 index 0000000..7e708d0 --- /dev/null +++ b/src/filters/blur/BlurXFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurXFilter applies a horizontal Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; + +Object.defineProperties(BlurXFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurXFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js new file mode 100644 index 0000000..0d6995c --- /dev/null +++ b/src/filters/blur/BlurYFilter.js @@ -0,0 +1,47 @@ +var core = require('../core'), + blurFactor = 1 / 7000; + +/** + * The BlurYFilter applies a vertical Gaussian blur to an object. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function BlurYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./blurX.frag'), + // set the uniforms + { + blur: { type: '1f', value: 1 / 512 } + } + ); +} + +BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; + +Object.defineProperties(BlurYFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof BlurYFilter# + * @default 2 + */ + blur: { + get: function () + { + return this.uniforms.blur.value / blurFactor; + }, + set: function (value) + { + this.uniforms.blur.value = blurFactor * value; + } + } +}); diff --git a/src/filters/blur/blurX.frag b/src/filters/blur/blurX.frag new file mode 100644 index 0000000..d173e9f --- /dev/null +++ b/src/filters/blur/blurX.frag @@ -0,0 +1,24 @@ +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/blurY.frag b/src/filters/blur/blurY.frag new file mode 100644 index 0000000..4bed2d2 --- /dev/null +++ b/src/filters/blur/blurY.frag @@ -0,0 +1,24 @@ +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/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js new file mode 100644 index 0000000..4e41cf7 --- /dev/null +++ b/src/filters/gray/GrayFilter.js @@ -0,0 +1,45 @@ +var core = require('../core'); + +/** + * This greyscales the palette of your Display Objects. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function GrayFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync('./gray.frag'), + // set the uniforms + { + gray: { type: '1f', value: 1 } + } + ); +} + +GrayFilter.prototype = Object.create(core.AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; + +Object.defineProperties(GrayFilter.prototype, { + /** + * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. + * + * @member {number} + * @memberof GrayFilter# + */ + gray: { + get: function () + { + return this.uniforms.gray.value; + }, + set: function (value) + { + this.uniforms.gray.value = value; + } + } +}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag new file mode 100644 index 0000000..52feaa5 --- /dev/null +++ b/src/filters/gray/gray.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform float gray; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); +} diff --git a/src/filters/index.js b/src/filters/index.js index e4c1726..a21633e 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -9,19 +9,19 @@ * @namespace PIXI */ module.exports = { - BloomFilter: require('./BloomFilter'), + BloomFilter: require('./bloom/BloomFilter'), // AlphaMaskFilter: require('./AlphaMaskFilter'), // AsciiFilter: require('./AsciiFilter'), - BlurFilter: require('./BlurFilter'), - BlurXFilter: require('./BlurXFilter'), - BlurYFilter: require('./BlurYFilter'), + BlurFilter: require('./blur/BlurFilter'), + BlurXFilter: require('./blur/BlurXFilter'), + BlurYFilter: require('./blur/BlurYFilter'), // ColorMatrixFilter: require('./ColorMatrixFilter'), // ColorStepFilter: require('./ColorStepFilter'), // ConvolutionFilter: require('./ConvolutionFilter'), // CrossHatchFilter: require('./CrossHatchFilter'), // DisplacementFilter: require('./DisplacementFilter'), // DotScreenFilter: require('./DotScreenFilter'), - GrayFilter: require('./GrayFilter') + GrayFilter: require('./gray/GrayFilter') // InvertFilter: require('./InvertFilter'), // NoiseFilter: require('./NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'),