Three.js 赛博朋克场景：后处理管线与着色器驱动的霓虹美学-编程实验室

Three.js 赛博朋克场景：后处理管线与着色器驱动的霓虹美学

一、Web 3D 的视觉瓶颈与赛博朋克美学的技术挑战

浏览器中的 3D 渲染受限于 WebGL 的硬件抽象层。与原生图形 API（Vulkan、DirectX 12）相比，WebGL 2.0 缺少计算着色器、几何着色器、多渲染目标（MRT）的部分支持。这意味着许多高级视觉效果无法直接在 GPU 上实现，需要通过后处理管线（Post-Processing Pipeline）模拟。

赛博朋克风格的视觉特征可以归纳为三个核心要素：霓虹辉光（Neon Glow）、雨夜反射（Wet Surface Reflection）、全息投影（Holographic Projection）。这三个要素在技术上分别对应：泛光效果（Bloom）、屏幕空间反射（SSR）、菲涅尔边缘光（Fresnel Rim Light）。理解这些效果背后的图形学原理，比盲目调参更能产出高质量的视觉结果。

本文将拆解 Three.js 后处理管线的底层机制，并实现一套完整的赛博朋克风格着色器系统。

二、Three.js 后处理管线的渲染架构

Three.js 的后处理管线基于 EffectComposer，其核心思想是多通道渲染（Multi-Pass Rendering）。每个 Pass 将上一个 Pass 的输出作为输入，执行特定的图像处理操作，最终输出到屏幕。

flowchart LR subgraph 几何通道 Scene[3D 场景] -->|渲染| GBuffer[G-Buffer 纹理] end subgraph 后处理通道链 GBuffer --> Pass1[Pass 1: Bloom 泛光] Pass1 --> Pass2[Pass 2: SSR 屏幕反射] Pass2 --> Pass3[Pass 3: ChromaticAberration 色差] Pass3 --> Pass4[Pass 4: FilmGrain 噪点] Pass4 --> Pass5[Pass 5: Vignette 暗角] end subgraph 输出 Pass5 -->|Write| Screen[屏幕输出] end style GBuffer fill:#e8f5e9 style Pass1 fill:#e3f2fd style Pass2 fill:#e3f2fd style Pass3 fill:#fff3e0 style Pass4 fill:#fff3e0 style Pass5 fill:#fce4ec

关键机制解析：

帧缓冲对象（FBO）与渲染目标：每个 Pass 的输出写入一个 WebGLRenderTarget（本质是 FBO + 纹理附件）。Three.js 默认使用 RGBA8 格式，精度有限。对于需要高精度中间结果的 Pass（如 HDR 泛光），必须使用FloatType纹理，但这在移动端可能不支持。

全屏四边形（Fullscreen Quad）：后处理 Pass 的几何体是一个覆盖整个视口的全屏四边形。片段着色器对每个像素执行图像处理操作，输入是上一个 Pass 的纹理。这种"屏幕空间"处理方式的优势是与场景复杂度无关——无论场景有多少三角形，后处理的计算量恒定。

Pass 顺序的重要性：后处理 Pass 的执行顺序直接影响最终效果。泛光必须在色差之前执行（否则色差偏移会破坏泛光的扩散效果），暗角必须在最后执行（否则会叠加到所有中间结果上）。

三、赛博朋克着色器系统的生产级实现

3.1 自定义泛光效果（Bloom）

