diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index 5596e53..c65b879 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This applies a sepia effect to your Display Objects. - * - * @class SepiaFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SepiaFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function SepiaFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - sepia: {type: '1f', value: 1} + sepia: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float sepia;', 'uniform sampler2D uSampler;', @@ -32,24 +29,27 @@ 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord);', ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; }; -PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; +SepiaFilter.prototype = Object.create(AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; -/** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * @property sepia - * @type Number -*/ -Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { - get: function() { - return this.uniforms.sepia.value; - }, - set: function(value) { - this.uniforms.sepia.value = value; +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () { + return this.uniforms.sepia.value; + }, + set: function (value) { + this.uniforms.sepia.value = value; + } } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index 5596e53..c65b879 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This applies a sepia effect to your Display Objects. - * - * @class SepiaFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SepiaFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function SepiaFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - sepia: {type: '1f', value: 1} + sepia: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float sepia;', 'uniform sampler2D uSampler;', @@ -32,24 +29,27 @@ 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord);', ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; }; -PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; +SepiaFilter.prototype = Object.create(AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; -/** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * @property sepia - * @type Number -*/ -Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { - get: function() { - return this.uniforms.sepia.value; - }, - set: function(value) { - this.uniforms.sepia.value = value; +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () { + return this.uniforms.sepia.value; + }, + set: function (value) { + this.uniforms.sepia.value = value; + } } }); diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index 44a47f4..b5c3e38 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -1,32 +1,22 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Smart Blur Filter. - * - * @class SmartBlurFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SmartBlurFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512} - }; +function SmartBlurFilter() { + AbstractFilter.call(this); this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', - //'uniform vec2 delta;', 'const vec2 delta = vec2(1.0/10.0, 0.0);', - //'uniform float darkness;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -50,26 +40,10 @@ ' gl_FragColor = color / total;', ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - //' gl_FragColor.rgb *= darkness;', '}' ]; }; -PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.uniforms.blur.value = value; - } -}); +SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); +SmartBlurFilter.prototype.constructor = SmartBlurFilter; +module.exports = SmartBlurFilter; diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index 5596e53..c65b879 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This applies a sepia effect to your Display Objects. - * - * @class SepiaFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SepiaFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function SepiaFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - sepia: {type: '1f', value: 1} + sepia: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float sepia;', 'uniform sampler2D uSampler;', @@ -32,24 +29,27 @@ 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord);', ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; }; -PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; +SepiaFilter.prototype = Object.create(AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; -/** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * @property sepia - * @type Number -*/ -Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { - get: function() { - return this.uniforms.sepia.value; - }, - set: function(value) { - this.uniforms.sepia.value = value; +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () { + return this.uniforms.sepia.value; + }, + set: function (value) { + this.uniforms.sepia.value = value; + } } }); diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index 44a47f4..b5c3e38 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -1,32 +1,22 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Smart Blur Filter. - * - * @class SmartBlurFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SmartBlurFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512} - }; +function SmartBlurFilter() { + AbstractFilter.call(this); this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', - //'uniform vec2 delta;', 'const vec2 delta = vec2(1.0/10.0, 0.0);', - //'uniform float darkness;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -50,26 +40,10 @@ ' gl_FragColor = color / total;', ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - //' gl_FragColor.rgb *= darkness;', '}' ]; }; -PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.uniforms.blur.value = value; - } -}); +SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); +SmartBlurFilter.prototype.constructor = SmartBlurFilter; +module.exports = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index 2eb3776..fb217ba 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('./AbstractFilter'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,78 +9,85 @@ /** * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class TiltShiftFilter - * @constructor + * + * @class + * @extends AbstractFilter + * @namespace PIXI */ -PIXI.TiltShiftFilter = function() -{ - this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); - this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); +TiltShiftFilter = function () { + AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; }; -PIXI.TiltShiftFilter.prototype.constructor = PIXI.TiltShiftFilter; +TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { - get: function() { - return this.tiltShiftXFilter.blur; +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () { + return this.tiltShiftXFilter.blur; + }, + set: function (value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } -}); -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { - get: function() { - return this.tiltShiftXFilter.gradientBlur; + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } -}); -/** - * The Y value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { - get: function() { - return this.tiltShiftXFilter.start; + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () { + return this.tiltShiftXFilter.start; + }, + set: function (value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } }, - set: function(value) { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } -}); -/** - * The Y value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { - get: function() { - return this.tiltShiftXFilter.end; + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () { + return this.tiltShiftXFilter.end; + }, + set: function (value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } }, - set: function(value) { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } }); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index 5596e53..c65b879 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This applies a sepia effect to your Display Objects. - * - * @class SepiaFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SepiaFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function SepiaFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - sepia: {type: '1f', value: 1} + sepia: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float sepia;', 'uniform sampler2D uSampler;', @@ -32,24 +29,27 @@ 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord);', ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; }; -PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; +SepiaFilter.prototype = Object.create(AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; -/** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * @property sepia - * @type Number -*/ -Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { - get: function() { - return this.uniforms.sepia.value; - }, - set: function(value) { - this.uniforms.sepia.value = value; +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () { + return this.uniforms.sepia.value; + }, + set: function (value) { + this.uniforms.sepia.value = value; + } } }); diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index 44a47f4..b5c3e38 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -1,32 +1,22 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Smart Blur Filter. - * - * @class SmartBlurFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SmartBlurFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512} - }; +function SmartBlurFilter() { + AbstractFilter.call(this); this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', - //'uniform vec2 delta;', 'const vec2 delta = vec2(1.0/10.0, 0.0);', - //'uniform float darkness;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -50,26 +40,10 @@ ' gl_FragColor = color / total;', ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - //' gl_FragColor.rgb *= darkness;', '}' ]; }; -PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.uniforms.blur.value = value; - } -}); +SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); +SmartBlurFilter.prototype.constructor = SmartBlurFilter; +module.exports = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index 2eb3776..fb217ba 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('./AbstractFilter'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,78 +9,85 @@ /** * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class TiltShiftFilter - * @constructor + * + * @class + * @extends AbstractFilter + * @namespace PIXI */ -PIXI.TiltShiftFilter = function() -{ - this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); - this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); +TiltShiftFilter = function () { + AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; }; -PIXI.TiltShiftFilter.prototype.constructor = PIXI.TiltShiftFilter; +TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { - get: function() { - return this.tiltShiftXFilter.blur; +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () { + return this.tiltShiftXFilter.blur; + }, + set: function (value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } -}); -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { - get: function() { - return this.tiltShiftXFilter.gradientBlur; + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } -}); -/** - * The Y value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { - get: function() { - return this.tiltShiftXFilter.start; + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () { + return this.tiltShiftXFilter.start; + }, + set: function (value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } }, - set: function(value) { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } -}); -/** - * The Y value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { - get: function() { - return this.tiltShiftXFilter.end; + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () { + return this.tiltShiftXFilter.end; + }, + set: function (value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } }, - set: function(value) { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } }); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 29d8f38..4f4f512 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('AbstractFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,31 +7,31 @@ /** * A TiltShiftXFilter. - * - * @class TiltShiftXFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.TiltShiftXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function TiltShiftXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 100.0}, - gradientBlur: {type: '1f', value: 600.0}, - start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, - end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, - delta: {type: '2f', value:{x:30, y:30}}, - texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, + end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, + delta: { type: '2f', value: { x: 30, y: 30 } }, + texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } }; this.updateDelta(); this.fragmentSrc = [ 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', 'uniform float blur;', 'uniform float gradientBlur;', @@ -37,7 +39,6 @@ 'uniform vec2 end;', 'uniform vec2 delta;', 'uniform vec2 texSize;', - 'varying vec2 vTextureCoord;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -46,11 +47,11 @@ 'void main(void) {', ' vec4 color = vec4(0.0);', ' float total = 0.0;', - + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - + ' for (float t = -30.0; t <= 30.0; t++) {', ' float percent = (t + offset - 0.5) / 30.0;', ' float weight = 1.0 - abs(percent);', @@ -66,84 +67,84 @@ ]; }; -PIXI.TiltShiftXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.TiltShiftXFilter.prototype.constructor = PIXI.TiltShiftXFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.blur.value = value; - } -}); - -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'gradientBlur', { - get: function() { - return this.uniforms.gradientBlur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.gradientBlur.value = value; - } -}); - -/** - * The X value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'start', { - get: function() { - return this.uniforms.start.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.start.value = value; - this.updateDelta(); - } -}); - -/** - * The X value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'end', { - get: function() { - return this.uniforms.end.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.end.value = value; - this.updateDelta(); - } -}); +TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; +module.exports = TiltShiftXFilter; /** * Updates the filter delta values. * - * @method updateDelta */ -PIXI.TiltShiftXFilter.prototype.updateDelta = function(){ +TiltShiftXFilter.prototype.updateDelta = function () { var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; var d = Math.sqrt(dx * dx + dy * dy); + this.uniforms.delta.value.x = dx / d; this.uniforms.delta.value.y = dy / d; }; + + +Object.defineProperties(TiltShiftXFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + blur: { + get: function () { + return this.uniforms.blur.value; + }, + set: function (value) { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + gradientBlur: { + get: function () { + return this.uniforms.gradientBlur.value; + }, + set: function (value) { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The X value to start the effect at. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + start: { + get: function () { + return this.uniforms.start.value; + }, + set: function (value) { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The X value to end the effect at. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + end: { + get: function () { + return this.uniforms.end.value; + }, + set: function (value) { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index 5596e53..c65b879 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This applies a sepia effect to your Display Objects. - * - * @class SepiaFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SepiaFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function SepiaFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - sepia: {type: '1f', value: 1} + sepia: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float sepia;', 'uniform sampler2D uSampler;', @@ -32,24 +29,27 @@ 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord);', ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; }; -PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; +SepiaFilter.prototype = Object.create(AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; -/** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * @property sepia - * @type Number -*/ -Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { - get: function() { - return this.uniforms.sepia.value; - }, - set: function(value) { - this.uniforms.sepia.value = value; +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () { + return this.uniforms.sepia.value; + }, + set: function (value) { + this.uniforms.sepia.value = value; + } } }); diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index 44a47f4..b5c3e38 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -1,32 +1,22 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Smart Blur Filter. - * - * @class SmartBlurFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SmartBlurFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512} - }; +function SmartBlurFilter() { + AbstractFilter.call(this); this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', - //'uniform vec2 delta;', 'const vec2 delta = vec2(1.0/10.0, 0.0);', - //'uniform float darkness;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -50,26 +40,10 @@ ' gl_FragColor = color / total;', ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - //' gl_FragColor.rgb *= darkness;', '}' ]; }; -PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.uniforms.blur.value = value; - } -}); +SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); +SmartBlurFilter.prototype.constructor = SmartBlurFilter; +module.exports = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index 2eb3776..fb217ba 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('./AbstractFilter'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,78 +9,85 @@ /** * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class TiltShiftFilter - * @constructor + * + * @class + * @extends AbstractFilter + * @namespace PIXI */ -PIXI.TiltShiftFilter = function() -{ - this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); - this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); +TiltShiftFilter = function () { + AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; }; -PIXI.TiltShiftFilter.prototype.constructor = PIXI.TiltShiftFilter; +TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { - get: function() { - return this.tiltShiftXFilter.blur; +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () { + return this.tiltShiftXFilter.blur; + }, + set: function (value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } -}); -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { - get: function() { - return this.tiltShiftXFilter.gradientBlur; + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } -}); -/** - * The Y value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { - get: function() { - return this.tiltShiftXFilter.start; + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () { + return this.tiltShiftXFilter.start; + }, + set: function (value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } }, - set: function(value) { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } -}); -/** - * The Y value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { - get: function() { - return this.tiltShiftXFilter.end; + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () { + return this.tiltShiftXFilter.end; + }, + set: function (value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } }, - set: function(value) { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } }); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 29d8f38..4f4f512 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('AbstractFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,31 +7,31 @@ /** * A TiltShiftXFilter. - * - * @class TiltShiftXFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.TiltShiftXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function TiltShiftXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 100.0}, - gradientBlur: {type: '1f', value: 600.0}, - start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, - end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, - delta: {type: '2f', value:{x:30, y:30}}, - texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, + end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, + delta: { type: '2f', value: { x: 30, y: 30 } }, + texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } }; this.updateDelta(); this.fragmentSrc = [ 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', 'uniform float blur;', 'uniform float gradientBlur;', @@ -37,7 +39,6 @@ 'uniform vec2 end;', 'uniform vec2 delta;', 'uniform vec2 texSize;', - 'varying vec2 vTextureCoord;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -46,11 +47,11 @@ 'void main(void) {', ' vec4 color = vec4(0.0);', ' float total = 0.0;', - + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - + ' for (float t = -30.0; t <= 30.0; t++) {', ' float percent = (t + offset - 0.5) / 30.0;', ' float weight = 1.0 - abs(percent);', @@ -66,84 +67,84 @@ ]; }; -PIXI.TiltShiftXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.TiltShiftXFilter.prototype.constructor = PIXI.TiltShiftXFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.blur.value = value; - } -}); - -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'gradientBlur', { - get: function() { - return this.uniforms.gradientBlur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.gradientBlur.value = value; - } -}); - -/** - * The X value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'start', { - get: function() { - return this.uniforms.start.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.start.value = value; - this.updateDelta(); - } -}); - -/** - * The X value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'end', { - get: function() { - return this.uniforms.end.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.end.value = value; - this.updateDelta(); - } -}); +TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; +module.exports = TiltShiftXFilter; /** * Updates the filter delta values. * - * @method updateDelta */ -PIXI.TiltShiftXFilter.prototype.updateDelta = function(){ +TiltShiftXFilter.prototype.updateDelta = function () { var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; var d = Math.sqrt(dx * dx + dy * dy); + this.uniforms.delta.value.x = dx / d; this.uniforms.delta.value.y = dy / d; }; + + +Object.defineProperties(TiltShiftXFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + blur: { + get: function () { + return this.uniforms.blur.value; + }, + set: function (value) { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + gradientBlur: { + get: function () { + return this.uniforms.gradientBlur.value; + }, + set: function (value) { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The X value to start the effect at. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + start: { + get: function () { + return this.uniforms.start.value; + }, + set: function (value) { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The X value to end the effect at. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + end: { + get: function () { + return this.uniforms.end.value; + }, + set: function (value) { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 3a92851..958e562 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('AbstractFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,31 +7,31 @@ /** * A TiltShiftYFilter. - * - * @class TiltShiftYFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.TiltShiftYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function TiltShiftYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 100.0}, - gradientBlur: {type: '1f', value: 600.0}, - start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, - end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, - delta: {type: '2f', value:{x:30, y:30}}, - texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, + end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, + delta: { type: '2f', value: { x: 30, y: 30 } }, + texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } }; - + this.updateDelta(); this.fragmentSrc = [ 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', 'uniform float blur;', 'uniform float gradientBlur;', @@ -37,7 +39,6 @@ 'uniform vec2 end;', 'uniform vec2 delta;', 'uniform vec2 texSize;', - 'varying vec2 vTextureCoord;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -46,11 +47,11 @@ 'void main(void) {', ' vec4 color = vec4(0.0);', ' float total = 0.0;', - + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - + ' for (float t = -30.0; t <= 30.0; t++) {', ' float percent = (t + offset - 0.5) / 30.0;', ' float weight = 1.0 - abs(percent);', @@ -66,84 +67,82 @@ ]; }; -PIXI.TiltShiftYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.TiltShiftYFilter.prototype.constructor = PIXI.TiltShiftYFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.blur.value = value; - } -}); - -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'gradientBlur', { - get: function() { - return this.uniforms.gradientBlur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.gradientBlur.value = value; - } -}); - -/** - * The Y value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'start', { - get: function() { - return this.uniforms.start.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.start.value = value; - this.updateDelta(); - } -}); - -/** - * The Y value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'end', { - get: function() { - return this.uniforms.end.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.end.value = value; - this.updateDelta(); - } -}); +TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; +module.exports = TiltShiftYFilter; /** * Updates the filter delta values. * - * @method updateDelta */ -PIXI.TiltShiftYFilter.prototype.updateDelta = function(){ +TiltShiftYFilter.prototype.updateDelta = function (){ var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; var d = Math.sqrt(dx * dx + dy * dy); this.uniforms.delta.value.x = -dy / d; this.uniforms.delta.value.y = dx / d; }; + +Object.defineProperties(TiltShiftYFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + blur: { + get: function () { + return this.uniforms.blur.value; + }, + set: function (value) { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + gradientBlur: { + get: function () { + return this.uniforms.gradientBlur.value; + }, + set: function (value) { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + start: { + get: function () { + return this.uniforms.start.value; + }, + set: function (value) { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + end: { + get: function () { + return this.uniforms.end.value; + }, + set: function (value) { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/README.md b/README.md index f4d66a5..38b3837 100644 --- a/README.md +++ b/README.md @@ -184,17 +184,15 @@ ## Rewrite TODO -1. Remove tight coupling with Interaction Manager and stage.. -2. Rewrite updateTransform (DO, DOC, etc) to reduce gc grind -3. Rewrite getBounds (Sprite, Graphics, etc) to reduce gc grind +See: https://github.com/GoodBoyDigital/pixi.js/issues/1296 -### Folder Status +### Phase 1 Folder Browserify Status - [x] `index` - [x] `display/` - [ ] `extras/` -- [ ] `filters/` +- [x] `filters/` - [ ] `geom/` (move to `math/`) - [ ] `loaders/` - [ ] `primitives/` diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6727dc5..6a1e5af 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -1,78 +1,61 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * This is the base class for creating a PIXI filter. Currently only webGL supports filters. + * This is the base class for creating a PIXI filter. Currently only WebGL supports filters. * If you want to make a custom filter this should be your base class. - * @class AbstractFilter - * @constructor - * @param fragmentSrc {Array} The fragment source in an array of strings. - * @param uniforms {Object} An object containing the uniforms for this filter. + * + * @class + * @namespace PIXI + * @param fragmentSrc {string|string[]} The fragment source in an array of strings. + * @param uniforms {object} An object containing the uniforms for this filter. */ -PIXI.AbstractFilter = function(fragmentSrc, uniforms) -{ +function AbstractFilter(fragmentSrc, uniforms) { /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array(Filter) - * @private - */ + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * + * @member {AbstractFilter[]} + * @private + */ this.passes = [this]; /** - * @property shaders - * @type Array(Shader) - * @private - */ + * @member {Shader[]} + * @private + */ this.shaders = []; - - /** - * @property dirty - * @type Boolean - */ - this.dirty = true; /** - * @property padding - * @type Number - */ + * @member {number} + */ this.padding = 0; /** - * @property uniforms - * @type object - * @private - */ + * @member {object} + * @private + */ this.uniforms = uniforms || {}; /** - * @property fragmentSrc - * @type Array - * @private - */ - this.fragmentSrc = fragmentSrc || []; + * @member {string[]} + * @private + */ + this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); }; -PIXI.AbstractFilter.prototype.constructor = PIXI.AbstractFilter; +AbstractFilter.prototype.constructor = AbstractFilter; +module.exports = AbstractFilter; /** * Syncs the uniforms between the class object and the shaders. * - * @method syncUniforms */ -PIXI.AbstractFilter.prototype.syncUniforms = function() -{ - for(var i=0,j=this.shaders.length; i 0.2) n = 65600.0; // :', ' if (gray > 0.3) n = 332772.0; // *', @@ -58,30 +57,32 @@ ' if (gray > 0.6) n = 15252014.0; // 8', ' if (gray > 0.7) n = 13199452.0; // @', ' if (gray > 0.8) n = 11512810.0; // #', - + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', ' col = col * character(n, p);', - + ' gl_FragColor = vec4(col, 1.0);', '}' ]; }; -PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +AsciiFilter.prototype = Object.create(AbstractFilter.prototype); +AsciiFilter.prototype.constructor = AsciiFilter; +module.exports = AsciiFilter; -/** - * The pixel size used by the filter. - * - * @property size - * @type Number - */ -Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(AsciiFilter.prototype, { + /** + * The pixel size used by the filter. + * + * @member {number} + * @memberof AsciiFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index d93d147..4eb9fef 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -1,70 +1,74 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./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 (always relative to the stage). * - * @class BlurFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurFilter = function() -{ - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); +function BlurFilter() { + AbstractFilter.call(this); - this.passes =[this.blurXFilter, this.blurYFilter]; + this.blurXFilter = new BlurXFilter(); + this.blurYFilter = new BlurYFilter(); + + this.passes = [this.blurXFilter, this.blurYFilter]; }; -PIXI.BlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurFilter.prototype.constructor = PIXI.BlurFilter; +BlurFilter.prototype = Object.create(AbstractFilter.prototype); +BlurFilter.prototype.constructor = BlurFilter; +module.exports = BlurFilter; -/** - * Sets the strength of both the blurX and blurY properties simultaneously - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { - get: function() { - return this.blurXFilter.blur; +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; + } }, - set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; - } -}); -/** - * Sets the strength of the blurX property - * - * @property blurX - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { - get: function() { - return this.blurXFilter.blur; + /** + * 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; + } }, - set: function(value) { - this.blurXFilter.blur = value; - } -}); -/** - * Sets the strength of the blurY property - * - * @property blurY - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { - get: function() { - return this.blurYFilter.blur; - }, - set: function(value) { - this.blurYFilter.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 index 13f67c3..17c293b 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurXFilter applies a horizontal Gaussian blur to an object. * - * @class BlurXFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,23 +43,24 @@ ]; }; -PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; +BlurXFilter.prototype = Object.create(AbstractFilter.prototype); +BlurXFilter.prototype.constructor = BlurXFilter; +module.exports = BlurXFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; +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 index 5aecfef..8c8eeaa 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -1,29 +1,27 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'), + blurFactor = 1 / 7000; /** * The BlurYFilter applies a vertical Gaussian blur to an object. * - * @class BlurYFilter + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.BlurYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function BlurYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1/512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -45,22 +43,25 @@ ]; }; -PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; +BlurYFilter.prototype = Object.create(AbstractFilter.prototype); +BlurYFilter.prototype.constructor = BlurYFilter; +module.exports = BlurYFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +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/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 8f1dcbe..7296a26 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -1,60 +1,59 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. It's pretty powerful! - * - * @class ColorMatrixFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorMatrixFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorMatrixFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]} + matrix: { type: 'mat4', value: [1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform mat4 matrix;', 'uniform sampler2D uSampler;', 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', '}' ]; }; -PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; +ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); +ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; +module.exports = ColorMatrixFilter; -/** - * Sets the matrix of the color matrix filter - * - * @property matrix - * @type Array(Number) - * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] - */ -Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; +Object.defineProperties(ColorMatrixFilter.prototype, { + /** + * Sets the matrix of the color matrix filter + * + * @member {number[]} + * @memberof ColorMatrixFilter# + * @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = value; + } } -}); \ No newline at end of file +}); diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index 9481acd..a0b736c 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -1,23 +1,18 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. - * - * @class ColorStepFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.ColorStepFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function ColorStepFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - step: {type: '1f', value: 5} + step: { type: '1f', value: 5 } }; this.fragmentSrc = [ @@ -35,20 +30,23 @@ ]; }; -PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; +ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); +ColorStepFilter.prototype.constructor = ColorStepFilter; +module.exports = ColorStepFilter; -/** - * The number of steps to reduce the palette by. - * - * @property step - * @type Number - */ -Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { - get: function() { - return this.uniforms.step.value; - }, - set: function(value) { - this.uniforms.step.value = value; +Object.defineProperties(ColorStepFilter.prototype, { + /** + * The number of steps to reduce the palette by. + * + * @member {number} + * @memberof ColorStepFilter# + */ + step: { + get: function () { + return this.uniforms.step.value; + }, + set: function (value) { + this.uniforms.step.value = value; + } } }); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index 1d180d7..b31a1bc 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -1,106 +1,111 @@ -/** - * The ConvolutionFilter class applies a matrix convolution filter effect. - * A convolution combines pixels in the input image with neighboring pixels to produce a new image. - * A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. - * The matrix should be specified as a 9 point Array. See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. - * - * @class ConvolutionFilter - * @extends AbstractFilter - * @constructor - * @param matrix {Array} An array of values used for matrix transformation. Specified as a 9 point Array. - * @param width {Number} Width of the object you are transforming - * @param height {Number} Height of the object you are transforming - */ -PIXI.ConvolutionFilter = function(matrix, width, height) -{ - PIXI.AbstractFilter.call( this ); +var AbstractFilter = require('./AbstractFilter'); - this.passes = [this]; +/** + * The ConvolutionFilter class applies a matrix convolution filter effect. + * A convolution combines pixels in the input image with neighboring pixels to produce a new image. + * A wide variety of image effects can be achieved through convolutions, including blurring, edge + * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array. + * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array. + * @param width {number} Width of the object you are transforming + * @param height {number} Height of the object you are transforming + */ +function ConvolutionFilter(matrix, width, height) { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - m : {type: '1fv', value: new PIXI.Float32Array(matrix)}, - texelSizeX: {type: '1f', value: 1 / width}, - texelSizeY: {type: '1f', value: 1 / height} + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSizeX: { type: '1f', value: 1 / width }, + texelSizeY: { type: '1f', value: 1 / height } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying mediump vec2 vTextureCoord;', + 'uniform sampler2D texture;', 'uniform float texelSizeX;', 'uniform float texelSizeY;', - 'uniform float m[9];', + 'uniform float matrix[9];', 'vec2 px = vec2(texelSizeX, texelSizeY);', 'void main(void) {', - 'vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left - 'vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center - 'vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right + ' vec4 c11 = texture2D(texture, vTextureCoord - px);', // top left + ' vec4 c12 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y - px.y));', // top center + ' vec4 c13 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y - px.y));', // top right - 'vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left - 'vec4 c22 = texture2D(texture, vTextureCoord);', // mid center - 'vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right + ' vec4 c21 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y) );', // mid left + ' vec4 c22 = texture2D(texture, vTextureCoord);', // mid center + ' vec4 c23 = texture2D(texture, vec2(vTextureCoord.x + px.x, vTextureCoord.y) );', // mid right - 'vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left - 'vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center - 'vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right + ' vec4 c31 = texture2D(texture, vec2(vTextureCoord.x - px.x, vTextureCoord.y + px.y) );', // bottom left + ' vec4 c32 = texture2D(texture, vec2(vTextureCoord.x, vTextureCoord.y + px.y) );', // bottom center + ' vec4 c33 = texture2D(texture, vTextureCoord + px );', // bottom right - 'gl_FragColor = ', - 'c11 * m[0] + c12 * m[1] + c22 * m[2] +', - 'c21 * m[3] + c22 * m[4] + c23 * m[5] +', - 'c31 * m[6] + c32 * m[7] + c33 * m[8];', - 'gl_FragColor.a = c22.a;', + ' gl_FragColor = ', + ' c11 * matrix[0] + c12 * matrix[1] + c22 * matrix[2] +', + ' c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +', + ' c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];', + ' gl_FragColor.a = c22.a;', '}' ]; }; -PIXI.ConvolutionFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.ConvolutionFilter.prototype.constructor = PIXI.ConvolutionFilter; +ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; -/** - * An array of values used for matrix transformation. Specified as a 9 point Array. - * - * @property matrix - * @type Array - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.m.value; +Object.defineProperties(ConvolutionFilter.prototype, { + /** + * An array of values used for matrix transformation. Specified as a 9 point Array. + * + * @member {number[]} + * @memberof ConvolutionFilter# + */ + matrix: { + get: function () { + return this.uniforms.matrix.value; + }, + set: function (value) { + this.uniforms.matrix.value = new Float32Array(value); + } }, - set: function(value) { - this.uniforms.m.value = new PIXI.Float32Array(value); - } -}); -/** - * Width of the object you are transforming - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'width', { - get: function() { - return this.uniforms.texelSizeX.value; + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () { + return this.uniforms.texelSizeX.value; + }, + set: function (value) { + this.uniforms.texelSizeX.value = 1/value; + } }, - set: function(value) { - this.uniforms.texelSizeX.value = 1/value; - } -}); -/** - * Height of the object you are transforming - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.ConvolutionFilter.prototype, 'height', { - get: function() { - return this.uniforms.texelSizeY.value; - }, - set: function(value) { - this.uniforms.texelSizeY.value = 1/value; + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () { + return this.uniforms.texelSizeY.value; + }, + set: function (value) { + this.uniforms.texelSizeY.value = 1/value; + } } }); diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 4b9f381..42a8561 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Cross Hatch effect filter. - * - * @class CrossHatchFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.CrossHatchFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function CrossHatchFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 1 / 512} + blur: { type: '1f', value: 1 / 512 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float blur;', 'uniform sampler2D uSampler;', @@ -59,22 +56,25 @@ ]; }; -PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.CrossHatchFilter.prototype.constructor = PIXI.CrossHatchFilter; +CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; -/** - * Sets the strength of both the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value / (1/7000); - }, - set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; +Object.defineProperties(CrossHatchFilter.prototype, { + /** + * Sets the strength of both the blur. + * + * @member {number} + * @memberof CrossHatchFilter# + * @default 2 + */ + blur: { + get: function () { + return this.uniforms.blur.value / (1/7000); + }, + set: function (value) { + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; + } } }); diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 803b7b8..9d5d426 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -1,40 +1,33 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class DisplacementFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment */ -PIXI.DisplacementFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); +function DisplacementFilter(texture) { + AbstractFilter.call(this); - this.passes = [this]; texture.baseTexture._powerOf2 = true; // set the uniforms this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 30, y: 30 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 5112 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); } - else - { + else { this.boundLoadedFunction = this.onTextureLoaded.bind(this); texture.baseTexture.on('loaded', this.boundLoadedFunction); @@ -42,8 +35,10 @@ this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D displacementMap;', 'uniform sampler2D uSampler;', 'uniform vec2 scale;', @@ -54,81 +49,82 @@ 'void main(void) {', ' vec2 mapCords = vTextureCoord.xy;', - //' mapCords -= ;', ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', ' mapCords.y *= -1.0;', ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', ' matSample -= 0.5;', ' matSample *= scale;', ' matSample /= mapDimensions;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', - ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', - ' vec2 cord = vTextureCoord;', - //' gl_FragColor = texture2D(displacementMap, cord);', - // ' gl_FragColor = gl_FragColor;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + + //TODO: Is this needed? + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; }; -PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; +DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded + * @private */ -PIXI.DisplacementFilter.prototype.onTextureLoaded = function() -{ +DisplacementFilter.prototype.onTextureLoaded = function () { this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof DisplacementFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof DisplacementFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index 5a7462f..f92226a 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -1,32 +1,34 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js */ /** - * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer. - * - * @class DotScreenFilter + * This filter applies a dotscreen effect making display objects appear to be made out of + * black and white halftone dots like an old printer. + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.DotScreenFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function DotScreenFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} + scale: { type: '1f', value: 1 }, + angle: { type: '1f', value: 5 }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', @@ -51,35 +53,36 @@ ]; }; -PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; +DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); +DotScreenFilter.prototype.constructor = DotScreenFilter; +module.exports = DotScreenFilter; -/** - * The scale of the effect. - * @property scale - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; +Object.defineProperties(DotScreenFilter.prototype, { + /** + * The scale of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; - } -}); -/** - * The radius of the effect. - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * The radius of the effect. + * @member {number} + * @memberof DotScreenFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } }); diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index fbdacc2..d78c70d 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -1,30 +1,24 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A target and pass info object for filters. - * - * @class FilterBlock - * @constructor + * + * @class + * @namespace PIXI */ -PIXI.FilterBlock = function() -{ +function FilterBlock() { /** * The visible state of this FilterBlock. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * The renderable state of this FilterBlock. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = true; }; -PIXI.FilterBlock.prototype.constructor = PIXI.FilterBlock; +FilterBlock.prototype.constructor = FilterBlock; +module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 201d026..8b5d8ef 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This greyscales the palette of your Display Objects. - * - * @class GrayFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.GrayFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function GrayFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - gray: {type: '1f', value: 1} + gray: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', 'uniform float gray;', @@ -35,19 +32,23 @@ ]; }; -PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; +GrayFilter.prototype = Object.create(AbstractFilter.prototype); +GrayFilter.prototype.constructor = GrayFilter; +module.exports = GrayFilter; -/** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * @property gray - * @type Number - */ -Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { - get: function() { - return this.uniforms.gray.value; - }, - set: function(value) { - this.uniforms.gray.value = value; +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/InvertFilter.js b/src/filters/InvertFilter.js index 7f5e84c..6538c38 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This inverts your Display Objects colors. - * - * @class InvertFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.InvertFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function InvertFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 1} + invert: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float invert;', 'uniform sampler2D uSampler;', @@ -36,19 +33,23 @@ ]; }; -PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; -/** - * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color - * @property invert - * @type Number -*/ -Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { - get: function() { - return this.uniforms.invert.value; - }, - set: function(value) { - this.uniforms.invert.value = value; +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color + * + * @member {number} + * @memberof InvertFilter# + */ + invert: { + get: function () { + return this.uniforms.invert.value; + }, + set: function (value) { + this.uniforms.invert.value = value; + } } }); diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index ff248e4..1936127 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('./AbstractFilter'); + /** * @author Vico @vicocotea * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js @@ -5,58 +7,64 @@ /** * A Noise effect filter. - * - * @class NoiseFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.NoiseFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function NoiseFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - noise: {type: '1f', value: 0.5} + noise: { type: '1f', value: 0.5 } }; this.fragmentSrc = [ 'precision mediump float;', - 'uniform sampler2D uSampler;', - 'uniform float noise;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + + 'uniform float noise;', + 'uniform sampler2D uSampler;', 'float rand(vec2 co) {', ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', '}', + 'void main() {', ' vec4 color = texture2D(uSampler, vTextureCoord);', - + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', ' color.r += diff;', ' color.g += diff;', ' color.b += diff;', - + ' gl_FragColor = color;', '}' ]; }; -PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +NoiseFilter.prototype = Object.create(AbstractFilter.prototype); +NoiseFilter.prototype.constructor = NoiseFilter; +module.exports = NoiseFilter; -/** - * The amount of noise to apply. - * @property noise - * @type Number -*/ -Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { - get: function() { - return this.uniforms.noise.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.noise.value = value; +Object.defineProperties(NoiseFilter.prototype, { + /** + * The amount of noise to apply. + * + * @member {number} + * @memberof NoiseFilter# + * @default 0.5 + */ + noise: { + get: function () { + return this.uniforms.noise.value; + }, + set: function (value) { + this.dirty = true; + this.uniforms.noise.value = value; + } } }); diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index e686905..07305f2 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -1,196 +1,187 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - +var AbstractFilter = require('./AbstractFilter'); /** - * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. - * - * @class NormalMapFilter + * + * @class * @extends AbstractFilter - * @constructor - * @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment + * @namespace PIXI + * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment */ -PIXI.NormalMapFilter = function(texture) -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; +function NormalMapFilter(texture) { + AbstractFilter.call(this); - // set the uniforms - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:15, y:15}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:1}}, - dimensions: {type: '4f', value:[0,0,0,0]}, - // LightDir: {type: 'f3', value:[0, 1, 0]}, - LightPos: {type: '3f', value:[0, 1, 0]} - }; - + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + this.uniforms = { + displacementMap: { type: 'sampler2D', value: texture }, + scale: { type: '2f', value: { x: 15, y: 15 } }, + offset: { type: '2f', value: { x: 0, y: 0 } }, + mapDimensions: { type: '2f', value: { x: 1, y: 1 } }, + dimensions: { type: '4f', value: [0, 0, 0, 0] }, + // LightDir: { type: 'f3', value: [0, 1, 0] }, + LightPos: { type: '3f', value: [0, 1, 0] } + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if (texture.baseTexture.hasLoaded) { + this.onTextureLoaded(); + } + else { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - - "uniform vec4 dimensions;", - - "const vec2 Resolution = vec2(1.0,1.0);", //resolution of screen - "uniform vec3 LightPos;", //light position, normalized - "const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);", //light RGBA -- alpha is intensity - "const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);", //ambient RGBA -- alpha is intensity - "const vec3 Falloff = vec3(0.0, 1.0, 0.2);", //attenuation coefficients + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } - "uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);", + this.fragmentSrc = [ + 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + + 'uniform vec4 dimensions;', + + 'const vec2 Resolution = vec2(1.0,1.0);', //resolution of screen + 'uniform vec3 LightPos;', //light position, normalized + 'const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);', //light RGBA -- alpha is intensity + 'const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);', //ambient RGBA -- alpha is intensity + 'const vec3 Falloff = vec3(0.0, 1.0, 0.2);', //attenuation coefficients + + 'uniform vec3 LightDir;',//' = vec3(1.0, 0.0, 1.0);', - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", - "vec4 color = texture2D(uSampler, vTextureCoord.st);", - "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;", - + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', - "mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);", - - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", + ' vec4 color = texture2D(uSampler, vTextureCoord.st);', + ' vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;', - //RGBA of our diffuse color - "vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);", - //RGB of our normal map - "vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;", + ' mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);', - //The delta position of light - //"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);", - "vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);", - //Correct for aspect ratio - //"LightDir.x *= Resolution.x / Resolution.y;", + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', - //Determine distance (used for attenuation) BEFORE we normalize our LightDir - "float D = length(LightDir);", + //RGBA of our diffuse color + ' vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);', - //normalize our vectors - "vec3 N = normalize(NormalMap * 2.0 - 1.0);", - "vec3 L = normalize(LightDir);", + //RGB of our normal map + ' vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;', - //Pre-multiply light color with intensity - //Then perform "N dot L" to determine our diffuse term - "vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);", + //The delta position of light + //'vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);', + ' vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);', + //Correct for aspect ratio + // ' LightDir.x *= Resolution.x / Resolution.y;', - //pre-multiply ambient color with intensity - "vec3 Ambient = AmbientColor.rgb * AmbientColor.a;", + //Determine distance (used for attenuation) BEFORE we normalize our LightDir + ' float D = length(LightDir);', - //calculate attenuation - "float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );", + //normalize our vectors + ' vec3 N = normalize(NormalMap * 2.0 - 1.0);', + ' vec3 L = normalize(LightDir);', - //the calculation which brings it all together - "vec3 Intensity = Ambient + Diffuse * Attenuation;", - "vec3 FinalColor = DiffuseColor.rgb * Intensity;", - "gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);", - //"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);", - /* - // normalise color - "vec3 normal = normalize(nColor * 2.0 - 1.0);", - - "vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );", + //Pre-multiply light color with intensity + //Then perform 'N dot L' to determine our diffuse term + ' vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);', - "float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);", + //pre-multiply ambient color with intensity + ' vec3 Ambient = AmbientColor.rgb * AmbientColor.a;', - "float d = sqrt(dot(deltaPos, deltaPos));", - "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );", + //calculate attenuation + ' float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );', - "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;", - "result *= color.rgb;", - - "gl_FragColor = vec4(result, 1.0);",*/ + //the calculation which brings it all together + ' vec3 Intensity = Ambient + Diffuse * Attenuation;', + ' vec3 FinalColor = DiffuseColor.rgb * Intensity;', + ' gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);', + // ' gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);',//vColor * vec4(FinalColor, DiffuseColor.a);', - + /*// normalise color + ' vec3 normal = normalize(nColor * 2.0 - 1.0);', - "}" - ]; - + ' vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );', + + ' float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);', + + ' float d = sqrt(dot(deltaPos, deltaPos));', + ' float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );', + + ' vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;', + ' result *= color.rgb;', + + ' gl_FragColor = vec4(result, 1.0);',*/ + '}' + ]; + } -PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter; +NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); +NormalMapFilter.prototype.constructor = NormalMapFilter; +module.exports = NormalMapFilter; /** * Sets the map dimensions uniforms when the texture becomes available. * - * @method onTextureLoaded */ -PIXI.NormalMapFilter.prototype.onTextureLoaded = function() -{ - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; +NormalMapFilter.prototype.onTextureLoaded = function () { + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction) }; -/** - * The texture used for the displacement map. Must be power of 2 texture. - * - * @property map - * @type Texture - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', { - get: function() { - return this.uniforms.displacementMap.value; +Object.defineProperties(NormalMapFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 texture. + * + * @member {Texture} + * @memberof NormalMapFilter# + */ + map: { + get: function () { + return this.uniforms.displacementMap.value; + }, + set: function (value) { + this.uniforms.displacementMap.value = value; + } }, - set: function(value) { - this.uniforms.displacementMap.value = value; - } -}); -/** - * The multiplier used to scale the displacement result from the map calculation. - * - * @property scale - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', { - get: function() { - return this.uniforms.scale.value; + /** + * The multiplier used to scale the displacement result from the map calculation. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + scale: { + get: function () { + return this.uniforms.scale.value; + }, + set: function (value) { + this.uniforms.scale.value = value; + } }, - set: function(value) { - this.uniforms.scale.value = value; - } -}); -/** - * The offset used to move the displacement map. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; - }, - set: function(value) { - this.uniforms.offset.value = value; + /** + * The offset used to move the displacement map. + * + * @member {Point} + * @memberof NormalMapFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } } }); diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 2a3127d..77d4dfe 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -1,31 +1,28 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class PixelateFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.PixelateFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function PixelateFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new PIXI.Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}} + invert: { type: '1f', value: 0 }, + dimensions: { type: '4fv', value: new Float32Array([10000, 100, 10, 10]) }, + pixelSize: { type: '2f', value: { x: 10, y: 10 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 testDim;', 'uniform vec4 dimensions;', 'uniform vec2 pixelSize;', @@ -42,21 +39,23 @@ ]; }; -PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; -/** - * This a point that describes the size of the blocks. x is the width of the block and y is the height. - * - * @property size - * @type Point - */ -Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { - get: function() { - return this.uniforms.pixelSize.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. x is the width of the block and y is the height. + * + * @member {Point} + * @memberof PixelateFilter# + */ + size: { + get: function () { + return this.uniforms.pixelSize.value; + }, + set: function (value) { + this.uniforms.pixelSize.value = value; + } } }); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index 7169637..cc4f1d9 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -1,32 +1,31 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * An RGB Split Filter. - * - * @class RGBSplitFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.RGBSplitFilter = function() -{ - PIXI.AbstractFilter.call( this ); +function RGBSplitFilter() { + AbstractFilter.call(this); this.passes = [this]; // set the uniforms this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} + red: { type: '2f', value: { x: 20, y: 20 } }, + green: { type: '2f', value: { x: -20, y: 20 } }, + blue: { type: '2f', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform vec2 red;', 'uniform vec2 green;', 'uniform vec2 blue;', @@ -42,50 +41,53 @@ ]; }; -PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; +RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; -/** - * Red channel offset. - * - * @property red - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'red', { - get: function() { - return this.uniforms.red.value; +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () { + return this.uniforms.red.value; + }, + set: function (value) { + this.uniforms.red.value = value; + } }, - set: function(value) { - this.uniforms.red.value = value; - } -}); -/** - * Green channel offset. - * - * @property green - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'green', { - get: function() { - return this.uniforms.green.value; + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () { + return this.uniforms.green.value; + }, + set: function (value) { + this.uniforms.green.value = value; + } }, - set: function(value) { - this.uniforms.green.value = value; - } -}); -/** - * Blue offset. - * - * @property blue - * @type Point - */ -Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'blue', { - get: function() { - return this.uniforms.blue.value; - }, - set: function(value) { - this.uniforms.blue.value = value; + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () { + return this.uniforms.blue.value; + }, + set: function (value) { + this.uniforms.blue.value = value; + } } }); diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index 5596e53..c65b879 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -1,29 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This applies a sepia effect to your Display Objects. - * - * @class SepiaFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SepiaFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function SepiaFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - sepia: {type: '1f', value: 1} + sepia: { type: '1f', value: 1 } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', + 'uniform float sepia;', 'uniform sampler2D uSampler;', @@ -32,24 +29,27 @@ 'void main(void) {', ' gl_FragColor = texture2D(uSampler, vTextureCoord);', ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', - // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; }; -PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; +SepiaFilter.prototype = Object.create(AbstractFilter.prototype); +SepiaFilter.prototype.constructor = SepiaFilter; +module.exports = SepiaFilter; -/** - * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. - * @property sepia - * @type Number -*/ -Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { - get: function() { - return this.uniforms.sepia.value; - }, - set: function(value) { - this.uniforms.sepia.value = value; +Object.defineProperties(SepiaFilter.prototype, { + /** + * The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color. + * + * @member {number} + * @memberof SepiaFilter# + */ + sepia: { + get: function () { + return this.uniforms.sepia.value; + }, + set: function (value) { + this.uniforms.sepia.value = value; + } } }); diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index 44a47f4..b5c3e38 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -1,32 +1,22 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * A Smart Blur Filter. - * - * @class SmartBlurFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.SmartBlurFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512} - }; +function SmartBlurFilter() { + AbstractFilter.call(this); this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', - //'uniform vec2 delta;', 'const vec2 delta = vec2(1.0/10.0, 0.0);', - //'uniform float darkness;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -50,26 +40,10 @@ ' gl_FragColor = color / total;', ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - //' gl_FragColor.rgb *= darkness;', '}' ]; }; -PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - * @default 2 - */ -Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.uniforms.blur.value = value; - } -}); +SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); +SmartBlurFilter.prototype.constructor = SmartBlurFilter; +module.exports = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index 2eb3776..fb217ba 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('./AbstractFilter'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,78 +9,85 @@ /** * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class TiltShiftFilter - * @constructor + * + * @class + * @extends AbstractFilter + * @namespace PIXI */ -PIXI.TiltShiftFilter = function() -{ - this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); - this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); +TiltShiftFilter = function () { + AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; }; -PIXI.TiltShiftFilter.prototype.constructor = PIXI.TiltShiftFilter; +TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { - get: function() { - return this.tiltShiftXFilter.blur; +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () { + return this.tiltShiftXFilter.blur; + }, + set: function (value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } -}); -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { - get: function() { - return this.tiltShiftXFilter.gradientBlur; + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } }, - set: function(value) { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } -}); -/** - * The Y value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { - get: function() { - return this.tiltShiftXFilter.start; + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () { + return this.tiltShiftXFilter.start; + }, + set: function (value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } }, - set: function(value) { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } -}); -/** - * The Y value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { - get: function() { - return this.tiltShiftXFilter.end; + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () { + return this.tiltShiftXFilter.end; + }, + set: function (value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } }, - set: function(value) { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } }); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 29d8f38..4f4f512 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('AbstractFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,31 +7,31 @@ /** * A TiltShiftXFilter. - * - * @class TiltShiftXFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.TiltShiftXFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function TiltShiftXFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 100.0}, - gradientBlur: {type: '1f', value: 600.0}, - start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, - end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, - delta: {type: '2f', value:{x:30, y:30}}, - texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, + end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, + delta: { type: '2f', value: { x: 30, y: 30 } }, + texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } }; this.updateDelta(); this.fragmentSrc = [ 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', 'uniform float blur;', 'uniform float gradientBlur;', @@ -37,7 +39,6 @@ 'uniform vec2 end;', 'uniform vec2 delta;', 'uniform vec2 texSize;', - 'varying vec2 vTextureCoord;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -46,11 +47,11 @@ 'void main(void) {', ' vec4 color = vec4(0.0);', ' float total = 0.0;', - + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - + ' for (float t = -30.0; t <= 30.0; t++) {', ' float percent = (t + offset - 0.5) / 30.0;', ' float weight = 1.0 - abs(percent);', @@ -66,84 +67,84 @@ ]; }; -PIXI.TiltShiftXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.TiltShiftXFilter.prototype.constructor = PIXI.TiltShiftXFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.blur.value = value; - } -}); - -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'gradientBlur', { - get: function() { - return this.uniforms.gradientBlur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.gradientBlur.value = value; - } -}); - -/** - * The X value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'start', { - get: function() { - return this.uniforms.start.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.start.value = value; - this.updateDelta(); - } -}); - -/** - * The X value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'end', { - get: function() { - return this.uniforms.end.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.end.value = value; - this.updateDelta(); - } -}); +TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; +module.exports = TiltShiftXFilter; /** * Updates the filter delta values. * - * @method updateDelta */ -PIXI.TiltShiftXFilter.prototype.updateDelta = function(){ +TiltShiftXFilter.prototype.updateDelta = function () { var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; var d = Math.sqrt(dx * dx + dy * dy); + this.uniforms.delta.value.x = dx / d; this.uniforms.delta.value.y = dy / d; }; + + +Object.defineProperties(TiltShiftXFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + blur: { + get: function () { + return this.uniforms.blur.value; + }, + set: function (value) { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + gradientBlur: { + get: function () { + return this.uniforms.gradientBlur.value; + }, + set: function (value) { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The X value to start the effect at. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + start: { + get: function () { + return this.uniforms.start.value; + }, + set: function (value) { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The X value to end the effect at. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + end: { + get: function () { + return this.uniforms.end.value; + }, + set: function (value) { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 3a92851..958e562 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -1,3 +1,5 @@ +var AbstractFilter = require('AbstractFilter'); + /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ @@ -5,31 +7,31 @@ /** * A TiltShiftYFilter. - * - * @class TiltShiftYFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.TiltShiftYFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function TiltShiftYFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - blur: {type: '1f', value: 100.0}, - gradientBlur: {type: '1f', value: 600.0}, - start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, - end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, - delta: {type: '2f', value:{x:30, y:30}}, - texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, + end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, + delta: { type: '2f', value: { x: 30, y: 30 } }, + texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } }; - + this.updateDelta(); this.fragmentSrc = [ 'precision mediump float;', + + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', 'uniform float blur;', 'uniform float gradientBlur;', @@ -37,7 +39,6 @@ 'uniform vec2 end;', 'uniform vec2 delta;', 'uniform vec2 texSize;', - 'varying vec2 vTextureCoord;', 'float random(vec3 scale, float seed) {', ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', @@ -46,11 +47,11 @@ 'void main(void) {', ' vec4 color = vec4(0.0);', ' float total = 0.0;', - + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - + ' for (float t = -30.0; t <= 30.0; t++) {', ' float percent = (t + offset - 0.5) / 30.0;', ' float weight = 1.0 - abs(percent);', @@ -66,84 +67,82 @@ ]; }; -PIXI.TiltShiftYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.TiltShiftYFilter.prototype.constructor = PIXI.TiltShiftYFilter; - -/** - * The strength of the blur. - * - * @property blur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'blur', { - get: function() { - return this.uniforms.blur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.blur.value = value; - } -}); - -/** - * The strength of the gradient blur. - * - * @property gradientBlur - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'gradientBlur', { - get: function() { - return this.uniforms.gradientBlur.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.gradientBlur.value = value; - } -}); - -/** - * The Y value to start the effect at. - * - * @property start - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'start', { - get: function() { - return this.uniforms.start.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.start.value = value; - this.updateDelta(); - } -}); - -/** - * The Y value to end the effect at. - * - * @property end - * @type Number - */ -Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'end', { - get: function() { - return this.uniforms.end.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.end.value = value; - this.updateDelta(); - } -}); +TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); +TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; +module.exports = TiltShiftYFilter; /** * Updates the filter delta values. * - * @method updateDelta */ -PIXI.TiltShiftYFilter.prototype.updateDelta = function(){ +TiltShiftYFilter.prototype.updateDelta = function (){ var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; var d = Math.sqrt(dx * dx + dy * dy); this.uniforms.delta.value.x = -dy / d; this.uniforms.delta.value.y = dx / d; }; + +Object.defineProperties(TiltShiftYFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + blur: { + get: function () { + return this.uniforms.blur.value; + }, + set: function (value) { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + gradientBlur: { + get: function () { + return this.uniforms.gradientBlur.value; + }, + set: function (value) { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + start: { + get: function () { + return this.uniforms.start.value; + }, + set: function (value) { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + end: { + get: function () { + return this.uniforms.end.value; + }, + set: function (value) { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 08a3122..6fa3c9a 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -1,37 +1,32 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var AbstractFilter = require('./AbstractFilter'); /** * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class TwistFilter + * + * @class * @extends AbstractFilter - * @constructor + * @namespace PIXI */ -PIXI.TwistFilter = function() -{ - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; +function TwistFilter() { + AbstractFilter.call(this); // set the uniforms this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}} + radius: { type: '1f', value: 0.5}, + angle: { type: '1f', value: 5}, + offset: { type: '2f', value: { x: 0.5, y: 0.5 } } }; this.fragmentSrc = [ 'precision mediump float;', + 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', 'uniform float radius;', 'uniform float angle;', 'uniform vec2 offset;', + 'uniform sampler2D uSampler;', 'void main(void) {', ' vec2 coord = vTextureCoord - offset;', @@ -50,53 +45,53 @@ ]; }; -PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); -PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; +TwistFilter.prototype = Object.create(AbstractFilter.prototype); +TwistFilter.prototype.constructor = TwistFilter; +module.exports = TwistFilter; -/** - * This point describes the the offset of the twist. - * - * @property offset - * @type Point - */ -Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', { - get: function() { - return this.uniforms.offset.value; +Object.defineProperties(TwistFilter.prototype, { + /** + * This point describes the the offset of the twist. + * + * @member {Point} + * @memberof TwistFilter# + */ + offset: { + get: function () { + return this.uniforms.offset.value; + }, + set: function (value) { + this.uniforms.offset.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; - } -}); -/** - * This radius of the twist. - * - * @property radius - * @type Number - */ -Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', { - get: function() { - return this.uniforms.radius.value; + /** + * This radius of the twist. + * + * @member {number} + * @memberof TwistFilter# + */ + radius: { + get: function () { + return this.uniforms.radius.value; + }, + set: function (value) { + this.uniforms.radius.value = value; + } }, - set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; - } -}); -/** - * This angle of the twist. - * - * @property angle - * @type Number - */ -Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', { - get: function() { - return this.uniforms.angle.value; - }, - set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + /** + * This angle of the twist. + * + * @member {number} + * @memberof TwistFilter# + */ + angle: { + get: function () { + return this.uniforms.angle.value; + }, + set: function (value) { + this.uniforms.angle.value = value; + } } });