three中模型材质闪烁问题

 

 模型材质闪烁问题 Z-Fighting

主要原因分析：

　   一、可能模型有重叠面，或着跟其他模型离的太近。

　　有些模型在建模时处理不慎，会导致在几乎重叠的位置有多个面。渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight

       二、材质过于锐利。（可能是因为没有开启纹理过滤，或者关闭了MipMap）

　　由于绘制像素屏幕坐标与纹理采样uv之间的比率（偏导数）很大，导致相邻屏幕像素采样的纹理颜色跳跃很大，看起来材质上面出现了锐利的条纹和光点，尤其是摄像机或者模型移动的时候，模型表面材质闪烁严重

　　three中加载模型遇到闪烁严重的问题，相机拉得越远模型闪烁越厉害，出现此问题的原因是因为出现了深度问题，以下记录解决办法

解决方法：

　　一、WebGLRenderer开启logarithmicDepthBuffer
　　logarithmicDepthBuffer 的定义：
　　logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 默　　　　认是false。

renderer.logarithmicDepthBuffer = true;

　　二、强制设置相机的渲染范围，越小越好

　　三、将加载的模型等比例的缩小

　　四、对模型的材质进行偏移

　　五、使用对数深度缓存(如果要在单个场景中处理巨大的比例差异，就有必要使用, 默认是false。 使用了会带来额外的开销, 但是效果会变好)

renderer = new THREE.WebGLRnderer({
   antialias:true,
   logarithmicDepthBuffer：true
})

如果有不理解的，请加qq群讨论：854184700