缩小时材质闪耀(three.js r78)

当缩小到某个范围时,其他对象后面的对象的材质开始闪耀.它看起来非常类似于面重叠时的效果(面在同一平面内).

为了证明这一点,我做了一个小提琴.

在这个例子中,我绘制了两个薄盒子(厚度为1,盒子之间也有一个空的空间),所以盒子不会相互接触,但材料无论如何都要照射.

// geometry with thickness 1
var geometry = new THREE.BoxGeometry(20000, 20000, 1);

此屏幕截图演示了效果:

此屏幕截图显示两个几何之间存在空格.

缩放时,效果有时会出现,有时会消失(这也取决于缩放距离和屏幕大小).

我尝试使用不同的材料属性,但我似乎无法找到任何阻止这种情况发生的材料设置.

这是一个错误吗？或WebGL限制？或3D图形的一般限制？或者我错过了什么,这实际上是材料或渲染器配置错误？

在我的模特中,这种效果真的很令人不安和丑陋.我可以以某种方式防止这种情况发生吗？

如何线性化对数深度缓冲区？

片段着色器中线性深度缓冲区的可视化

  float n = 1.0; // camera z near
  float f = 27000000.0; // camera z far
  float z = texture( DepthTex, TexCoord ).x;
  float d = (2.0 * n) / (f + n - z * (f - n));
  FragColor=vec4(d,d,d,1);

球体顶点着色器

vec4 ClipCoords(vec3 position,mat4 matrix)
{
   vec4 clip = matrix * vec4(position,1.0f);
   clip.z =((2.0f * log(1.0f * clip.z + 1.0f) / log(1.0f * 27000000.0f + 1.0f)) - 1.0f) * clip.w;
   return clip;
}
 gl_Position = ClipCoords(position,matrix);

左侧显示了对数深度缓冲线性或者更确切地说,它的缺乏,而右边显示linarization不log …