javascript - 缩小时 Material 会发光(three.js r78)

Question

缩小时 Material 会透光(three.js r78)

当缩小到一定程度时，其他物体后面物体的 Material 开始透出。看起来很像人脸重叠时的效果(人脸在同一平面)。

为了证明这一点，我制作了 a fiddle .

在这个例子中，我绘制了两个细框(厚度为 1 并且框之间有一个空白空间 也 1) 所以盒子没有相互接触，但 Material 无论如何都会发光。

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

这个截图演示了效果:

此屏幕截图显示两个几何图形之间有一个空间。

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

我尝试使用不同的 Material 属性，但我似乎无法找到任何 Material 设置来防止这种情况发生。

这是一个错误吗？还是 WebGL 限制？还是 3D 图形的一般限制？ 还是我遗漏了什么，这实际上是 Material 或渲染器配置错误吗？

在我的模型中，这种效果确实令人不安且丑陋。我能以某种方式阻止这种情况发生吗？

Answer 1

此问题是由严重限制深度缓冲区精度的错误配置引起的。
在 OpenGL.org描述如下:

You may have configured your zNear and zFar clipping planes in a way that severely limits your depth buffer precision. Generally, this is caused by a zNear clipping plane value that's too close to 0.0. As the zNear clipping plane is set increasingly closer to 0.0, the effective precision of the depth buffer decreases dramatically. Moving the zFar clipping plane further away from the eye always has a negative impact on depth buffer precision, but it's not one as dramatic as moving the zNear clipping plane.

是的，因为在示例中近裁剪平面值设置为 1。
到目前为止，我知道这个问题有两种解决方案。

---

1) 简单地增加相机near值:

// camera
camera = new THREE.PerspectiveCamera(
    45, window.innerWidth / window.innerHeight, 
    500, // <-- Increased near from 1 to 500
    150000
);

此解决方案在 this fiddle 中进行了演示

• @WestLangley 建议解决方案 here on GitHub
• 引用that OpenGL.org page了解更多背景信息
• Here a nice question关于决定你的近剪裁平面值

---

2) 配置 WebGL 渲染器以使用对数深度缓冲区:

// renderer
renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true // <-- Set render to use logarithmic depth buffer
});

此解决方案在 this fiddle 中进行了演示

• 这个解决方案是由@FastSnail 在他的评论中提出的，来自this answer on StackOverflow。
  
• 另请参阅 this YouTube movie 中关于对数 VS 正常深度缓冲区的 OpenGL 演示。
• 还有另一个专门针对 three.js/WebGL 的演示 this YouTube movie
• 另请参阅 this StackOverflow question有关对数深度缓冲区的更多背景

---

如果您知道任何其他解决方案，请发布另一个答案。