使用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