three.js - 重叠层闪烁

时间:2014-08-06 15:59:27

标签: three.js

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

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

如何解决这个问题?

3 个答案:

答案 0 :(得分:10)

.renderDepth()不起作用时,您必须自己设置深度。

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

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

应解决您的问题。请参阅此处的更新:http://liveweave.com/syC0L4
使用负面因素显示和隐藏的积极因素。

答案 1 :(得分:3)

尝试让初学者减少相机的远距离。尝试1000.一般来说,你不应该在你的3D场景中有重叠的面孔,除非他们以非常特殊的方式对待(查找术语'贴花纹理' /'贴花&#39)。所以基本上,你必须创建深度偏移,甚至可能在执行此操作时预先对对象进行排序,这些都需要相当低级的修补。

如果远距离减少有帮助,那么您将体验到缺乏精确度(取决于设备)。还要查看' z格斗'

<强>更新

不要重叠飞机。

  

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

你把一个对象放在另一个对象的前面:)

例如,如果你有一个0,0,0的摄像头在0,0,10看一个对象,如果你想让另一个对象在第一个对象后面,把它放在0,0,11就可以了。

<强> UPDATE2

什么是z缓冲:

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

注意&#34;浮点范围为0.0 - 1.0&#34;。

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

  

... 在z-buffer中具有相似的值。它特别普遍   共面多边形,其中两个面占据基本相同的空间,   没有在前面。受影响的像素使用片段呈现   从一个多边形或另一个任意,以确定的方式   z缓冲区的精度

&#34;渲染器无法重新定位任何内容。&#34;

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

这里似乎缺少一些关键概念,我从这开始: http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

关于深度偏移

这是怎么回事,说你想在表面上画一个贴花。你可以画画&#39;在这个表面上的另一个网格 - 比如说,将四边形投射到它上面。你想在混凝土墙上画一个弹孔,最后得到两个共面的表面 - 墙壁,弹孔。您可以计算出深度缓冲精度,找到最小值,然后将弹孔网格按该值移向摄像机。对象没有缩放(您可以在NDC中执行此操作,您可以将其视为立方体并以尽可能小的增量来回移动平面),但确实会在深度方向上转换,最终在另一个前面。

答案 2 :(得分:0)

我没有看到任何闪烁。 3D中的立方体运动似乎非常流畅。你可以试试不同的电脑(可能更快)吗?我在Macbook Pro上使用了Chrome。