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高级效果组合器

three.js使用掩码MaskPass高级效果组合器

THREE.MaskPass掩码通道及后期处理是个难点，暂时没有研究透彻，底层的webgl直接的方法涉及到这一块，应该是three.js封装的方法。

猜你喜欢