Three.js-應用着色器模糊幾何

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個着色器（一個用於頂點模糊，一個用於水平模糊）。 但是如何在保留上述顏色設置的同時應用它們呢？

水平模糊着色器

頂點模糊着色器

我嘗試使用這樣的ShaderMaterial：

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

並且它可以正常工作（現在我用UV導出了我的模型）-但是並沒有達到預期的效果。

現在，我的模型將根據臉部的角度渲染半透明而不是使其模糊。 如何使着色器使用正確的顏色作為原始材質來使對象模糊，並同時使用垂直着色器？

Answer 1

沒有一種“簡便”的方法可以模糊WebGL中我知道的單個對象。 three.js中的模糊示例和景深示例是后期處理效果。 這意味着它們在渲染圖像后即可工作。 它們就像將圖像加載到Photoshop中，然后對整個圖像應用濾鏡。

這並不意味着不可能模糊單個對象。 只是不容易。

例如，您可以渲染是否將某事物模糊到單獨的通道（例如Alpha通道）中，然后可以更改模糊着色器，使其僅對設置了Alpha通道的像素進行模糊處理。 那不是完美的，因為在兩個對象重疊的地方，模糊會流到重疊處，而重疊處會被遮擋，因此當您最終到達模糊通道時，就不會有正確模糊所需的信息。 是否接受是一個美學決定

另一種方法是將每個對象渲染為其自己的渲染目標，並對其進行模糊處理，然后合成所有渲染目標。 您可能需要每個渲染目標還存儲深度值，以便可以將它們與深度合成。