使用threejs離屏渲染實現高斯模糊效果

        之前的博客裏我使用webgl實現了簡單的離屏渲染效果，最近在使用threejs庫開發項目的時候，想實現點擊物體高亮，背景物體虛化的效果。爲了實現這個效果，我決定將每幀渲染出來的圖片拿出來，進行一次高斯模糊，在把它貼到一個背景板上。

        這裏面由於使用了離屏渲染就有幾點需要注意

        1.兩組攝像機、兩個scene、一個WebGLRenderTarget。

        兩組攝像機分別對應兩個場景，及渲染貼圖場景（a）與屏幕繪製場景（b），a場景中放置了一個地球，一個正方體，以及天空盒。b場景只有一個與屏幕一樣寬高的平面，將a場景每一幀渲染出的畫面（target.texture）貼在b場景的平面上。a場景的攝像機是透視投影，物體近大遠小，b場景攝像機是正交相機，遠近一樣大。所以render的代碼就和以前有所不同，多了一個場景的渲染，當然這個場景的渲染不是渲染到屏幕上二是target上，這個target在我的理解裏就類似webgl裏的幀緩衝，下面是渲染的部分代碼：

function render() {

   camera.lookAt( buffer_scene.position );

       composeCamera.lookAt(scene.position);

       //Render onto our off screen texture
       renderer.render(buffer_scene,camera,target);

       //Finally, draw to the screen
   	renderer.render( scene, composeCamera );

       controls.update();

}

        下面要說的就是高斯模糊的算法了，該算法實際上來說就是對圖像進行卷積計算。在計算每一個片元的顏色時，將其左邊四個點和右邊四個點的顏色進行一定比例的加和（橫向高斯模糊），再對其上面四個點和下面四個點的顏色按照一定比例進行加和（縱向高斯模糊）最終得到模糊的畫面，這裏值得注意的是我們在進行高斯模糊時最後所乘的係數和一定要控制在1，不然就會出現圖片過亮的狀態，下面是片元着色器的代碼：

   uniform sampler2D tDiffuse;
uniform float h;
uniform float v;

varying vec2 vUv;

void main() {


vec4 sum = vec4( 0.0 );

//縱向高斯模糊
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 4.0 * v ) ) * (0.051/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.0 * v ) ) * (0.0918/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 2.0 * v ) ) * (0.12245/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.0 * v ) ) * (0.1531/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * (0.1633/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.0 * v ) ) * (0.1531/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 2.0 * v ) ) * (0.12245/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.0 * v ) ) * (0.0918/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 4.0 * v ) ) * (0.051/2.0);

//橫向高斯模糊
sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * h, vUv.y ) ) * (0.051/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * h, vUv.y ) ) * (0.0918/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * h, vUv.y ) ) * (0.12245/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * h, vUv.y ) ) * (0.1531/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * (0.1633/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * h, vUv.y ) ) * (0.1531/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * h, vUv.y ) ) * (0.12245/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * h, vUv.y ) ) * (0.0918/2.0);
sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * (0.051/2.0);

gl_FragColor = sum;

}

最後放一下效果圖：

Github：https://github.com/StringKun/ThreeJSBlur/tree/master

最後，我將所有demo的演示都放在了：https://stringkun.github.io/DemoShow/example/index.html