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.