WPF: Heat Maps

So awhile ago I thought, “Wouldn’t it be cool to do heat maps in WPF?”.  Well I started playing around with the idea and immediately was side tracked with how terrible shaders were in WPF 😄 Which of course lead to me creating the WPF ShaderEffect Generator project.

Now that I have that project off and running I turned my attention back to heat maps and thought I would publish the results.  So I started off with the typical visualization I see everywhere; the rainbow color scheme.  Once I got it running I was showing it off to some of my friends and my good buddy Chris VanderKnyff told me about this paper, Rainbow Color Map (Still) Considered Harmful.  I hadn’t really thought much about it before reading the paper, but the rainbow color scheme really is terrible.  The paper suggests that a Black body radiation visualization is generally better for the types of things you might use a heat map for in tools for games.

Here’s a comparison of the Rainbow and Black body gradients:

Black Body Radiation

Rainbow Cream

The black body visualization of heat is much simpler to understand than the rainbow visualization, because it has a correspondence in nature.

The WPF sample uses a shader to visualize the gradient based on a 256×1 palette that you can define in XAML.  Random heat is generated and then rendered to a RenderTargetBitmap using a radial grayscale gradient brush that just writes to the rendertargetbitmap.  The color for the heat map is provided by a shader effect I have applied to the image on the window.

The shader is pretty simple, it just reads a color from the palette sampler based on the grayscale value of the X (Red) component of the incoming rendertargetbitmap at the corresponding texture coordinate.

float4 main(float2 uv : TEXCOORD) : COLOR
{
    float4 c = tex2D(Input, uv.xy);
    float2 index = float2(c.x, 0);
    float4 heat = tex2D(Palette, index);
    return heat;
}

Here’s a screenshot of the sample program and the links to download the sample exe and source code.

Sample: Heatmap.exe

Sample Source: Heatmap.zip

Note: You should have the WPF ShaderEffect Generator installed if you want the shaders to recompile correctly if they are changed.