在基于WebGL或Three.js的HTML5建模应用中，很多人遇到过这样的情况：两个重叠的物体表面会交替显示，画面一闪一闪，随着相机移动还会不断变化。这种现象通常被称为深度冲突（z-fighting），是三维渲染管线中深度缓冲精度不足的直接表现。本文将系统分析闪烁产生的底层原因，并给出多种经过验证的解决方案。
一、模型闪烁的根本原因：深度缓冲精度不足
WebGL在渲染每个片元时，会将其深度值写入深度缓冲区（Depth Buffer），再通过深度测试决定当前片元是否遮挡之前的片元。问题在于，深度值并非均匀分布在观察空间中，而是经过透视投影后映射到[0,1]区间，且大部分精度集中在了靠近相机的一端。
当两个表面的深度值非常接近，接近到深度缓冲区已经无法区分它们时，深度测试的结果就变得不确定：有时A面通过测试，有时B面通过测试，反映到画面上就是表面交替出现的闪烁。典型场景包括：地面与地面上薄板的共面叠加、CAD模型中重合的壁面、地形与道路贴合处等。
深度缓冲的精度还与三个因素直接相关：近裁剪面（near）、远裁剪面（far）的距离以及深度缓冲位数。WebGL1默认提供16位深度缓冲，WebGL2一般支持24位。裁剪范围越大，单位距离可分配的精度越小，闪烁概率越高。
二、方案一：合理设置相机裁剪面
最简单有效的办法是压缩near与far之间的比值。实践中有条经验法则：far与near的比值应控制在1000以内，建模类应用尽量不超过2000。很多开发者习惯性把near设为0.001、far设为1000000，这种设置下闪烁几乎是必然的。
在Three.js中可以这样调整：
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000); // 建模场景推荐：near取0.1到1之间，far按实际场景尺寸设置 // 如果需要近距离观察细节，可将near设为0.5，避免过度追求极小值
需要注意的是，near对精度的影响远大于far。把near从0.001调整到0.1，远处的深度精度可以提升两个数量级。因此在建模软件中常见做法是：模型编辑时用较远的near，只有用户真正需要贴脸观察时才动态调小near。
三、方案二：多边形偏移与几何处理
对于确实需要共面渲染的元素，比如贴在墙面上的标签、地面上的辅助网格线，可以使用多边形偏移让其中一个表面在深度上略微后退或前移，从而避免深度值完全相同。
Three.js提供了polygonOffset相关属性：
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
polygonOffset: true,
polygonOffsetFactor: -1, // 负值让表面向相机方向偏移
polygonOffsetUnits: -1
});
// 常用于地面网格线、贴花等与底层表面共面的元素如果闪烁来自模型自身，比如导入的CAD或BIM模型存在重合面，就需要在几何层面处理：加载后遍历BufferGeometry合并顶点并删除重复三角形，或者建模阶段直接消除共面体。常见的检测方式是比较三角形质心与法线，若两者都一致则判定为重合面并移除其中一个。
四、方案三：对数深度缓冲
当场景确实需要极大的可视范围（例如大范围地理建模、BIM整楼展示）时，普通深度缓冲的精度不够用，可以启用对数深度缓冲。它改变深度值的分布方式，让精度在对数尺度上均匀分布，大幅缓解远处物体的深度冲突。
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
// 开启对数深度缓冲，需WebGL2或扩展支持
renderer.capabilities.logarithmicDepthBuffer = true;
// 或在创建时指定：new THREE.WebGLRenderer({ logarithmicDepthBuffer: true })对数深度缓冲的代价是轻微的性能开销和与某些自定义shader不兼容，启用后自定义着色器需要正确处理logdepthbuf相关的代码片段。对于常规建模应用，优先使用方案一和方案二，只在超大场景下才考虑此方案。
五、方案对比与排查建议
三种方案并非互斥，实际项目中常常组合使用。下表给出选型参考：
| 方案 | 适用场景 | 代价 |
|---|---|---|
| 调整裁剪面 | 所有场景的首选基础优化 | 几乎无 |
| 多边形偏移 | 共面元素如网格线、贴花 | 极小 |
| 几何去重 | CAD/BIM导入模型的内部重合面 | 加载时一次性计算 |
| 对数深度缓冲 | 超大范围场景 | 一定性能开销 |
排查时可按顺序进行：先检查相机参数是否合理，再将闪烁物体暂时隐藏以确认是否为深度冲突，随后对共面元素加偏移，最后处理模型本身的重复面。如果闪烁只在特定角度出现且物体间距确实存在，还需检查模型单位问题——单位过小时，浮点精度本身也会引入抖动，可在加载后对模型整体放大到米级单位再渲染。
总的来说，HTML5建模中的闪烁问题本质是深度精度与场景尺度之间的矛盾，只要理解了深度缓冲的量化机制，从相机参数、渲染偏移、几何数据三个层面入手，绝大多数闪烁都可以被彻底消除。