缩小时材质闪耀（three.js r78） [英] Material shines through when zooming out (three.js r78)

问题描述

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

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

为了证明这一点，我做了一个上，描述如下：

您可能已经配置了 zNear 和 zFar 以严重限制深度缓冲精度的方式剪切平面。通常，这是由 zNear 剪裁平面值引起的，该值非常接近 0.0 。随着 zNear 剪裁平面越来越接近 0.0 ，深度缓冲区的有效精度会急剧下降。将 zFar 剪切平面移离眼睛总是会对深度缓冲精度产生负面影响，但这并不像移动 zNear 剪裁平面。

是的，因为在示例中，近剪裁平面值设置为 1 。

到目前为止，我知道这个问题的两个解决方案。

---

1）只需在附近增加相机值：

  //相机
 camera = new THREE.PerspectiveCamera（
 45，window.innerWidth / window.innerHeight，
 500，//< ;- - 增加近1至500 
 150000 
）; 
  

此解决方案在这个小提琴

• 解决方案由@WestLangley提出在GitHub上


• 参考 OpenGL.org页面了解更多背景信息


• 这是一个很好的问题关于决定你的近剪裁平面值

---

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

  //渲染器
渲染器=新的THREE.WebGLRenderer（{
 antialias：true，
 logarithmicDepthBuffer：true //< ;-设置渲染以使用对数深度缓冲区
}）; 
  

此解决方案在这个小提琴

• 此解决方案由@FastSnail在他的评论来自 StackOverflow上的这个答案
  


• 另见此YouTube电影中的对数VS正常深度缓冲区的OpenGL演示


• 另一个专门用于这部YouTube电影中的three.js / WebGL的演示


• 另请参阅此StackOverflow问题有关对数深度缓冲区的更多背景信息

---

请发布另一个答案以防万一你知道吗其他解决方案。

Material shines through when zooming out (three.js r78)

When zooming out to a certain extend the material of objects behind other objects starts to shine through. It looks very similar to the effect when faces are overlapping (faces are in the same plane).

To demonstrate this I made a fiddle.

In this example I draw two thin boxes (thickness 1 and there is a empty space between the boxes of also 1) so the boxes are not touching eachother but the material shines through anyway.

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

This screenshot demonstrates the effect:

This screenshot shows there is a space between the two geometries.

When zooming the effect sometimes appears and sometimes disappears (it is also depending on zoom distance and the size of the screen).

I tried to play around with different material properties, but I seem to be unable to find any material setting that prevents this from happening.

Is this a bug? Or a WebGL limitation? Or a general limitation in 3D graphics? Or am I missing something and is this actually a material or renderer configuration mistake?

In my models this effect is really disturbing and ugly. Can I somehow prevent this from happening?

解决方案

This problem is caused by a faulty configuration that severely limits the depth buffer precision.
On OpenGL.org it is described as follows:

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.

True, since in the example the near clipping plane value was set to 1.
So far I know two solutions to this problem.

---

1) Simply increase the camera near value:

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

This solution is demonstrated in this fiddle

• The solution was suggested by @WestLangley here on GitHub
• Refer to that OpenGL.org page for more background information
• Here a nice question about deciding on your near clipping plane values

---

2) Configure the WebGL renderer to use a logarithmic depth buffer:

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

This solution is demonstrated in this fiddle

• This solution was suggested by @FastSnail in his comment and comes from this answer on StackOverflow
  
• See also an OpenGL demo on logarithmic VS normal depth buffer in this YouTube movie
• And another demo specifically for three.js / WebGL in this YouTube movie
• Refer also to this StackOverflow question for more background on logarithmic depth buffer

---

Please post another answer in case you know any other solutions.

这篇关于缩小时材质闪耀（three.js r78）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！