What is the method used in overlaying a grid (agonostic of the grid type) on to a height map? It seems it's some sort of projection, but what are the technical details in how to implement it?

An example here is a hexagon grid overlayed onto the map in Civ5 that nicely handles spatial distance regardless of how high the height map is at a position - enter image description here

  • 1
    $\begingroup$ Maybe I misunderstood the question. You can just create 3d lines in the xz plane of that hexagonal pattern and set the y value of the points on the lines to the height map value at that location. The more points in the lines the better approximated it will be. $\endgroup$ Nov 27, 2018 at 3:13
  • $\begingroup$ Maybe, my question was incorrect. I'm also interesting highlighting the height map area (different diffuse color or similar), based on user interaction. I'm not sure how to do all of this cleanly. $\endgroup$
    – dev_nut
    Nov 27, 2018 at 18:51
  • $\begingroup$ You want a transparent filling for each cell? You can do this with a second pass. Just rerender the same terrain geometry but this time without texture/shading. Just a transparent color. Alpha blend the two rendered images together. For efficiency you can construct geometry with much less detail than the terrain that achieves the same effect by sampling the height map values at the edges. $\endgroup$ Nov 27, 2018 at 22:00
  • $\begingroup$ This is close, but the main point was getting transparent filling (or at least a different color) for a specific cell, similar to the highlight cell above. The highlighted cell has a slightly different shading than the rest of the cells (in addition to the god rays). $\endgroup$
    – dev_nut
    Nov 28, 2018 at 0:21

1 Answer 1


Deferred decals are a common way to achieve this without re-rendering the same geometry. It also allows you to change the appearance, i.e. add some gap or smooth out the details.

The algorithm:

  1. Draw a box around your height field, the size should be as tight as possible to avoid over draw.
  2. sample the depth buffer to get the world-space position of the current pixel (the height field / other geo)
  3. Project your box down in world space
  4. Use the projected box coordinate to sample from your overlay texture.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.