// shaders/bloom/fragment.glsl // 基于 Kawase 模糊的泛光效果——比高斯模糊更高效 uniform sampler2D tDiffuse; // 输入纹理 uniform vec2 uResolution; // 屏幕分辨率 uniform float uThreshold; // 亮度阈值 uniform float uIntensity; // 泛光强度 uniform float uBlurOffset; // 模糊偏移量 varying vec2 vUv; // 亮度提取：只保留超过阈值的像素 float luminance(vec3 color) { return dot(color, vec3(0.2126, 0.7152, 0.0722)); } void main() { // 第一步：提取高亮区域 vec3 original = texture2D(tDiffuse, vUv).rgb; float lum = luminance(original); // 软阈值：避免硬截断产生的锯齿 float contribution = max(0.0, lum - uThreshold) / max(lum, 0.001); vec3 bright = original * contribution; // 第二步：Kawase 模糊（多方向采样） vec2 texelSize = 1.0 / uResolution; vec3 blurred = vec3(0.0); // 对角线方向采样，覆盖更大的模糊范围 for (int i = -2; i <= 2; i++) { for (int j = -2; j <= 2; j++) { vec2 offset = vec2(float(i), float(j)) * texelSize * uBlurOffset; blurred += texture2D(tDiffuse, vUv + offset).rgb; } } blurred /= 25.0; // 第三步：叠加原始图像与泛光 vec3 result = original + blurred * uIntensity; // 色调映射：防止 HDR 值超出显示范围 result = result / (result + vec3(1.0)); gl_FragColor = vec4(result, 1.0); }

3.2 赛博朋克全息着色器

// shaders/holographic/fragment.glsl // 菲涅尔边缘光 + 扫描线 + 色彩偏移 uniform float uTime; // 时间 uniform vec3 uColor; // 主色调（霓虹色） uniform float uScanLineSpeed; // 扫描线速度 uniform float uScanLineDensity; // 扫描线密度 uniform float uFresnelPower; // 菲涅尔指数 varying vec3 vNormal; // 世界空间法线 varying vec3 vViewDir; // 视线方向 varying vec2 vUv; void main() { // 菲涅尔效果：边缘越陡，发光越强 float fresnel = 1.0 - abs(dot(normalize(vNormal), normalize(vViewDir))); fresnel = pow(fresnel, uFresnelPower); // 扫描线效果：基于 UV 的 y 坐标生成水平条纹 float scanLine = sin(vUv.y * uScanLineDensity + uTime * uScanLineSpeed); scanLine = smoothstep(0.3, 0.7, scanLine); // 色彩偏移：模拟全息投影的色彩分离 float colorShift = sin(uTime * 2.0 + vUv.y * 10.0) * 0.1; vec3 shiftedColor = vec3( uColor.r * (1.0 + colorShift), uColor.g, uColor.b * (1.0 - colorShift) ); // 组合效果 vec3 result = shiftedColor * fresnel * 1.5; result += shiftedColor * scanLine * 0.15; result += shiftedColor * 0.05; // 微弱的基础亮度 // 闪烁效果：模拟投影的不稳定性 float flicker = 0.95 + 0.05 * sin(uTime * 15.0); result *= flicker; // Alpha 通道：中心透明，边缘不透明 float alpha = fresnel * 0.8 + 0.1; gl_FragColor = vec4(result, alpha); }

3.3 Three.js 场景集成

