threejs辉光通道01（UnrealBloomPass && layers）

---

前言

踩坑记录:
1、UnrealBloomPass 辉光参照three官网示例
2、分层渲染分为两篇：本篇为最简单的layers分层渲染

---

一、辉光

1、引入库：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'

2、注意事项：

其他three组件都是常规的写法，开启炫光通道的时候如下注意点

主要注意渲染器中添加

renderer.autoClear = false

通道添加

bloomPass.renderToScreen = true

渲染使用合成渲染

composer.render()

部分代码

除去常规写法的【场景、相机、控制器、光源等】
只需要注意上述这部分代码

initrenderer () {
  var width = document.getElementById('threecanvas').offsetWidth
  var height = document.getElementById('threecanvas').offsetHeight
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  })
  renderer.setPixelRatio(window.devicePixelRatio)// 设置分辨率与电脑的分辨率相同
  renderer.setSize(width, height)
  renderer.toneMapping = THREE.ReinhardToneMapping
  renderer.autoClear = false
  document.getElementById('threecanvas').appendChild(renderer.domElement)
}
addBloomPass () {
  var width = document.getElementById('threecanvas').offsetWidth
  var height = document.getElementById('threecanvas').offsetHeight
  const renderScene = new RenderPass(scene, camera)
  const bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height),1.5,0.4,0.85)
  bloomPass.renderToScreen = true
  bloomPass.threshold = params.bloomThreshold
  bloomPass.strength = params.bloomStrength
  bloomPass.radius = params.bloomRadius

  composer = new EffectComposer(renderer)
  composer.setSize( width, height );
  composer.addPass(renderScene)
  composer.addPass(bloomPass) 
}
function render () {
  requestAnimationFrame(render)
  update()
  composer.render()
}

二、layers分层渲染

问题： 使用简单的layers分层渲染会出现深度遮挡问题，或者有其他物体在光晕后方，光晕不生效

注意事项和上述相同，然后给物体分层即可

我们只需要在渲染的时候设置好层级
注意合成的渲染通道在上，正常的渲染在下，相当于两个图层，然后把相机分给两个图层
图层0：正常渲染
图层1：使用通道渲染

function render () {
  requestAnimationFrame(render)
  update()
  
  renderer.clear()
  camera.layers.set(1)
  composer.render()

  renderer.clearDepth()
  camera.layers.set(0)
  renderer.render(scene, camera)
}

然后自己需要哪些物体使用炫光的通道，就把这个物体

object.layers.set(1)

正常渲染的话

object.layers.set(0)

或不设置，正常的图层默认为0

总结

由于这种简单的layers分层会出现不确定性问题
下篇继续