WebGL中深度碰撞方法总结
z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结
一个实际工作中的问题
遇到深度检测问题,最重要的是先搞明白是哪两个面离得太近导致的问题。比如上面这个问题,一直以来我都以为是柱子的面跟底图基础底面的问题。所以尝试了各种解决深度检测的问题都没起作用。
直到后面一次偶然的尝试,开启了CULL_FACE后,这个深度碰撞正常了。思考了很久才想到原来它发生深度碰撞的原因不是跟地图底面,而是柱子的上顶面跟下顶面离得太近发生的碰撞。恍然大悟!
这张图的表现很有欺骗性,底面是黑色的,而刚好碰撞部分也是一部分蓝,一部分发暗,所以很让人想当然的认为是底图跟柱子之间的问题。这个原因是因为默认没有面剔除,导致底面也被绘制了,而底面的法线方向与光线方向夹角很大,导致最后计算的颜色发暗。所以碰撞部分一部分明亮,一部分发暗。
最终这个问题的解决方式是,开启CULL_FACE,剔除背面三角形,同时在着色中为顶点增加一点偏移
let parameters = { [GL.DEPTH_TEST]: true, [GL.CULL_FACE]: true, [GL.CULL_FACE_MODE]: GL.FRONT };
// 计算cube该顶点的位置, cube的X坐标范围是-1~1,(rotatedPosition.x * coverage + 1.0) / 2.0坐标范围在0~1之间 // cube的Z坐标范围是-1~1,(rotatedPosition.z * coverage - 1.0) / 2.0坐标范围在-1~0之间 // cubeTopLeftPosition在cube局部坐标系的(-1, 0, -1)位置 vec4 vertexPosition = cubeTopLeftPosition + vec4( vec2( (rotatedPosition.x * coverage + 1.0) / 2.0 * useRadius, (rotatedPosition.z * coverage - 1.0) / 2.0 * useRadius ), 1.0, 1.0 );
深度检测根本原因
由于z-buffer的精度并不是线性相关的,而是在靠近near平面是精度非常大,但是靠近远平面时精度非常低,所如果平面离着相机非常远,那么就很可能出现深度检测问题。
解决方法
1. 首先搞明白是哪两个面发生的深度碰撞
2. 数据层面永远不要把两个物体靠的太近,最好在用户不太注意的地方稍微加一点偏移
3. 将near设置的大一些,这样使得场景中的物体都在高精度范围内,但这种方式也是需要调整,near设置的太大,会导致一些应当在视野范围内的物体被裁切掉
6. 修改投影矩阵的第十位,增加一个小的偏移(http://note.youdao.com/noteshare?id=43a15cadb1afebb1b4ad24a4c159d1e0&sub=37ECF8DF031440D99B69D9CE60850F8A)
![](http://images2017.cnblogs.com/blog/412020/201712/412020-20171216224224593-1205430224.png)