diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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 deleted file mode 100644 index 9aba58f..0000000 --- a/src/filters/CrossHatchFilter.js +++ /dev/null @@ -1,92 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * A Cross Hatch effect filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function CrossHatchFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 1 / 512 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float blur;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', - - ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', - - ' if (lum < 1.00)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.75)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.50)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.3)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - '}' - ]; -} - -CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); -CrossHatchFilter.prototype.constructor = CrossHatchFilter; -module.exports = CrossHatchFilter; - -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/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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 deleted file mode 100644 index 9aba58f..0000000 --- a/src/filters/CrossHatchFilter.js +++ /dev/null @@ -1,92 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * A Cross Hatch effect filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function CrossHatchFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 1 / 512 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float blur;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', - - ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', - - ' if (lum < 1.00)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.75)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.50)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.3)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - '}' - ]; -} - -CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); -CrossHatchFilter.prototype.constructor = CrossHatchFilter; -module.exports = CrossHatchFilter; - -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/convolution/ConvolutionFilter.js b/src/filters/convolution/ConvolutionFilter.js new file mode 100644 index 0000000..694571f --- /dev/null +++ b/src/filters/convolution/ConvolutionFilter.js @@ -0,0 +1,87 @@ +var core = require('../../core'); + +/** + * 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.filters + * @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) +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/convolution.frag', 'utf8'), + // custom uniforms + { + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSize: { type: '2v', value: { x: 1 / width, y: 1 / height } } + } + ); +} + +ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; + +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); + } + }, + + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () + { + return 1/this.uniforms.texelSize.value.x; + }, + set: function (value) + { + this.uniforms.texelSize.value.x = 1/value; + } + }, + + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () + { + return 1/this.uniforms.texelSize.value.y; + }, + set: function (value) + { + this.uniforms.texelSize.value.y = 1/value; + } + } +}); diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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 deleted file mode 100644 index 9aba58f..0000000 --- a/src/filters/CrossHatchFilter.js +++ /dev/null @@ -1,92 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * A Cross Hatch effect filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function CrossHatchFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 1 / 512 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float blur;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', - - ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', - - ' if (lum < 1.00)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.75)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.50)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.3)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - '}' - ]; -} - -CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); -CrossHatchFilter.prototype.constructor = CrossHatchFilter; -module.exports = CrossHatchFilter; - -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/convolution/ConvolutionFilter.js b/src/filters/convolution/ConvolutionFilter.js new file mode 100644 index 0000000..694571f --- /dev/null +++ b/src/filters/convolution/ConvolutionFilter.js @@ -0,0 +1,87 @@ +var core = require('../../core'); + +/** + * 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.filters + * @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) +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/convolution.frag', 'utf8'), + // custom uniforms + { + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSize: { type: '2v', value: { x: 1 / width, y: 1 / height } } + } + ); +} + +ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; + +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); + } + }, + + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () + { + return 1/this.uniforms.texelSize.value.x; + }, + set: function (value) + { + this.uniforms.texelSize.value.x = 1/value; + } + }, + + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () + { + return 1/this.uniforms.texelSize.value.y; + }, + set: function (value) + { + this.uniforms.texelSize.value.y = 1/value; + } + } +}); diff --git a/src/filters/convolution/convolution.frag b/src/filters/convolution/convolution.frag new file mode 100644 index 0000000..e6fe7b5 --- /dev/null +++ b/src/filters/convolution/convolution.frag @@ -0,0 +1,29 @@ +precision mediump float; + +varying mediump vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec2 texelSize; +uniform float matrix[9]; + +void main(void) +{ + vec4 c11 = texture2D(uSampler, vTextureCoord - texelSize); // top left + vec4 c12 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - texelSize.y)); // top center + vec4 c13 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y - texelSize.y)); // top right + + vec4 c21 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y)); // mid left + vec4 c22 = texture2D(uSampler, vTextureCoord); // mid center + vec4 c23 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y)); // mid right + + vec4 c31 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y + texelSize.y)); // bottom left + vec4 c32 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + texelSize.y)); // bottom center + vec4 c33 = texture2D(uSampler, vTextureCoord + texelSize); // bottom right + + gl_FragColor = + c11 * matrix[0] + c12 * matrix[1] + c13 * 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; +} diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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 deleted file mode 100644 index 9aba58f..0000000 --- a/src/filters/CrossHatchFilter.js +++ /dev/null @@ -1,92 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * A Cross Hatch effect filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function CrossHatchFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 1 / 512 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float blur;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', - - ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', - - ' if (lum < 1.00)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.75)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.50)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.3)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - '}' - ]; -} - -CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); -CrossHatchFilter.prototype.constructor = CrossHatchFilter; -module.exports = CrossHatchFilter; - -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/convolution/ConvolutionFilter.js b/src/filters/convolution/ConvolutionFilter.js new file mode 100644 index 0000000..694571f --- /dev/null +++ b/src/filters/convolution/ConvolutionFilter.js @@ -0,0 +1,87 @@ +var core = require('../../core'); + +/** + * 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.filters + * @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) +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/convolution.frag', 'utf8'), + // custom uniforms + { + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSize: { type: '2v', value: { x: 1 / width, y: 1 / height } } + } + ); +} + +ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; + +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); + } + }, + + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () + { + return 1/this.uniforms.texelSize.value.x; + }, + set: function (value) + { + this.uniforms.texelSize.value.x = 1/value; + } + }, + + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () + { + return 1/this.uniforms.texelSize.value.y; + }, + set: function (value) + { + this.uniforms.texelSize.value.y = 1/value; + } + } +}); diff --git a/src/filters/convolution/convolution.frag b/src/filters/convolution/convolution.frag new file mode 100644 index 0000000..e6fe7b5 --- /dev/null +++ b/src/filters/convolution/convolution.frag @@ -0,0 +1,29 @@ +precision mediump float; + +varying mediump vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec2 texelSize; +uniform float matrix[9]; + +void main(void) +{ + vec4 c11 = texture2D(uSampler, vTextureCoord - texelSize); // top left + vec4 c12 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - texelSize.y)); // top center + vec4 c13 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y - texelSize.y)); // top right + + vec4 c21 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y)); // mid left + vec4 c22 = texture2D(uSampler, vTextureCoord); // mid center + vec4 c23 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y)); // mid right + + vec4 c31 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y + texelSize.y)); // bottom left + vec4 c32 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + texelSize.y)); // bottom center + vec4 c33 = texture2D(uSampler, vTextureCoord + texelSize); // bottom right + + gl_FragColor = + c11 * matrix[0] + c12 * matrix[1] + c13 * 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; +} diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js new file mode 100644 index 0000000..fd1e410 --- /dev/null +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -0,0 +1,23 @@ +var core = require('../../core'), + blurFactor = 1 / 7000; + +/** + * A Cross Hatch effect filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function CrossHatchFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/crosshatch.frag', 'utf8') + ); +} + +CrossHatchFilter.prototype = Object.create(core.AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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 deleted file mode 100644 index 9aba58f..0000000 --- a/src/filters/CrossHatchFilter.js +++ /dev/null @@ -1,92 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * A Cross Hatch effect filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function CrossHatchFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 1 / 512 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float blur;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', - - ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', - - ' if (lum < 1.00)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.75)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.50)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.3)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - '}' - ]; -} - -CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); -CrossHatchFilter.prototype.constructor = CrossHatchFilter; -module.exports = CrossHatchFilter; - -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/convolution/ConvolutionFilter.js b/src/filters/convolution/ConvolutionFilter.js new file mode 100644 index 0000000..694571f --- /dev/null +++ b/src/filters/convolution/ConvolutionFilter.js @@ -0,0 +1,87 @@ +var core = require('../../core'); + +/** + * 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.filters + * @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) +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/convolution.frag', 'utf8'), + // custom uniforms + { + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSize: { type: '2v', value: { x: 1 / width, y: 1 / height } } + } + ); +} + +ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; + +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); + } + }, + + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () + { + return 1/this.uniforms.texelSize.value.x; + }, + set: function (value) + { + this.uniforms.texelSize.value.x = 1/value; + } + }, + + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () + { + return 1/this.uniforms.texelSize.value.y; + }, + set: function (value) + { + this.uniforms.texelSize.value.y = 1/value; + } + } +}); diff --git a/src/filters/convolution/convolution.frag b/src/filters/convolution/convolution.frag new file mode 100644 index 0000000..e6fe7b5 --- /dev/null +++ b/src/filters/convolution/convolution.frag @@ -0,0 +1,29 @@ +precision mediump float; + +varying mediump vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec2 texelSize; +uniform float matrix[9]; + +void main(void) +{ + vec4 c11 = texture2D(uSampler, vTextureCoord - texelSize); // top left + vec4 c12 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - texelSize.y)); // top center + vec4 c13 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y - texelSize.y)); // top right + + vec4 c21 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y)); // mid left + vec4 c22 = texture2D(uSampler, vTextureCoord); // mid center + vec4 c23 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y)); // mid right + + vec4 c31 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y + texelSize.y)); // bottom left + vec4 c32 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + texelSize.y)); // bottom center + vec4 c33 = texture2D(uSampler, vTextureCoord + texelSize); // bottom right + + gl_FragColor = + c11 * matrix[0] + c12 * matrix[1] + c13 * 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; +} diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js new file mode 100644 index 0000000..fd1e410 --- /dev/null +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -0,0 +1,23 @@ +var core = require('../../core'), + blurFactor = 1 / 7000; + +/** + * A Cross Hatch effect filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function CrossHatchFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/crosshatch.frag', 'utf8') + ); +} + +CrossHatchFilter.prototype = Object.create(core.AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; diff --git a/src/filters/crosshatch/crosshatch.frag b/src/filters/crosshatch/crosshatch.frag new file mode 100644 index 0000000..635ba4b --- /dev/null +++ b/src/filters/crosshatch/crosshatch.frag @@ -0,0 +1,44 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; + +void main(void) +{ + float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb); + + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); + + if (lum < 1.00) + { + if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } + + if (lum < 0.75) + { + if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } + + if (lum < 0.50) + { + if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } + + if (lum < 0.3) + { + if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } +} diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js deleted file mode 100644 index 3ce051e..0000000 --- a/src/filters/ConvolutionFilter.js +++ /dev/null @@ -1,118 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * 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 = { - 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 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 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 - - ' gl_FragColor = ', - ' c11 * matrix[0] + c12 * matrix[1] + c13 * 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;', - '}' - ]; -} - -ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); -ConvolutionFilter.prototype.constructor = ConvolutionFilter; -module.exports = ConvolutionFilter; - -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); - } - }, - - /** - * 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; - } - }, - - /** - * 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 deleted file mode 100644 index 9aba58f..0000000 --- a/src/filters/CrossHatchFilter.js +++ /dev/null @@ -1,92 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * A Cross Hatch effect filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function CrossHatchFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 1 / 512 } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform float blur;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', - - ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', - - ' if (lum < 1.00)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.75)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.50)', - ' {', - ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - - ' if (lum < 0.3)', - ' {', - ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)', - ' {', - ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', - ' }', - ' }', - '}' - ]; -} - -CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); -CrossHatchFilter.prototype.constructor = CrossHatchFilter; -module.exports = CrossHatchFilter; - -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/convolution/ConvolutionFilter.js b/src/filters/convolution/ConvolutionFilter.js new file mode 100644 index 0000000..694571f --- /dev/null +++ b/src/filters/convolution/ConvolutionFilter.js @@ -0,0 +1,87 @@ +var core = require('../../core'); + +/** + * 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.filters + * @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) +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/convolution.frag', 'utf8'), + // custom uniforms + { + matrix: { type: '1fv', value: new Float32Array(matrix) }, + texelSize: { type: '2v', value: { x: 1 / width, y: 1 / height } } + } + ); +} + +ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype); +ConvolutionFilter.prototype.constructor = ConvolutionFilter; +module.exports = ConvolutionFilter; + +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); + } + }, + + /** + * Width of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + width: { + get: function () + { + return 1/this.uniforms.texelSize.value.x; + }, + set: function (value) + { + this.uniforms.texelSize.value.x = 1/value; + } + }, + + /** + * Height of the object you are transforming + * + * @member {number} + * @memberof ConvolutionFilter# + */ + height: { + get: function () + { + return 1/this.uniforms.texelSize.value.y; + }, + set: function (value) + { + this.uniforms.texelSize.value.y = 1/value; + } + } +}); diff --git a/src/filters/convolution/convolution.frag b/src/filters/convolution/convolution.frag new file mode 100644 index 0000000..e6fe7b5 --- /dev/null +++ b/src/filters/convolution/convolution.frag @@ -0,0 +1,29 @@ +precision mediump float; + +varying mediump vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec2 texelSize; +uniform float matrix[9]; + +void main(void) +{ + vec4 c11 = texture2D(uSampler, vTextureCoord - texelSize); // top left + vec4 c12 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - texelSize.y)); // top center + vec4 c13 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y - texelSize.y)); // top right + + vec4 c21 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y)); // mid left + vec4 c22 = texture2D(uSampler, vTextureCoord); // mid center + vec4 c23 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y)); // mid right + + vec4 c31 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y + texelSize.y)); // bottom left + vec4 c32 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + texelSize.y)); // bottom center + vec4 c33 = texture2D(uSampler, vTextureCoord + texelSize); // bottom right + + gl_FragColor = + c11 * matrix[0] + c12 * matrix[1] + c13 * 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; +} diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js new file mode 100644 index 0000000..fd1e410 --- /dev/null +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -0,0 +1,23 @@ +var core = require('../../core'), + blurFactor = 1 / 7000; + +/** + * A Cross Hatch effect filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function CrossHatchFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/crosshatch.frag', 'utf8') + ); +} + +CrossHatchFilter.prototype = Object.create(core.AbstractFilter.prototype); +CrossHatchFilter.prototype.constructor = CrossHatchFilter; +module.exports = CrossHatchFilter; diff --git a/src/filters/crosshatch/crosshatch.frag b/src/filters/crosshatch/crosshatch.frag new file mode 100644 index 0000000..635ba4b --- /dev/null +++ b/src/filters/crosshatch/crosshatch.frag @@ -0,0 +1,44 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; + +void main(void) +{ + float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb); + + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); + + if (lum < 1.00) + { + if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } + + if (lum < 0.75) + { + if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } + + if (lum < 0.50) + { + if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } + + if (lum < 0.3) + { + if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) + { + gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); + } + } +} diff --git a/src/filters/index.js b/src/filters/index.js index a207db7..d945a6e 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -16,8 +16,8 @@ BlurYFilter: require('./blur/BlurYFilter'), ColorMatrixFilter: require('./color/ColorMatrixFilter'), ColorStepFilter: require('./color/ColorStepFilter'), - // ConvolutionFilter: require('./ConvolutionFilter'), - // CrossHatchFilter: require('./CrossHatchFilter'), + ConvolutionFilter: require('./convolution/ConvolutionFilter'), + CrossHatchFilter: require('./crosshatch/CrossHatchFilter'), DisplacementFilter: require('./displacement/DisplacementFilter'), DotScreenFilter: require('./dot/DotScreenFilter'), GrayFilter: require('./gray/GrayFilter'),