Three.js 后期处理-泛光效果-BloomPass-相机分层渲染

概述

本文介绍如何使用three.js的后期处理来制作处泛光效果，先来看效果图

注意：
**camera的默认layers层次为0
此处有三个大坑
renderer.autoClear = false 此代码一定要加上，必不可少

1. 通道渲染顺序必须在renderer渲染之前执行 ，在执行之前清除颜色、深度和或模板缓存renderer.clear，然后将相机层级设置为1， 使用通道进行渲染
2. 清除深度缓存，将相机的层级设置为0，使用WebGLRenderer渲染**

步骤

1. 添加相应的后期处理js，对应的js在three的github中全部可以获取到

<!-- 后期处理js -->
<!-- EffectComposer（效果组合器）对象 -->
<script src="js/postprocessing/EffectComposer.js"></script>
<!-- RenderPass/该通道在指定的场景和相机的基础上渲染出一个新场景 -->
<script src="js/postprocessing/RenderPass.js"></script>
<!-- ShaderPass/使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道 -->
<script src="js/postprocessing/ShaderPass.js"></script>
<!-- 传入了CopyShader着色器，用于拷贝渲染结果 -->
<script src="js/shaders/CopyShader.js"></script>
<!-- BloomPass/形成泛光的效果 -->
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>

2. 创建两个box， 将box进行layers进行分层是重要代码，camera默认渲染0层

  let texture = new THREE.TextureLoader().load("ground.jpg")

  var geometry1 = new THREE.BoxGeometry(4, 4, 4);
  var material1 = new THREE.MeshBasicMaterial({
    map: texture
  });
  var cube1 = new THREE.Mesh(geometry1, material1);
  // 重要代码，将当前创建的box分配到0层
  cube1.layers.set(0)
  cube1.position.set(10, 0, 0)
  scene.add(cube1);

  var geometry2 = new THREE.BoxGeometry(4, 4, 4);
  var material2 = new THREE.MeshBasicMaterial({
    map: texture
  });
  var cube2 = new THREE.Mesh(geometry2, material2);
  // 重要代码，将当前创建的box分配到1层
  cube2.layers.set(1)
  scene.add(cube2);

3. 加入通道

  // RenderPass这个通道会渲染场景，但不会将渲染结果输出到屏幕上
  const renderScene = new THREE.RenderPass(scene, camera)

  const effectCopy = new THREE.ShaderPass(THREE.CopyShader); //传入了CopyShader着色器，用于拷贝渲染结果
  effectCopy.renderToScreen = true;
  // THREE.BloomPass(strength, kernelSize, sigma, Resolution)
  // strength 定义泛光效果的强度，值越高，明亮的区域越明亮，而且渗入较暗区域的也就越多
  // kernelSize 控制泛光的偏移量
  // sigma 控制泛光的锐利程度，值越高，泛光越模糊
  // Resolution 定义泛光的解析图，如果该值太低，结果的方块化就会越严重
  const bloomPass = new THREE.BloomPass(2, 25, 4.0, 256); //BloomPass通道效果

  //创建效果组合器对象，可以在该对象上添加后期处理通道，通过配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤，在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。
  const bloomComposer = new THREE.EffectComposer(renderer)
  bloomComposer.setSize(el.offsetWidth, el.offsetHeight);
  bloomComposer.addPass(renderScene);
  bloomComposer.addPass(bloomPass);
  bloomComposer.addPass(effectCopy);

  bloomComposer.render()

4. 在调用requestAnimationFrame的函数中调用

    // 渲染器清除颜色、深度或模板缓存. 此方法将颜色缓存初始化为当前颜色
    renderer.clear()
    camera.layers.set(1)
    bloomComposer.render()

    // 清除深度缓存
    renderer.clearDepth()
    camera.layers.set(0)
    renderer.render(scene, camera)