使用 three.js 遮挡真实世界的对象答案

【问题标题】：Occlusion of real-world objects using three.js使用 three.js 遮挡真实世界的对象
【发布时间】：2015-03-06 20:56:42
【问题描述】：

我在一个实验性的增强现实网络浏览器中使用了 three.js。（浏览器被称为 Argon。本质上，Argon 使用 Qualcomm 的 Vuforia AR SDK 来跟踪手机摄像头中的图像和对象。Argon 将跟踪信息发送到 Javascript，它使用带三个.js 的透明网页在其上创建 3D 图形电话视频提要。）不过，我的问题是关于three.js。

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

我想知道人们是否对使用 three.js 完成这种遮挡的最佳方式提出了建议。谢谢。

【问题讨论】：

见stackoverflow.com/questions/28869268/…。
谢谢@WestLangley：我已经在下面更新了我的答案以指向这里。我不知道这一点，因为我没有使用/关注开发版本。好东西！

标签： three.js augmented-reality vuforia argon

【解决方案1】：

编辑：似乎 three.js (R71) 的下一个版本将有一个更简单的方法来做到这一点，所以如果你可以使用 dev 分支（或者只是等待），你可以更容易地做到这一点。看到这个帖子：three.js transparent object occlusion

我的原始答案（不使用 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”，它们只会渲染到深度缓冲区中，从而允许视频显示并遮挡在它们后面渲染的任何不透明或透明对象。

【讨论】：