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

Three.js 赛博朋克风格 UI：3D 渲染管线与着色器艺术的工程实战

news 2026/6/26 22:42:46

Three.js 赛博朋克风格 UI：3D 渲染管线与着色器艺术的工程实战

一、2D 界面的表现力天花板：赛博朋克风格的 3D 化需求

赛博朋克风格的视觉语言——霓虹光晕、故障效果、全息投影和粒子流——在 2D CSS 中只能通过滤镜和动画近似模拟。当产品需要真正的 3D 空间感（如可旋转的全息数据面板、3D 城市场景中的数据可视化、沉浸式产品展示）时，CSS 的表现力达到天花板。

Three.js 提供了 WebGL 的上层抽象，让前端开发者可以在浏览器中构建完整的 3D 场景。但 Three.js 的学习曲线陡峭，从场景搭建到着色器编写，每个环节都有性能陷阱。常见的工程痛点包括：渲染帧率在移动端骤降、后处理效果导致 GPU 过载、着色器代码难以调试。

本文将从工程化视角构建一套赛博朋克风格的 3D Web UI 方案，覆盖渲染管线优化、自定义着色器和后处理效果链三个核心环节。

二、渲染管线与 GPU 工作流：Three.js 场景的底层机制

Three.js 的渲染过程本质上是将场景图（Scene Graph）中的 3D 对象转换为 GPU 可执行的绘制指令。理解这条管线的每个阶段，是优化渲染性能和编写自定义着色器的前提。

flowchart LR subgraph CPU 端 A[场景图遍历] --> B[视锥剔除] B --> C[排序与合批] C --> D[绘制指令生成] end subgraph GPU 端 E[顶点着色器] --> F[图元装配] F --> G[光栅化] G --> H[片元着色器] H --> I[深度测试与混合] I --> J[帧缓冲输出] end subgraph 后处理链 J --> K[Bloom 辉光] K --> L[Glitch 故障效果] L --> M[色差偏移] M --> N[最终输出] end D --> E subgraph 性能瓶颈 O[Draw Call 过多] -.-> D P[片元着色器过重] -.-> H Q[后处理链过长] -.-> K end

上图标注了渲染管线中的三个关键性能瓶颈。Draw Call 过多发生在 CPU 端的绘制指令生成阶段——每个材质不同的对象都需要一次独立的 Draw Call，超过 1000 次 Draw Call 时 CPU 成为瓶颈。片元着色器过重发生在 GPU 端——复杂的着色器逻辑（如多层噪声计算）会导致 GPU 计算时间过长，帧率下降。后处理链过长则是因为每个后处理 Pass 都需要一次全屏绘制，Pass 数量与 GPU 负载线性相关。

赛博朋克风格的视觉特征需要特定的渲染技术支撑。霓虹光晕效果依赖 Bloom 后处理——将亮度超过阈值的区域模糊后叠加回原图。故障效果（Glitch）通过在片元着色器中对 UV 坐标施加随机偏移实现。全息投影效果需要菲涅尔边缘光（Fresnel Effect）和扫描线纹理的组合。

Three.js 的 EffectComposer 是后处理链的标准实现。它通过 RenderTarget 机制将场景渲染到纹理，然后依次通过每个后处理 Pass 处理。每个 Pass 读取上一个 Pass 的输出纹理，写入下一个 Pass 的输入纹理，形成处理链。

三、生产级代码实现：赛博朋克 3D 场景

3.1 场景初始化与渲染管线配置

