diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/rgb/RGBSplitFilter.js b/src/filters/rgb/RGBSplitFilter.js new file mode 100644 index 0000000..0933c43 --- /dev/null +++ b/src/filters/rgb/RGBSplitFilter.js @@ -0,0 +1,82 @@ +var core = require('../../core'); + +/** + * An RGB Split Filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function RGBSplitFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/rgbSplit.frag', 'utf8'), + // custom uniforms + { + red: { type: 'v2', value: { x: 20, y: 20 } }, + green: { type: 'v2', value: { x: -20, y: 20 } }, + blue: { type: 'v2', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } + } + ); +} + +RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; + +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () + { + return this.uniforms.red.value; + }, + set: function (value) + { + this.uniforms.red.value = value; + } + }, + + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () + { + return this.uniforms.green.value; + }, + set: function (value) + { + this.uniforms.green.value = value; + } + }, + + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () + { + return this.uniforms.blue.value; + }, + set: function (value) + { + this.uniforms.blue.value = value; + } + } +}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/rgb/RGBSplitFilter.js b/src/filters/rgb/RGBSplitFilter.js new file mode 100644 index 0000000..0933c43 --- /dev/null +++ b/src/filters/rgb/RGBSplitFilter.js @@ -0,0 +1,82 @@ +var core = require('../../core'); + +/** + * An RGB Split Filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function RGBSplitFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/rgbSplit.frag', 'utf8'), + // custom uniforms + { + red: { type: 'v2', value: { x: 20, y: 20 } }, + green: { type: 'v2', value: { x: -20, y: 20 } }, + blue: { type: 'v2', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } + } + ); +} + +RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; + +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () + { + return this.uniforms.red.value; + }, + set: function (value) + { + this.uniforms.red.value = value; + } + }, + + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () + { + return this.uniforms.green.value; + }, + set: function (value) + { + this.uniforms.green.value = value; + } + }, + + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () + { + return this.uniforms.blue.value; + }, + set: function (value) + { + this.uniforms.blue.value = value; + } + } +}); diff --git a/src/filters/rgb/rgbSplit.frag b/src/filters/rgb/rgbSplit.frag new file mode 100644 index 0000000..3ef6538 --- /dev/null +++ b/src/filters/rgb/rgbSplit.frag @@ -0,0 +1,17 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec4 dimensions; +uniform vec2 red; +uniform vec2 green; +uniform vec2 blue; + +void main(void) +{ + gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r; + gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g; + gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b; + gl_FragColor.a = texture2D(uSampler, vTextureCoord).a; +} diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/rgb/RGBSplitFilter.js b/src/filters/rgb/RGBSplitFilter.js new file mode 100644 index 0000000..0933c43 --- /dev/null +++ b/src/filters/rgb/RGBSplitFilter.js @@ -0,0 +1,82 @@ +var core = require('../../core'); + +/** + * An RGB Split Filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function RGBSplitFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/rgbSplit.frag', 'utf8'), + // custom uniforms + { + red: { type: 'v2', value: { x: 20, y: 20 } }, + green: { type: 'v2', value: { x: -20, y: 20 } }, + blue: { type: 'v2', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } + } + ); +} + +RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; + +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () + { + return this.uniforms.red.value; + }, + set: function (value) + { + this.uniforms.red.value = value; + } + }, + + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () + { + return this.uniforms.green.value; + }, + set: function (value) + { + this.uniforms.green.value = value; + } + }, + + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () + { + return this.uniforms.blue.value; + }, + set: function (value) + { + this.uniforms.blue.value = value; + } + } +}); diff --git a/src/filters/rgb/rgbSplit.frag b/src/filters/rgb/rgbSplit.frag new file mode 100644 index 0000000..3ef6538 --- /dev/null +++ b/src/filters/rgb/rgbSplit.frag @@ -0,0 +1,17 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec4 dimensions; +uniform vec2 red; +uniform vec2 green; +uniform vec2 blue; + +void main(void) +{ + gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r; + gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g; + gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b; + gl_FragColor.a = texture2D(uSampler, vTextureCoord).a; +} diff --git a/src/filters/tiltshift/TiltShiftFilter.js b/src/filters/tiltshift/TiltShiftFilter.js new file mode 100644 index 0000000..94b8cdb --- /dev/null +++ b/src/filters/tiltshift/TiltShiftFilter.js @@ -0,0 +1,108 @@ +var core = require('../../core'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftFilter() +{ + core.AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); +} + +TiltShiftFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; + +TiltShiftFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + this.tiltShiftXFilter.applyFilter(renderer, input, renderTarget); + + this.tiltShiftYFilter.applyFilter(renderer, renderTarget, output); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () + { + return this.tiltShiftXFilter.blur; + }, + set: function (value) + { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () + { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) + { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () + { + return this.tiltShiftXFilter.start; + }, + set: function (value) + { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () + { + return this.tiltShiftXFilter.end; + }, + set: function (value) + { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } + }, +}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/rgb/RGBSplitFilter.js b/src/filters/rgb/RGBSplitFilter.js new file mode 100644 index 0000000..0933c43 --- /dev/null +++ b/src/filters/rgb/RGBSplitFilter.js @@ -0,0 +1,82 @@ +var core = require('../../core'); + +/** + * An RGB Split Filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function RGBSplitFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/rgbSplit.frag', 'utf8'), + // custom uniforms + { + red: { type: 'v2', value: { x: 20, y: 20 } }, + green: { type: 'v2', value: { x: -20, y: 20 } }, + blue: { type: 'v2', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } + } + ); +} + +RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; + +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () + { + return this.uniforms.red.value; + }, + set: function (value) + { + this.uniforms.red.value = value; + } + }, + + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () + { + return this.uniforms.green.value; + }, + set: function (value) + { + this.uniforms.green.value = value; + } + }, + + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () + { + return this.uniforms.blue.value; + }, + set: function (value) + { + this.uniforms.blue.value = value; + } + } +}); diff --git a/src/filters/rgb/rgbSplit.frag b/src/filters/rgb/rgbSplit.frag new file mode 100644 index 0000000..3ef6538 --- /dev/null +++ b/src/filters/rgb/rgbSplit.frag @@ -0,0 +1,17 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec4 dimensions; +uniform vec2 red; +uniform vec2 green; +uniform vec2 blue; + +void main(void) +{ + gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r; + gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g; + gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b; + gl_FragColor.a = texture2D(uSampler, vTextureCoord).a; +} diff --git a/src/filters/tiltshift/TiltShiftFilter.js b/src/filters/tiltshift/TiltShiftFilter.js new file mode 100644 index 0000000..94b8cdb --- /dev/null +++ b/src/filters/tiltshift/TiltShiftFilter.js @@ -0,0 +1,108 @@ +var core = require('../../core'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftFilter() +{ + core.AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); +} + +TiltShiftFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; + +TiltShiftFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + this.tiltShiftXFilter.applyFilter(renderer, input, renderTarget); + + this.tiltShiftYFilter.applyFilter(renderer, renderTarget, output); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () + { + return this.tiltShiftXFilter.blur; + }, + set: function (value) + { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () + { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) + { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () + { + return this.tiltShiftXFilter.start; + }, + set: function (value) + { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () + { + return this.tiltShiftXFilter.end; + }, + set: function (value) + { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } + }, +}); diff --git a/src/filters/tiltshift/TiltShiftXFilter.js b/src/filters/tiltshift/TiltShiftXFilter.js new file mode 100644 index 0000000..7b87c08 --- /dev/null +++ b/src/filters/tiltshift/TiltShiftXFilter.js @@ -0,0 +1,126 @@ +var core = require('../../core'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShiftXFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/tiltShift.frag', 'utf8'), + // custom uniforms + { + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } }, + end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } }, + delta: { type: 'v2', value: { x: 30, y: 30 } }, + texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } } + } + ); + + this.updateDelta(); +} + +TiltShiftXFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; +module.exports = TiltShiftXFilter; + +/** + * Updates the filter delta values. + * + */ +TiltShiftXFilter.prototype.updateDelta = function () +{ + var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; + var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; + var d = Math.sqrt(dx * dx + dy * dy); + + // TODO (cengler) - These two lines are the only lines that are different between + // the TileShiftXFilter and TiltShiftYFilter.... + this.uniforms.delta.value.x = dx / d; + this.uniforms.delta.value.y = dy / d; +}; + +Object.defineProperties(TiltShiftXFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + blur: { + get: function () + { + return this.uniforms.blur.value; + }, + set: function (value) + { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + gradientBlur: { + get: function () + { + return this.uniforms.gradientBlur.value; + }, + set: function (value) + { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The X value to start the effect at. + * + * @member {Point} + * @memberof TilttShiftXFilter# + */ + start: { + get: function () + { + return this.uniforms.start.value; + }, + set: function (value) + { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The X value to end the effect at. + * + * @member {Point} + * @memberof TilttShiftXFilter# + */ + end: { + get: function () + { + return this.uniforms.end.value; + }, + set: function (value) + { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/rgb/RGBSplitFilter.js b/src/filters/rgb/RGBSplitFilter.js new file mode 100644 index 0000000..0933c43 --- /dev/null +++ b/src/filters/rgb/RGBSplitFilter.js @@ -0,0 +1,82 @@ +var core = require('../../core'); + +/** + * An RGB Split Filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function RGBSplitFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/rgbSplit.frag', 'utf8'), + // custom uniforms + { + red: { type: 'v2', value: { x: 20, y: 20 } }, + green: { type: 'v2', value: { x: -20, y: 20 } }, + blue: { type: 'v2', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } + } + ); +} + +RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; + +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () + { + return this.uniforms.red.value; + }, + set: function (value) + { + this.uniforms.red.value = value; + } + }, + + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () + { + return this.uniforms.green.value; + }, + set: function (value) + { + this.uniforms.green.value = value; + } + }, + + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () + { + return this.uniforms.blue.value; + }, + set: function (value) + { + this.uniforms.blue.value = value; + } + } +}); diff --git a/src/filters/rgb/rgbSplit.frag b/src/filters/rgb/rgbSplit.frag new file mode 100644 index 0000000..3ef6538 --- /dev/null +++ b/src/filters/rgb/rgbSplit.frag @@ -0,0 +1,17 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec4 dimensions; +uniform vec2 red; +uniform vec2 green; +uniform vec2 blue; + +void main(void) +{ + gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r; + gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g; + gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b; + gl_FragColor.a = texture2D(uSampler, vTextureCoord).a; +} diff --git a/src/filters/tiltshift/TiltShiftFilter.js b/src/filters/tiltshift/TiltShiftFilter.js new file mode 100644 index 0000000..94b8cdb --- /dev/null +++ b/src/filters/tiltshift/TiltShiftFilter.js @@ -0,0 +1,108 @@ +var core = require('../../core'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftFilter() +{ + core.AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); +} + +TiltShiftFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; + +TiltShiftFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + this.tiltShiftXFilter.applyFilter(renderer, input, renderTarget); + + this.tiltShiftYFilter.applyFilter(renderer, renderTarget, output); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () + { + return this.tiltShiftXFilter.blur; + }, + set: function (value) + { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () + { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) + { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () + { + return this.tiltShiftXFilter.start; + }, + set: function (value) + { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () + { + return this.tiltShiftXFilter.end; + }, + set: function (value) + { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } + }, +}); diff --git a/src/filters/tiltshift/TiltShiftXFilter.js b/src/filters/tiltshift/TiltShiftXFilter.js new file mode 100644 index 0000000..7b87c08 --- /dev/null +++ b/src/filters/tiltshift/TiltShiftXFilter.js @@ -0,0 +1,126 @@ +var core = require('../../core'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShiftXFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/tiltShift.frag', 'utf8'), + // custom uniforms + { + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } }, + end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } }, + delta: { type: 'v2', value: { x: 30, y: 30 } }, + texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } } + } + ); + + this.updateDelta(); +} + +TiltShiftXFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; +module.exports = TiltShiftXFilter; + +/** + * Updates the filter delta values. + * + */ +TiltShiftXFilter.prototype.updateDelta = function () +{ + var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; + var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; + var d = Math.sqrt(dx * dx + dy * dy); + + // TODO (cengler) - These two lines are the only lines that are different between + // the TileShiftXFilter and TiltShiftYFilter.... + this.uniforms.delta.value.x = dx / d; + this.uniforms.delta.value.y = dy / d; +}; + +Object.defineProperties(TiltShiftXFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + blur: { + get: function () + { + return this.uniforms.blur.value; + }, + set: function (value) + { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + gradientBlur: { + get: function () + { + return this.uniforms.gradientBlur.value; + }, + set: function (value) + { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The X value to start the effect at. + * + * @member {Point} + * @memberof TilttShiftXFilter# + */ + start: { + get: function () + { + return this.uniforms.start.value; + }, + set: function (value) + { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The X value to end the effect at. + * + * @member {Point} + * @memberof TilttShiftXFilter# + */ + end: { + get: function () + { + return this.uniforms.end.value; + }, + set: function (value) + { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/tiltshift/TiltShiftYFilter.js b/src/filters/tiltshift/TiltShiftYFilter.js new file mode 100644 index 0000000..fca43b7 --- /dev/null +++ b/src/filters/tiltshift/TiltShiftYFilter.js @@ -0,0 +1,127 @@ +var core = require('../../core'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShiftYFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/tiltShift.frag', 'utf8'), + // custom uniforms + { + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } }, + end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } }, + delta: { type: 'v2', value: { x: 30, y: 30 } }, + texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } } + } + ); + + this.updateDelta(); +} + +TiltShiftYFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; +module.exports = TiltShiftYFilter; + +/** + * Updates the filter delta values. + * + */ +TiltShiftYFilter.prototype.updateDelta = function () +{ + var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; + var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; + var d = Math.sqrt(dx * dx + dy * dy); + + // TODO (cengler) - These two lines are the only lines that are different between + // the TileShiftXFilter and TiltShiftYFilter.... + this.uniforms.delta.value.x = -dy / d; + this.uniforms.delta.value.y = dx / d; +}; + +Object.defineProperties(TiltShiftYFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + blur: { + get: function () + { + return this.uniforms.blur.value; + }, + set: function (value) + { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + gradientBlur: { + get: function () + { + return this.uniforms.gradientBlur.value; + }, + set: function (value) + { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + start: { + get: function () + { + return this.uniforms.start.value; + }, + set: function (value) + { + console.log('START!', value); + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + end: { + get: function () + { + return this.uniforms.end.value; + }, + set: function (value) + { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js deleted file mode 100644 index 679c460..0000000 --- a/src/filters/RGBSplitFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * An RGB Split Filter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function RGBSplitFilter() -{ - AbstractFilter.call(this); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: { type: '2f', value: { x: 20, y: 20 } }, - green: { type: '2f', value: { x: -20, y: 20 } }, - blue: { type: '2f', value: { x: 20, y: -20 } }, - dimensions: { type: '4fv', value: [0, 0, 0, 0] } - }; - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 red;', - 'uniform vec2 green;', - 'uniform vec2 blue;', - 'uniform vec4 dimensions;', - 'uniform sampler2D uSampler;', - - 'void main(void)', - '{', - ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', - ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', - ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', - ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', - '}' - ]; -} - -RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); -RGBSplitFilter.prototype.constructor = RGBSplitFilter; -module.exports = RGBSplitFilter; - -Object.defineProperties(RGBSplitFilter.prototype, { - /** - * Red channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - red: { - get: function () - { - return this.uniforms.red.value; - }, - set: function (value) - { - this.uniforms.red.value = value; - } - }, - - /** - * Green channel offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - green: { - get: function () - { - return this.uniforms.green.value; - }, - set: function (value) - { - this.uniforms.green.value = value; - } - }, - - /** - * Blue offset. - * - * @member {Point} - * @memberof RGBSplitFilter# - */ - blue: { - get: function () - { - return this.uniforms.blue.value; - }, - set: function (value) - { - this.uniforms.blue.value = value; - } - } -}); diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js deleted file mode 100644 index e2ec76d..0000000 --- a/src/filters/TiltShiftFilter.js +++ /dev/null @@ -1,102 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'), - TiltShiftXFilter = require('./TiltShiftXFilter'), - TiltShiftYFilter = require('./TiltShiftYFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftFilter() -{ - AbstractFilter.call(this); - - this.tiltShiftXFilter = new TiltShiftXFilter(); - this.tiltShiftYFilter = new TiltShiftYFilter(); - - this.tiltShiftXFilter.updateDelta(); - this.tiltShiftXFilter.updateDelta(); - - this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -} - -TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftFilter.prototype.constructor = TiltShiftFilter; -module.exports = TiltShiftFilter; - -Object.defineProperties(TiltShiftFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - blur: { - get: function () - { - return this.tiltShiftXFilter.blur; - }, - set: function (value) - { - this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - gradientBlur: { - get: function () - { - return this.tiltShiftXFilter.gradientBlur; - }, - set: function (value) - { - this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - start: { - get: function () - { - return this.tiltShiftXFilter.start; - }, - set: function (value) - { - this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftFilter# - */ - end: { - get: function () - { - return this.tiltShiftXFilter.end; - }, - set: function (value) - { - this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; - } - }, -}); diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js deleted file mode 100644 index d6b81eb..0000000 --- a/src/filters/TiltShiftXFilter.js +++ /dev/null @@ -1,163 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftXFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftXFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; -module.exports = TiltShiftXFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftXFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - - this.uniforms.delta.value.x = dx / d; - this.uniforms.delta.value.y = dy / d; -}; - - -Object.defineProperties(TiltShiftXFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The X value to start the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The X value to end the effect at. - * - * @member {number} - * @memberof TilttShiftXFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js deleted file mode 100644 index d8f75a3..0000000 --- a/src/filters/TiltShiftYFilter.js +++ /dev/null @@ -1,161 +0,0 @@ -var AbstractFilter = require('./AbstractFilter'); - -/** - * @author Vico @vicocotea - * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ - */ - -/** - * A TiltShiftYFilter. - * - * @class - * @extends AbstractFilter - * @namespace PIXI - */ -function TiltShiftYFilter() -{ - AbstractFilter.call(this); - - // set the uniforms - this.uniforms = { - blur: { type: '1f', value: 100 }, - gradientBlur: { type: '1f', value: 600 }, - start: { type: '2f', value: { x: 0, y: window.screenHeight / 2 } }, - end: { type: '2f', value: { x: 600, y: window.screenHeight / 2 } }, - delta: { type: '2f', value: { x: 30, y: 30 } }, - texSize: { type: '2f', value: { x: window.screenWidth, y: window.screenHeight } } - }; - - this.updateDelta(); - - this.fragmentSrc = [ - 'precision mediump float;', - - 'varying vec2 vTextureCoord;', - - 'uniform sampler2D uSampler;', - 'uniform float blur;', - 'uniform float gradientBlur;', - 'uniform vec2 start;', - 'uniform vec2 end;', - 'uniform vec2 delta;', - 'uniform vec2 texSize;', - - 'float random(vec3 scale, float seed)', - '{', - ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', - '}', - - 'void main(void)', - '{', - ' vec4 color = vec4(0.0);', - ' float total = 0.0;', - - ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', - ' vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));', - ' float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;', - - ' for (float t = -30.0; t <= 30.0; t++)', - ' {', - ' float percent = (t + offset - 0.5) / 30.0;', - ' float weight = 1.0 - abs(percent);', - ' vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);', - ' sample.rgb *= sample.a;', - ' color += sample * weight;', - ' total += weight;', - ' }', - - ' gl_FragColor = color / total;', - ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', - '}' - ]; -} - -TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); -TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; -module.exports = TiltShiftYFilter; - -/** - * Updates the filter delta values. - * - */ -TiltShiftYFilter.prototype.updateDelta = function () -{ - var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; - var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; - var d = Math.sqrt(dx * dx + dy * dy); - this.uniforms.delta.value.x = -dy / d; - this.uniforms.delta.value.y = dx / d; -}; - -Object.defineProperties(TiltShiftYFilter.prototype, { - /** - * The strength of the blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - blur: { - get: function () - { - return this.uniforms.blur.value; - }, - set: function (value) - { - this.uniforms.blur.value = value; - } - }, - - /** - * The strength of the gradient blur. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - gradientBlur: { - get: function () - { - return this.uniforms.gradientBlur.value; - }, - set: function (value) - { - this.uniforms.gradientBlur.value = value; - } - }, - - /** - * The Y value to start the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - start: { - get: function () - { - return this.uniforms.start.value; - }, - set: function (value) - { - this.uniforms.start.value = value; - this.updateDelta(); - } - }, - - /** - * The Y value to end the effect at. - * - * @member {number} - * @memberof TiltShiftYFilter# - */ - end: { - get: function () - { - return this.uniforms.end.value; - }, - set: function (value) - { - this.uniforms.end.value = value; - this.updateDelta(); - } - } -}); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 0557035..fe8cc41 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -16,8 +16,6 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); - - this.defaultFilter = new core.AbstractFilter(); } BlurFilter.prototype = Object.create(core.AbstractFilter.prototype); diff --git a/src/filters/crosshatch/CrossHatchFilter.js b/src/filters/crosshatch/CrossHatchFilter.js index fd1e410..340eb91 100644 --- a/src/filters/crosshatch/CrossHatchFilter.js +++ b/src/filters/crosshatch/CrossHatchFilter.js @@ -1,5 +1,4 @@ -var core = require('../../core'), - blurFactor = 1 / 7000; +var core = require('../../core'); /** * A Cross Hatch effect filter. diff --git a/src/filters/index.js b/src/filters/index.js index d945a6e..42045e8 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,12 +25,12 @@ NoiseFilter: require('./noise/NoiseFilter'), // NormalMapFilter: require('./NormalMapFilter'), PixelateFilter: require('./pixelate/PixelateFilter'), - // RGBSplitFilter: require('./RGBSplitFilter'), + RGBSplitFilter: require('./rgb/RGBSplitFilter'), ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), SmartBlurFilter: require('./blur/SmartBlurFilter'), - // TiltShiftFilter: require('./TiltShiftFilter'), - // TiltShiftXFilter: require('./TiltShiftXFilter'), - // TiltShiftYFilter: require('./TiltShiftYFilter'), + TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), + TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), + TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), // TwistFilter: require('./TwistFilter') }; diff --git a/src/filters/rgb/RGBSplitFilter.js b/src/filters/rgb/RGBSplitFilter.js new file mode 100644 index 0000000..0933c43 --- /dev/null +++ b/src/filters/rgb/RGBSplitFilter.js @@ -0,0 +1,82 @@ +var core = require('../../core'); + +/** + * An RGB Split Filter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI + */ +function RGBSplitFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/rgbSplit.frag', 'utf8'), + // custom uniforms + { + red: { type: 'v2', value: { x: 20, y: 20 } }, + green: { type: 'v2', value: { x: -20, y: 20 } }, + blue: { type: 'v2', value: { x: 20, y: -20 } }, + dimensions: { type: '4fv', value: [0, 0, 0, 0] } + } + ); +} + +RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype); +RGBSplitFilter.prototype.constructor = RGBSplitFilter; +module.exports = RGBSplitFilter; + +Object.defineProperties(RGBSplitFilter.prototype, { + /** + * Red channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + red: { + get: function () + { + return this.uniforms.red.value; + }, + set: function (value) + { + this.uniforms.red.value = value; + } + }, + + /** + * Green channel offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + green: { + get: function () + { + return this.uniforms.green.value; + }, + set: function (value) + { + this.uniforms.green.value = value; + } + }, + + /** + * Blue offset. + * + * @member {Point} + * @memberof RGBSplitFilter# + */ + blue: { + get: function () + { + return this.uniforms.blue.value; + }, + set: function (value) + { + this.uniforms.blue.value = value; + } + } +}); diff --git a/src/filters/rgb/rgbSplit.frag b/src/filters/rgb/rgbSplit.frag new file mode 100644 index 0000000..3ef6538 --- /dev/null +++ b/src/filters/rgb/rgbSplit.frag @@ -0,0 +1,17 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform vec4 dimensions; +uniform vec2 red; +uniform vec2 green; +uniform vec2 blue; + +void main(void) +{ + gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r; + gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g; + gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b; + gl_FragColor.a = texture2D(uSampler, vTextureCoord).a; +} diff --git a/src/filters/tiltshift/TiltShiftFilter.js b/src/filters/tiltshift/TiltShiftFilter.js new file mode 100644 index 0000000..94b8cdb --- /dev/null +++ b/src/filters/tiltshift/TiltShiftFilter.js @@ -0,0 +1,108 @@ +var core = require('../../core'), + TiltShiftXFilter = require('./TiltShiftXFilter'), + TiltShiftYFilter = require('./TiltShiftYFilter'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftFilter() +{ + core.AbstractFilter.call(this); + + this.tiltShiftXFilter = new TiltShiftXFilter(); + this.tiltShiftYFilter = new TiltShiftYFilter(); +} + +TiltShiftFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftFilter.prototype.constructor = TiltShiftFilter; +module.exports = TiltShiftFilter; + +TiltShiftFilter.prototype.applyFilter = function (renderer, input, output) +{ + var renderTarget = renderer.filterManager.getRenderTarget(true); + + this.tiltShiftXFilter.applyFilter(renderer, input, renderTarget); + + this.tiltShiftYFilter.applyFilter(renderer, renderTarget, output); + + renderer.filterManager.returnRenderTarget(renderTarget); +}; + +Object.defineProperties(TiltShiftFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + blur: { + get: function () + { + return this.tiltShiftXFilter.blur; + }, + set: function (value) + { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + gradientBlur: { + get: function () + { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function (value) + { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + start: { + get: function () + { + return this.tiltShiftXFilter.start; + }, + set: function (value) + { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftFilter# + */ + end: { + get: function () + { + return this.tiltShiftXFilter.end; + }, + set: function (value) + { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } + }, +}); diff --git a/src/filters/tiltshift/TiltShiftXFilter.js b/src/filters/tiltshift/TiltShiftXFilter.js new file mode 100644 index 0000000..7b87c08 --- /dev/null +++ b/src/filters/tiltshift/TiltShiftXFilter.js @@ -0,0 +1,126 @@ +var core = require('../../core'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShiftXFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftXFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/tiltShift.frag', 'utf8'), + // custom uniforms + { + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } }, + end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } }, + delta: { type: 'v2', value: { x: 30, y: 30 } }, + texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } } + } + ); + + this.updateDelta(); +} + +TiltShiftXFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; +module.exports = TiltShiftXFilter; + +/** + * Updates the filter delta values. + * + */ +TiltShiftXFilter.prototype.updateDelta = function () +{ + var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; + var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; + var d = Math.sqrt(dx * dx + dy * dy); + + // TODO (cengler) - These two lines are the only lines that are different between + // the TileShiftXFilter and TiltShiftYFilter.... + this.uniforms.delta.value.x = dx / d; + this.uniforms.delta.value.y = dy / d; +}; + +Object.defineProperties(TiltShiftXFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + blur: { + get: function () + { + return this.uniforms.blur.value; + }, + set: function (value) + { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TilttShiftXFilter# + */ + gradientBlur: { + get: function () + { + return this.uniforms.gradientBlur.value; + }, + set: function (value) + { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The X value to start the effect at. + * + * @member {Point} + * @memberof TilttShiftXFilter# + */ + start: { + get: function () + { + return this.uniforms.start.value; + }, + set: function (value) + { + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The X value to end the effect at. + * + * @member {Point} + * @memberof TilttShiftXFilter# + */ + end: { + get: function () + { + return this.uniforms.end.value; + }, + set: function (value) + { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/tiltshift/TiltShiftYFilter.js b/src/filters/tiltshift/TiltShiftYFilter.js new file mode 100644 index 0000000..fca43b7 --- /dev/null +++ b/src/filters/tiltshift/TiltShiftYFilter.js @@ -0,0 +1,127 @@ +var core = require('../../core'); + +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * A TiltShiftYFilter. + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function TiltShiftYFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/tiltShift.frag', 'utf8'), + // custom uniforms + { + blur: { type: '1f', value: 100 }, + gradientBlur: { type: '1f', value: 600 }, + start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } }, + end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } }, + delta: { type: 'v2', value: { x: 30, y: 30 } }, + texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } } + } + ); + + this.updateDelta(); +} + +TiltShiftYFilter.prototype = Object.create(core.AbstractFilter.prototype); +TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; +module.exports = TiltShiftYFilter; + +/** + * Updates the filter delta values. + * + */ +TiltShiftYFilter.prototype.updateDelta = function () +{ + var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; + var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; + var d = Math.sqrt(dx * dx + dy * dy); + + // TODO (cengler) - These two lines are the only lines that are different between + // the TileShiftXFilter and TiltShiftYFilter.... + this.uniforms.delta.value.x = -dy / d; + this.uniforms.delta.value.y = dx / d; +}; + +Object.defineProperties(TiltShiftYFilter.prototype, { + /** + * The strength of the blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + blur: { + get: function () + { + return this.uniforms.blur.value; + }, + set: function (value) + { + this.uniforms.blur.value = value; + } + }, + + /** + * The strength of the gradient blur. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + gradientBlur: { + get: function () + { + return this.uniforms.gradientBlur.value; + }, + set: function (value) + { + this.uniforms.gradientBlur.value = value; + } + }, + + /** + * The Y value to start the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + start: { + get: function () + { + return this.uniforms.start.value; + }, + set: function (value) + { + console.log('START!', value); + this.uniforms.start.value = value; + this.updateDelta(); + } + }, + + /** + * The Y value to end the effect at. + * + * @member {number} + * @memberof TiltShiftYFilter# + */ + end: { + get: function () + { + return this.uniforms.end.value; + }, + set: function (value) + { + this.uniforms.end.value = value; + this.updateDelta(); + } + } +}); diff --git a/src/filters/tiltshift/tiltShift.frag b/src/filters/tiltshift/tiltShift.frag new file mode 100644 index 0000000..1ee0c64 --- /dev/null +++ b/src/filters/tiltshift/tiltShift.frag @@ -0,0 +1,39 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float blur; +uniform float gradientBlur; +uniform vec2 start; +uniform vec2 end; +uniform vec2 delta; +uniform vec2 texSize; + +float random(vec3 scale, float seed) +{ + return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed); +} + +void main(void) +{ + vec4 color = vec4(0.0); + float total = 0.0; + + float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0); + vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x)); + float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur; + + for (float t = -30.0; t <= 30.0; t++) + { + float percent = (t + offset - 0.5) / 30.0; + float weight = 1.0 - abs(percent); + vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius); + sample.rgb *= sample.a; + color += sample * weight; + total += weight; + } + + gl_FragColor = color / total; + gl_FragColor.rgb /= gl_FragColor.a + 0.00001; +}