Post processing: simply say is to first render a picture to save, in this picture above “embellish”, after processing and then render to the screen. This process is encapsulated by Three, which enables faster implementation of requirements using off-the-shelf

Basic code

// Introduce post-processing of basic objects
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'.// The scene initialization code is omitted

// Initializes the effect combinator
this.EffectComposer = new EffectComposer(this.renderer)
// Add a basic render pass
this.RenderPass = new RenderPass(this.scene, this.camera)
// Add the channel to the combinator
this.EffectComposer.addPass(this.RenderPass)

// Render method, keep calling render()
_animate() {
  requestAnimationFrame(this._animate.bind(this))
  // The combinator performs rendering
 this.EffectComposer.render()
}
Copy the code

The basic flow

  1. Initialize an effect combinator
  2. Add the required channels (that is, the operations to be performed) in turn to the combinator
  3. The combinator performs the operations in each channel in sequence, passing the results of the previous channel to the next channel until they are all done and rendered to the screen

Introduction to core functions

EffectComposer effect combinator

Function: Manages the post-processing process and executes code (mainly shader code) in channels according to their insertion order.

The constructor

We need to pass in the WebGLRenderer that we used to initialize the three scene to render the scene later

/ / introduction
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'

this.EffectComposer = newEffectComposer(renderer)Copy the code

Important methods:

addPass

this. EffectComposer. AddPass (channel)Copy the code

Add post-processing channels to EffectComposer. You can add more than one, one after the other

render

this.EffectComposer.render()
Copy the code

Render, looping through the render() method of the channel

RenderPass RenderPass

The constructor

You need to pass in the scene object and camera object generated during initialization of the scene

this.RenderPass = new RenderPass(this.scene, this.camera)
Copy the code

The RenderPass pass passes the scene and camera as parameters to get the render result of the scene without any specific processing of the render result. RenderPass is used to generate the first raw image, which is then passed to subsequent channels, so RenderPass is used as the first channel

Important attributes:

renderToScreen

The default value is false, true saves the result of processing to the frame buffer, false displays directly on the canvas canvas.

ShaderPass shader channel

Custom shader code needs to be passed in to control rendering

const effectCopyPass = newShaderPass(shader code)Copy the code

Shader code format can consult CopyShader. Js three/examples/JMS/shaders/CopyShader js

The official case

link

Threejs.org/examples/?q…

The authorities have many packaged channels that can be used directly

Channel specific code location

three/examples/jsm/postprocessing/

Case presentation

Electrical pulse fault wind effect

code

/ / introduction
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
// Initialize the channel
const Pass = new GlitchPass()
// Render the result of this channel to the screen
Pass.renderToScreen = true
// Add the channel to the combinator
this.EffectComposer.addPass(Pass)
Copy the code

Effect of stroke

code

// Pass in width, scene, camera
const Pass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera)
// Render the result of this channel to the screen
Pass.renderToScreen = true
// OutlinePass attributes are set
Pass.visibleEdgeColor = new THREE.Color(76.148.156) // See the color of the edge
Pass.hiddenEdgeColor = new THREE.Color(0.1.0) // The color of the edge is not visible
Pass.edgeGlow = 1.0 // Luminescence intensity
Pass.usePatternTexture = false // Whether to use texture patterns
Pass.edgeThickness = 2.0 // Edge concentration
Pass.edgeStrength = 2.0  // Edge strength, the higher the value, the greater the border range
Pass.pulsePeriod = 0 // Flicker frequency, the higher the value, the lower the frequency

// In production environments, mouse events are used to change selectedObjects so that the selected object is strokedPass.selectedobjects = [Grid model to which borders need to be added]// Add the channel to the combinator
this.EffectComposer.addPass(Pass)
Copy the code

Effect of floodlight

The parameters of the BloomPass

  • Strength Indicates the intensity of the flooding effect. The higher the value is, the more obvious the bright area will be, and the brightness of the dark area will also be higher
  • KernelSize Specifies the offset of the flood effect
  • Sigma sharpness, the higher the value, the more blurred the flood
  • Resolution flooding effect of the resolution map, the value is too low square will be aggravated

code

/ / introduction
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'

// Parameter default values strength = 1, kernelSize = 25, sigma = 4, resolution = 256
const Pass = new BloomPass(2.5.25.0.1.this.width)
// Add to the combinator
this.EffectComposer.addPass(Pass)

// BloomPass cannot render results to the screen with renderToScreen=true,
// Add another channel effectCopyPass to output the result
// effectCopyPass channels have no special effects, just output results
const effectCopyPass = new ShaderPass(CopyShader)
effectCopyPass.renderToScreen = true
// Add to the combinator
this.EffectComposer.addPass(effectCopyPass)
Copy the code

conclusion

This article only introduces the basic use of a few cases, as long as you master the process of use, other cases can also be very good