Tutorial 22 HLSL Heat Haze
September 16th, 2010
Heat haze
Everyone knows this phenomena, you can see it about the tarmac or even something as simple as a candle. A heat haze. What is happening in nature? The air above something that is hot is rising. There are pressure differences and that means the breaking index of the air is difference, in other words; the light rays bend a little. This effect is really cool to have in our scene as well, so we’ll do that. We will take the post-effect approach. What will we do? We will render the scene without the heat haze to a texture, then we’ll render the heat haze (being particles) on to another texture. Then we’ll combine it in a shader to draw it to the screen.
What do we need?
- As said, we need 2 render surfaces, one for the scene, one for the heat haze particles.
- We need a texture for the heat haze particles that will be used as a lookup UV offset for the sampling of the scene.
- The shader will once again be explained in the render section
How do we set things up?
- There is nothing you haven’t seen yet, so there’s nothing more to explain.
How do we render this?
- As described above, we render the scene to the first render surface and the heat haze to the second surface. You should be able to decipher that easily by now.
- The vertex shader is the same as in any other fullscreen shader, so I won’t explain that.
- The pixel shader is interesting, but not too hard to understand i think.
{
float4 Dis = tex2D(DistortSampler, IN.UV);
float4 D = 1-Dis;
float4 Scene = tex2D(ScreenSampler, IN.UV + D);
OUT.Colour = Scene;
OUT.Colour.a = 1;
}
You can see there’s a distortion being loaded from the heat haze texture (DistortSampler). Then it’s subtracted from 1, to invert its colors.
Next our real sampling is being done. We can see we’re sampling from the scene texture (ScreenSampler), with UV coordinates that came in, plus the distortion. This will give the distorted heat haze look.
Now we just output the color and set the alpha to 1.
It’s as easy as that, no magic or trickery involved, just plain maths and computer science. It is of course not a physically correct effect, but it gives a decent impression. Of course it can be tweaked a lot, but that’s up to you.
Things you can add/change yourself
- Tweak the texture and parameters, offsets etc to get a better result, it is possible, just have a good look at some pictures of heat hazes. (google is your friend).
