Building an open world in the browser, part 9: Transvoxel started with a scaffold
By Oleg Sidorkin, CTO and Co-Founder of Cinevva
New here? Use the series guide. It explains what a spike is and links all parts.
Seams are where confidence goes to die.
Everything can look stable until two resolutions meet. A chunk at LOD 0 sits next to a chunk at LOD 1. Their meshes are generated independently. Where they share a boundary, the vertex positions don't match because the lower-resolution chunk has half the grid density. The result is visible cracks, T-junctions, and flickering edges.
The Transvoxel algorithm solves this by generating special transition cells along the boundary face between two chunks at different resolutions. These cells sample from both the high-res and low-res grids simultaneously and produce triangles that stitch the two surfaces together. The algorithm uses its own lookup tables, separate from the regular marching cubes tables, with 512 transition cell cases.
We had enough integration scars by this point to know better than to rush the implementation.
Spike 15 was not "finish Transvoxel." It was "build a seam test rig we can trust." We set up a controlled environment where two chunks of known SDF data sat side by side at different resolutions, with visualization controls to toggle the main mesh, the seam mesh, wireframe, and normals independently.
Open Spike 15 in a new tab ↗ · View source
Once the test rig was stable, Spike 16 validated table-driven transition cell generation on a single face. We picked one axis-aligned face (+X boundary), implemented the transition cell evaluation for that face only, and compared the output against reference data from the Transvoxel paper.
Open Spike 16 in a new tab ↗ · View source
The one-face approach wasn't timid. It was surgical.
Transition table wiring has many independent failure modes. Case index computation depends on sampling the correct vertices from both grids. Vertex indexing within a transition cell uses a different numbering scheme than regular marching cubes cells. Winding order has to be consistent with the main mesh or backface culling will eat your seam triangles. If you test all six faces at once, every symptom looks random. If you test one face thoroughly, you get meaningful, debuggable failures.
Another subtle win from this phase was tooling investment. We built visibility toggles, seam-only rendering, and color-coded LOD indicators early. Those controls felt like overhead at the time. Later, when corner cases got ugly, they paid for themselves over and over because we could isolate exactly which seam cells were misbehaving.
By the end of this chapter we weren't "done with seams." We were in a position where seam bugs could be reasoned about instead of feared.
In part 10 the real roller coaster starts. Mixed LOD corners, winding flips, partial overdraw ghosts, and those moments where you're sure the algorithm is wrong and then discover the bug is a draw range reading past the active vertex count.
Technology referenced in this chapter
The Transvoxel algorithm. Designed by Eric Lengyel (transvoxel.org), Transvoxel solves the hardest problem in volumetric terrain LOD: seams between chunks at different resolutions. When a high-res chunk sits next to a low-res chunk, the marching cubes meshes don't align at the boundary, producing visible cracks. Transvoxel inserts special transition cells along boundary faces that bridge the resolution difference with additional triangles matching both sides. The algorithm uses its own lookup tables (separate from regular marching cubes) with 512 transition cell cases, reduced to 73 equivalence classes. It's patent-free and has been used in shipped games (Space Engineers, Astroneer). See our landscape guide on Transvoxel.
Transition cells. Special cells generated at the face between two LOD levels. Unlike regular marching cubes cells that sample 8 corners from one grid, transition cells sample from both the high-res and low-res grids simultaneously. The high-res face has 9 sample points (3x3), while the low-res face has 4 (2x2). The cell classification and triangulation use dedicated tables that produce triangles connecting vertices at both resolutions. The vertex numbering scheme is different from regular MC cells, which is a common source of implementation bugs.
LOD transition seams. The boundary between two mesh resolutions where topology mismatch causes visual artifacts. Without stitching, a LOD 0 chunk (1m grid) next to a LOD 1 chunk (2m grid) produces T-junctions: the fine mesh has vertices along the boundary that the coarse mesh doesn't share, causing cracks where light bleeds through. Transvoxel, geomorphing, and skirt geometry are three approaches to fixing these seams. For volumetric terrain, Transvoxel is the standard solution because geomorphing only works for heightmaps. See LOD for volumetric terrain.
Part 9 of 12.
Previous: Part 8 - Integration without losing our baseline
Next: Part 10 - Seam chaos and the corner boss fight
Series guide: /blog/2026-02-25-open-world-browser-series-guide