Fixed filters for new shader code.

Hmaal · Nov 28, 2013 · b2fc6c4 · b2fc6c4
1 parent f22159e
commit b2fc6c4
Show file tree

Hide file tree

Showing 50 changed files with 906 additions and 451 deletions.
diff --git a/build/config.php b/build/config.php
@@ -28,7 +28,9 @@
     <script src="$path/src/pixi/extras/Rope.js"></script>
     <script src="$path/src/pixi/extras/TilingSprite.js"></script>
 
+    <script src="$path/src/pixi/filters/AbstractFilter.js"></script>
     <script src="$path/src/pixi/filters/FilterBlock.js"></script>
+
     <script src="$path/src/pixi/primitives/Graphics.js"></script>
 
     <script src="$path/src/pixi/renderers/canvas/CanvasGraphics.js"></script>

diff --git a/examples/_site/examples.json b/examples/_site/examples.json
@@ -178,10 +178,18 @@
     }
   ],
   "filters": [
+    {
+      "file": "checker+wave.js",
+      "title": "checker wave"
+    },
     {
       "file": "fire.js",
       "title": "fire"
     },
+    {
+      "file": "hue+rotate.js",
+      "title": "hue rotate"
+    },
     {
       "file": "lightbeams.js",
       "title": "lightbeams"

diff --git a/examples/_site/js/phaser-examples.js b/examples/_site/js/phaser-examples.js
@@ -95,8 +95,6 @@ $(document).ready(function(){
 
 	.done(function(data) {
 
-		console.log(data);
-
 		if (data.version !== '1.1.3')
 		{
 			$("#upgrade").append(data.version);

diff --git a/examples/_site/js/phaser-viewer.js b/examples/_site/js/phaser-viewer.js
@@ -58,8 +58,6 @@ $(document).ready(function(){
 
 	.done(function(data) {
 
-		console.log(data);
-
 		if (data.version !== '1.1.3')
 		{
 			$("#upgrade").append(data.version);

diff --git a/examples/filters/checker wave.js b/examples/filters/checker wave.js
@@ -0,0 +1,37 @@
+
+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('s', 'assets/pics/undersea.jpg');
+    game.load.image('phaser', 'assets/sprites/phaser.png');
+    game.load.script('filter', '../filters/CheckerWave.js');
+
+}
+
+function create() {
+
+	game.add.sprite(0, 0, 's');
+
+	background = game.add.sprite(0, 0);
+	background.width = 800;
+	background.height = 600;
+
+	filter = game.add.filter('CheckerWave', 800, 600);
+	filter.alpha = 0.2;
+
+	background.filters = [filter];
+
+	var logo = game.add.sprite(game.world.centerX, 100, 'phaser');
+	logo.anchor.setTo(0.5, 0.5);
+
+}
+
+function update() {
+
+	filter.update();
+
+}
diff --git a/examples/filters/fire.js b/examples/filters/fire.js
@@ -7,7 +7,7 @@ var filter;
 function preload() {
 
     game.load.image('phaser', 'assets/sprites/phaser2.png');
-    game.load.script('fire', '../filters/Fire.js');
+    game.load.script('filter', '../filters/Fire.js');
 
 }
 

diff --git a/examples/filters/hue rotate.js b/examples/filters/hue rotate.js
@@ -0,0 +1,38 @@
+
+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/HueRotate.js');
+    // game.load.image('texture', 'assets/textures/ooze.png');
+    game.load.image('texture', 'assets/pics/ra_einstein.png');
+
+}
+
+function create() {
+
+	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'texture');
+	logo.anchor.setTo(0.5, 0.5);
+	logo.texture.baseTexture._powerOf2 = true;
+
+
+	background = game.add.sprite(0, 0);
+	background.width = logo.width;
+	background.height = logo.height;
+
+	filter = game.add.filter('HueRotate', logo.width, logo.height, logo.texture);
+	// filter.alpha = 0.0;
+
+	background.filters = [filter];
+
+}
+
+function update() {
+
+	filter.update();
+
+}
diff --git a/examples/filters/lightbeams.js b/examples/filters/lightbeams.js
@@ -7,7 +7,7 @@ var filter;
 function preload() {
 
     game.load.image('phaser', 'assets/sprites/phaser2.png');
-    game.load.script('light', '../filters/LightBeam.js');
+    game.load.script('filter', '../filters/LightBeam.js');
 
 }
 

diff --git a/examples/filters/plasma.js b/examples/filters/plasma.js
@@ -7,7 +7,7 @@ var filter;
 function preload() {
 
     game.load.image('phaser', 'assets/sprites/phaser2.png');
-    game.load.script('plasma', '../filters/Plasma.js');
+    game.load.script('filter', '../filters/Plasma.js');
 
 }
 

diff --git a/examples/filters/tunnel.js b/examples/filters/tunnel.js
@@ -8,7 +8,7 @@ function preload() {
 
     game.load.image('phaser', 'assets/sprites/phaser.png');
     game.load.image('texture', 'assets/textures/ooze.png');
-    game.load.script('tunnel', '../filters/Tunnel.js');
+    game.load.script('filter', '../filters/Tunnel.js');
 
 }
 

diff --git a/examples/wip/TRSIPlasmaFilter.js b/examples/wip/TRSIPlasmaFilter.js
@@ -14,9 +14,9 @@ PIXI.TRSIPlasmaFilter = function(width, height)
 	];
 
 	this.uniforms = {
-		iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
-		iGlobalTime: { type: 'f', value: 1 },
-		iDate: { type: 'f4', value: dates }
+		iResolution: { type: '3f', value: { x: width, y: height, z: 0 }},
+		iGlobalTime: { type: '1f', value: 1 },
+		iDate: { type: '4fv', value: dates }
 	};
 
 	//	Shader by Rebb / TRSI (https://www.shadertoy.com/view/XdX3Wn)

diff --git a/examples/wip/book/part2.html b/examples/wip/book/part2.html
@@ -9,10 +9,8 @@
 			margin: 0;
 		}
 	</style>
-	// <script src="phaser.js"></script>
     <script src="../../../dist/phaser.min.js" type="text/javascript"></script>
     <script src="../../../filters/ColorBars.js" type="text/javascript"></script>
-	<script src="../../../filters/BinarySerpents.js" type="text/javascript"></script>
 	<script src="../../../filters/Fire.js" type="text/javascript"></script>
 </head>
 <body>

diff --git a/examples/wip/c64PlasmaFilter.js b/examples/wip/c64PlasmaFilter.js
@@ -14,9 +14,9 @@ PIXI.C64PlasmaFilter = function(width, height)
 	];
 
 	this.uniforms = {
-		iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
-		iGlobalTime: { type: 'f', value: 1 },
-		iDate: { type: 'f4', value: dates }
+		iResolution: { type: '3f', value: { x: width, y: height, z: 0 }},
+		iGlobalTime: { type: '1f', value: 1 },
+		iDate: { type: '4fv', value: dates }
 	};
 
 	//	Shader by ssdsa (https://www.shadertoy.com/view/MslGzN)

diff --git a/examples/wip/caustic lights.js b/examples/wip/caustic lights.js
@@ -0,0 +1,125 @@
+PIXI.BinarySerpentsFilter = function(width, height, texture)
+{
+	PIXI.AbstractFilter.call( this );
+
+	this.passes = [this];
+
+	var d = new Date();
+
+	var dates = [
+		d.getFullYear(), // the year (four digits)
+		d.getMonth(),	   // the month (from 0-11)
+		d.getDate(),     // the day of the month (from 1-31)
+		d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
+	];
+
+	this.uniforms = {
+		iResolution: { type: '3f', value: { x: width, y: height, z: 0 }},
+		iMouse: { type: '3f', value: { x: 0, y: 0, z: 0 }},
+		iGlobalTime: { type: '1f', value: 1 },
+		iDate: { type: '4fv', value: dates },
+		iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
+	};
+
+this.fragmentSrc = [
+	"#ifdef GL_ES",
+	"precision mediump float;",
+	"#endif",
+	"//Ashok Gowtham M",
+	"//UnderWater Caustic lights",
+	"uniform float time;",
+	"uniform vec2 mouse;",
+	"uniform vec2 resolution;",
+	"//normalized sin",
+	"float sinn(float x)",
+	"{",
+		"return sin(x)/2.+.001;",
+	"}",
+
+	"float CausticPatternFn(vec2 pos)",
+	"{",
+		"return (sin(pos.x*40.+time)",
+		"+pow(sin(-pos.x*130.+time),1.)",
+		"+pow(sin(pos.x*30.+time),2.)",
+		"+pow(sin(pos.x*50.+time),2.)",
+		"+pow(sin(pos.x*80.+time),2.)",
+		"+pow(sin(pos.x*90.+time),2.)",
+		"+pow(sin(pos.x*12.+time),2.)",
+		"+pow(sin(pos.x*6.+time),2.)",
+		"+pow(sin(-pos.x*13.+time),5.))/2.;",
+	"}",
+
+	"vec2 CausticDistortDomainFn(vec2 pos)",
+	"{",
+		"pos.x*=(pos.y*0.60+1.);",
+		"pos.x*=1.+sin(time/2.)/10.;",
+		"return pos;",
+	"}",
+
+	"void main( void )",
+	"{",
+		"vec2 pos = gl_FragCoord.xy/resolution;",
+		"pos-=.5;",
+		"vec2  CausticDistortedDomain = CausticDistortDomainFn(pos);",
+		"float CausticShape = clamp(7.-length(CausticDistortedDomain.x*20.),0.,1.);",
+		"float CausticPattern = CausticPatternFn(CausticDistortedDomain);",
+		"float CausticOnFloor = CausticPatternFn(pos)+sin(pos.y*100.)*clamp(2.-length(pos*2.),0.,1.);",
+		"float Caustic;",
+		"Caustic += CausticShape*CausticPattern;",
+		"Caustic *= (pos.y+.5)/4.;",
+		"//Caustic += CausticOnFloor;",
+		"float f = length(pos+vec2(-.5,.5))*length(pos+vec2(.5,.5))*(1.+Caustic)/1.;",
+
+
+		"gl_FragColor = vec4(.1,.5,.6,1)*(f);",
+
+	"}"];
+
+
+}
+
+PIXI.BinarySerpentsFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.BinarySerpentsFilter.prototype.constructor = PIXI.BinarySerpentsFilter;
+
+Object.defineProperty(PIXI.BinarySerpentsFilter.prototype, 'iGlobalTime', {
+    get: function() {
+        return this.uniforms.iGlobalTime.value;
+    },
+    set: function(value) {
+    	this.uniforms.iGlobalTime.value = value;
+    }
+});
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('texture', 'wip/tex01.jpg');
+
+}
+
+var filter;
+var sprite;
+
+function create() {
+
+	sprite = game.add.sprite(0, 0, 'texture');
+	sprite.width = 800;
+	sprite.height = 600;
+
+	filter = new PIXI.BinarySerpentsFilter(sprite.width, sprite.height, sprite.texture);
+
+	sprite.filters = [filter];
+
+}
+
+function update() {
+
+	filter.iGlobalTime = game.time.totalElapsedSeconds();
+	filter.uniforms.iMouse.value.x = game.input.x;
+	filter.uniforms.iMouse.value.y = game.input.y;
+
+}
+
+function render() {
+}
diff --git a/examples/wip/checkerWaveFilter.js b/examples/wip/checkerWaveFilter.js
@@ -14,9 +14,9 @@ PIXI.CheckerWaveFilter = function(width, height, texture)
 	];
 
 	this.uniforms = {
-		resolution: { type: 'f2', value: { x: width, y: height }},
-		mouse: { type: 'f2', value: { x: 0, y: 0 }},
-		time: { type: 'f', value: 1 }
+		resolution: { type: '2f', value: { x: width, y: height }},
+		mouse: { type: '2f', value: { x: 0, y: 0 }},
+		time: { type: '1f', value: 1 }
 	};
 
 	//	http://glsl.heroku.com/e#12260.0

diff --git a/examples/wip/deformStarFilter.js b/examples/wip/deformStarFilter.js
@@ -14,10 +14,10 @@ PIXI.DeformStarFilter = function(width, height, texture)
 	];
 
 	this.uniforms = {
-		iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
-		iGlobalTime: { type: 'f', value: 1 },
-		iDate: { type: 'f4', value: dates },
-		iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
+		iResolution: { type: '3f', value: { x: width, y: height, z: 0 }},
+		iGlobalTime: { type: '1f', value: 1 },
+		iDate: { type: '4fv', value: dates },
+		iChannel0: { type: 'sampler2D', value: texture, textureData: { repeat: true } }
 	};
 
 	//	Shader by iq (https://www.shadertoy.com/view/4dXGRn)
@@ -79,6 +79,7 @@ function preload() {
 
     // game.load.image('texture', 'wip/64x64.png');
     game.load.image('texture', 'wip/tex08.jpg');
+    game.load.image('texture2', 'assets/textures/alice.jpg');
 
 }
 

diff --git a/examples/wip/heroku.js b/examples/wip/heroku.js
@@ -14,9 +14,9 @@ PIXI.RayTracedBallsFilter = function(width, height, texture)
 	];
 
 	this.uniforms = {
-		resolution: { type: 'f2', value: { x: width, y: height }},
-		mouse: { type: 'f2', value: { x: 0, y: 0 }},
-		time: { type: 'f', value: 1 }
+		resolution: { type: '2f', value: { x: width, y: height }},
+		mouse: { type: '2f', value: { x: 0, y: 0 }},
+		time: { type: '1f', value: 1 }
 	};
 
 	//	http://glsl.heroku.com/e#12288.0

diff --git a/examples/wip/hueRotationFilter.js b/examples/wip/hueRotationFilter.js
@@ -14,9 +14,9 @@ PIXI.HueRotationFilter = function(width, height, texture)
 	];
 
 	this.uniforms = {
-		iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
-		iGlobalTime: { type: 'f', value: 1 },
-		iDate: { type: 'f4', value: dates },
+		iResolution: { type: '3f', value: { x: width, y: height, z: 0 }},
+		iGlobalTime: { type: '1f', value: 1 },
+		iDate: { type: '4fv', value: dates },
 		iChannel0: { type: 'sampler2D', value: texture }
 	};
 
@@ -36,7 +36,7 @@ PIXI.HueRotationFilter = function(width, height, texture)
 		"http://beesbuzz.biz/code/hsv_color_transforms.php",
 		"*/",
 
-		"#define SPEED 10.0",
+		"#define SPEED 1.0",
 
 		"void main(void)",
 		"{",