如何解决THREEJS物体重叠问题（物体闪烁问题）

Three在使用绘制墙面得时候发现里面得物体从墙外面溢出重合了，如图：

要解决这个问题我们需要了解什么是Z-Buffer、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问题。

解决 Z-Fighting

要解决Z-Fighting问题，有两个思路：

1、让各模型渲染结果不要在同一个像素出现相同深度值

2、人为设置渲染顺序，这样即使出现相同深度值，也能正确渲染

这里说一下第二种方法为什么也能解决Z-Fighting，比如有两个模型A和B，A的渲染顺序是0，B的渲染顺序是1，既是先渲染A，再渲染B，所以，如果A和B在某个地方出现了相同的深度值，那么后渲染的B会覆盖掉先渲染的A。下面是按照这两个思路提出的一些解决办法。

3、设置合适的near和far值

在创建相机的时候，会有near和far两个参数，用来设置相机的近平面和远平面。这个两个参数其实和深度缓冲（Z-Buffer）也密切相关，深度缓冲其实是非线性的，靠近相机的地方精度更高。什么意思呢？假如你的深度缓冲只有10个深度级别，你的相机的near=1，far=100，那么你的深度缓冲可能是这样的：

4、使用 logarithmicDepthBuffer 缓冲（这个最简单了）

缓冲的级别越多，冲突的概率相应的也就越低，所以，我们可以使用一个精度更高的z缓冲，来代替原有的Z缓冲。对于这个方法，threejs官网已经提供了一个例子webgl_camera_logarithmicdepthbuffer。不过，官网的例子为了演示效果，写得比较复杂，实际上只需要将logarithmicDepthBuffer参数设为true即可：

varrenderer =new THREE.WebGLRenderer({logarithmicDepthBuffer:true});

---

参考文档

1、解释如什么是z-fighting及何用polygon offset

Z fighting & polygon offset

2、讲到了near far 设置的问题

（1）Three.js/WebGL: Large spheres appear broken at intersection

（2）Z-Fighting

3、解释了depth write的使用

How to use polygonOffset solving Z-fighting poblems

4、讲到了解决透明问题的方法，比较全面

Transparent objects in Threejs