three.js 後處理 理解

後處理的效果也實現了幾種了，但僅限於cv，都還未做理解，藉着對自定義shader的實現，談談對後處理接口的使用理解。

要實現後處理效果，應有3個步驟

1:初始化後處理的入口，即  new THREE.EffectComposer(renderer);  後處理的基礎包，使用它來渲染場景、應用通道和輸出結果。

2 var renderPass = new THREE.RenderPass(scene, camera);  該通道會在當前場景和攝像機的基礎上渲染出一個新場景，可以理解爲保存當前的場景

3 ShaderPass  ：該通道接受自定義的着色器作爲參數，以生成一個高級、自定義的後期處理通道, 產生各種模糊效果和高級濾鏡。FXAAShader，LuminosityShader都是在此基礎上的封裝

 

完整的   也可以自定義

THREE.DotScreenShader：輸出灰度點集
THREE.MirrorShader：創建鏡面效果
THREE.HueSaturationShader：改變顏色的色調和飽和度
THREE.VignetteShader：添加暈映效果
THREE.ColorCorrectionShader：調整顏色的分佈
THREE.RGBShiftShader：將紅綠藍三種顏色分開
THREE.BrightnessContrastShader：改變亮度和對比度
THREE.ColorifyShader：將某種顏色覆蓋到整個屏幕
THREE.SepiaShader：創建類似於烏賊墨的效果
THREE.KaleidoShader：類似於萬花筒的效果
THREE.LuminosityShader：提高亮度
THREE.TechnicolorShader：模擬類似老電影裏面的兩條彩色效果
THREE.HorizontalBlurShader和THREE.VerticalBlurShader：可以向水平和垂直方向創建模糊效果
THREE.HorizontalTiltShiftShader和THREE.VerticalTileShiftShader：可以在水平和垂直方向創建傾斜平移的效果
THREE.TriangleBlurShader：基於三角形的方法創造一種模糊效果
THREE.BleachBypassShader：創造一種鍍銀的效果
THREE.EdgeShader：找到圖片的邊界並顯示
THREE.FXAAShader：添加抗鋸齒的效果
THREE.FocusShader：創建中間比較尖銳，周圍比較模糊的效果。

 

4 在添加自定義shader之後，還要將第二步renderPass生成的場景輸出的屏幕上，第二步的內容只是生成了，並未渲染到屏幕上

 var effectCopy = new THREE.ShaderPass(THREE.CopyShader);//CopyShader是爲了能將結果輸出，普通的通道一般都是不能輸出的，要靠CopyShader進行輸出
        effectCopy.renderToScreen = true;//設置這個參數的目的是馬上將當前的內容輸出

5將2,3，4的結果依次加入到EffectComposer 中

 

完整順序

    var renderPass = new THREE.RenderPass(scene, camera);
    var customGrayScale = new THREE.ShaderPass(SweepingLightShader);
    customGrayScale.needsUpdate=true
    var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
    effectCopy.renderToScreen = true;


    var composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderPass);
    composer.addPass(customGrayScale);

    composer.addPass(effectCopy);
    composer.render()