如何使用three.js中的深度缓冲区屏蔽对象?

时间:2015-11-17 20:52:53

标签: javascript three.js webgl

我正在使用three.js编写2D游戏。首先,我想渲染背景风景。然后,我想渲染一个透明四边形(.version),即使你看不到它,它仍然会将值写入深度缓冲区。然后我想渲染具有z的对象,它们将片段放在透明四边形后面,这样任何与透明四边形具有相同屏幕空间位置的片段都会因为深度测试失败而被丢弃。

基于我对OpenGL的理解,这是可能的,但是当透明四边形片段着色器的输出具有opacity === 0时,似乎three.js没有为透明四边形写入深度值。

我已设置gl_FragColor.a === 0。我有renderer.sortObjects = false的背景,z = 0的透明四边形,以及z = 1深度缓冲区要屏蔽的对象。

对于透明四边形,我设置了z = 0.5,但不是在透明四边形上显示背景风景,而是显示清晰的颜色。

以下是我创建透明四边形的方法:

material.transparent = false

1 个答案:

答案 0 :(得分:2)

以下作为StateG起作用。谨慎控制您的r73 three.MeshrenderOrder属性是解决方案。

首先,我通过删除position行来重新排序。其次,我确保要屏蔽的对象的renderer.sortObjects = false位置放在透明四边形后面。

最后,我设置z(即在mesh.renderOrder = 1的任何其他网格之后渲染此网格),为我想要屏蔽的每个场景对象的renderOrder < 1个对象设置three.Mesh mesh.renderOrder = 0.5 1}}用于透明四边形。 renderOrder的默认值为0,因此任何网格renderOrder我都没有在透明四边形和蒙版对象之前将渲染显式设置为正常。

请注意,每个网格必须设置renderOrder。此属性不会传播到子Object3D个对象。