three.js使用掩碼MaskPass高階效果組合器

阿新 • • 發佈：2018-11-14

three.js使用掩碼MaskPass高階效果組合器

所需要基本外掛，下面5個都需要。

<script type="text/javascript" src="../js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="../js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="../js/postprocessing/ShaderPass.js"></script>>
<script type="text/javascript" src="../js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="../js/shaders/CopyShader.js"></script>

以及一些shader效果外掛

<script type="text/javascript" src="../js/shaders/SepiaShader.js"></script>
<script type="text/javascript" src="../js/shaders/BleachBypassShader.js"></script>
<script type="text/javascript" src="../js/shaders/ColorifyShader.js"></script>

效果如下圖，第一張圖中除了背景整個場景都添加了後期通道，是三個通道的疊加效果。第二張圖片中的月球在背景scene中，所以沒有被後期結果影響，這就是掩碼的作用。可以對指定的scene執行後期效果。
在這裡插入圖片描述

步驟：

建立一個背景scene。
建立一個背景camera，最好使用正交相機。
為背景scene新增一個plane和light。設定bgplane的位置和縮放比例。因為使用了正交相機，所以這裡的設定比較方便。
配置通道 composer，這個配置有點繁瑣。
composer.render(delta) 不要忘記這個了。還有autoClear = false。兩個坑我一上午加一下午。

compose配置說明，pass類似PS的圖層，sceneBG就是背景圖層，scene就是正常的圖層，下面的案例中只有這兩個圖層pass。effectCopy是個輔助通道，目的將結果輸出到場景，因為有的通道不支援renderToScreen。effectSepia，effectColorify，Bleach是三個後期處理效果，分別是烏賊墨效果，使用顏色覆蓋整個場景，漂白效果，可以單獨使用，也可以疊加使用，看自己的需求，和ps中對每個圖層的處理（圖層樣式）類似。
sceneMask和clearMask可以理解成ps圖層的透明部分。不新增mask，效果就應用到整個場景，添加了就只應用到場景中的物體，用完記得需要清除。
這兩個開啟，開啟2個（原始碼中只有兩個）和使用幾次後期效果，我還沒研究明白，必須的開啟。
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;

在這裡插入圖片描述

var sceneBG = new THREE.Scene();
var cameraBG = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);
cameraBG.position.z = 50;
//通道處理
var bgPass = new THREE.RenderPass(sceneBG, cameraBG);
var renderPass = new THREE.RenderPass(scene, camera);
renderPass.clear = false;

var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;

var effectSepia = new THREE.ShaderPass(THREE.SepiaShader); //烏賊墨效果
effectSepia.uniforms['amount'].value = 0.8;

var effectColorify = new THREE.ShaderPass(THREE.ColorifyShader); //整個顏色覆蓋螢幕
effectColorify.uniforms['color'].value.setRGB(0.9, 0.5, 1);

var Bleach = new THREE.ShaderPass(THREE.BleachBypassShader);  // 漂白效果 覆蓋銀一樣
Bleach.uniforms['opacity'].value = 0.9;

var clearMask = new THREE.ClearMaskPass();
var sceneMask = new THREE.MaskPass(scene, camera);
composer = new THREE.EffectComposer(renderer);
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;
composer.addPass(bgPass);
composer.addPass(renderPass);
composer.addPass(sceneMask);
composer.addPass(Bleach);
composer.addPass(effectColorify);
composer.addPass(effectSepia);
composer.addPass(clearMask);
composer.addPass(effectCopy);
//燈光背景
function drBackground(){
    var planeMat = new THREE.MeshPhongMaterial({
        depthTest: false,
        map: new THREE.TextureLoader().load("./img/bg.jpg"),
    });

    var bgPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), planeMat);
    bgPlane.position.z = -100;
    bgPlane.scale.set(window.innerWidth * 2, window.innerHeight * 2, 1);
    sceneBG.add(bgPlane);
    var lightBG = new THREE.AmbientLight(0x888888);
    sceneBG.add(lightBG);
}

//迴圈體
//renderer.render(scene, camera);
composer.render(delta);	//很重要
renderer.autoClear = false; //關閉自動清除

如果只是為場景增加一個背景，直接在div上新增背景的方式也不錯，還能減少引入額外的js檔案。這個時候需要把render的設定成透明。new THREE.WebGLRenderer({alpha: true,antialias: true });

#webgl-output {
    background: url(img/bg.jpg) no-repeat;
    background-size: 100% 100%;
}

three.js使用掩碼MaskPass高階效果組合器