// scene/cyber-scene.ts import * as THREE from 'three'; import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'; import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'; class CyberScene { private renderer: THREE.WebGLRenderer; private scene: THREE.Scene; private camera: THREE.PerspectiveCamera; private composer: EffectComposer; private glitchPass: ShaderPass; private clock: THREE.Clock; constructor(container: HTMLElement) { const width = container.clientWidth; const height = container.clientHeight; // 渲染器配置——启用抗锯齿和 sRGB 色彩空间 // sRGB 确保颜色在 PBR 材质中正确显示 this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: 'high-performance', }); this.renderer.setSize(width, height); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.renderer.toneMapping = THREE.ACESFilmicToneMapping; this.renderer.toneMappingExposure = 1.2; container.appendChild(this.renderer.domElement); // 场景——深色背景配合赛博朋克氛围 this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0x0a0a1a); this.scene.fog = new THREE.FogExp2(0x0a0a1a, 0.015); // 透视相机——FOV 不宜过大，否则边缘畸变严重 this.camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000); this.camera.position.set(0, 2, 8); this.clock = new THREE.Clock(); // 初始化后处理链 this.composer = this.initPostProcessing(width, height); this.glitchPass = this.createGlitchPass(); // 窗口自适应 window.addEventListener('resize', () => this.onResize(container)); } private initPostProcessing(width: number, height: number): EffectComposer { const composer = new EffectComposer(this.renderer); // Pass 1：场景渲染——必须作为第一个 Pass const renderPass = new RenderPass(this.scene, this.camera); composer.addPass(renderPass); // Pass 2：Bloom 辉光——赛博朋克霓虹效果的核心 // 阈值控制哪些区域产生辉光，强度控制辉光亮度 const bloomPass = new UnrealBloomPass( new THREE.Vector2(width, height), 1.5, // 强度——过高会导致整个画面泛白 0.4, // 半径——控制辉光扩散范围 0.85 // 阈值——只有亮度超过此值的区域才产生辉光 ); composer.addPass(bloomPass); return composer; } private createGlitchPass(): ShaderPass { // 自定义故障效果着色器——在片元着色器中对 UV 施加随机偏移 const glitchShader = { uniforms: { tDiffuse: { value: null }, uTime: { value: 0 }, uIntensity: { value: 0.3 }, uSpeed: { value: 2.0 }, }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform float uTime; uniform float uIntensity; uniform float uSpeed; varying vec2 vUv; // 伪随机函数——GPU 上不使用 Math.random() float random(vec2 st) { return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec2 uv = vUv; // 周期性触发故障——不是每帧都故障 float glitchTrigger = step(0.95, random(vec2(floor(uTime * uSpeed), 1.0))); // 水平条纹偏移——将画面按行随机偏移 float lineOffset = random(vec2(floor(uv.y * 50.0), floor(uTime * 10.0))) * 2.0 - 1.0; uv.x += lineOffset * uIntensity * glitchTrigger * 0.05; // RGB 通道分离——模拟信号干扰 float r = texture2D(tDiffuse, uv + vec2(0.003, 0.0) * glitchTrigger).r; float g = texture2D(tDiffuse, uv).g; float b = texture2D(tDiffuse, uv - vec2(0.003, 0.0) * glitchTrigger).b; gl_FragColor = vec4(r, g, b, 1.0); } `, }; const pass = new ShaderPass(glitchShader); this.composer.addPass(pass); return pass; } // 创建赛博朋克风格的全息面板 createHologramPanel(width: number, height: number): THREE.Mesh { const geometry = new THREE.PlaneGeometry(width, height, 32, 32); // 全息着色器材质——菲涅尔边缘光 + 扫描线 + 透明度 const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(0x00ffff) }, uOpacity: { value: 0.7 }, }, 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 = normalize(-mvPosition.xyz); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform float uTime; uniform vec3 uColor; uniform float uOpacity; varying vec3 vNormal; varying vec3 vViewDir; varying vec2 vUv; void main() { // 菲涅尔效果——边缘更亮，中心更透明 float fresnel = pow(1.0 - abs(dot(vNormal, vViewDir)), 2.0); // 扫描线——水平方向的明暗条纹 float scanline = sin(vUv.y * 200.0 + uTime * 3.0) * 0.5 + 0.5; scanline = smoothstep(0.3, 0.7, scanline); // 网格线——增强科技感 float gridX = step(0.98, fract(vUv.x * 20.0)); float gridY = step(0.98, fract(vUv.y * 20.0)); float grid = max(gridX, gridY) * 0.3; float alpha = (fresnel * 0.8 + 0.2) * uOpacity * scanline + grid; vec3 color = uColor * (fresnel * 0.5 + 0.5); gl_FragColor = vec4(color, alpha); } `, transparent: true, side: THREE.DoubleSide, depthWrite: false, // 透明物体不写入深度缓冲——避免遮挡问题 }); return new THREE.Mesh(geometry, material); } // 渲染循环——使用 composer 替代 renderer.render render(): void { const delta = this.clock.getDelta(); const elapsed = this.clock.getElapsedTime(); // 更新着色器 uniform——驱动动画效果 this.glitchPass.uniforms.uTime.value = elapsed; // 更新场景中所有全息面板的时间 this.scene.traverse((obj) => { if (obj instanceof THREE.Mesh && obj.material instanceof THREE.ShaderMaterial) { if (obj.material.uniforms.uTime) { obj.material.uniforms.uTime.value = elapsed; } } }); this.composer.render(); } private onResize(container: HTMLElement): void { const width = container.clientWidth; const height = container.clientHeight; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.renderer.setSize(width, height); this.composer.setSize(width, height); } }

