I'm working on a hobby project (I'm a web/backend developer by day) and I want to create a 3D tile (terrain) engine. I'm using XNA, but I can use MonoGame, OpenGL, or straight DirectX, so the answer does not have to be XNA specific. I'm more looking for some high level advice on how to approach this problem.

I know about creating height maps and such, there are thousands of references out there on the net for that, this is a bit more specific.

I'm more concerned with the approach to get a 3D hexagon tile grid out of my terrain (since the terrain, and all 3D objects, are basically triangles).

The first approach I thought about is to basically draw the triangles on the screen in the following order (blue numbers) to give me the triangles for terrain (black triangles) and then make hexes out of the triangles (red hex).

enter image description here

This approach seems complicated to me since I'm basically having to draw four different types of triangles.

The next approach I thought of was to use the existing triangles like I did for a square grid and get my hexes from six triangles as follows

enter image description here

This seems like the easier approach to me since there are only two types of triangles (I would have to play with the heights and widths to get a "perfect" hexagon, but the idea is the same.

So I'm looking for:

1) Any suggestions on which approach I should take, and why.

2) How would I translate mouse position to a hexagon grid position (especially when moving the camera around), for example in the second image if the mouse pointer were the green circle, how would I determine to highlight that hexagon and then translating that into grid coordinates (assuming it is 0,0)?

3) Any references, articles, books, etc - to get me going in the right direction.

Note: I've done hex grid and mouse-grid coordinate conversion before in 2D. Looking for some pointers on how to do the same in 3D. The result I would like to achieve is something similar to this video.

  • \$\begingroup\$ Worth checking out is how Settlers II did it. It was a hexagonal space game, like buildings would be placed on hexagon cells. However, it uses triangles for everything. I'll edit if I can find something explaining it. Here's something that shows it: forums.wesnoth.org/viewtopic.php?f=13&t=24560&start=15 \$\endgroup\$
    – William
    Commented Jul 11, 2012 at 3:35
  • \$\begingroup\$ I don't understand why your hexagons have so many axis-aligned edges. \$\endgroup\$
    – Jimmy
    Commented Jul 11, 2012 at 5:50

2 Answers 2


I also built a hexagonal terrain for my game. Unfortunately I didn't get much further than that. Here's what it looked like:

Hexagonal landscape

Pretty nice, if you don't mind me saying. ;)

First things first: how do you generate a hexagon? Well, a hexagon is a form of polygon. Therefor its edges lie on a unit circle. So we can use sine and cosine to generate six points:

for (int i = 0; i < 7; i++)
    m_CellOffset[i] = tb::Vec3(
        tb::Math::CosDeg(30.f + 60.f * i) * m_Radius,
        tb::Math::SinDeg(30.f + 60.f * i) * m_Radius,

That will give us a 3D hexagon, where the points lie on the x- and z-plane.

Hexagon yo

Then I convert this hexagon to six triangles.


This is useful, because it allows me to make landscapes like the one above, where each vertex can be offset.

Now I can build a grid of hexagons to use as terrain.

Clipping oh noez

However, as you can see, this doesn't really work, because hexagons aren't square and overlap with each other. So to fix that, I just offset every other row:

Hardcore Hexagon action

Now if you're wondering about the best way to store that, I wouldn't be able to tell you. I never got that far.

  • \$\begingroup\$ This makes sense, thanks! I will try this approach out this evening, if i make any progress on this i will be glad to host it on github as an example project, I know how to store the state of each cell, etc. \$\endgroup\$
    – Robin
    Commented Jul 11, 2012 at 18:17

Answering your question 2 is picking in 3d space, I can think of 3 ways:

  1. cast a ray from the camera through the mouse point on the projection plane into 3space and into your grid. This is just like firing a bullet. Where does it hit? Your going to need to know how to do this anyway, right.

  2. perform the perspective projection on the hexagonal center points. Which point is closest to your mouse point? (this method is non exact, should work well)

  3. draw each triangle (or hexagon) with a unique color into the back buffer. The color is an integer (up to 32 bits!, thats a lot of hexagons). You only draw the back buffer once for each viewpoint. Simply read the color under the cursor. Thats your triangle (or hexagon) This method works very well is used in 3d paint programs, 3d modeling programs, etc. Detailed in the Opengl Red book, "object selection using the back buffer". Though the description is outdated relying on much smaller bits per pixel workarounds.

Since you said you already know about hexagons and mapping I won't detail any of that.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .