Caustics filter

This commit is contained in:
Richard Davey
2013-11-29 10:39:52 +00:00
parent b2fc6c422a
commit 378ffc7ade
5 changed files with 163 additions and 1 deletions
+4
View File
@@ -194,6 +194,10 @@
"file": "lightbeams.js",
"title": "lightbeams"
},
{
"file": "marble.js",
"title": "marble"
},
{
"file": "plasma.js",
"title": "plasma"
+34
View File
@@ -0,0 +1,34 @@
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
var background;
var filter;
function preload() {
game.load.image('phaser', 'assets/sprites/phaser2.png');
game.load.script('filter', '../filters/Marble.js');
}
function create() {
var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
logo.anchor.setTo(0.5, 0.5);
background = game.add.sprite(0, 0);
background.width = 800;
background.height = 600;
filter = game.add.filter('Marble', 800, 600);
//filter.alpha = 0.0;
background.filters = [filter];
}
function update() {
filter.update();
}
+61
View File
@@ -0,0 +1,61 @@
/**
* A sample demonstrating how to create new Phaser Filters.
*/
Phaser.Filter.SampleFilter = function (game) {
Phaser.Filter.call(this, game);
this.uniforms.divisor = { type: '1f', value: 0.5 };
// The fragment shader source
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform float time;",
"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;",
"float sinApprox(float x) {",
"x = Pi + (2.0 * Pi) * floor(x / (2.0 * Pi)) - x;",
"return (4.0 / Pi) * x - (4.0 / Pi / Pi) * x * abs(x);",
"}",
"float cosApprox(float x) {",
"return sinApprox(x + 0.5 * Pi);",
"}",
"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;",
"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);",
"}"
];
};
Phaser.Filter.SampleFilter.prototype = Object.create(Phaser.Filter.prototype);
Phaser.Filter.SampleFilter.prototype.constructor = Phaser.Filter.SampleFilter;
Phaser.Filter.SampleFilter.prototype.init = function (width, height, divisor) {
if (typeof divisor == 'undefined') { divisor = 0.5 };
this.setResolution(width, height);
this.uniforms.divisor.value = divisor;
}
+63
View File
@@ -0,0 +1,63 @@
/**
* A sample demonstrating how to create new Phaser Filters.
*/
Phaser.Filter.Marble = function (game) {
Phaser.Filter.call(this, game);
//this.uniforms.divisor = { type: '1f', value: 0.5 };
// The fragment shader source
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform float time;",
"//uniform vec2 mouse;",
"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;",
"float sinApprox(float x) {",
"x = Pi + (2.0 * Pi) * floor(x / (2.0 * Pi)) - x;",
"return (4.0 / Pi) * x - (4.0 / Pi / Pi) * x * abs(x);",
"}",
"float cosApprox(float x) {",
"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));",
"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);",
"}"
];
};
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) {
this.setResolution(width, height);
}
+1 -1
View File
@@ -54,7 +54,7 @@ Phaser.Filter = function (game, uniforms, fragmentSrc) {
resolution: { type: '3f', value: { x: 256, y: 256, z: 0 }},
time: { type: '1f', value: 0 },
mouse: { type: '4f', value: { x: 0, y: 0, z: 0, w: 0 }}
mouse: { type: '4fv', value: { x: 0, y: 0, z: 0, w: 0 }}
};