Introduction to Effect Composer
Used to achieve post-processing effects in three.js. EffectComposer can add multiple Pass objects to it, processing passes to produce the final visual result. Post-processing passes are executed in the order they are added/inserted. The last pass is automatically rendered to the screen.
pass channel execution order
Channel pass type introduction
Each Pass can be some post-processing effects, such as adding vignette, blur, applying bloom, applying film grain, adjusting hue, saturation, contrast, etc... and finally rendering the result to the canvas.
1. RenderPass It brings 3D scene rendering to the effect combiner to do superimposed effects with subsequent channels.
2.
When BloomPass can achieve the bloom/flood effect, the bright areas of the scene will become more prominent and will bleed into the darker areas
3. DotScreenPass/Turn the screen into a dot screen with small particles
4. FilmPass simulates TV screen with scan lines and distortion
5. MaskPass pastes a mask on the current image, and subsequent passes will only affect the pasted area
6. The ShaderPass
shader, which requires an object that contains information defining the vertex shader, fragment shader, and default input. It will handle setting which texture to read from for the result of the previous pass and where to render
7. TexturePass/This channel can save the current state of the Effect Composer as a texture, which can then be used as an input parameter in other EffectComposer objects
use
Starting from the v0.105.0 version of three.js, EffectComposer and pass are included in the three package, no longer need to be installed, and can be directly referenced, as follows.
//效果组合对象
import {
EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js";
//后处理通道包
import {
RenderPass} from "three/examples/jsm/postprocessing/RenderPass.js";
import {
ShaderPass} from "three/examples/jsm/postprocessing/ShaderPass.js";
import {
OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass.js";
import {
FXAAShader} from "three/examples/jsm/shaders/FXAAShader.js";
Instructions:
let renderer = new THREE.WebGLRenderer();
//创建效果组合对象 EffectComposer()
composer = new EffectComposer(renderer);
//创建通道
const renderPass = new RenderPass(scene, camera);
//通过.addPass()方法增加通道效果
composer.addPass(renderPass);
The method of adding and deleting the channel.removePass()
is inserted in the middle.insertPass()
rendering
animate() {
composer.render();
var delta = clock.getDelta();
requestAnimationFrame(animate);
}