fire · January 26, 2021 20:30 · Apr 9, 2014 · Apr 9, 2014 · Apr 9, 2014 · Apr 9, 2014
diff --git a/tilt.shift.glsl b/tilt.shift.glsl
@@ -6,37 +6,37 @@ uniform sampler2D tex0;
 varying vec2 tcoord;
 varying vec4 color;
 
+    /*
+        Take note that blurring in a single pass (the two for loops below) is more expensive than separating
+        the x and the y blur into different passes. This was used where bleeding edge performance
+        was not crucial and is to illustrate a point. 
 
-    //    Take note that blurring in a single pass (the two for loops below) is more expensive than separating
-    //    the x and the y blur into different passes. This was used where bleeding edge performance
-    //    was not crucial and is to illustrate a point. 
+        The reason two passes is cheaper? 
+           texture2D is a fairly high cost call, sampling a texture.
 
-    //    The reason two passes is cheaper? 
-    //       texture2D is a fairly high cost call, sampling a texture.
+           So, in a single pass, like below, there are 3 steps, per x and y. 
 
-    //       So, in a single pass, like below, there are 3 steps, per x and y. 
+           That means a total of 9 "taps", it touches the texture to sample 9 times.
 
-    //       That means a total of 9 "taps", it touches the texture to sample 9 times.
-
-    //       Now imagine we apply this to some geometry, that is equal to 16 pixels on screen (tiny)
-    //       (16 * 16) * 9 = 2304 samples taken, for width * height number of pixels, * 9 taps
-    //       Now, if you split them up, it becomes 3 for x, and 3 for y, a total of 6 taps
-    //       (16 * 16) * 6 = 1536 samples
-    //
-    //       That's on a *tiny* sprite, let's scale that up to 128x128 sprite...
-    //       (128 * 128) * 9 = 147,456
-    //       (128 * 128) * 6 =  98,304
-
-    //       That's 33.33..% cheaper for splitting them up.
-    //       That's with 3 steps, with higher steps (more taps per pass...)
+           Now imagine we apply this to some geometry, that is equal to 16 pixels on screen (tiny)
+           (16 * 16) * 9 = 2304 samples taken, for width * height number of pixels, * 9 taps
+           Now, if you split them up, it becomes 3 for x, and 3 for y, a total of 6 taps
+           (16 * 16) * 6 = 1536 samples
+    
+           That's on a *tiny* sprite, let's scale that up to 128x128 sprite...
+           (128 * 128) * 9 = 147,456
+           (128 * 128) * 6 =  98,304
 
-    //       A really smooth, 6 steps, 6*6 = 36 taps for one pass, 12 taps for two pass
-    //       You will notice, the curve is not linear, at 12 steps it's 144 vs 24 taps
-    //       It becomes orders of magnitude slower to do single pass!
-    //       Therefore, you split them up into two passes, one for x, one for y.
+           That's 33.33..% cheaper for splitting them up.
+           That's with 3 steps, with higher steps (more taps per pass...)
 
+           A really smooth, 6 steps, 6*6 = 36 taps for one pass, 12 taps for two pass
+           You will notice, the curve is not linear, at 12 steps it's 144 vs 24 taps
+           It becomes orders of magnitude slower to do single pass!
+           Therefore, you split them up into two passes, one for x, one for y.
+    */
 
-    //I am hardcoding the constants like a jerk,
+    //I am hardcoding the constants like a jerk
 
 const float bluramount  = 1.0;
 const float center      = 1.1;

diff --git a/tilt.shift.glsl b/tilt.shift.glsl
@@ -6,7 +6,6 @@ uniform sampler2D tex0;
 varying vec2 tcoord;
 varying vec4 color;
 
-    //I am hardcoding the constants like a jerk,
 
     //    Take note that blurring in a single pass (the two for loops below) is more expensive than separating
     //    the x and the y blur into different passes. This was used where bleeding edge performance
@@ -36,6 +35,9 @@ varying vec4 color;
     //       It becomes orders of magnitude slower to do single pass!
     //       Therefore, you split them up into two passes, one for x, one for y.
 
+
+    //I am hardcoding the constants like a jerk,
+
 const float bluramount  = 1.0;
 const float center      = 1.1;
 const float stepSize    = 0.004;

diff --git a/tilt.shift.glsl b/tilt.shift.glsl
@@ -7,11 +7,34 @@ varying vec2 tcoord;
 varying vec4 color;
 
     //I am hardcoding the constants like a jerk,
+
     //    Take note that blurring in a single pass (the two for loops below) is more expensive than separating
     //    the x and the y blur into different passes. This was used where bleeding edge performance
     //    was not crucial and is to illustrate a point. 
