Hex 3d

 from Red Blob Games
30 Jun 2023

We can render a 3d hexagon height map by using the dual graph, which is a triangle grid formed around each hexagon corner. The three hexagons touching a corner form a triangle. Push the slider up to see elevation added in.

scale:

I sort the triangles by their row value so that the rendering is back to front — https://en.wikipedia.org/wiki/Painter%27s_algorithm[1] — maybe there are some occasional glitches.

Another way to make hexagons 3d is to keep the tops flat, and then draw sides on them:

scale:

Source: hex-3d.js

Email me , or tweet @redblobgames, or comment: