第五部分-后期特效与着色器——27. 高级着色器

27. 高级着色器1. 概述高级着色器技术包括噪声函数、光照模型、后处理特效等。通过自定义着色器可以实现复杂视觉效果如火焰、水波、溶解等。┌─────────────────────────────────────────────────────────────┐ │ 高级着色器技术 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 噪声函数 │ │ ├── 正弦波噪声 │ │ ├── Simplex 噪声 │ │ ├── Perlin 噪声 │ │ └── 细胞噪声 │ │ │ │ 光照模型 │ │ ├── 漫反射光照 │ │ ├── 高光光照 │ │ ├── 环境光照 │ │ └── 法线贴图 │ │ │ │ 特效 │ │ ├── 溶解效果 │ │ ├── 边缘发光 │ │ ├── 扫描效果 │ │ └── 热浪扭曲 │ │ │ └─────────────────────────────────────────────────────────────┘2. 噪声函数2.1 正弦波噪声// 简单的正弦波噪声 float wave sin(position.x * 3.0 uTime) * cos(position.z * 3.0 uTime);2.2 随机噪声// 随机函数 float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } // 使用随机噪声 float noise random(vUv);2.3 平滑噪声// 平滑插值 float smoothNoise(vec2 st) { vec2 i floor(st); vec2 f fract(st); float a random(i); float b random(i vec2(1.0, 0.0)); float c random(i vec2(0.0, 1.0)); float d random(i vec2(1.0, 1.0)); vec2 u f * f * (3.0 - 2.0 * f); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); }3. 光照模型3.1 简单漫反射// 漫反射光照 uniform vec3 uLightDir; uniform vec3 uLightColor; void main() { vec3 normal normalize(vNormal); vec3 lightDir normalize(uLightDir); float diff max(dot(normal, lightDir), 0.0); vec3 diffuse diff * uLightColor; gl_FragColor vec4(diffuse, 1.0); }3.2 完整光照模型// 环境光 漫反射 高光 uniform vec3 uAmbientColor; uniform vec3 uLightDir; uniform vec3 uLightColor; uniform vec3 uViewPosition; uniform float uShininess; void main() { vec3 normal normalize(vNormal); vec3 lightDir normalize(uLightDir); vec3 viewDir normalize(uViewPosition - vPosition); vec3 reflectDir reflect(-lightDir, normal); // 环境光 vec3 ambient uAmbientColor; // 漫反射 float diff max(dot(normal, lightDir), 0.0); vec3 diffuse diff * uLightColor; // 高光 float spec pow(max(dot(viewDir, reflectDir), 0.0), uShininess); vec3 specular spec * uLightColor; vec3 result ambient diffuse specular; gl_FragColor vec4(result, 1.0); }4. 溶解效果uniform sampler2D uTexture; uniform sampler2D uNoiseTexture; uniform float uProgress; uniform vec3 uEdgeColor; void main() { vec4 noise texture2D(uNoiseTexture, vUv); float dissolve noise.r; if (dissolve uProgress) { discard; } vec4 color texture2D(uTexture, vUv); // 边缘发光 float edge smoothstep(uProgress, uProgress 0.1, dissolve); vec3 finalColor mix(uEdgeColor, color.rgb, edge); gl_FragColor vec4(finalColor, 1.0); }5. 完整示例import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x111122);constcameranewTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(3,2,4);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;// 创建噪声纹理constcanvasdocument.createElement(canvas);canvas.width512;canvas.height512;constctxcanvas.getContext(2d);constimageDatactx.createImageData(canvas.width,canvas.height);for(leti0;iimageData.data.length;i4){constvalMath.random()*255;imageData.data[i]val;imageData.data[i1]val;imageData.data[i2]val;imageData.data[i3]255;}ctx.putImageData(imageData,0,0);constnoiseTexturenewTHREE.CanvasTexture(canvas);noiseTexture.wrapSTHREE.RepeatWrapping;noiseTexture.wrapTTHREE.RepeatWrapping;// 顶点着色器constvertexShadervarying vec2 vUv; varying vec3 vPosition; varying vec3 vNormal; void main() { vUv uv; vNormal normalize(normalMatrix * normal); vec4 mvPosition modelViewMatrix * vec4(position, 1.0); vPosition mvPosition.xyz; gl_PointSize 1.0; gl_Position projectionMatrix * mvPosition; };// 片元着色器constfragmentShaderuniform float uTime; uniform sampler2D uNoiseTexture; uniform vec3 uColorA; uniform vec3 uColorB; uniform float uProgress; varying vec2 vUv; varying vec3 vPosition; varying vec3 vNormal; // 随机函数 float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } // 平滑噪声 float smoothNoise(vec2 st) { vec2 i floor(st); vec2 f fract(st); float a random(i); float b random(i vec2(1.0, 0.0)); float c random(i vec2(0.0, 1.0)); float d random(i vec2(1.0, 1.0)); vec2 u f * f * (3.0 - 2.0 * f); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } void main() { // 噪声值 vec2 noiseCoord vUv * 4.0 uTime * 0.1; float noise smoothNoise(noiseCoord); // 溶解效果 vec4 noiseTex texture2D(uNoiseTexture, vUv); float dissolve noiseTex.r; if (dissolve uProgress) { discard; } // 颜色渐变 vec3 color mix(uColorA, uColorB, vUv.x noise * 0.3); // 简单的光照 vec3 lightDir normalize(vec3(1.0, 2.0, 1.0)); float diff max(dot(vNormal, lightDir), 0.2); color * diff; // 边缘发光 float edge smoothstep(uProgress, uProgress 0.1, dissolve); color mix(vec3(1.0, 0.5, 0.0), color, edge); // 动态颜色 color vec3(sin(uTime) * 0.2, cos(uTime * 0.7) * 0.2, sin(uTime * 0.5) * 0.2); gl_FragColor vec4(color, 1.0); };constuniforms{uTime:{value:0},uNoiseTexture:{value:noiseTexture},uColorA:{value:newTHREE.Color(0x44aa88)},uColorB:{value:newTHREE.Color(0xff6633)},uProgress:{value:0}};constmaterialnewTHREE.ShaderMaterial({uniforms:uniforms,vertexShader:vertexShader,fragmentShader:fragmentShader,side:THREE.DoubleSide});constgeometrynewTHREE.SphereGeometry(1,128,128);constspherenewTHREE.Mesh(geometry,material);scene.add(sphere);// GUI 控制importGUIfromlil-gui;constguinewGUI();gui.add(uniforms.uProgress,value,0,1).name(溶解进度);gui.addColor(uniforms.uColorA,value).name(颜色 A);gui.addColor(uniforms.uColorB,value).name(颜色 B);// 动画lettime0;functionanimate(){requestAnimationFrame(animate);time0.01;uniforms.uTime.valuetime;sphere.rotation.ytime*0.2;sphere.rotation.xMath.sin(time*0.3)*0.2;controls.update();renderer.render(scene,camera);}animate();window.addEventListener(resize,onWindowResize,false);functiononWindowResize(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}6. 高级特效6.1 扫描效果float scanline sin(vUv.y * 200.0 - uTime * 20.0); scanline clamp(scanline, 0.0, 1.0); color * (0.8 scanline * 0.3);6.2 热浪扭曲vec2 distortedUv vUv sin(vUv.yx * 20.0 uTime) * 0.02; vec4 color texture2D(uTexture, distortedUv);7. 总结技术用途噪声函数生成随机/自然纹理光照模型计算表面颜色溶解效果物体消失过渡扫描效果科技感扫描线热浪扭曲空气扭曲效果8. 第五部分总结恭喜你完成了第五部分后期特效与着色器你已掌握✅ 后期特效基础EffectComposer、RenderPass✅ 内置特效泛光、景深、轮廓描边✅ 着色器基础ShaderMaterial、Uniforms✅ 高级着色器噪声、光照、溶解