Threejs glow channel 01 (unrealbroompass & layers)

---

Preface

Record on pit :
1、UnrealBloomPass Glow reference three Official website example
2、 Layered rendering is divided into two parts ： This is the simplest layers Layered rendering

---

One 、 glow

1、 Import and stock in ：

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、 matters needing attention ：

other three Components are written in the normal way , When opening the glare channel, pay attention to the following

The main attention is to add... In the renderer

renderer.autoClear = false

Channel add

bloomPass.renderToScreen = true

Rendering uses compositing rendering

composer.render()

Part of the code

Get rid of the conventional way of writing 【 scene 、 The camera 、 controller 、 Light source, etc 】
Just pay attention to the above code

initrenderer () {
    
  var width = document.getElementById('threecanvas').offsetWidth
  var height = document.getElementById('threecanvas').offsetHeight
  renderer = new THREE.WebGLRenderer({
    
    antialias: true,
  })
  renderer.setPixelRatio(window.devicePixelRatio)//  Set the resolution to be the same as that of the computer 
  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()
}

Two 、layers Layered rendering

problem ： Easy to use layers Layered rendering can cause depth occlusion problems , Or there are other objects behind the halo , Glow does not take effect

The precautions are the same as above , Then layer the object

We just need to set the level when rendering
Note that the synthesized render channel is on , Normal rendering in the next , Equivalent to two layers , Then divide the camera into two layers
Layers 0： Normal rendering
Layers 1： Render using channels

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

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

Then you need to choose which objects to use the glare channel , Just take this object

object.layers.set(1)

Normal rendering

object.layers.set(0)

Or not set , Normal layers default to 0

summary

Because of this simple layers There is uncertainty in layering
The next part continues