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

在過去一天左右，我一直在學習ThreeJS，但是我正在與着色器苦苦掙扎。Three.js - 應用着色器模糊幾何

我想模糊幾何我有。我嘗試使用Depth Of Field與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個着色在線（一個用於verticle模糊，一個用於水平模糊）。但是，如何在保留上述顏色設置的同時應用它們？

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的模型） - 但是並不如預期。

我的模型現在呈現半透明，取決於臉部的角度而不是模糊它。我如何使着色器模糊對象，使用正確的顏色作爲原始材質並同時使用垂直着色器？

來源

2015-07-21 Dustin Silk

使用相應的three.js着色器，如示例http://threejs.org/examples/#webgl_postprocessing_advanced – gaitat

試圖添加着色器，但無法讓它工作。看看我的小提琴 - http://jsfiddle.net/VsWb9/3942/ –

你的jsfiddle在請求一個js資源時會得到一個404。（RequestAnimationFrame.js） –

沒有「簡單」的方法來模糊WebGL中的一個對象，我知道它不在我的頭頂。 three.js中的模糊示例和景深示例爲後處理效果。這意味着它們在圖像渲染完成後才能工作。他們就像將圖像加載到photoshop中，然後對整個圖像應用濾鏡。

這並不意味着模糊單個對象是不可能的。這並不容易。例如，您可以渲染是否將某些東西模糊爲單獨的通道（例如alpha通道），然後您可以更改模糊着色器，以便它僅使用alpha通道集來模糊像素。這並不完美，因爲在兩個物體重疊的地方，模糊會流過重疊的地方，因此當你最終到達模糊通道時，將不會有正確模糊所需的信息。這是否是可接受的是一個美學決定

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

來源

2015-07-24 00:01:37 gman

這裏是一個人基於統一的解決方案。你可以看到他們將模糊的對象渲染爲一個單獨的渲染目標。 http://kylehalladay.com/all/graphics/2013/07/02/Selective-Blur.html – gman

呀從我所有的研究似乎只是不可能的。（或者只是不容易做，並獲得好的結果）。也許有一天我可以一勞永逸地解決這個問題，但在那之前，我已經想出了一個可以用於設計的非常基本的解決方案。我將每個對象放置在一個單獨的呈現視圖中，每個對象都有一個透明的透明對象，並使用CSS管理模糊和Z-index到canvas元素。 –

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

回答

相關問題