javascript - 访问 XML3D 中的渲染管道：对象突出显示

Question

我想让对象在被选中时突出显示为了做到这一点我需要一个自定义着色器，它可以缩放以呈现模型轮廓——这部分任务我很熟悉——XML3D 提供了一种实现自定义着色器的方法。

但是缺少的部分是可以访问渲染管道： 如果不复制模型并将其绘制在旧模型上或分两次渲染场景（后处理），就不可能做出漂亮的突出显示。以通常的方式创建另一个模型副本（将新元素附加到 dom 树）不会解决问题，因为我还需要控制场景混合。

如何使用 xml3d 完成它？不深入图书馆有可能吗？

Answer 1

一般来说，有四种方法来实现突出显示：

1. 你可以来回交换材料（效率不是很高）
2. 您可以为突出显示的对象使用材质覆盖，这将适应当前着色的一个或多个参数（例如发光颜色）
3. 您可以将自定义着色器与任意统一属性结合使用，该属性指示应突出显示对象。在着色器中，您可以根据属性调整颜色和渲染。例如，您可以进行边缘高亮或线框渲染。这是一个着色器示例selected，如果制服具有特定值，则该着色器会为对象着色。例如：
   <mesh id="foo"> <data src="mesh-data.json"></data> <float name="selected">0</float> </mesh>
   要突出显示此对象：$("#foo float[name=selected]").text("1");
4. 您可以调整渲染管道以两次渲染突出显示的对象并以各种方式混合它

如果足以满足您的用例，我会推荐方法 3，因为它不是很侵入性。创建自定义渲染管道的接口还不是很稳定。

Answer 2

正如 ksons 提到的，渲染管道接口现在正在发生一些重大变化，XML3D 4.8 是最后一个以当前形式支持它的版本。5.0 版可能会以（希望）大大改进的形式重新引入它。

我们在我们的一个内部项目中使用自定义渲染管道在选定的模型上绘制线框覆盖，我已经发布了该管道的简化版本作为 Gist 供您查看。本质上，它使用标准的内部渲染通道渲染场景，然后进行第二次通道以粗略的线框模式绘制突出显示的对象，而无需进行深度测试。

正如我所说，这在 v4.8 中有效，如果您在 v4.9 中需要此功能，请打开一个问题，我会看到有关重新启用它作为次要版本的信息。