three.js--效果组合器 EffectComposer

EffectComposer介绍

用于实现three.js中的后处理效果。EffectComposer可以向其添加多个Pass 对象，处理通道以产生最终的视觉结果。后处理通道按其添加/插入的顺序执行。最后一遍自动渲染到屏幕上。

pass 通道执行顺序

在这里插入图片描述

通道pass类型介绍

每个都Pass可以是一些后期处理效果，如添加晕影、模糊、应用绽放、应用胶片颗粒、调整色调、饱和度、对比度等…最后将结果渲染到画布上。
1、RenderPass 它将3D场景渲染带到效果组合器中与后续通道做叠加效果。
2、BloomPass
可以实现绽放/泛光效果时，场景的明亮区域会变得更加突出，并会渗入较暗的区域
在这里插入图片描述

3、DotScreenPass/将屏幕变成小颗粒的点屏
在这里插入图片描述

4、FilmPass 通过扫描线和失真模拟电视屏幕
在这里插入图片描述

5、MaskPass 在当前图片上贴一层掩膜，后续通道只会影响被贴的区域
在这里插入图片描述

6、ShaderPass
着色器,它需要一个对象，其中包含定义顶点着色器、片段着色器和默认输入的信息。它将处理设置从哪个纹理读取以获取上一次传递的结果以及渲染到何处

7、TexturePass/该通道可以将效果组合器的当前状态保存为一个纹理，然后可以在其他EffectComposer对象中将该纹理作为输入参数

使用

从 v0.105.0 版本的three.js开始，EffectComposer和pass 包含在three包中，不再需要安装,可以直接引用，如下。

//效果组合对象
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";

使用方法：


let renderer = new THREE.WebGLRenderer();
//创建效果组合对象 EffectComposer()
composer = new EffectComposer(renderer);
//创建通道 
const renderPass = new RenderPass(scene, camera);
//通过.addPass()方法增加通道效果
composer.addPass(renderPass);

出了add 删除通道的方法.removePass()
插入中间.insertPass（）

渲染

 animate() {
    
    
	composer.render();
	var delta = clock.getDelta();
	requestAnimationFrame(animate);
 }