Skip to content

在浏览器里造开放世界,第 9 部分:Transvoxel 从脚手架开始

作者:Oleg Sidorkin,Cinevva CTO 和联合创始人

刚看到?看系列导览。那里解释了 spike 是什么,并链接了所有部分。

接缝是信心去死的地方。

一切都可以看上去稳定,直到两个分辨率相遇。一个 LOD 0 的 chunk 挨着一个 LOD 1 的 chunk。它们的 mesh 是独立生成的。它们共享边界的地方,顶点位置对不上,因为低分辨率 chunk 的网格密度只有一半。结果是肉眼可见的裂缝、T 形交叉点和闪烁的边。

Transvoxel 算法的解法是在两个不同分辨率 chunk 之间的边界面上生成特殊的过渡 cell。这些 cell 同时从高分辨率和低分辨率网格采样,吐出把两边表面缝起来的三角形。算法用自己的查找表,独立于常规 marching cubes 表,有 512 种过渡 cell case。

到这时候我们已经攒够了集成的伤疤,知道不能急着实现。

Spike 15 只有一个任务:在碰完整算法之前先做一个能信任的接缝测试 rig。我们搭了一个受控环境,两个已知 SDF 数据的 chunk 以不同分辨率并排放着,带可视化控制可以独立切换主 mesh、接缝 mesh、wireframe 和法线。

在新标签页里打开 Spike 15 ↗ · 看源码

测试 rig 稳了之后,Spike 16 在单一面上验证表驱动的过渡 cell 生成。我们挑了一个轴对齐面(+X 边界),只为那个面实现过渡 cell 求值,把输出和 Transvoxel 论文里的参考数据做对比。

在新标签页里打开 Spike 16 ↗ · 看源码

我们故意一次只测一个面,因为过渡表的接线有很多独立失败模式。Case 索引计算依赖于从两个网格里采样正确的顶点。过渡 cell 里的顶点编号用的是和常规 marching cubes cell 不同的编号方案。绕序必须和主 mesh 一致,否则背面剔除会把你的接缝三角形吃掉。如果你一次测六个面,所有症状看上去都是随机的。如果你彻底测一个面,你拿到的是有意义的、可 debug 的失败。

这个阶段另一个微妙的收获是工具投入。我们早早做了可见性切换、只渲染接缝、用颜色编码 LOD 指示器。当时这些控制感觉像额外开销。后来 corner case 变丑的时候,它们一遍一遍回本,因为我们能精确隔离到底是哪些接缝 cell 在作妖。

到这一章末尾,我们不是"接缝搞定了"。我们处在一个接缝 bug 可以被推理、而不是被害怕的位置。

第 10 部分真正的过山车开始了。混合 LOD 拐角、绕序翻转、部分 overdraw 鬼影,以及那些你确信算法有错、然后发现 bug 其实是 draw 范围读到了活跃顶点数之外的时刻。

本章涉及的技术

Transvoxel 算法。 Eric Lengyel 设计的(transvoxel.org),Transvoxel 解决了体素地形 LOD 里最难的问题:不同分辨率 chunk 之间的接缝。一个高分 chunk 挨着一个低分 chunk 时,marching cubes mesh 在边界上对不齐,产生肉眼可见的裂缝。Transvoxel 在边界面上插入特殊的过渡 cell,用匹配两边的额外三角形把分辨率差异桥接起来。算法用自己的查找表(独立于常规 marching cubes),有 512 种过渡 cell case,减为 73 个等价类。它无专利,已经在出货游戏里用过(Space Engineers、Astroneer)。看我们的关于 Transvoxel 的地形指南

过渡 cell。 在两个 LOD 级别之间的面上生成的特殊 cell。和常规 marching cubes cell 从一个网格上采 8 个角不同,过渡 cell 同时从高分辨率和低分辨率网格采样。高分辨率面有 9 个采样点(3x3),低分辨率面有 4 个(2x2)。Cell 分类和三角化用的是专门的表,产出连接两边分辨率顶点的三角形。顶点编号方案和常规 MC cell 不同,是常见的实现 bug 源。

LOD 过渡接缝。 两个 mesh 分辨率之间的边界,拓扑不匹配导致视觉瑕疵。不缝合的话,一个 LOD 0 chunk(1m 网格)挨着一个 LOD 1 chunk(2m 网格)会产生 T 形交叉点:细 mesh 在边界上有顶点,粗 mesh 没共享,光从裂缝里漏过去。Transvoxel、geomorphing、skirt 几何是修这些接缝的三种做法。对体素地形,Transvoxel 是标准解法,因为 geomorphing 只对 heightmap 起作用。看体素地形的 LOD


12 篇中的第 9 篇。 上一篇:第 8 部分 - 不丢掉基线的情况下做集成 下一篇:第 10 部分 - 接缝混乱和拐角 boss 战 系列导览:/zh-CN/blog/2026-02-25-open-world-browser-series-guide