// scene/cyberpunk-scene.ts import * as THREE from 'three'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; class CyberpunkScene { private renderer: THREE.WebGLRenderer; private scene: THREE.Scene; private camera: THREE.PerspectiveCamera; private composer: EffectComposer; private clock: THREE.Clock; constructor(container: HTMLElement) { // 渲染器初始化 this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: 'high-performance', }); this.renderer.setSize(container.clientWidth, container.clientHeight); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.renderer.toneMapping = THREE.ACESFilmicToneMapping; this.renderer.toneMappingExposure = 0.8; container.appendChild(this.renderer.domElement); // 场景与相机 this.scene = new THREE.Scene(); this.scene.fog = new THREE.FogExp2(0x0a0a1a, 0.015); this.camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 0.1, 1000 ); this.camera.position.set(0, 2, 10); this.clock = new THREE.Clock(); // 初始化场景内容 this.setupLighting(); this.createNeonSigns(); this.setupPostProcessing(); } private setupLighting(): void { // 环境光：极暗，营造夜间氛围 const ambient = new THREE.AmbientLight(0x111122, 0.3); this.scene.add(ambient); // 霓虹灯点光源：品红、青色、紫色 const neonColors = [0xff00ff, 0x00ffff, 0x8800ff]; neonColors.forEach((color, i) => { const light = new THREE.PointLight(color, 2, 15); light.position.set( Math.cos(i * Math.PI * 2 / 3) * 5, 3, Math.sin(i * Math.PI * 2 / 3) * 5 ); this.scene.add(light); }); } private createNeonSigns(): void { // 全息着色器材质 const holoMaterial = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(0x00ffff) }, uScanLineSpeed: { value: 2.0 }, uScanLineDensity: { value: 100.0 }, uFresnelPower: { value: 2.5 }, }, vertexShader: ` varying vec3 vNormal; varying vec3 vViewDir; varying vec2 vUv; void main() { vUv = uv; vNormal = normalize(normalMatrix * normal); vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewDir = -mvPosition.xyz; gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: document.getElementById('holographic-fs')?.textContent || '', transparent: true, side: THREE.DoubleSide, depthWrite: false, }); // 创建全息投影几何体 const holoGeometry = new THREE.TorusKnotGeometry(1.5, 0.4, 128, 32); const holoMesh = new THREE.Mesh(holoGeometry, holoMaterial); holoMesh.position.set(0, 3, 0); this.scene.add(holoMesh); } private setupPostProcessing(): void { this.composer = new EffectComposer(this.renderer); // Pass 1：场景渲染 const renderPass = new RenderPass(this.scene, this.camera); this.composer.addPass(renderPass); // Pass 2：泛光效果 const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, // 强度 0.4, // 半径 0.85 // 阈值 ); this.composer.addPass(bloomPass); } public animate(): void { requestAnimationFrame(() => this.animate()); const elapsed = this.clock.getElapsedTime(); // 更新着色器 uniform this.scene.traverse((child) => { if (child instanceof THREE.Mesh && child.material instanceof THREE.ShaderMaterial) { if (child.material.uniforms.uTime) { child.material.uniforms.uTime.value = elapsed; } } }); this.composer.render(); } public dispose(): void { this.renderer.dispose(); this.scene.traverse((child) => { if (child instanceof THREE.Mesh) { child.geometry.dispose(); if (Array.isArray(child.material)) { child.material.forEach(m => m.dispose()); } else { child.material.dispose(); } } }); } }

四、WebGL 着色器的性能边界与视觉权衡

指令数限制：WebGL 2.0 的片段着色器最大指令数约为 65,536 条（取决于 GPU 驱动实现）。复杂的后处理着色器（如屏幕空间反射）可能逼近这个限制。优化策略是拆分为多个 Pass，每个 Pass 执行部分计算。

纹理带宽瓶颈：后处理管线的每个 Pass 都需要读取和写入全屏纹理。在 4K 分辨率下，一个 Pass 的纹理读写量约为 33MB（RGBA8）。5 个 Pass 的管线意味着约 165MB 的显存带宽消耗。移动端 GPU 的带宽有限，这是帧率下降的首要原因。

浮点纹理兼容性：HDR 渲染需要浮点纹理（FloatType），但并非所有设备都支持。WebGL 1.0 需要扩展OES_texture_float，WebGL 2.0 默认支持但渲染到浮点纹理仍需EXT_color_buffer_float。兼容性回退方案是使用HalfFloatType，精度降低但兼容性更好。

着色器编译延迟：首次使用新着色器时，GPU 驱动需要编译 GLSL 到硬件指令。复杂着色器的编译时间可能超过 100ms，导致首帧卡顿。Three.js 提供了renderer.compileAsync()方法，可在场景初始化阶段预编译着色器。

适用边界：赛博朋克后处理管线适用于桌面端展示、3D 作品集、沉浸式体验页面。不适用于移动端（性能不足）、SEO 关键页面（WebGL 内容不可被搜索引擎索引）、无障碍要求高的场景（屏幕阅读器无法解析 3D 内容）。