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 |
![]() |
![]() |
Obviously the black body visualization of heat is much more simple and easy to understand than the rainbow visualization.
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.
Related posts:





