第五部分-后期特效与着色器——24. 后期特效基础

24. 后期特效基础1. 概述后期特效Post-Processing是在场景渲染完成后对渲染结果进行额外处理的技术。通过 EffectComposer 合成器可以叠加多种特效如泛光、景深、颜色校正等。┌─────────────────────────────────────────────────────────────┐ │ 后期特效工作流程 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 原始场景 ──► 渲染 ──► 渲染目标 ──► 特效处理 ──► 屏幕显示 │ │ │ │ │ │ │ ▼ ▼ ▼ │ │ RenderPass EffectComposer ShaderPass │ │ │ └─────────────────────────────────────────────────────────────┘2. EffectComposerEffectComposer 是后期特效的核心类负责管理渲染通道和特效链。2.1 创建 EffectComposerimport*asTHREEfromthree;import{EffectComposer}fromthree/examples/jsm/postprocessing/EffectComposer.js;import{RenderPass}fromthree/examples/jsm/postprocessing/RenderPass.js;// 创建渲染器constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);// 创建 EffectComposerconstcomposernewEffectComposer(renderer);// 添加渲染通道必须constrenderPassnewRenderPass(scene,camera);composer.addPass(renderPass);// 渲染替代 renderer.rendercomposer.render();2.2 EffectComposer 属性constcomposernewEffectComposer(renderer);// 像素比composer.setPixelRatio(window.devicePixelRatio);// 渲染目标大小composer.setSize(window.innerWidth,window.innerHeight);// 渲染器composer.rendererrenderer;// 输出目标composer.outputTargetnull;3. RenderPassRenderPass 是基础的渲染通道将场景渲染到纹理。import{RenderPass}fromthree/examples/jsm/postprocessing/RenderPass.js;// 创建渲染通道constrenderPassnewRenderPass(scene,camera);// 配置renderPass.cleartrue;// 是否清除缓冲区renderPass.clearDepthtrue;// 是否清除深度renderPass.clearColortrue;// 是否清除颜色// 添加到合成器composer.addPass(renderPass);4. ShaderPassShaderPass 是自定义着色器通道用于应用特效。import{ShaderPass}fromthree/examples/jsm/postprocessing/ShaderPass.js;import{CopyShader}fromthree/examples/jsm/shaders/CopyShader.js;// 创建复制通道用于输出constcopyPassnewShaderPass(CopyShader);copyPass.renderToScreentrue;// 最后一个通道需要设置为 truecomposer.addPass(copyPass);5. 完整示例import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;import{EffectComposer}fromthree/examples/jsm/postprocessing/EffectComposer.js;import{RenderPass}fromthree/examples/jsm/postprocessing/RenderPass.js;import{ShaderPass}fromthree/examples/jsm/postprocessing/ShaderPass.js;import{RGBShiftShader}fromthree/examples/jsm/shaders/RGBShiftShader.js;import{CopyShader}fromthree/examples/jsm/shaders/CopyShader.js;constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x111122);constcameranewTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(5,5,8);camera.lookAt(0,0,0);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);constcontrolsnewOrbitControls(camera,renderer.domElement);controls.enableDampingtrue;// 光源constambientLightnewTHREE.AmbientLight(0x404040,0.5);scene.add(ambientLight);constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);scene.add(directionalLight);// 创建场景物体constgeometrynewTHREE.SphereGeometry(1,64,64);constmaterialnewTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3});constspherenewTHREE.Mesh(geometry,material);sphere.castShadowtrue;scene.add(sphere);constboxGeometrynewTHREE.BoxGeometry(1,1,1);constboxMaterialnewTHREE.MeshStandardMaterial({color:0xff6633});constboxnewTHREE.Mesh(boxGeometry,boxMaterial);box.position.set(1.5,0,1.5);box.castShadowtrue;scene.add(box);constplaneGeometrynewTHREE.PlaneGeometry(8,8);constplaneMaterialnewTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplanenewTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x-Math.PI/2;plane.position.y-1;plane.receiveShadowtrue;scene.add(plane);// 创建 EffectComposerconstcomposernewEffectComposer(renderer);// 渲染通道constrenderPassnewRenderPass(scene,camera);composer.addPass(renderPass);// RGB 偏移特效constrgbShiftPassnewShaderPass(RGBShiftShader);rgbShiftPass.uniforms[amount].value0.005;composer.addPass(rgbShiftPass);// 输出通道constcopyPassnewShaderPass(CopyShader);copyPass.renderToScreentrue;composer.addPass(copyPass);// GUI 控制importGUIfromlil-gui;constguinewGUI();consteffectFoldergui.addFolder(特效控制);effectFolder.add(rgbShiftPass.uniforms[amount],value,0,0.02).name(RGB 偏移量);effectFolder.open();// 动画functionanimate(){requestAnimationFrame(animate);sphere.rotation.y0.005;box.rotation.x0.01;box.rotation.y0.01;controls.update();composer.render();}animate();window.addEventListener(resize,onWindowResize,false);functiononWindowResize(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();composer.setSize(window.innerWidth,window.innerHeight);}6. 总结类用途EffectComposer特效合成器RenderPass渲染通道ShaderPass着色器通道CopyShader复制着色器方法说明addPass(pass)添加通道removePass(pass)移除通道render()渲染setSize(width, height)设置大小