threejs- z-fighting 问题

Z-Buffer

在threejs中，使用深度缓冲（Z-Buffer）来完成场景可见性计算，即确定场景哪部分可见，哪部分不可见。深度缓冲（Z-Buffer）是一个二维数组，其中的每一个元素对应屏幕上的一个像素，如果场景中的两个模型在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距离观察者较近的物体在该像素点的渲染结果，这样就形成了近的模型遮挡远的模型的结果。

上面说到，深度缓冲（Z-Buffer）是一个二维数组，但是数组的元素类型却可以不同，不同的元素类型代表着不同的精度。这和颜色的精度很像，比如GIF图像最多用8bit保存一个颜色，也即GIF最多支持256种色彩。以此类推，如果深度缓冲的也用8bit来保存一个像素的深度，那就是说该深度缓存只有256个深度级别。在threejs中只实现了一种深度缓冲，但是在例子中，又实现了一个精度更高的深度缓冲——logarithmicdepthbuffer，可以看示例webgl_camera_logarithmicdepthbuffer

Z-Fighting

当场景中的两个模型在同一个像素生成的渲染结果对应到一个相同的深度值时，渲染器就不知道该使用哪个模型的渲染结果了，或者说，不知道哪个面在前，哪个面在后，于是便开始“胡作非为”，这次让这个面在前面，下次让那个面在前面，于是模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题。

（图片来自：