• Three.js-效果合成（EffectComposer）

    目录

    1. 效果合成器（EffectComposer）

    1.1 构造函数

    EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )

    1.2 属性

    .passes : Array

    .readBuffer : WebGLRenderTarget

    .renderer : WebGLRenderer

    .renderToScreen : Boolean

    .writeBuffer : WebGLRenderTarget

    1.3 方法

    2. 使用内置效果合成器

    3. 使用shaderPass实现自定义合成效果

    1. 效果合成器（EffectComposer）

    用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。

    例如淡入淡出效果crossfade：

    小故障效果（glitch） ：

    虚幻光晕效果： 

    除此之外，Three官方还提供许多已定义的后期效果，供用户使用，例如抗锯齿、上帝光线等。 

    1.1 构造函数

    EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )

    renderer -- 用于渲染场景的渲染器。
    renderTarget -- （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。

    1.2 属性

    .passes : Array

    一个用于表示后期处理过程链（包含顺序）的数组。

    .readBuffer : WebGLRenderTarget

    内部读缓冲区的引用。过程一般从该缓冲区读取先前的渲染结果。

    .renderer : WebGLRenderer

    内部渲染器的引用。

    .renderToScreen : Boolean

    最终过程是否被渲染到屏幕（默认帧缓冲区）。

    .writeBuffer : WebGLRenderTarget

    内部写缓冲区的引用。过程常将它们的渲染结果写入该缓冲区。

    1.3 方法

    .addPass ( pass : Pass ) : undefined

    pass -- 将被添加到过程链的过程

    将传入的过程添加到过程链。

    .insertPass ( pass : Pass, index : Integer ) : undefined

    pass -- 将被插入到过程链的过程。
    index -- 定义过程链中过程应插入的位置。

    将传入的过程插入到过程链中所给定的索引处。

    .isLastEnabledPass ( passIndex : Integer ) : Boolean

    passIndex -- 被用于检查的过程

    如果给定索引的过程在过程链中是最后一个启用的过程，则返回true。 由EffectComposer所使用，来决定哪一个过程应当被渲染到屏幕上。

    .removePass ( pass : Pass ) : undefined

    pass -- The pass to remove from the pass chain.

    Removes the given pass from the pass chain.

    .render ( deltaTime : Float ) : undefined

    deltaTime -- The delta time value.

    执行所有启用的后期处理过程，来产生最终的帧，

    .reset ( renderTarget : WebGLRenderTarget ) : undefined

    renderTarget -- （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。

    重置所有EffectComposer的内部状态。

    .setPixelRatio ( pixelRatio : Float ) : undefined

    pixelRatio -- 设备像素比

    设置设备的像素比。该值通常被用于HiDPI设备，以阻止模糊的输出。 因此，该方法语义类似于WebGLRenderer.setPixelRatio()。

    .setSize ( width : Integer, height : Integer ) : undefined

    width -- EffectComposer的宽度。
    height -- EffectComposer的高度。

    考虑设备像素比，重新设置内部渲染缓冲和过程的大小为(width, height)。 因此，该方法语义类似于WebGLRenderer.setSize()。

    .swapBuffers () : undefined

    交换内部的读/写缓冲。

    2. 使用内置效果合成器

    1）导入three框架自带效果

    1. // three框架本身自带效果
    2. import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
    3. import { DotScreenPass } from "three/examples/jsm/postprocessing/DotScreenPass";
    4. import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass";
    5. import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass";
    6. import { GlitchPass } from "three/examples/jsm/postprocessing/GlitchPass";
    7. import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
    8. import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";

    2）实例化合成效果并设置效果窗口尺寸

    1. // 合成效果
    2. const effectComposer = new EffectComposer(renderer);
    3. effectComposer.setSize(window.innerWidth, window.innerHeight);

    3） 添加渲染通道

    1. const renderPass = new RenderPass(scene, camera);
    2. effectComposer.addPass(renderPass);

    4）添加效果

    1. // 点效果
    2. const dotScreenPass = new DotScreenPass();
    3. dotScreenPass.enabled = false;
    4. effectComposer.addPass(dotScreenPass);
    5.  
    6. // // 抗锯齿
    7. const smaaPass = new SMAAPass();
    8. effectComposer.addPass(smaaPass);
    9.  
    10. // // 发光效果
    11. const unrealBloomPass = new UnrealBloomPass();
    12. effectComposer.addPass(unrealBloomPass);
    13. unrealBloomPass.strength = 1;
    14. unrealBloomPass.radius = 0;
    15. unrealBloomPass.threshold = 1;
    16. // // 屏幕闪烁效果
    17. const glitchPass = new GlitchPass();
    18. effectComposer.addPass(glitchPass)

    5）将effectComposer挂载至生命函数中

    1. function animate(t) {
    2.   controls.update();
    3.   const time = clock.getElapsedTime();
    4.   requestAnimationFrame(animate);
    5.   //挂载效果合成器
    6.   effectComposer.render();
    7. }
    8.  
    9. animate();

    6）实现效果：

    未添加效果前：

    添加效果后：

    3. 使用shaderPass实现自定义合成效果

    1）导入所需效果

    1. import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
    2. import { DotScreenPass } from "three/examples/jsm/postprocessing/DotScreenPass";
    3. import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass";
    4. import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
    5. import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";

    2）设置合成效果

    1. // 合成效果
    2. const effectComposer = new EffectComposer(renderer);
    3. effectComposer.setSize(window.innerWidth, window.innerHeight);
    4.  
    5. // 添加渲染通道
    6. const renderPass = new RenderPass(scene, camera);
    7. effectComposer.addPass(renderPass);
    8.  
    9. // 点效果
    10. const dotScreenPass = new DotScreenPass();
    11. dotScreenPass.enabled = false;
    12. effectComposer.addPass(dotScreenPass);
    13.  
    14. // 抗锯齿
    15. const smaaPass = new SMAAPass();
    16. effectComposer.addPass(smaaPass);
    17.  
    18. // 发光效果
    19. const unrealBloomPass = new UnrealBloomPass();
    20. effectComposer.addPass(unrealBloomPass);
    21. unrealBloomPass.strength = 1;
    22. unrealBloomPass.radius = 0;
    23. unrealBloomPass.threshold = 1;

    3）编写着色器渲染通道

    1. //定义颜色参数
    2. const colorParams = {
    3.   r: 0,
    4.   g: 0,
    5.   b: 0,
    6. };
    7. // 着色器写渲染通道
    8. const shaderPass = new ShaderPass({
    9.   uniforms: {
    10.     tDiffuse: {
    11.       value: null,
    12.     },
    13.     uColor: {
    14.       value: new THREE.Color(colorParams.r, colorParams.g, colorParams.b),
    15.     },
    16.   },
    17.   vertexShader: `
    18.       varying vec2 vUv;
    19.       void main(){
    20.         vUv = uv;
    21.         gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);
    22.       }
    23.     `,
    24.   fragmentShader: `
    25.       varying vec2 vUv;
    26.       uniform sampler2D tDiffuse;
    27.       uniform vec3 uColor;
    28.       void main(){
    29.         vec4 color = texture2D(tDiffuse,vUv);
    30.         // gl_FragColor = vec4(vUv,0.0,1.0);
    31.         color.xyz+=uColor;
    32.         gl_FragColor = color;
    33.       }
    34.     `,
    35. });
    36.  
    37. effectComposer.addPass(shaderPass);

    4）编写法相纹理着色器渲染通道

    1. const techPass = new ShaderPass({
    2.   uniforms: {
    3.     tDiffuse: {
    4.       value: null,
    5.     },
    6.     uNormalMap: {
    7.       value: null,
    8.     },
    9.     uTime: {
    10.       value: 0,
    11.     },
    12.   },
    13.   vertexShader: `
    14.     varying vec2 vUv;
    15.     void main(){
    16.       vUv = uv;
    17.       gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);
    18.     }
    19.   `,
    20.   fragmentShader: `
    21.     varying vec2 vUv;
    22.     uniform sampler2D tDiffuse;
    23.     uniform sampler2D uNormalMap;
    24.     uniform float uTime;
    25.     void main(){
    26.  
    27.       //通过时间和uv控制场景的摆动
    28.       vec2 newUv = vUv;
    29.       newUv += sin(newUv.x*10.0+uTime*0.5)*0.03;
    30.  
    31.       vec4 color = texture2D(tDiffuse,newUv);
    32.       // gl_FragColor = vec4(vUv,0.0,1.0);
    33.       vec4 normalColor = texture2D(uNormalMap,vUv);
    34.       // 设置光线的角度
    35.       vec3 lightDirection = normalize(vec3(-5,5,2)) ;
    36.       //设置亮度效果
    37.       float lightness = clamp(dot(normalColor.xyz,lightDirection),0.0,1.0) ;//前置函数
    38.       color.xyz+=lightness;
    39.       gl_FragColor = color;
    40.     }
    41.   `,
    42. });
    43. techPass.material.uniforms.uNormalMap.value = normalTexture;
    44. effectComposer.addPass(techPass);

    5）在声明函数中挂载effectComposer

    1. const clock = new THREE.Clock();
    2. function animate(t) {
    3.   controls.update();
    4.   const time = clock.getElapsedTime();
    5.   requestAnimationFrame(animate);
    6.   // 使用渲染器渲染相机看这个场景的内容渲染出来
    7.   // renderer.render(scene, camera);
    8.   techPass.material.uniforms.uTime.value = time;
    9.   effectComposer.render();
    10. }
    11.  
    12. animate();

    6）实现效果：

     7）全部源码： 

    main.js:

    1. import * as THREE from "three";
    2.  
    3. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
    4. import gsap from "gsap";
    5. import * as dat from "dat.gui";
    6. import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
    7. import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
    8.  
    9. // 导入后期效果合成器
    10. import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
    11.  
    12. // three框架本身自带效果
    13. import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
    14. import { DotScreenPass } from "three/examples/jsm/postprocessing/DotScreenPass";
    15. import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass";
    16. import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
    17. import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";
    18.  
    19. // 目标：后期处理
    20.  
    21. //创建gui对象
    22. const gui = new dat.GUI();
    23.  
    24. // console.log(THREE);
    25. // 初始化场景
    26. const scene = new THREE.Scene();
    27.  
    28. // 创建透视相机
    29. const camera = new THREE.PerspectiveCamera(
    30.   75,
    31.   window.innerHeight / window.innerHeight,
    32.   1,
    33.   50
    34. );
    35. // 设置相机位置
    36. // object3d具有position，属性是1个3维的向量
    37. camera.position.set(0, 0, 3);
    38. // 更新摄像头
    39. camera.aspect = window.innerWidth / window.innerHeight;
    40. //   更新摄像机的投影矩阵
    41. camera.updateProjectionMatrix();
    42. scene.add(camera);
    43.  
    44. // 加入辅助轴，帮助我们查看3维坐标轴
    45. // const axesHelper = new THREE.AxesHelper(5);
    46. // scene.add(axesHelper);
    47.  
    48. // 加载纹理
    49.  
    50. // 创建纹理加载器对象
    51. const textureLoader = new THREE.TextureLoader();
    52.  
    53. // 添加环境纹理
    54. const cubeTextureLoader = new THREE.CubeTextureLoader();
    55. const envMapTexture = cubeTextureLoader.load([
    56.   "textures/environmentMaps/0/px.jpg",
    57.   "textures/environmentMaps/0/nx.jpg",
    58.   "textures/environmentMaps/0/py.jpg",
    59.   "textures/environmentMaps/0/ny.jpg",
    60.   "textures/environmentMaps/0/pz.jpg",
    61.   "textures/environmentMaps/0/nz.jpg",
    62. ]);
    63. scene.background = envMapTexture;
    64. scene.environment = envMapTexture;
    65.  
    66. const directionLight = new THREE.DirectionalLight("#ffffff", 1);
    67. directionLight.castShadow = true;
    68. directionLight.position.set(0, 0, 200);
    69. scene.add(directionLight);
    70.  
    71. // 模型加载
    72. const gltfLoader = new GLTFLoader();
    73. gltfLoader.load("./models/DamagedHelmet/glTF/DamagedHelmet.gltf", (gltf) => {
    74.   console.log(gltf);
    75.   // scene.add(gltf.scene)
    76.   const mesh = gltf.scene.children[0];
    77.  
    78.   scene.add(mesh);
    79. });
    80.  
    81. // 初始化渲染器
    82. const renderer = new THREE.WebGLRenderer();
    83. // 设置渲染尺寸大小
    84. renderer.setSize(window.innerWidth, window.innerHeight);
    85. renderer.shadowMap.enabled = true;
    86.  
    87. // 合成效果
    88. const effectComposer = new EffectComposer(renderer);
    89. effectComposer.setSize(window.innerWidth, window.innerHeight);
    90.  
    91. // 添加渲染通道
    92. const renderPass = new RenderPass(scene, camera);
    93. effectComposer.addPass(renderPass);
    94.  
    95. // 点效果
    96. const dotScreenPass = new DotScreenPass();
    97. dotScreenPass.enabled = false;
    98. effectComposer.addPass(dotScreenPass);
    99.  
    100. // 抗锯齿
    101. const smaaPass = new SMAAPass();
    102. effectComposer.addPass(smaaPass);
    103.  
    104. // 发光效果
    105. const unrealBloomPass = new UnrealBloomPass();
    106. effectComposer.addPass(unrealBloomPass);
    107. unrealBloomPass.strength = 1;
    108. unrealBloomPass.radius = 0;
    109. unrealBloomPass.threshold = 1;
    110.  
    111. //设置色调映射
    112. renderer.toneMapping = THREE.ACESFilmicToneMapping;
    113. renderer.toneMappingExposure = 1;
    114.  
    115.  
    116. gui.add(renderer, "toneMappingExposure").min(0).max(2).step(0.01);
    117. gui.add(unrealBloomPass, "strength").min(0).max(2).step(0.01);
    118. gui.add(unrealBloomPass, "radius").min(0).max(2).step(0.01);
    119. gui.add(unrealBloomPass, "threshold").min(0).max(2).step(0.01);
    120.  
    121. //定义颜色参数
    122. const colorParams = {
    123.   r: 0,
    124.   g: 0,
    125.   b: 0,
    126. };
    127. // 着色器写渲染通道
    128. const shaderPass = new ShaderPass({
    129.   uniforms: {
    130.     tDiffuse: {
    131.       value: null,
    132.     },
    133.     uColor: {
    134.       value: new THREE.Color(colorParams.r, colorParams.g, colorParams.b),
    135.     },
    136.   },
    137.   vertexShader: `
    138.       varying vec2 vUv;
    139.       void main(){
    140.         vUv = uv;
    141.         gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);
    142.       }
    143.     `,
    144.   fragmentShader: `
    145.       varying vec2 vUv;
    146.       uniform sampler2D tDiffuse;
    147.       uniform vec3 uColor;
    148.       void main(){
    149.         vec4 color = texture2D(tDiffuse,vUv);
    150.         // gl_FragColor = vec4(vUv,0.0,1.0);
    151.         color.xyz+=uColor;
    152.         gl_FragColor = color;
    153.       }
    154.     `,
    155. });
    156.  
    157. effectComposer.addPass(shaderPass);
    158.  
    159. gui
    160.   .add(colorParams, "r")
    161.   .min(-1)
    162.   .max(1)
    163.   .step(0.01)
    164.   .onChange((value) => {
    165.     shaderPass.uniforms.uColor.value.r = value;
    166.   });
    167. gui
    168.   .add(colorParams, "g")
    169.   .min(-1)
    170.   .max(1)
    171.   .step(0.01)
    172.   .onChange((value) => {
    173.     shaderPass.uniforms.uColor.value.g = value;
    174.   });
    175. gui
    176.   .add(colorParams, "b")
    177.   .min(-1)
    178.   .max(1)
    179.   .step(0.01)
    180.   .onChange((value) => {
    181.     shaderPass.uniforms.uColor.value.b = value;
    182.   });
    183. // 监听屏幕大小改变的变化，设置渲染的尺寸
    184. window.addEventListener("resize", () => {
    185.   //   console.log("resize");
    186.   // 更新摄像头
    187.   camera.aspect = window.innerWidth / window.innerHeight;
    188.   //   更新摄像机的投影矩阵
    189.   camera.updateProjectionMatrix();
    190.  
    191.   //   更新渲染器
    192.   renderer.setSize(window.innerWidth, window.innerHeight);
    193.   //   设置渲染器的像素比例
    194.   renderer.setPixelRatio(window.devicePixelRatio);
    195.  
    196.   effectComposer.setSize(window.innerWidth, window.innerHeight);
    197.   effectComposer.setPixelRatio(window.devicePixelRatio);
    198. });
    199.  
    200. //添加法相纹理
    201. const normalTexture = textureLoader.load("./textures/interfaceNormalMap.png");
    202.  
    203. const techPass = new ShaderPass({
    204.   uniforms: {
    205.     tDiffuse: {
    206.       value: null,
    207.     },
    208.     uNormalMap: {
    209.       value: null,
    210.     },
    211.     uTime: {
    212.       value: 0,
    213.     },
    214.   },
    215.   vertexShader: `
    216.     varying vec2 vUv;
    217.     void main(){
    218.       vUv = uv;
    219.       gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);
    220.     }
    221.   `,
    222.   fragmentShader: `
    223.     varying vec2 vUv;
    224.     uniform sampler2D tDiffuse;
    225.     uniform sampler2D uNormalMap;
    226.     uniform float uTime;
    227.     void main(){
    228.  
    229.       //通过时间和uv控制场景的摆动
    230.       vec2 newUv = vUv;
    231.       newUv += sin(newUv.x*10.0+uTime*0.5)*0.03;
    232.  
    233.       vec4 color = texture2D(tDiffuse,newUv);
    234.       // gl_FragColor = vec4(vUv,0.0,1.0);
    235.       vec4 normalColor = texture2D(uNormalMap,vUv);
    236.       // 设置光线的角度
    237.       vec3 lightDirection = normalize(vec3(-5,5,2)) ;
    238.       //设置亮度效果
    239.       float lightness = clamp(dot(normalColor.xyz,lightDirection),0.0,1.0) ;//前置函数
    240.       color.xyz+=lightness;
    241.       gl_FragColor = color;
    242.     }
    243.   `,
    244. });
    245. techPass.material.uniforms.uNormalMap.value = normalTexture;
    246. effectComposer.addPass(techPass);
    247.  
    248. // 将渲染器添加到body
    249. document.body.appendChild(renderer.domElement);
    250.  
    251. // 初始化控制器
    252. const controls = new OrbitControls(camera, renderer.domElement);
    253. // 设置控制器阻尼
    254. controls.enableDamping = true;
    255. // 设置自动旋转
    256. // controls.autoRotate = true;
    257.  
    258. const clock = new THREE.Clock();
    259. function animate(t) {
    260.   controls.update();
    261.   const time = clock.getElapsedTime();
    262.   requestAnimationFrame(animate);
    263.   // 使用渲染器渲染相机看这个场景的内容渲染出来
    264.   // renderer.render(scene, camera);
    265.   techPass.material.uniforms.uTime.value = time;
    266.   effectComposer.render();
    267. }
    268.  
    269. animate();

  • 相关阅读:
    Java msyql批量插入 十万条数据
    Python调试指南
    【MySQL从0到1】第六篇：内置函数
    【刷题笔记9.25】LeetCode：环形链表
    yarn节点属性及调度
    玩转springboot之springboot配置文件
    Java学习day01：数据类型、运算符、分支结构
    Go实战学习笔记-1.Go安装、介绍及Go Playground介绍和运行hello world
    Redis真没那么难，这份大佬实战笔记也太可了，吹爆
    java 1.8 图片转base64 和base64转图片Demo
  • 原文地址：https://blog.csdn.net/damadashen/article/details/126023046