About a month ago we wrote about our shader-based heat shimmer effect. Another effect we developed for the Danfoss-experience project is illustrated in the video below. It tries to reproduce the effect of a window or mirror steaming up entirely as a shader.
Our method uses a gradient image which dictates the overall "growth" of the steam. A variable is animated over time from 0 to 2 and the amount of steam for a given position is then defined by a clamped linear interpolation over some range :
To make the growth more interesting, we modify with a noise texture. The color of the steam is determined from a lookup into a texture-rendered version of the scene which has been blurred by a Gaussian filter. To this value, we add some white noise to give the steam some texture. Finally, we add a value which can be tweaked to give the steam the desired amount of lightness.
The pixel color is then given by the unmodified color interpolated with the steam color:
The final touch to our effect, is the ability to interact with the steam by dragging the mouse around like a finger on the steamed up window. This is implemented by adding a mask texture and modifying the amount of steam by taking the minimum value of the mask and . The mask texture is updated by blending black lines into it where the mouse has been when it is being dragged around. Furthermore, a dark grey color is constantly blended into the entire mask in order to make the older strokes steam up again.