3D 与渲染 / 08

深度冲突

两个表面争抢同一批像素

交互演示

交互演示 · 移动指针或点击画面，观察变化

当两个表面位于相同深度时，深度缓冲中的舍入误差会逐像素决定显示哪一个，从而产生闪烁，这就是深度冲突。深度缓冲将大部分精度分配在近裁剪面附近，因此把近裁剪面从 0.1 改为 0.01，会让远处表面可用的精度空间减少到十分之一。左侧黄色贴花与地面完全重合，碎裂成闪烁条纹；右侧使用多边形偏移将贴花朝镜头方向拉近，因此保持完整稳定。

适用场景

在已有表面上绘制贴花时，使用多边形偏移，或让几何表面稍微分离。在条件允许时收紧镜头的近、远裁剪面范围，以提高深度精度。

实现示例

不依赖特定引擎的伪代码。请根据你使用的引擎调整函数和坐标约定。

camera.near = 0.1
camera.far = requiredViewDistance
decal.position = hit.point + hit.normal * smallOffset
// 也可以配置材质的深度偏移或多边形偏移。

常见错误

把近裁剪面设得极其接近零，可能浪费深度精度。过大的偏移会让贴花看起来悬空；应针对渲染器调整偏移，并从接近表面切线的角度检查效果。

延伸阅读

Three.js 手册 ↗

内容原作 Nicolas Zullo · 中文整理与交互改编