three.js - 重叠层闪烁

Question

当多个物体在同一平面上重叠时,它们开始闪烁.如何告诉渲染器将其中一个对象放在前面？

我尝试使用.renderDepth,但它只能部分工作 - 请参见此处的示例:
http ://liveweave.com/ahTdFQ
这两个框具有相同的大小,并且按预期工作.我可以通过设置更改哪些框可见.renderDepth.但是,如果其中一个盒子稍微小一些(例如40,50,50),则接触层会闪烁,渲染深度不再起作用.

如何解决这个问题？

Answer 1

什么.renderDepth()时候不起作用,你必须自己设置深度.

移动整个网格确实不是很有效.
您正在寻找的是与材料绑定的偏移量:

material.polygonOffset = true;
material.polygonOffsetFactor = -0.1;

应该解决你的问题.请参阅此处的更新:http ://liveweave.com/syC0L4
使用显示的负面因子和要隐藏的正面因子.

Answer 2

首先尝试缩小相机的远距离。尝试使用 1000。一般来说，您的 3D 场景中不应该有重叠的面，除非它们以非常特定的方式处理（查找术语“贴花纹理”/“贴花”）。所以基本上，您必须创建深度偏移，甚至可能在执行此操作时对对象进行预先排序，这都需要相当低级的修补。

如果远距离减小有帮助，那么您会遇到精度不足的情况（取决于设备）。另请查找“z 战斗”

更新

不要重叠平面。

如何告诉渲染器将其中一个对象放在前面？

您将一个对象放在另一个对象的前面:)

例如，如果您有一个位于 0,0,0 的摄像机，正在观看 0,0,10 处的物体，如果您希望另一个物体位于第一个物体后面，请将其放在 0,0,11 处，这样就可以了。

更新2

什么是 z 缓冲：

http://en.wikipedia.org/wiki/Z-buffering http://msdn.microsoft.com/en-us/library/bb976071.aspx

记下“0.0 - 1.0 范围内的浮点数”。

什么是 Z-fighting： http://en.wikipedia.org/wiki/Z-fighting

... z-buffer 中具有相似的值。它在共面多边形中尤其普遍，其中两个面基本上占据相同的空间，并且都不在前面。受影响的像素以由 z 缓冲区的精度确定的方式任意使用一个多边形或另一个多边形的片段进行渲染。

“渲染器无法重新定位任何东西。”

我认为这是完全不真实的。渲染器可以重新定位所有内容，如果它不是shadertoy或某些视频过滤器或其他东西，则可能会这样做。每次移动相机时，渲染器都会重新定位所有内容（相机实际上是唯一不移动的东西）。

看来您在这里缺少一些关键概念，我将从以下开始： http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

关于提到的深度偏移：

这是如何工作的，假设您想在表面上绘制贴花。您可以在此表面上“绘制”另一个网格 - 例如，将四边形投影到其上。您想要在混凝土墙上画一个弹孔，最终得到两个共面的表面 - 墙壁、弹孔。您可以计算出深度缓冲区精度，找到最小值，然后将弹孔网格向相机移动该值。该对象不会缩放（您在 NDC 中执行此操作，您可以将其可视化为立方体并以尽可能小的增量来回移动平面），但会在深度方向上平移，最终位于另一个之前。