diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/invert/InvertFilter.js b/src/filters/invert/InvertFilter.js new file mode 100644 index 0000000..69b8321 --- /dev/null +++ b/src/filters/invert/InvertFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This inverts your Display Objects colors. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function InvertFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + invert: { type: '1f', value: 1 } + } + ); +} + +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; + +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. `1` will fully invert the colors, and + * `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/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/invert/InvertFilter.js b/src/filters/invert/InvertFilter.js new file mode 100644 index 0000000..69b8321 --- /dev/null +++ b/src/filters/invert/InvertFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This inverts your Display Objects colors. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function InvertFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + invert: { type: '1f', value: 1 } + } + ); +} + +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; + +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. `1` will fully invert the colors, and + * `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/invert/invert.frag b/src/filters/invert/invert.frag new file mode 100644 index 0000000..b5eb376 --- /dev/null +++ b/src/filters/invert/invert.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform float invert; +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + + gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert); +} diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/invert/InvertFilter.js b/src/filters/invert/InvertFilter.js new file mode 100644 index 0000000..69b8321 --- /dev/null +++ b/src/filters/invert/InvertFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This inverts your Display Objects colors. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function InvertFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + invert: { type: '1f', value: 1 } + } + ); +} + +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; + +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. `1` will fully invert the colors, and + * `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/invert/invert.frag b/src/filters/invert/invert.frag new file mode 100644 index 0000000..b5eb376 --- /dev/null +++ b/src/filters/invert/invert.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform float invert; +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + + gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert); +} diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..3b36cdd --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function PixelateFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, + pixelSize: { type: 'v2', value: { x: 10, y: 10 } } + } + ); +} + +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +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/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/invert/InvertFilter.js b/src/filters/invert/InvertFilter.js new file mode 100644 index 0000000..69b8321 --- /dev/null +++ b/src/filters/invert/InvertFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This inverts your Display Objects colors. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function InvertFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + invert: { type: '1f', value: 1 } + } + ); +} + +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; + +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. `1` will fully invert the colors, and + * `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/invert/invert.frag b/src/filters/invert/invert.frag new file mode 100644 index 0000000..b5eb376 --- /dev/null +++ b/src/filters/invert/invert.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform float invert; +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + + gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert); +} diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..3b36cdd --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function PixelateFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, + pixelSize: { type: 'v2', value: { x: 10, y: 10 } } + } + ); +} + +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +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/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..060accd --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,18 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec4 dimensions; +uniform vec2 pixelSize; +uniform sampler2D uSampler; + +void main(void) +{ + vec2 coord = vTextureCoord; + + vec2 size = dimensions.xy / pixelSize; + + vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5; + + gl_FragColor = texture2D(uSampler, color); +} diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/invert/InvertFilter.js b/src/filters/invert/InvertFilter.js new file mode 100644 index 0000000..69b8321 --- /dev/null +++ b/src/filters/invert/InvertFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This inverts your Display Objects colors. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function InvertFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + invert: { type: '1f', value: 1 } + } + ); +} + +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; + +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. `1` will fully invert the colors, and + * `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/invert/invert.frag b/src/filters/invert/invert.frag new file mode 100644 index 0000000..b5eb376 --- /dev/null +++ b/src/filters/invert/invert.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform float invert; +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + + gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert); +} diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..3b36cdd --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function PixelateFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, + pixelSize: { type: 'v2', value: { x: 10, y: 10 } } + } + ); +} + +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +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/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..060accd --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,18 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec4 dimensions; +uniform vec2 pixelSize; +uniform sampler2D uSampler; + +void main(void) +{ + vec2 coord = vTextureCoord; + + vec2 size = dimensions.xy / pixelSize; + + vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5; + + gl_FragColor = texture2D(uSampler, color); +} diff --git a/src/filters/shockwave/ShockwaveFilter.js b/src/filters/shockwave/ShockwaveFilter.js index 7cef028..b6f33c2 100644 --- a/src/filters/shockwave/ShockwaveFilter.js +++ b/src/filters/shockwave/ShockwaveFilter.js @@ -20,7 +20,7 @@ { center: { type: 'v2', value: { x: 0.5, y: 0.5 } }, params: { type: 'v3', value: { x: 10, y: 0.8, z: 0.1 } }, - time: { type: 'f', value: 0 } + time: { type: '1f', value: 0 } } ); } diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js deleted file mode 100644 index 16cebea..0000000 --- a/src/filters/InvertFilter.js +++ /dev/null @@ -1,59 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This inverts your Display Objects colors. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function InvertFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - invert: { type: '1f', value: 1 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float invert;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor = texture2D(uSampler, vTextureCoord);', - ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', - //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', - // ' gl_FragColor = gl_FragColor * vColor;', - '}' - ]; -} - -InvertFilter.prototype = Object.create(AbstractFilter.prototype); -InvertFilter.prototype.constructor = InvertFilter; -module.exports = InvertFilter; - -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/PixelateFilter.js b/src/filters/PixelateFilter.js deleted file mode 100644 index e105fbe..0000000 --- a/src/filters/PixelateFilter.js +++ /dev/null @@ -1,65 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * This filter applies a pixelate effect making display objects appear 'blocky'. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function PixelateFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - 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;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' vec2 coord = vTextureCoord;', - - ' vec2 size = dimensions.xy/pixelSize;', - - ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', - ' gl_FragColor = texture2D(uSampler, color);', - '}' - ]; -} - -PixelateFilter.prototype = Object.create(AbstractFilter.prototype); -PixelateFilter.prototype.constructor = PixelateFilter; -module.exports = PixelateFilter; - -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/index.js b/src/filters/index.js index 5a0f033..0c26742 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -21,10 +21,10 @@ // DisplacementFilter: require('./DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'), - // InvertFilter: require('./InvertFilter'), + InvertFilter: require('./invert/InvertFilter'), NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), - // PixelateFilter: require('./PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), diff --git a/src/filters/invert/InvertFilter.js b/src/filters/invert/InvertFilter.js new file mode 100644 index 0000000..69b8321 --- /dev/null +++ b/src/filters/invert/InvertFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This inverts your Display Objects colors. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function InvertFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + invert: { type: '1f', value: 1 } + } + ); +} + +InvertFilter.prototype = Object.create(AbstractFilter.prototype); +InvertFilter.prototype.constructor = InvertFilter; +module.exports = InvertFilter; + +Object.defineProperties(InvertFilter.prototype, { + /** + * The strength of the invert. `1` will fully invert the colors, and + * `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/invert/invert.frag b/src/filters/invert/invert.frag new file mode 100644 index 0000000..b5eb376 --- /dev/null +++ b/src/filters/invert/invert.frag @@ -0,0 +1,13 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform float invert; +uniform sampler2D uSampler; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord); + + gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert); +} diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..3b36cdd --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,46 @@ +var AbstractFilter = require('./AbstractFilter'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function PixelateFilter() +{ + AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/invert.frag', 'utf8'), + // custom uniforms + { + dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, + pixelSize: { type: 'v2', value: { x: 10, y: 10 } } + } + ); +} + +PixelateFilter.prototype = Object.create(AbstractFilter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +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/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..060accd --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,18 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec4 dimensions; +uniform vec2 pixelSize; +uniform sampler2D uSampler; + +void main(void) +{ + vec2 coord = vTextureCoord; + + vec2 size = dimensions.xy / pixelSize; + + vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5; + + gl_FragColor = texture2D(uSampler, color); +} diff --git a/src/filters/shockwave/ShockwaveFilter.js b/src/filters/shockwave/ShockwaveFilter.js index 7cef028..b6f33c2 100644 --- a/src/filters/shockwave/ShockwaveFilter.js +++ b/src/filters/shockwave/ShockwaveFilter.js @@ -20,7 +20,7 @@ { center: { type: 'v2', value: { x: 0.5, y: 0.5 } }, params: { type: 'v3', value: { x: 10, y: 0.8, z: 0.1 } }, - time: { type: 'f', value: 0 } + time: { type: '1f', value: 0 } } ); } diff --git a/src/filters/shockwave/shockwave.frag b/src/filters/shockwave/shockwave.frag index f25870c..9d5cd57 100644 --- a/src/filters/shockwave/shockwave.frag +++ b/src/filters/shockwave/shockwave.frag @@ -10,20 +10,20 @@ void main() { - vec2 uv = vTextureCoord; - vec2 texCoord = uv; + vec2 uv = vTextureCoord; + vec2 texCoord = uv; - float dist = distance(uv, center); + float dist = distance(uv, center); - if ( (dist <= (time + params.z)) && (dist >= (time - params.z)) ) - { - float diff = (dist - time); - float powDiff = 1.0 - pow(abs(diff*params.x), params.y); + if ( (dist <= (time + params.z)) && (dist >= (time - params.z)) ) + { + float diff = (dist - time); + float powDiff = 1.0 - pow(abs(diff*params.x), params.y); - float diffTime = diff * powDiff; - vec2 diffUV = normalize(uv - center); - texCoord = uv + (diffUV * diffTime); - } + float diffTime = diff * powDiff; + vec2 diffUV = normalize(uv - center); + texCoord = uv + (diffUV * diffTime); + } - gl_FragColor = texture2D(uSampler, texCoord); + gl_FragColor = texture2D(uSampler, texCoord); }