The Joy of Hex

February 1, 2011

My game Hexyle is progressing nicely.  I’ve just nailed the 3d rendering system, which creates a procedurally generated world out of hexagonal tiles.

The images from my previous post were just throw togethers to explore the general aesthetic of using hexagonal building blocks to create random scenery – there was no consideration for frame rate or optimisation – it would have been impossible to play at the 10 fps or so it was allowing me.  So I had to rebuild an optimised game engine from scratch using some innovative techniques to achieve maximum visual impact and fast frame rate.

Asides from the usual considerations of open gl optimisations such as pre baked lighting, streamlined meshes etc, I’ve created my own geomipmapping technique using depth buffering.

Geomipmapping is a technique used in 3d games whereby low poly models replace high poly models at far distances, to improve performance without any visual degradation.  The trouble with this however is that you have to ‘switch’ over the 2 models at the right time, at the right distance, to avoid ‘popping’ new geometry with suddenly higher/lower polys.  This involves having lots of different versions of the same model in memory.

My method is quite simple, and a bit more artistic.  I simply blend the high poly foreground terrain into a low poly background equivalent using depth fading.  It’s a technique that probably is only suitable to an abstract geometric landscape, which is all what I need, and it works a treat.  This affords me up close detail on the hexagonal tiles, and extremely long draw distances for the world at large.

Low poly version of terrain

Shaded low poly terrain

High poly foreground of hexagonal tiles, transaprency based on distance/depth

Final composite


Here are some more pics from the new game engine – which now runs at about 60 fps on my 13″ macbook 🙂


A work of thanks and credit to the software I’m using,

Firstly the game is being developed with the jMonkey engine, which is proving to be a powerful game development platform for indie game developers, with great community support, and help from the jMonkey creators themselves.  I’ve also embedded the Processing core into my project, because it’s all java – which allows me down the line to experiment with including all my processing type animation and graphics into the equation.  Presently I’m just using the 3d noise functions to generate basic terrain tests.  I’m also using Blender to design the basic building block models and texturing.  All in all this is a 100% open source, independent game project.

I’d also just like to mention the hexagonal shape itself.  I’ve become increasingly obsessed and spellbound by this shape, it pervades the structures of all of nature, more so than any other shape, even circles, squares and triangles are all but absent.  A whole thesis could be written about the hex shape’s meaning in nature, suffice to say it’s nature’s way of perfectly dividing up a 2d plane, which has practical functions, but also to me, has an instant visual impact unlike any other pattern.

Here are some examples.



Silicon atoms

Clouds on Saturn

Most amazing of all, the Giant's Causeway, Northern Ireland - and most bizarrely by coincidence, is about 50 miles from where I live!


Finally I’d just like to mention where I got my inspiration from for this project.  It wasn’t a case of seeing Minecraft and trying to copy it, which believe me, a lot of people out there are trying to do right now.  You can copy an idea, but you can’t copy success.

For me it was combination of things…

I had been reading Fritjof Capra’s Tao of Physics, and his reference to a Tibetan Buddhist text which drew similarities to modern day quantum physics, in how scientists are perceiving infinite worlds opening up the closer they look at a sub atomic level –

from the Gandavyuha:-

“As soon as he is inside, Sudhana perceives that the Tower’s interior is as vast as the sky.  Strewn with jewels, banners, flowers, and innumerable other adornments, the inconceivably huge building contains hundreds of thousands of other towers, each of which encapsulates an infinity of worlds.”

Reading this inspired me as to how one could implement this into an 3d interactive world, where walking through the tower entrance took you into a different world, with other towers, I started thinking technically how to achieve this – having 2 game worlds rendering simultaneously, and then masking one with the other as you walked through the entrance.  Although this doesn’t now relate to Hexyle as such, it initially got me thinking of creating my own computer game world.

Anyway, whilst having this at the back of my mind I had just bought Civilization 5 for PC, and noticed how it went from a square grid design to a hexagonal design for its map layout.  It made perfect practical strategic gaming sense, and also looked strangely beautiful.

I then started hearing about this game Minecraft everyone was talking about.  I downloaded it. Boom.  Computer generated worlds suddenly took hold of me again, but I had to do something different, for starters I thought how about using a hexagonal shape instead of a cube for such a game. I then discovered Heroscape – and well, everything has pretty much exploded from there.

I could go on at length about all the computer games I’ve played since a kid that are now inspiring me to create my own computer generated gaming world, everything from Survival, Scorched Earth, The Sentinel, Midwinter, Eco, Hunter, Lords of Midnight, Carrier Command up to Bejewelled, Portal, Electroplankton, Trackmania, Worms, Catan..  It deserves another blog by itself.

Next phase in development is to get some basic interactive block building going..


6 Responses to “The Joy of Hex”

  1. debra said

    so brilliant glenn! six sided things ARE better than 5!

  2. 5 sided things are gay.

  3. Isaac said

    Very interesting, would like to know more about how you integrated processing into JME. Have you made this publicly available? If so where can I find it?

  4. you just import the processing library, then instance a PApplet class object, then call any processing function within that..

  5. Anber said

    This is wonderful. I was looking into using mashing processing and JMonkey as well. I’m having problems getting processing things to work though. Can you please tell me what you call to get PApplet started? My Processing application just sit there. The processing code does not seem to run because the applet is not running. I called start on the PApplet but a winner is NOT me 😦

    Loving you work.

  6. something like this (put these lines in the right parts of your code)

    import processing.core.*;

    class MyP extends PApplet {

    MyP p = new MyP();

    then you can access all processing methods like p.random(100) etc

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: