ThreeJS中的模板缓冲网格概述

Question

我正在使用ThreeJS深入研究我的应用程序的高级功能。我开发了一个轮廓特征，允许在由多个网格组成的场景中勾画网格。

我的第一个实现是通过复制几何体，稍微缩放它然后为轮廓应用特定着色器来实现的。主要问题是，如果我必须突出显示整个场景，我将需要两倍的内存来复制每个对象。

这就是为什么决定使用THREE.Scene的overrideMaterial属性，以便能够在不复制几何体的情况下进行第二次渲染传递。为了获得轮廓效果，我只是在这两个传递之间使用了模板缓冲区：

function render() {
    gl.enable(gl.STENCIL_TEST);
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

    renderer.clear();

    gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
    gl.stencilMask(0xFF);
    renderer.render(scene, camera);

    gl.stencilFunc(gl.NOTEQUAL, 1, 0xFF);
    gl.stencilMask(0x00);

    scene.overrideMaterial = outlineMaterial;
    renderer.render(scene, camera);
    scene.overrideMaterial = null;
    gl.stencilMask(0xFF);
    gl.disable(gl.STENCIL_TEST);
}

问题是因为模板缓冲区在两个渲染过程之间填充（而不是两个渲染调用对象），当一个对象放在我想要突出显示的对象后面时，我的高亮显示没有完全完成。

有人有想法解决这个问题而无需修改ThreeJS代码吗？示例如下：http://jsfiddle.net/Ludobaka/z2fLurLr/

修改：

我正在创建一种分子可视化工具。分子由原子组成的残基组成。为了提高性能，我只创建对应于分子的大网格（否则对于每个分子，我将有nbAtoms Object3D，这是很多）。我希望能够突出显示该网格的对应于一组残基或原子组甚至整个分子本身的子部分。这就是为什么我决定执行两个渲染过程，而不是像下面的例子中那样复制几何体。

通过复制几何体，我将不得不提取这些子部件，为轮廓创建一个新网格并对其进行管理，以避免在它们未被使用时保留它们。

Answer 1

您需要创建一个自定义的ShaderMaterial来实现。将轮廓对象渲染为（理想情况下）目标帧缓冲区大小的纹理，然后使用该纹理渲染帧缓冲区大小的四边形，并使片段着色器模糊或进行其他图像变换。我有一个使用原始WebGL的示例here，您可以为Three.js修改着色器。