Question

在过去的一天左右学习ThreeJS，但是我和Shaders一起挣扎。

我试图模糊我拥有的几何体。我尝试使用景深和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导出了我的模型） - 但是并不像预期的那样。

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

Answer 1

没有＆＃34; easy＆＃34;在WebGL中模糊单个对象的方法，我知道这一点在我的头脑中。 three.js中的模糊示例和景深示例是后期处理效果。这意味着它们在渲染图像后工作。它们就像将图像加载到photoshop中，然后对整个图像应用滤镜。

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

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

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

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

1 个答案: