使用three.js遮挡现实世界的对象

Question

我在一个实验性的增强现实网络浏览器中使用了three.js.(浏览器称为Argon.基本上,Argon使用Qualcomm的Vuforia AR SDK来跟踪手机摄像头中的图像和对象.Argon将跟踪信息发送到Javascript,在那里它使用带有three.js的透明网页来创建3D图形.手机视频输入.)我的问题是关于three.js.

Argon发送到网页的数据允许我将3D摄像头与物理手机摄像头对齐并绘制3D图形,使其看起来与预期的现实世界一致.我还想让物理世界中的一些东西遮挡3D图形(我有物理对象的3D模型,因为我已经设置了场景,或者因为它们是准备好的对象,如Vuforia正在跟踪的盒子).

我想知道人们是否有关于使用three.js完成此遮挡的最佳方法的建议.谢谢.

Answer 1

编辑:似乎下一个版本的three.js(R71)将有一个更简单的方法来做到这一点,所以如果你可以使用dev分支(或只是等待),你可以更容易地做到这一点.看到这篇文章:three.js透明对象遮挡

我的原始答案(不使用R71中的新功能):

我认为最好的方法是(通过创建新的渲染过程来避免额外的工作)来修改WebGL渲染器(src/renderers/WebGLRenderer.js)并添加对新类型对象的支持,也许称之为" occlusionObjects".

如果查看渲染器,您将看到两个当前对象列表,opaqueObjects和transparentObjects.渲染器将​​可渲染对象排序到这两个列表中,以便它可以先渲染不透明对象,然后再渲染透明对象.您需要做的是将所有新对象存储到occlusionObjects列表中而不是那两个.您将看到不透明和透明对象根据其材质属性进行排序.我想在这里,您可能想要将一个属性添加到您想要成为封堵器的对象(可能是"myObject.occluder = true"),然后将这些对象拉出来.

获得三个列表后,查看render()函数对这些对象列表的作用.你会看到几个像这样的渲染调用的地方:

renderObjects( opaqueObjects, camera, lights, fog, true, material );

在该行之前添加类似的内容,关闭写入颜色缓冲区,仅将遮挡对象渲染到深度缓冲区中,然后在渲染剩余对象之前重新打开颜色缓冲区写入.

context.colorMask( false, false, false, false);
renderObjects( occluderObjects, camera, lights, fog, true, material );
context.colorMask(true, true, true, true);

你需要在几个地方这样做,但它应该工作.

现在,您只需将场景中的任何对象标记为"occluder = true",它们将仅渲染到深度缓冲区中,允许视频显示并遮挡在其后面渲染的任何不透明或透明对象.