Three.js - 应用着色器来模糊几何

Question

过去一天左右一直在学习 ThreeJS，但是我在着色器方面遇到了困难。

我正在尝试模糊我拥有的几何图形。我尝试将景深与 Three.js 网站上的示例一起使用，但它也使我的前景对象也略微模糊。所以我希望挑出一个对象，然后模糊它。

现在我有了一个使用 LambertMaterial 创建的网格，基本上是这样的：

    var material = new THREE.MeshLambertMaterial({
        color: 0x5c5c5c,
        emissive: 0x000000,
        shading: THREE.FlatShading,
        transparent: true,
        opacity: 1
    });
    var mesh = new THREE.Mesh(geometryJson, material);

    scene.add(mesh);

然后我在网上找到了 2 个着色器（一个用于垂直模糊，一个用于水平模糊）。但是如何在保持上述颜色等设置的同时应用它们？

Horizontal blur shader

Verticle blur shader

我尝试使用这样的 ShaderMaterial：

    var material = new THREE.ShaderMaterial( {
        uniforms: THREE.UniformsUtils.clone( HorizontalBlurShader.uniforms ),
        vertexShader: HorizontalBlurShader.vertexShader,
        fragmentShader: HorizontalBlurShader.fragmentShader
    } );

并且它可以工作（现在我用 UV 导出了我的模型）——但并不像预期的那样。

我的模型现在根据脸部的角度呈现半透明，而不是模糊它。如何使着色器模糊对象，以正确的颜色作为原始材质并同时使用垂直着色器？

Answer 1

在 WebGL 中，没有一种“简单”的方法可以模糊 WebGL 中的单个对象，这是我脑海中所知道的。 three.js 中的模糊示例和景深示例是后处理 效果。这意味着它们在图像渲染后工作。它们就像将图像加载到 Photoshop 中，然后对整个图像应用滤镜。

这并不意味着模糊单个对象是不可能的。这并不容易。

例如，您可以渲染是否将某些内容模糊到单独的通道中，例如 Alpha 通道，然后您可以更改模糊着色器，使其仅模糊设置了 Alpha 通道的像素。这不会是完美的，因为两个对象重叠的地方，模糊会流过重叠的地方，所以当你最终到达模糊通道时，不会有正确模糊所需的信息。这是否不可接受是一个审美决定

另一种方法是将每个对象渲染到它自己的渲染目标，模糊它，合成所有渲染目标。您可能需要每个渲染目标也存储深度值，以便您可以将它们与深度合成。