Skip to content

Instantly share code, notes, and snippets.

@ruby0x1
Last active February 19, 2024 02:46
Show Gist options
  • Star 36 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save ruby0x1/10324388 to your computer and use it in GitHub Desktop.
Save ruby0x1/10324388 to your computer and use it in GitHub Desktop.
Tilt shift shader, modified from something @grapefrukt gave me
// 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;
/*
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.
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.
*/
//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
@kingc8
Copy link

kingc8 commented Feb 16, 2023

The links on your old blog have all rotted, I'm attempting to separate the X and Y passes so this runs in two passes, but it's losing half it's brightness at the end. Naively I'm running the X loop in the first pass and the Y loop in the second pass.

Do you still have anything written anywhere how this is managed?

Kind thanks,
Cameron

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment