javascript - 访问 XML3D 中的渲染管道 : Object highlightning

Question

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

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

如何使用 xml3d 完成它？ 不深入图书馆是否可行？

Answer 1

一般来说，有四种实现高亮的方法:

1. 可以来回交换 Material (效率不是很高)
2. 你可以使用material overrides对于突出显示的对象，这将适应当前阴影的一个或多个参数(例如发光颜色)
3. 您可以将自定义着色器与任意统一属性结合使用，该属性指示应突出显示对象。在着色器中，您可以根据属性调整颜色和渲染。例如。您可以进行边缘突出显示或线框渲染。 Here is an example对于为对象着色的着色器，如果制服 selected有特定的值(value)。 例如:
   <mesh id="foo"> <data src="mesh-data.json"></data> <float name="selected">0</float> </mesh>
   要突出显示此对象:$("#foo float[name=selected]").text("1");
4. 你可以adapt the rendering pipeline渲染突出显示的对象两次并以各种方式混合

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