当前位置：首页 > news >正文

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

news 2026/5/4 0:52:26

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*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x111122);constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(3,2,4);camera.lookAt(0,0,0);constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);constcontrols=newOrbitControls(camera,renderer.domElement);controls.enableDamping=true;// 创建噪声纹理constcanvas=document.createElement('canvas');canvas.width=512;canvas.height=512;constctx=canvas.getContext('2d');constimageData=ctx.createImageData(canvas.width,canvas.height);for(leti=0;i<imageData.data.length;i+=4){constval=Math.random()*255;imageData.data[i]=val;imageData.data[i+1]=val;imageData.data[i+2]=val;imageData.data[i+3]=255;}ctx.putImageData(imageData,0,0);constnoiseTexture=newTHREE.CanvasTexture(canvas);noiseTexture.wrapS=THREE.RepeatWrapping;noiseTexture.wrapT=THREE.RepeatWrapping;// 顶点着色器constvertexShader=`varying 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; }`;// 片元着色器constfragmentShader=`uniform 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}};constmaterial=newTHREE.ShaderMaterial({uniforms:uniforms,vertexShader:vertexShader,fragmentShader:fragmentShader,side:THREE.DoubleSide});constgeometry=newTHREE.SphereGeometry(1,128,128);constsphere=newTHREE.Mesh(geometry,material);scene.add(sphere);// GUI 控制importGUIfrom'lil-gui';constgui=newGUI();gui.add(uniforms.uProgress,'value',0,1).name('溶解进度');gui.addColor(uniforms.uColorA,'value').name('颜色 A');gui.addColor(uniforms.uColorB,'value').name('颜色 B');// 动画lettime=0;functionanimate(){requestAnimationFrame(animate);time+=0.01;uniforms.uTime.value=time;sphere.rotation.y=time*0.2;sphere.rotation.x=Math.sin(time*0.3)*0.2;controls.update();renderer.render(scene,camera);}animate();window.addEventListener('resize',onWindowResize,false);functiononWindowResize(){camera.aspect=window.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. 总结

技术	用途
噪声函数	生成随机/自然纹理
光照模型	计算表面颜色
溶解效果	物体消失过渡
扫描效果	科技感扫描线
热浪扭曲	空气扭曲效果