Caustics filter

examples/_site/examples.json

@@ -194,6 +194,10 @@
       "file": "lightbeams.js",
       "title": "lightbeams"
     },
+    {
+      "file": "marble.js",
+      "title": "marble"
+    },
     {
       "file": "plasma.js",
       "title": "plasma"

examples/filters/marble.js

@@ -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();
+
+}

filters/CausticLight.js

@@ -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;
+
+}

filters/Marble.js

@@ -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);
+
+}

src/core/Filter.js

@@ -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 }}
 
     };