• Hey! Guest! The 39th GMC Jam will take place between November 26th, 12:00 UTC and November 30th, 12:00 UTC. Why not join in! Click here to find out more!

Tilt Shift Shader


Hi guys!

I would like that things in my game look very small (miniature). The effect (shader) i'm looking for is called "tilt shift". With a simple blur-gradient things look like miniature (at the very top of the image a strong blur... with increasing y coordinates less blur.... in the middle of the screen no blur... and then with increasing y coordinates an increasing blur)
for example check out the photos on this page: http://www.tiltshiftphotography.net/

I couldn't find a shader for this. So i tried to modify this shader (the gaussian blur example):

But I had no success. Im very new to shaders... can you help me?

Thank you very much!!

kind regards



I've been thinking of trying something like this myself so I might take a crack at it. But there are complications if you want it to be done accurately. A full screen shader isn't really enough. You need every instance to be blurred based on its depth and that's impractical. I'll see what I can do later.


To get technical, tilt shifting is a photography effect that blurs objects based on their distance. A top-down view implies everything is at same distance, so the exact meaning does not apply. If you mean you just want the top and bottom parts of the screen to blur however; this would be a post-draw effect. You'd calculate the blur for each pixel in the fragment shader according to the blur shader you want to use. Then you'd mix it with the application surface's original value based on distance from vertical midpoint. Pixels near top and bottom are mostly blurred pixel, and those near center are mostly original. Or if you want to split the work into easier pieces: first shader blurs the application surface to a separate surface, a second shader mixes this surface and application surface and draws to screen.


@ obscene: you could have right... on photos it looks amazing... but i don't know if it works on animated stuff... if you could do something later... that would be great!! ;-)

@NightFrost: Im very new to shaders... could you please give me an example?

Thanks guys!


The simplest way is to simply do a DoF blur with a middle band in focus. So anything outside the band is blurred (close to camera blurred, far from camera is blurred, things at DoF of camera are in focus).

This is how most 'tilt shift' images you see are simulated. In photoshop people will just blur the background and foreground and it basically looks tilt shifted.

It would be difficult to make a true Tilt Shift effect as a tilt shift lens doesn't align with the imaging surface.
All 3d rastering hardware assumes the frustum is parallel (and axially aligned) to the rendering surface. So it would get complicated to simulate 100% but possible.

But usually a good DoF will look like a tilt shift.

So some depth (focal length) before or after the blue line gets increasing blurred. At the blue line it it in focus.