Before I try to attempt how to render such thing. I was wondering what your guys suggestion on how to render a hexagon grid. Here an example from the game King's Bounty.

http://img146.imageshack.us/img146/315/kingsbountythelegend200.jpg

Should I render an array with each element that stores a Vector position. Then loop the array and draw a single hexagon??

My suggestion would be to have a single hexagon model and then redraw it as many times as necessary in the desired positions. You can implement semi-transparency in the shader for the model if desired.

I have done it a couple different ways depending on my need at the time.

If you want to control each hex-cell's texture independently then using the instancing approach is one of the better:

Create 1 mesh/model of the hex you want.
Then looping thru your grid array, render the mesh with its new position and/or texture.

This is from an old project (i really need to get back on someday...)
http://img132.imageshack.us/img132/9416/hexgrid1.png




I have also created a single (very large) mesh containing all of the vertices/indexbuffer/normals etc... on top of which I draw one big(bigger) texture.
but that was for a different purpose.

If it is for an overlay ontop of another terrain system you can have (precreated or dynamically rendered) a texture holdin the hex grid you want and Project it on to the surface.

cheers,

forgot to mention.
I found the biggest challenge in creating a hexagonal grid system was knowing what position to put ech hex-cell
There are several articles around the web that address it, depending on your specific needs.
Or if you have a nack for trig. you will be able to figure it out yourself (which is a nice exercise)

Failing that here is one to start you off:
http://www.drking.plus.com/hexagons/index.html

Do a search on "hexagon grid" or "hexagon map" to find more resources :)

Awesome thanks guys.

I've done something similar in the past where each hex contained a unique texture.  I treated the hex "grid" as no different from a square/rectangular grid...the only difference is that every other row is offset one-half the "short" width (i.e. side-to-side width as opposed to corner-to-corner width) of the hex.

I setup a Hex object that contained Vector array to form a square indicating the position/size of each hex and overlayed each hex's texture on the square.  Fortuantely this made hit testing REALLY easy.  All I had to do was test the squares that were intersected, then use a single black-and-white "hit test" bitmap by mapping the "hit" location (point where ray intersects hex square) to the corresponding local coordinate on the hit texture and getting the color (black = miss, white = hit).

However, if it's not necessary to render the tiles individually, but merely map a hexagon tile to a location on a larger "map" texture you can draw the map using fewer textures, and get the selected hex using some simple division and the same "hit test" image technique.  To draw the hex border, you'd store a single texture and overlay location where it should be drawn on top of the larger map texture(s).

Here an update on my hexagon grid. It's coming along quite well.

http://www.youtube.com/watch?v=xDCo83JlMMg