Adding 3 Shaders

felixturner · felixturner · commit e8a0d7c9440a · 2012-11-08T13:53:35.000-08:00
Adding Kaleidoscope, Mirror and RGBShift Shaders.
diff --git a/examples/js/shaders/KaleidoShader.js b/examples/js/shaders/KaleidoShader.js
@@ -0,0 +1,60 @@
+/**
+ * @author felixturner / http://airtight.cc/
+ *
+ * Kaleidoscope Shader
+ * Radial reflection around center point
+ * Ported from: http://pixelshaders.com/editor/
+ * by Toby Schachman / http://tobyschachman.com/
+ *
+ * sides: number of reflections
+ * angle: initial angle in radians
+ */
+
+THREE.KaleidoShader = {
+
+	uniforms: {
+
+		"tDiffuse": { type: "t", value: null },
+		"sides":    { type: "f", value: 6.0 },
+		"angle":    { type: "f", value: 0.0 }
+
+	},
+
+	vertexShader: [
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vUv = uv;",
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"uniform sampler2D tDiffuse;",
+		"uniform float sides;",
+		"uniform float angle;",
+		
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vec2 p = vUv - 0.5;",
+			"float r = length(p);",
+			"float a = atan(p.y, p.x) + angle;",
+			"float tau = 2. * 3.1416 ;",
+			"a = mod(a, tau/sides);",
+			"a = abs(a - tau/sides/2.) ;",
+			"p = r * vec2(cos(a), sin(a));",
+			"vec4 color = texture2D(tDiffuse, p + 0.5);",
+			"gl_FragColor = color;",
+
+		"}"
+
+	].join("\n")
+
+};
diff --git a/examples/js/shaders/MirrorShader.js b/examples/js/shaders/MirrorShader.js
@@ -0,0 +1,58 @@
+/**
+ * @author felixturner / http://airtight.cc/
+ *
+ * Mirror Shader
+ * Copies half the input to the other half
+ *
+ * side: side of input to mirror (0 = left, 1 = right, 2 = top, 3 = bottom)
+ */
+
+THREE.MirrorShader = {
+
+	uniforms: {
+
+		"tDiffuse": { type: "t", value: null },
+		"side":     { type: "i", value: 1 }
+
+	},
+
+	vertexShader: [
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vUv = uv;",
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"uniform sampler2D tDiffuse;",
+		"uniform int side;",
+		
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vec2 p = vUv;",
+			"if (side == 0){",
+				"if (p.x > 0.5) p.x = 1.0 - p.x;",
+			"}else if (side == 1){",
+				"if (p.x < 0.5) p.x = 1.0 - p.x;",
+			"}else if (side == 2){",
+				"if (p.y < 0.5) p.y = 1.0 - p.y;",
+			"}else if (side == 3){",
+				"if (p.y > 0.5) p.y = 1.0 - p.y;",
+			"} ",
+			"vec4 color = texture2D(tDiffuse, p);",
+			"gl_FragColor = color;",
+
+		"}"
+
+	].join("\n")
+
+};
diff --git a/examples/js/shaders/RGBShiftShader.js b/examples/js/shaders/RGBShiftShader.js
@@ -0,0 +1,56 @@
+/**
+ * @author felixturner / http://airtight.cc/
+ *
+ * RGB Shift Shader
+ * Shifts red and blue channels from center in opposite directions
+ * Ported from http://kriss.cx/tom/2009/05/rgb-shift/
+ * by Tom Butterworth / http://kriss.cx/tom/
+ *
+ * amount: shift distance (1 is width of input)
+ * angle: shift angle in radians
+ */
+
+THREE.RGBShiftShader = {
+
+	uniforms: {
+
+		"tDiffuse": { type: "t", value: null },
+		"amount":   { type: "f", value: 0.005 },
+		"angle":    { type: "f", value: 0.0 }
+
+	},
+
+	vertexShader: [
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vUv = uv;",
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"uniform sampler2D tDiffuse;",
+		"uniform float amount;",
+		"uniform float angle;",
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vec2 offset = amount * vec2( cos(angle), sin(angle));",
+			"vec4 cr = texture2D(tDiffuse, vUv + offset);",
+			"vec4 cga = texture2D(tDiffuse, vUv);",
+			"vec4 cb = texture2D(tDiffuse, vUv - offset);",
+			"gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);",
+
+		"}"
+
+	].join("\n")
+
+};
