Mar 12, 2026 07:00:00

'Hex Map Toy' automatically generates hexagonal hex maps commonly used in games on WebGPU, applying wave function contraction

An experimental map generator called ' Hex Map Toy ' has been released that automatically generates hexagonal tile terrain maps commonly seen in games using WebGPUs. According to the creator, it can easily generate maps with a total of 19 grids and approximately 4,100 cells in the browser, and can render at up to 60 fps.

Building a Procedural Hex Map with Wave Function Collapse

https://felixturner.github.io/hex-map-wfc/article/

You can experience the Hex Map Toy demo below.

Hex Map Toy
https://felixturner.github.io/hex-map-wfc/

Below is a screenshot of the actual execution on a smartphone (iPhone Air). If the browser supports WebGPU, it will also work on smartphones.

WebGPU-driven hex map generator 'Hex Map Toy' automatically generates hex-style terrain on a smartphone - YouTube


Hex Map Toy uses the Three.js WebGPU renderer and TSL shaders to build a medieval island map with approximately 4,100 hex cells. It procedurally generates terrain including roads, rivers, coastlines, cliffs, forests, villages, and more, and the generated results are seeded and deterministically reproducible.

At the heart of this mechanism is ' wave function contraction .' Originally a term from quantum mechanics, Hex Map Toy is based on the idea that 'each square initially has various candidates, leaving only those that are consistent with the surroundings, and gradually deciding on one.'

For example, if a square is decided to be a road tile, the adjacent squares must also be connected to the road, and the candidates are narrowed down so that if it's a river, it's a river, and if it's a coast, it's a coast, and so on. Furthermore, it's not enough that the adjacent sides simply match; the height of the terrain is also taken into consideration. In other words, not only do roads and rivers connect naturally, but slopes and cliffs with differences in elevation are also combined in a way that doesn't collapse, resulting in a more three-dimensional terrain that is more like a game.

However, this method is prone to failure when the map becomes large. Therefore, Hex Map Toy does not create the entire map all at once, but divides it into several small areas and generates them sequentially. Furthermore, if any inconsistencies arise along the way, the developer can rewind and try different candidates, or remake parts of the map, and finally hide the seams with natural features like mountains.

In terms of appearance, WebGPU is used to express the sparkle on the water surface, the waves on the coast, the shading of the terrain, etc. However, since determining the placement of forests and buildings entirely by wave function contraction can easily lead to unnatural results, noise processing is used in those areas to create cohesive forests and villages.

Hex Map Toy is available on GitHub under the MIT license.

felixturner/hex-map-wfc
https://github.com/felixturner/hex-map-wfc