# 3D terrain map with hexagon grids

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).

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

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.

• 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 – William Mariager Jul 11 '12 at 3:35
• I don't understand why your hexagons have so many axis-aligned edges. – Jimmy Jul 11 '12 at 5:50

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

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,
0.f,
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.

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.

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:

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.

• 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. – Rob Jul 11 '12 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.