Custom postprocessing Shader for heatmaps

Questions
, ,
1

Hi I want to create a heatmap effect affecting the objects’ colors of relative to the distance of an array or points. Currently i am looping through the array of objects to add a texture, but it is very inefficient, and has limitations.

Is it possible to creative my own postprocessing shader, retrieving the scene’s position (depthMap maybe?) and altering the colors? Here is an example of what i am trying to achieve.

Screenshot 2025-01-21 at 11.16.49 AM
Screenshot 2025-01-21 at 11.16.49 AM1672×709 106 KB

2

You can reconstruct world space position from the depth read back from a depth rendertarget.

Once you have worldspace position, you can loop through your (small) array of points, and accumulate distance, then map that value onto your rainbow palette.

1 Like
3

Yes, you can implement a custom post-processing pass to achieve a heatmap-like effect without individually modifying each object. One approach:

  1. Depth + Normal or Depth-Only: Enable a depth (or depth+normal) pass. You’ll need the depth buffer in the shader to reconstruct each fragment’s 3D position.
  2. Custom ShaderPass: Supply your list of points as a uniform array. For each fragment, reconstruct its world or view-space position from the depth, then measure the distance to each point.
  3. Color Mapping: Combine distances (e.g., take min distance) and map that to a color gradient. For example:
float dist = length(position - heatPoints[i]);
float intensity = smoothstep(minDist, maxDist, dist);
// then apply a color ramp
  1. Composite: Write the final color to gl_FragColor, optionally blending with the original scene color if you want a semi-transparent overlay.

This way, all geometry is processed in a single pass, rather than individually updating materials