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

Question

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

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

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

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

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

此屏幕截图演示了效果:

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

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

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

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

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

Answer 1

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

您可能以严格限制深度缓冲区精度的方式配置剪裁平面zNear和zFar裁剪平面.通常,这是由zNear剪裁平面值太靠近引起的0.0.随着zNear剪切平面越来越接近0.0,深度缓冲器的有效精度急剧下降.将zFar剪切平面进一步远离眼睛移动总是对深度缓冲精度产生负面影响,但它不像移动zNear剪切平面那样具有戏剧性.

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

1)只需增加相机near值:

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

在这个小提琴中演示了这个解决方案

• 解决方案由@WestLangley 在GitHub上提出
• 有关更多背景信息,请参阅OpenGL.org页面
• 这是一个很好的问题,关于决定你的近剪裁平面值

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

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

在这个小提琴中演示了这个解决方案

• 这个解决方案是由@FastSnail在他的评论中提出的,来自StackOverflow上的这个答案
  
• 另请参阅此YouTube电影中对数VS正常深度缓冲区的OpenGL演示
• 另一个专门针对这部YouTube电影中的 three.js/WebGL的演示
• 有关对数深度缓冲区的更多背景信息,请参阅此StackOverflow问题

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