缩小时材质闪耀（three.js r78）

Question

缩小时材质闪耀（three.js r78）

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

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

在这个例子中，我画了两个薄盒子（厚度为1，盒子之间有一个空的空间）另外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
);

此解决方案在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
另一个专门针对this YouTube movie
有关对数深度缓冲区的更多背景信息，请参阅this StackOverflow question

缩小时材质闪耀（three.js r78）

缩小时材质闪耀（three.js r78）

1 个答案:

如果您了解其他任何解决方案，请发布其他答案。