Three.js_解决谍影闪烁重影模型的方法

Three.js_解决谍影锯齿闪烁重影模型的方法

像素点重叠问题

问题展示

解决后效果

解决方法

renderer = new THREE.WebGLRenderer({
  antialias: true,
  logarithmicDepthBuffer: true,
});

设置logarithmicDepthBuffer属性为true, 便可以处理这个问题

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

原因

渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight.

那么, 运用了logarithmicDepthBuffer( 对数深度缓存 )后, 处理了这种情况, 具体怎么处理的, 目前我也还不明白, ^_, 留个问题, 以后处理

总结: 如果要在单个场景中处理巨大的比例差异，就有必要使用logarithmicDepthBuffer : true