Updated Filter resolution to a 2f and added Blur and Marble filters.

This commit is contained in:
photonstorm
2013-11-29 12:26:53 +00:00
parent 378ffc7ade
commit 00a9897ae2
17 changed files with 219 additions and 77 deletions
+51
View File
@@ -0,0 +1,51 @@
/**
* A horizontal blur filter by Mat Groves http://matgroves.com/ @Doormat23
*/
Phaser.Filter.BlurX = function (game) {
Phaser.Filter.call(this, game);
this.uniforms.blur = { type: '1f', value: 1 / 512 };
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
"vec4 sum = vec4(0.0);",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;",
"gl_FragColor = sum;",
"}"
];
};
Phaser.Filter.BlurX.prototype = Object.create(Phaser.Filter.prototype);
Phaser.Filter.BlurX.prototype.constructor = Phaser.Filter.BlurX;
Object.defineProperty(Phaser.Filter.BlurX.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
this.uniforms.blur.value = (1/7000) * value;
}
});
+52
View File
@@ -0,0 +1,52 @@
/**
* A vertical blur filter by Mat Groves http://matgroves.com/ @Doormat23
*/
Phaser.Filter.BlurY = function (game) {
Phaser.Filter.call(this, game);
this.uniforms.blur = { type: '1f', value: 1 / 512 };
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
"vec4 sum = vec4(0.0);",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;",
"gl_FragColor = sum;",
"}"
];
};
Phaser.Filter.BlurY.prototype = Object.create(Phaser.Filter.prototype);
Phaser.Filter.BlurY.prototype.constructor = Phaser.Filter.BlurY;
Object.defineProperty(Phaser.Filter.BlurY.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
this.uniforms.blur.value = (1/7000) * value;
}
});
+5 -5
View File
@@ -14,7 +14,7 @@ Phaser.Filter.CheckerWave = function (game) {
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform vec2 resolution;",
"uniform float time;",
"uniform float alpha;",
"uniform vec3 vrp;",
@@ -122,7 +122,7 @@ Phaser.Filter.CheckerWave.prototype.setColor2 = function (red, green, blue) {
}
Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'alpha', {
Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'alpha', {
get: function() {
return this.uniforms.alpha.value;
@@ -134,7 +134,7 @@ Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'alpha', {
});
Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraX', {
Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'cameraX', {
get: function() {
return this.uniforms.vrp.value.x;
@@ -146,7 +146,7 @@ Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraX', {
});
Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraY', {
Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'cameraY', {
get: function() {
return this.uniforms.vrp.value.y;
@@ -158,7 +158,7 @@ Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraY', {
});
Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraZ', {
Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'cameraZ', {
get: function() {
return this.uniforms.vrp.value.z;
+1 -1
View File
@@ -13,7 +13,7 @@ Phaser.Filter.Fire = function (game) {
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform vec2 resolution;",
"uniform float time;",
"uniform float alpha;",
"uniform vec2 speed;",
+1 -1
View File
@@ -13,7 +13,7 @@ Phaser.Filter.HueRotate = function (game) {
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform vec2 resolution;",
"uniform float time;",
"uniform float alpha;",
"uniform sampler2D iChannel0;",
+1 -1
View File
@@ -16,7 +16,7 @@ Phaser.Filter.LightBeam = function (game) {
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform vec2 resolution;",
"uniform float time;",
"uniform float alpha;",
"uniform float thickness;",
+59 -14
View File
@@ -1,25 +1,32 @@
/**
* A sample demonstrating how to create new Phaser Filters.
* Original shader from http://glsl.heroku.com/e#9213.0
* Tweaked, uniforms added and converted to Phaser/PIXI by Richard Davey
*/
Phaser.Filter.Marble = function (game) {
Phaser.Filter.call(this, game);
//this.uniforms.divisor = { type: '1f', value: 0.5 };
this.uniforms.alpha = { type: '1f', value: 1.0 }
// Drives speed, higher number will make it slower.
this.uniforms.fluid_speed = { type: '1f', value: 10.0 }
this.uniforms.color_intensity = { type: '1f', value: 0.30 }
// The fragment shader source
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform vec2 resolution;",
"uniform float time;",
"//uniform vec2 mouse;",
"uniform vec2 mouse;",
"uniform float alpha;",
"uniform float fluid_speed;",
"uniform float color_intensity;",
"const int complexity = 40; // More points of color.",
"const float mouse_factor = 25.0; // Makes it more/less jumpy.",
"const float mouse_offset = 5.0; // Drives complexity in the amount of curls/cuves. Zero is a single whirlpool.",
"const float fluid_speed = 45.0; // Drives speed, higher number will make it slower.",
"const float color_intensity = 0.30;",
"const float Pi = 3.14159;",
@@ -32,22 +39,18 @@ Phaser.Filter.Marble = function (game) {
"return sinApprox(x + 0.5 * Pi);",
"}",
"//vec3 mouse = vec3(0,0,0);",
"void main()",
"{",
"vec2 p=(2.0*gl_FragCoord.xy-resolution)/max(resolution.x,resolution.y);",
"for(int i=1;i<complexity;i++)",
"{",
"vec2 newp=p;",
"//newp.x+=0.6/float(i)*sin(float(i)*p.y+time/fluid_speed+0.3*float(i))+mouse.y/mouse_factor+mouse_offset;",
"//newp.y+=0.6/float(i)*sin(float(i)*p.x+time/fluid_speed+0.3*float(i+10))-mouse.x/mouse_factor+mouse_offset;",
"newp.x+=0.6/float(i)*sin(float(i)*p.y+time/fluid_speed+0.3*float(i));",
"newp.y+=0.6/float(i)*sin(float(i)*p.x+time/fluid_speed+0.3*float(i+10));",
"newp.x+=0.6/float(i)*sin(float(i)*p.y+time/fluid_speed+0.3*float(i))+mouse.y/mouse_factor+mouse_offset;",
"newp.y+=0.6/float(i)*sin(float(i)*p.x+time/fluid_speed+0.3*float(i+10))-mouse.x/mouse_factor+mouse_offset;",
"p=newp;",
"}",
"vec3 col=vec3(color_intensity*sin(3.0*p.x)+color_intensity,color_intensity*sin(3.0*p.y)+color_intensity,color_intensity*sin(p.x+p.y)+color_intensity);",
"gl_FragColor=vec4(col, 1.0);",
"gl_FragColor=vec4(col, alpha);",
"}"
];
@@ -56,8 +59,50 @@ Phaser.Filter.Marble = function (game) {
Phaser.Filter.Marble.prototype = Object.create(Phaser.Filter.prototype);
Phaser.Filter.Marble.prototype.constructor = Phaser.Filter.Marble;
Phaser.Filter.Marble.prototype.init = function (width, height) {
Phaser.Filter.Marble.prototype.init = function (width, height, speed, intensity) {
this.setResolution(width, height);
if (typeof speed === 'undefined') { speed = 10.0; }
if (typeof intensity === 'undefined') { intensity = 0.30; }
this.uniforms.fluid_speed.value = speed;
this.uniforms.color_intensity.value = intensity;
}
Object.defineProperty(Phaser.Filter.Marble.prototype, 'alpha', {
get: function() {
return this.uniforms.alpha.value;
},
set: function(value) {
this.uniforms.alpha.value = value;
}
});
Object.defineProperty(Phaser.Filter.Marble.prototype, 'speed', {
get: function() {
return this.uniforms.fluid_speed.value;
},
set: function(value) {
this.uniforms.fluid_speed.value = value;
}
});
Object.defineProperty(Phaser.Filter.Marble.prototype, 'intensity', {
get: function() {
return this.uniforms.color_intensity.value;
},
set: function(value) {
this.uniforms.color_intensity.value = value;
}
});
+1 -1
View File
@@ -13,7 +13,7 @@ Phaser.Filter.Tunnel = function (game) {
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform vec2 resolution;",
"uniform float time;",
"uniform sampler2D iChannel0;",
"uniform float alpha;",