3.2 霓虹粒子系统——GPU 驱动的高性能粒子

// effects/neon-particles.ts import * as THREE from 'three'; class NeonParticleSystem { private mesh: THREE.Points; private particleCount: number; private velocities: Float32Array; constructor(count: number = 5000) { this.particleCount = count; this.velocities = new Float32Array(count * 3); const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); const sizes = new Float32Array(count); // 赛博朋克调色板——霓虹青、品红、电紫 const palette = [ new THREE.Color(0x00ffff), new THREE.Color(0xff00ff), new THREE.Color(0x8b00ff), new THREE.Color(0x00ff88), ]; for (let i = 0; i < count; i++) { const i3 = i * 3; // 随机位置——分布在圆柱形空间内 const angle = Math.random() * Math.PI * 2; const radius = Math.random() * 5; positions[i3] = Math.cos(angle) * radius; positions[i3 + 1] = (Math.random() - 0.5) * 10; positions[i3 + 2] = Math.sin(angle) * radius; // 随机速度——用于动画更新 this.velocities[i3] = (Math.random() - 0.5) * 0.02; this.velocities[i3 + 1] = Math.random() * 0.02 + 0.01; this.velocities[i3 + 2] = (Math.random() - 0.5) * 0.02; // 随机颜色——从调色板中选取 const color = palette[Math.floor(Math.random() * palette.length)]; colors[i3] = color.r; colors[i3 + 1] = color.g; colors[i3 + 2] = color.b; // 随机大小——近大远小的透视效果 sizes[i] = Math.random() * 3 + 1; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); // 自定义粒子着色器——替代 PointsMaterial 以获得更好的视觉效果 const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) }, }, vertexShader: ` attribute float size; varying vec3 vColor; uniform float uPixelRatio; void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); // 粒子大小随距离衰减——模拟透视效果 gl_PointSize = size * uPixelRatio * (100.0 / -mvPosition.z); gl_PointSize = max(gl_PointSize, 1.0); // 最小 1 像素，避免消失 gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying vec3 vColor; void main() { // 圆形粒子——丢弃正方形边角 float dist = length(gl_PointCoord - vec2(0.5)); if (dist > 0.5) discard; // 中心亮边缘暗——模拟发光效果 float glow = 1.0 - smoothstep(0.0, 0.5, dist); gl_FragColor = vec4(vColor * glow * 1.5, glow * 0.8); } `, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, // 加法混合——重叠粒子更亮 vertexColors: true, }); this.mesh = new THREE.Points(geometry, material); } update(delta: number): void { const positions = this.mesh.geometry.attributes.position.array as Float32Array; const material = this.mesh.material as THREE.ShaderMaterial; material.uniforms.uTime.value += delta; for (let i = 0; i < this.particleCount; i++) { const i3 = i * 3; // 更新位置——粒子向上飘动 positions[i3] += this.velocities[i3]; positions[i3 + 1] += this.velocities[i3 + 1]; positions[i3 + 2] += this.velocities[i3 + 2]; // 超出范围后重置——循环利用粒子 if (positions[i3 + 1] > 5) { positions[i3] = (Math.random() - 0.5) * 10; positions[i3 + 1] = -5; positions[i3 + 2] = (Math.random() - 0.5) * 10; } } this.mesh.geometry.attributes.position.needsUpdate = true; } getObject(): THREE.Points { return this.mesh; } }