-    //    Some interesting discussion : 
-    //        http://theinstructionlimit.com/gaussian-blur-revisited-part-two
+
+    //    The reason two passes is cheaper? 
+    //       texture2D is a fairly high cost call, sampling a texture.
+
+    //       So, in a single pass, like below, there are 3 steps, per x and y. 
+
+    //       That means a total of 9 "taps", it touches the texture to sample 9 times.
+
+    //       Now imagine we apply this to some geometry, that is equal to 16 pixels on screen (tiny)
+    //       (16 * 16) * 9 = 2304 samples taken, for width * height number of pixels, * 9 taps
+    //       Now, if you split them up, it becomes 3 for x, and 3 for y, a total of 6 taps
+    //       (16 * 16) * 6 = 1536 samples
+    //
+    //       That's on a *tiny* sprite, let's scale that up to 128x128 sprite...
+    //       (128 * 128) * 9 = 147,456
+    //       (128 * 128) * 6 =  98,304
+
+    //       That's 33.33..% cheaper for splitting them up.
+    //       That's with 3 steps, with higher steps (more taps per pass...)
+
+    //       A really smooth, 6 steps, 6*6 = 36 taps for one pass, 12 taps for two pass
+    //       You will notice, the curve is not linear, at 12 steps it's 144 vs 24 taps
+    //       It becomes orders of magnitude slower to do single pass!
+    //       Therefore, you split them up into two passes, one for x, one for y.
 
 const float bluramount  = 1.0;
 const float center      = 1.1;

diff --git a/tilt.shift.glsl b/tilt.shift.glsl
@@ -10,7 +10,8 @@ varying vec4 color;
     //    Take note that blurring in a single pass (the two for loops below) is more expensive than separating
     //    the x and the y blur into different passes. This was used where bleeding edge performance
     //    was not crucial and is to illustrate a point. 
-    //    Some interesting discussion : http://theinstructionlimit.com/gaussian-blur-revisited-part-two
+    //    Some interesting discussion : 
+    //        http://theinstructionlimit.com/gaussian-blur-revisited-part-two
 
 const float bluramount  = 1.0;
 const float center      = 1.1;

diff --git a/tilt.shift.glsl b/tilt.shift.glsl
@@ -6,7 +6,11 @@ uniform sampler2D tex0;
 varying vec2 tcoord;
 varying vec4 color;
 
-    //I am hardcoding the constants like a jerk
+    //I am hardcoding the constants like a jerk,
+    //    Take note that blurring in a single pass (the two for loops below) is more expensive than separating
+    //    the x and the y blur into different passes. This was used where bleeding edge performance
+    //    was not crucial and is to illustrate a point. 
+    //    Some interesting discussion : http://theinstructionlimit.com/gaussian-blur-revisited-part-two
 
 const float bluramount  = 1.0;
 const float center      = 1.1;

diff --git a/tilt.shift.glsl b/tilt.shift.glsl
@@ -0,0 +1,54 @@
+// Modified version of a tilt shift shader from Martin Jonasson (http://grapefrukt.com/)
+// Read http://notes.underscorediscovery.com/ for context on shaders and this file
+// License : MIT
+
+uniform sampler2D tex0;
+varying vec2 tcoord;
+varying vec4 color;
+
+    //I am hardcoding the constants like a jerk
+
+const float bluramount  = 1.0;
+const float center      = 1.1;
+const float stepSize    = 0.004;
+const float steps       = 3.0;
+
+const float minOffs     = (float(steps-1.0)) / -2.0;
+const float maxOffs     = (float(steps-1.0)) / +2.0;
+
+void main() {
+
+    float amount;
+    vec4 blurred;
+
+        //Work out how much to blur based on the mid point 
+    amount = pow((tcoord.y * center) * 2.0 - 1.0, 2.0) * bluramount;
+
+        //This is the accumulation of color from the surrounding pixels in the texture
+    blurred = vec4(0.0, 0.0, 0.0, 1.0);
+
+        //From minimum offset to maximum offset
+    for (float offsX = minOffs; offsX <= maxOffs; ++offsX) {
+        for (float offsY = minOffs; offsY <= maxOffs; ++offsY) {
+
+                //copy the coord so we can mess with it
+            vec2 temp_tcoord = tcoord.xy;
+
+                //work out which uv we want to sample now
+            temp_tcoord.x += offsX * amount * stepSize;
+            temp_tcoord.y += offsY * amount * stepSize;
+
+                //accumulate the sample 
+            blurred += texture2D(tex0, temp_tcoord);
+
+        } //for y
+    } //for x 
+
+        //because we are doing an average, we divide by the amount (x AND y, hence steps * steps)
+    blurred /= float(steps * steps);
+
+        //return the final blurred color
+    gl_FragColor = blurred;
+
+} //main 
+