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);

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

水平模糊着色器

垂直模糊着色器

我试过像这样使用ShaderMaterial：

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

而且它也能工作(现在我用UVs导出了我的模型)--但是不像预期的那样。

我的模型现在呈现半透明取决于脸的角度，而不是模糊它。如何使着色器模糊物体，以正确的颜色为原始材料，同时也使用垂直着色？

Answer 1

在WebGL中，没有一种“简单”的方法可以模糊掉我的头顶上的单个对象。three.js中的模糊实例和字段深度是后处理的效果。这意味着它们在图像呈现之后才能工作。它们就像将图像加载到photoshop中，然后对整个图像应用一个过滤器。

这并不意味着模糊一个物体是不可能的。这可不容易。

例如，您可以呈现是否将某物模糊到单独的通道中，例如alpha通道，然后您可以更改模糊着色器，使其只在alpha通道设置下模糊像素。这并不完美，因为在两个物体重叠的地方，模糊会从重叠的地方流出来，所以当你最终到达模糊通道时，就不会有正确模糊的信息了。这是否可以接受是一个美学上的决定

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