diff --git a/src/pixi/filters/AsciiFilter.js b/src/pixi/filters/AsciiFilter.js new file mode 100644 index 0000000..a713712 --- /dev/null +++ b/src/pixi/filters/AsciiFilter.js @@ -0,0 +1,73 @@ +/** + * @author Vico @vicocotea + * original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h + */ + +PIXI.AsciiFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '1f', value:8} + }; + + this.fragmentSrc = [ + + 'precision mediump float;', + 'uniform vec4 dimensions;', + 'uniform float pixelSize;', + 'uniform sampler2D uSampler;', + + 'float character(float n, vec2 p)', + '{', + ' p = floor(p*vec2(4.0, -4.0) + 2.5);', + ' if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)', + ' {', + ' if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;', + ' }', + ' return 0.0;', + '}', + + 'void main()', + '{', + ' vec2 uv = gl_FragCoord.xy;', + ' vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;', + + ' #ifdef HAS_GREENSCREEN', + ' float gray = (col.r + col.b)/2.0;', + ' #else', + ' float gray = (col.r + col.g + col.b)/3.0;', + ' #endif', + + ' float n = 65536.0; // .', + ' if (gray > 0.2) n = 65600.0; // :', + ' if (gray > 0.3) n = 332772.0; // *', + ' if (gray > 0.4) n = 15255086.0; // o', + ' if (gray > 0.5) n = 23385164.0; // &', + ' if (gray > 0.6) n = 15252014.0; // 8', + ' if (gray > 0.7) n = 13199452.0; // @', + ' if (gray > 0.8) n = 11512810.0; // #', + + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', + ' col = col * character(n, p);', + + ' gl_FragColor = vec4(col, 1.0);', + '}' + ]; +}; + +PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { + get: function() { + return this.uniforms.pixelSize.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.pixelSize.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/AsciiFilter.js b/src/pixi/filters/AsciiFilter.js new file mode 100644 index 0000000..a713712 --- /dev/null +++ b/src/pixi/filters/AsciiFilter.js @@ -0,0 +1,73 @@ +/** + * @author Vico @vicocotea + * original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h + */ + +PIXI.AsciiFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '1f', value:8} + }; + + this.fragmentSrc = [ + + 'precision mediump float;', + 'uniform vec4 dimensions;', + 'uniform float pixelSize;', + 'uniform sampler2D uSampler;', + + 'float character(float n, vec2 p)', + '{', + ' p = floor(p*vec2(4.0, -4.0) + 2.5);', + ' if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)', + ' {', + ' if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;', + ' }', + ' return 0.0;', + '}', + + 'void main()', + '{', + ' vec2 uv = gl_FragCoord.xy;', + ' vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;', + + ' #ifdef HAS_GREENSCREEN', + ' float gray = (col.r + col.b)/2.0;', + ' #else', + ' float gray = (col.r + col.g + col.b)/3.0;', + ' #endif', + + ' float n = 65536.0; // .', + ' if (gray > 0.2) n = 65600.0; // :', + ' if (gray > 0.3) n = 332772.0; // *', + ' if (gray > 0.4) n = 15255086.0; // o', + ' if (gray > 0.5) n = 23385164.0; // &', + ' if (gray > 0.6) n = 15252014.0; // 8', + ' if (gray > 0.7) n = 13199452.0; // @', + ' if (gray > 0.8) n = 11512810.0; // #', + + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', + ' col = col * character(n, p);', + + ' gl_FragColor = vec4(col, 1.0);', + '}' + ]; +}; + +PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { + get: function() { + return this.uniforms.pixelSize.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.pixelSize.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/NoiseFilter.js b/src/pixi/filters/NoiseFilter.js new file mode 100644 index 0000000..e52946d --- /dev/null +++ b/src/pixi/filters/NoiseFilter.js @@ -0,0 +1,49 @@ +/** + * @author Vico @vicocotea + * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js + */ + +PIXI.NoiseFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + noise: {type: '1f', value: 0.5} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float noise;', + 'varying vec2 vTextureCoord;', + + 'float rand(vec2 co) {', + ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', + '}', + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', + ' color.r += diff;', + ' color.g += diff;', + ' color.b += diff;', + + ' gl_FragColor = color;', + '}' + ]; +}; + +PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { + get: function() { + return this.uniforms.noise.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.noise.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/AsciiFilter.js b/src/pixi/filters/AsciiFilter.js new file mode 100644 index 0000000..a713712 --- /dev/null +++ b/src/pixi/filters/AsciiFilter.js @@ -0,0 +1,73 @@ +/** + * @author Vico @vicocotea + * original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h + */ + +PIXI.AsciiFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '1f', value:8} + }; + + this.fragmentSrc = [ + + 'precision mediump float;', + 'uniform vec4 dimensions;', + 'uniform float pixelSize;', + 'uniform sampler2D uSampler;', + + 'float character(float n, vec2 p)', + '{', + ' p = floor(p*vec2(4.0, -4.0) + 2.5);', + ' if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)', + ' {', + ' if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;', + ' }', + ' return 0.0;', + '}', + + 'void main()', + '{', + ' vec2 uv = gl_FragCoord.xy;', + ' vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;', + + ' #ifdef HAS_GREENSCREEN', + ' float gray = (col.r + col.b)/2.0;', + ' #else', + ' float gray = (col.r + col.g + col.b)/3.0;', + ' #endif', + + ' float n = 65536.0; // .', + ' if (gray > 0.2) n = 65600.0; // :', + ' if (gray > 0.3) n = 332772.0; // *', + ' if (gray > 0.4) n = 15255086.0; // o', + ' if (gray > 0.5) n = 23385164.0; // &', + ' if (gray > 0.6) n = 15252014.0; // 8', + ' if (gray > 0.7) n = 13199452.0; // @', + ' if (gray > 0.8) n = 11512810.0; // #', + + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', + ' col = col * character(n, p);', + + ' gl_FragColor = vec4(col, 1.0);', + '}' + ]; +}; + +PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { + get: function() { + return this.uniforms.pixelSize.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.pixelSize.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/NoiseFilter.js b/src/pixi/filters/NoiseFilter.js new file mode 100644 index 0000000..e52946d --- /dev/null +++ b/src/pixi/filters/NoiseFilter.js @@ -0,0 +1,49 @@ +/** + * @author Vico @vicocotea + * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js + */ + +PIXI.NoiseFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + noise: {type: '1f', value: 0.5} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float noise;', + 'varying vec2 vTextureCoord;', + + 'float rand(vec2 co) {', + ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', + '}', + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', + ' color.r += diff;', + ' color.g += diff;', + ' color.b += diff;', + + ' gl_FragColor = color;', + '}' + ]; +}; + +PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { + get: function() { + return this.uniforms.noise.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.noise.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/TiltShiftFilter.js b/src/pixi/filters/TiltShiftFilter.js new file mode 100644 index 0000000..7f517ac --- /dev/null +++ b/src/pixi/filters/TiltShiftFilter.js @@ -0,0 +1,52 @@ +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * @class TiltShiftFilter + * @contructor + */ +PIXI.TiltShiftFilter = function() +{ + this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); + this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); + this.tiltShiftXFilter.updateDelta(); + + this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; +}; + +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { + get: function() { + return this.tiltShiftXFilter.blur; + }, + set: function(value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { + get: function() { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function(value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } +}); +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { + get: function() { + return this.tiltShiftXFilter.start; + }, + set: function(value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } +}); +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { + get: function() { + return this.tiltShiftXFilter.end; + }, + set: function(value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/AsciiFilter.js b/src/pixi/filters/AsciiFilter.js new file mode 100644 index 0000000..a713712 --- /dev/null +++ b/src/pixi/filters/AsciiFilter.js @@ -0,0 +1,73 @@ +/** + * @author Vico @vicocotea + * original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h + */ + +PIXI.AsciiFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '1f', value:8} + }; + + this.fragmentSrc = [ + + 'precision mediump float;', + 'uniform vec4 dimensions;', + 'uniform float pixelSize;', + 'uniform sampler2D uSampler;', + + 'float character(float n, vec2 p)', + '{', + ' p = floor(p*vec2(4.0, -4.0) + 2.5);', + ' if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)', + ' {', + ' if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;', + ' }', + ' return 0.0;', + '}', + + 'void main()', + '{', + ' vec2 uv = gl_FragCoord.xy;', + ' vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;', + + ' #ifdef HAS_GREENSCREEN', + ' float gray = (col.r + col.b)/2.0;', + ' #else', + ' float gray = (col.r + col.g + col.b)/3.0;', + ' #endif', + + ' float n = 65536.0; // .', + ' if (gray > 0.2) n = 65600.0; // :', + ' if (gray > 0.3) n = 332772.0; // *', + ' if (gray > 0.4) n = 15255086.0; // o', + ' if (gray > 0.5) n = 23385164.0; // &', + ' if (gray > 0.6) n = 15252014.0; // 8', + ' if (gray > 0.7) n = 13199452.0; // @', + ' if (gray > 0.8) n = 11512810.0; // #', + + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', + ' col = col * character(n, p);', + + ' gl_FragColor = vec4(col, 1.0);', + '}' + ]; +}; + +PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { + get: function() { + return this.uniforms.pixelSize.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.pixelSize.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/NoiseFilter.js b/src/pixi/filters/NoiseFilter.js new file mode 100644 index 0000000..e52946d --- /dev/null +++ b/src/pixi/filters/NoiseFilter.js @@ -0,0 +1,49 @@ +/** + * @author Vico @vicocotea + * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js + */ + +PIXI.NoiseFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + noise: {type: '1f', value: 0.5} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float noise;', + 'varying vec2 vTextureCoord;', + + 'float rand(vec2 co) {', + ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', + '}', + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', + ' color.r += diff;', + ' color.g += diff;', + ' color.b += diff;', + + ' gl_FragColor = color;', + '}' + ]; +}; + +PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { + get: function() { + return this.uniforms.noise.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.noise.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/TiltShiftFilter.js b/src/pixi/filters/TiltShiftFilter.js new file mode 100644 index 0000000..7f517ac --- /dev/null +++ b/src/pixi/filters/TiltShiftFilter.js @@ -0,0 +1,52 @@ +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * @class TiltShiftFilter + * @contructor + */ +PIXI.TiltShiftFilter = function() +{ + this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); + this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); + this.tiltShiftXFilter.updateDelta(); + + this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; +}; + +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { + get: function() { + return this.tiltShiftXFilter.blur; + }, + set: function(value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { + get: function() { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function(value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } +}); +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { + get: function() { + return this.tiltShiftXFilter.start; + }, + set: function(value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } +}); +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { + get: function() { + return this.tiltShiftXFilter.end; + }, + set: function(value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/TiltShiftXFilter.js b/src/pixi/filters/TiltShiftXFilter.js new file mode 100644 index 0000000..1631121 --- /dev/null +++ b/src/pixi/filters/TiltShiftXFilter.js @@ -0,0 +1,108 @@ +PIXI.TiltShiftXFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 100.0}, + gradientBlur: {type: '1f', value: 600.0}, + start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, + end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, + delta: {type: '2f', value:{x:30, y:30}}, + texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + }; + + this.updateDelta(); + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float blur;', + 'uniform float gradientBlur;', + 'uniform vec2 start;', + 'uniform vec2 end;', + 'uniform vec2 delta;', + 'uniform vec2 texSize;', + 'varying vec2 vTextureCoord;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + '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;', + '}' + ]; +}; + +PIXI.TiltShiftXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.TiltShiftXFilter.prototype.constructor = PIXI.TiltShiftXFilter; + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'blur', { + get: function() { + return this.uniforms.blur.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.blur.value = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'gradientBlur', { + get: function() { + return this.uniforms.gradientBlur.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.gradientBlur.value = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'start', { + get: function() { + return this.uniforms.start.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.start.value = value; + this.updateDelta(); + } +}); + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'end', { + get: function() { + return this.uniforms.end.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.end.value = value; + this.updateDelta(); + } +}); + +PIXI.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; +}; \ No newline at end of file diff --git a/src/pixi/filters/AsciiFilter.js b/src/pixi/filters/AsciiFilter.js new file mode 100644 index 0000000..a713712 --- /dev/null +++ b/src/pixi/filters/AsciiFilter.js @@ -0,0 +1,73 @@ +/** + * @author Vico @vicocotea + * original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h + */ + +PIXI.AsciiFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '1f', value:8} + }; + + this.fragmentSrc = [ + + 'precision mediump float;', + 'uniform vec4 dimensions;', + 'uniform float pixelSize;', + 'uniform sampler2D uSampler;', + + 'float character(float n, vec2 p)', + '{', + ' p = floor(p*vec2(4.0, -4.0) + 2.5);', + ' if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)', + ' {', + ' if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;', + ' }', + ' return 0.0;', + '}', + + 'void main()', + '{', + ' vec2 uv = gl_FragCoord.xy;', + ' vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;', + + ' #ifdef HAS_GREENSCREEN', + ' float gray = (col.r + col.b)/2.0;', + ' #else', + ' float gray = (col.r + col.g + col.b)/3.0;', + ' #endif', + + ' float n = 65536.0; // .', + ' if (gray > 0.2) n = 65600.0; // :', + ' if (gray > 0.3) n = 332772.0; // *', + ' if (gray > 0.4) n = 15255086.0; // o', + ' if (gray > 0.5) n = 23385164.0; // &', + ' if (gray > 0.6) n = 15252014.0; // 8', + ' if (gray > 0.7) n = 13199452.0; // @', + ' if (gray > 0.8) n = 11512810.0; // #', + + ' vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);', + ' col = col * character(n, p);', + + ' gl_FragColor = vec4(col, 1.0);', + '}' + ]; +}; + +PIXI.AsciiFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.AsciiFilter.prototype.constructor = PIXI.AsciiFilter; +Object.defineProperty(PIXI.AsciiFilter.prototype, 'size', { + get: function() { + return this.uniforms.pixelSize.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.pixelSize.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/NoiseFilter.js b/src/pixi/filters/NoiseFilter.js new file mode 100644 index 0000000..e52946d --- /dev/null +++ b/src/pixi/filters/NoiseFilter.js @@ -0,0 +1,49 @@ +/** + * @author Vico @vicocotea + * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js + */ + +PIXI.NoiseFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + noise: {type: '1f', value: 0.5} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float noise;', + 'varying vec2 vTextureCoord;', + + 'float rand(vec2 co) {', + ' return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);', + '}', + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + + ' float diff = (rand(vTextureCoord) - 0.5) * noise;', + ' color.r += diff;', + ' color.g += diff;', + ' color.b += diff;', + + ' gl_FragColor = color;', + '}' + ]; +}; + +PIXI.NoiseFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.NoiseFilter.prototype.constructor = PIXI.NoiseFilter; +Object.defineProperty(PIXI.NoiseFilter.prototype, 'noise', { + get: function() { + return this.uniforms.noise.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.noise.value = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/TiltShiftFilter.js b/src/pixi/filters/TiltShiftFilter.js new file mode 100644 index 0000000..7f517ac --- /dev/null +++ b/src/pixi/filters/TiltShiftFilter.js @@ -0,0 +1,52 @@ +/** + * @author Vico @vicocotea + * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ + */ + +/** + * @class TiltShiftFilter + * @contructor + */ +PIXI.TiltShiftFilter = function() +{ + this.tiltShiftXFilter = new PIXI.TiltShiftXFilter(); + this.tiltShiftYFilter = new PIXI.TiltShiftYFilter(); + this.tiltShiftXFilter.updateDelta(); + this.tiltShiftXFilter.updateDelta(); + + this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; +}; + +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'blur', { + get: function() { + return this.tiltShiftXFilter.blur; + }, + set: function(value) { + this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'gradientBlur', { + get: function() { + return this.tiltShiftXFilter.gradientBlur; + }, + set: function(value) { + this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value; + } +}); +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'start', { + get: function() { + return this.tiltShiftXFilter.start; + }, + set: function(value) { + this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value; + } +}); +Object.defineProperty(PIXI.TiltShiftFilter.prototype, 'end', { + get: function() { + return this.tiltShiftXFilter.end; + }, + set: function(value) { + this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value; + } +}); \ No newline at end of file diff --git a/src/pixi/filters/TiltShiftXFilter.js b/src/pixi/filters/TiltShiftXFilter.js new file mode 100644 index 0000000..1631121 --- /dev/null +++ b/src/pixi/filters/TiltShiftXFilter.js @@ -0,0 +1,108 @@ +PIXI.TiltShiftXFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 100.0}, + gradientBlur: {type: '1f', value: 600.0}, + start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, + end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, + delta: {type: '2f', value:{x:30, y:30}}, + texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + }; + + this.updateDelta(); + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float blur;', + 'uniform float gradientBlur;', + 'uniform vec2 start;', + 'uniform vec2 end;', + 'uniform vec2 delta;', + 'uniform vec2 texSize;', + 'varying vec2 vTextureCoord;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + '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;', + '}' + ]; +}; + +PIXI.TiltShiftXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.TiltShiftXFilter.prototype.constructor = PIXI.TiltShiftXFilter; + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'blur', { + get: function() { + return this.uniforms.blur.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.blur.value = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'gradientBlur', { + get: function() { + return this.uniforms.gradientBlur.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.gradientBlur.value = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'start', { + get: function() { + return this.uniforms.start.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.start.value = value; + this.updateDelta(); + } +}); + +Object.defineProperty(PIXI.TiltShiftXFilter.prototype, 'end', { + get: function() { + return this.uniforms.end.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.end.value = value; + this.updateDelta(); + } +}); + +PIXI.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; +}; \ No newline at end of file diff --git a/src/pixi/filters/TiltShiftYFilter.js b/src/pixi/filters/TiltShiftYFilter.js new file mode 100644 index 0000000..378b255 --- /dev/null +++ b/src/pixi/filters/TiltShiftYFilter.js @@ -0,0 +1,108 @@ +PIXI.TiltShiftYFilter = function() +{ + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 100.0}, + gradientBlur: {type: '1f', value: 600.0}, + start: {type: '2f', value:{x:0, y:window.screenHeight / 2}}, + end: {type: '2f', value:{x:600, y:window.screenHeight / 2}}, + delta: {type: '2f', value:{x:30, y:30}}, + texSize: {type: '2f', value:{x:window.screenWidth, y:window.screenHeight}} + }; + + this.updateDelta(); + + this.fragmentSrc = [ + 'precision mediump float;', + 'uniform sampler2D uSampler;', + 'uniform float blur;', + 'uniform float gradientBlur;', + 'uniform vec2 start;', + 'uniform vec2 end;', + 'uniform vec2 delta;', + 'uniform vec2 texSize;', + 'varying vec2 vTextureCoord;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + '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;', + '}' + ]; +}; + +PIXI.TiltShiftYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); +PIXI.TiltShiftYFilter.prototype.constructor = PIXI.TiltShiftYFilter; + +Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'blur', { + get: function() { + return this.uniforms.blur.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.blur.value = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'gradientBlur', { + get: function() { + return this.uniforms.gradientBlur.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.gradientBlur.value = value; + } +}); + +Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'start', { + get: function() { + return this.uniforms.start.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.start.value = value; + this.updateDelta(); + } +}); + +Object.defineProperty(PIXI.TiltShiftYFilter.prototype, 'end', { + get: function() { + return this.uniforms.end.value; + }, + set: function(value) { + this.dirty = true; + this.uniforms.end.value = value; + this.updateDelta(); + } +}); + +PIXI.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; +}; \ No newline at end of file