Building Procedural Hex Worlds with WebGPU

Developer Felix Turner built a procedural hex-map generator using Three.js and the Wave Function Collapse algorithm to create detailed medieval islands. The system manages 4,100 cells across multiple grids, using a custom recovery system to handle complex 3D elevation and connectivity constraints. By optimizing with WebGPU and BatchedMesh, the generator produces visually rich, interactive environments that run smoothly in the browser.

Key Points

• The project uses a modular Wave Function Collapse approach, splitting a large 4,100-cell map into 19 smaller grids to manage algorithmic complexity and failure rates.
• A layered recovery system involving backtracking and 'Local-WFC' re-solves small regions to fix boundary conflicts between neighboring grids.
• While WFC handles the structural logic of terrain and elevation, Perlin noise is used for the organic clustering of trees and buildings to avoid the repetitive patterns WFC often produces.
• The technical implementation leverages Three.js WebGPU and BatchedMesh to render thousands of unique tiles in a handful of draw calls, maintaining 60fps on both desktop and mobile.
• Visual polish is achieved through custom TSL shaders for water effects and a post-processing pipeline featuring GTAO, depth of field, and dynamic shadow maps.

Sentiment

The community is broadly enthusiastic and admiring of the technical work and visual output, tempered by substantive technical objections around WFC terminology, global coherence limitations of local constraint solving, and performance inconsistencies. The discussion is constructive and technically engaged overall, with the AI-authorship debate adding a minor contentious undercurrent.

In Agreement

• The visual result is genuinely impressive — the tilt-shift diorama aesthetic, animated oceans, and dense tile variety make for a compelling demo that many commenters praised enthusiastically.
• The multi-layer recovery system (backtracking, Local-WFC patcher, mountain tiles for unsolvable seams) is recognized as clever engineering that effectively handles WFC's inherent instability at large scales.
• The detailed technical write-up is appreciated as a high-quality resource for developers interested in procedural generation and constraint solving.
• Using WebGPU features like TSL shaders and BatchedMesh for performance is seen as a smart modern approach, and the smooth frame rates reported on mobile devices confirm its effectiveness.
• The reroll feature for sub-areas is noted as a great interactive touch that enhances usability.

Opposed

• Several technically-minded commenters argue the project misuses the 'Wave Function Collapse' name — the original WFC algorithm infers constraints from a sample, while this project uses hard-coded constraints, making it more accurately a constraint satisfaction problem solver.
• Local constraint solving is fundamentally limited: WFC can only optimize tile adjacency locally and cannot reason about global map structure, resulting in roads that don't form sensible networks and rivers that lack realistic flow — a limitation multiple commenters describe as an inherent ceiling of the approach.
• Performance is inconsistent across hardware — at least one commenter reports only 5fps on a mid-range Intel integrated GPU, suggesting WebGPU support gaps create a degraded experience for some users.
• Some commenters suspect the article was written with significant AI assistance, citing stylistic patterns like em-dash-heavy phrasing and an unsolicited statistics grid as hallmarks of LLM-generated text.
• Better algorithmic approaches exist: Knuth's Algorithm X, industrial constraint solvers (MiniZinc, Clingo), bitfield-based superposition, and noise-based terrain generation are all mentioned as potentially superior alternatives for specific aspects of the problem.