在双 11 狂欢夜与主会场视觉搭建中，视觉设计师往往追求强烈的赛博朋克霓虹氛围：极具未来感的几何晶格、沿着版面边缘川流不息的能量光导流光、以及与品牌主标题深度融合的弥散辉光。在以往的工程实践中，前端团队大多依赖 UI 团队切出的大尺寸高清 WebP/PNG 静态位图或几兆大小的预渲染视频。
然而，在大促的多端分发场景中，位图方案暴露出了致命缺陷：在 4K 超宽折叠屏或视网膜高清屏上，静态光晕要么由于高倍放大产生像素马赛克与颜色断层（Color Banding），要么由于体积过大占用数兆带宽，延缓了会场首屏 LCP 渲染速度。
本文将带你探索一种纯数学驱动的生成式视觉范式：利用片段着色器中的符号距离场（Signed Distance Fields, SDF）与解析光晕算法，在 GPU 硬件层实时计算任意几何字形与版面边框的无穷分辨率光晕特效。
符号距离场（SDF）数学本质与光晕能量积分
所谓符号距离场，是指在欧几里得空间中，将任意像素坐标点 $p(x, y)$ 映射为该点到目标几何体几何边界 $\partial \Omega$ 的最短带符号欧氏距离：
$$f_{sdf}(p) = \begin{cases} - d(p, \partial \Omega) & \text{若 } p \text{ 位于几何体内部} \ 0 & \text{若 } p \text{ 位于几何体轮廓边缘} \ + d(p, \partial \Omega) & \text{若 } p \text{ 位于几何体外部} \end{cases}$$
1. 常见基础 2D 几何元的解析 SDF 公式
在 GLSL / WGSL 着色器中，复杂的大促版面可以由基础的圆角矩形、折线与环形等原语通过布尔代数组合而成。
圆角矩形（Rounded Box）的精确 SDF 方程：
设矩形半宽高为 $b = (w/2, h/2)$，圆角半径为 $r$。则平面点 $p$ 到该圆角矩形的距离场函数可解析表达为：
$$d_{box}(p, b, r) = |\max(|p| - b + r, 0)| + \min(\max(|p|_x - b_x + r, |p|_y - b_y + r), 0) - r$$
二维线段（Line Segment）的 SDF 方程：
设线段端点为 $a$ 和 $b$，点 $p$ 到线段的投影距离计算为：
$$\vec{pa} = p - a, \quad \vec{ba} = b - a$$
$$h = \text{clamp}\left(\frac{\vec{pa} \cdot \vec{ba}}{\vec{ba} \cdot \vec{ba}}, 0, 1\right)$$
$$d_{seg}(p, a, b) = |\vec{pa} - \vec{ba} \cdot h|$$
2. 物理霓虹辉光的能量辐射衰减函数
在真实的氖气放电管中，光线穿透空气介质时，光强并不是随着距离线性下降的，而是遵循光学逆平方衰减或高斯扩散分布。
在着色器中，给定任意点 $p$ 到发光体的距离 $d = |f_{sdf}(p)|$：
- 硬边实体轮廓：利用
smoothstep进行抗锯齿边缘羽化：
$$\alpha_{solid} = 1.0 - \text{smoothstep}(0.0, \epsilon, d)$$ - 能量流溢辉光（Bloom Glow）：采用指数逆向衰减模型：
$$I_{glow}(d) = \frac{A}{(d \cdot k + \delta)^\gamma}$$
其中 $A$ 为辐射强度系数，$\gamma \in [1.2, 1.8]$ 控制辉光从锐利到弥散的过渡曲线，$\delta$ 为防止除零异常的极小常数。
核心实现：全屏 WebGL 赛博朋克流光着色器
下面我们编写一套生产级的 GLSL 片段着色器。该着色器在纯粹的全屏四边形（Screen-aligned Quad）上运行，通过时间变量u_time驱动沿折线流动的光子脉冲，并叠加色相旋转与色散效果：
// fragment-shader.glsl #ifdef GL_ES precision highp float; #endif uniform vec2 u_resolution; // 视口物理分辨率 (width, height) uniform float u_time; // 大促运行时间戳 (秒) uniform vec2 u_mouse; // 鼠标归一化交互坐标 // 2D 旋转矩阵 mat2 rotate2D(float angle) { float s = sin(angle); float c = cos(angle); return mat2(c, -s, s, c); } // 圆角矩形 SDF float sdRoundedBox(vec2 p, vec2 b, vec4 r) { r.xy = (p.x > 0.0) ? r.xy : r.zw; r.x = (p.y > 0.0) ? r.x : r.y; vec2 q = abs(p) - b + r.x; return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x; } // 胶囊体 SDF float sdCapsule(vec2 p, vec2 a, vec2 b, float r) { vec2 pa = p - a, ba = b - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - ba * h) - r; } // 光晕强度评估函数 float getGlow(float dist, float radius, float intensity) { return pow(radius / max(dist, 0.001), intensity); } void main() { // 归一化视口坐标系，中心点对齐到原点 (0, 0)，比例校正 vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y; // 背景深邃基底：赛博暗空渐变 vec3 bgColor = mix( vec3(0.02, 0.03, 0.06), vec3(0.06, 0.02, 0.09), length(uv) * 0.8 ); // 动态能量脉冲波变量 float pulseTime = u_time * 1.5; // 1. 中央核心促销展台外框 SDF（圆角矩形） vec2 boxSize = vec2(0.65, 0.38); vec4 boxCorners = vec4(0.08, 0.08, 0.08, 0.08); float boxDist = sdRoundedBox(uv, boxSize, boxCorners); // 提取外框轮廓（线宽 0.004） float boxOutlineDist = abs(boxDist) - 0.004; // 2. 动态光导流光条：沿外围滑动的粒子脉冲 float angle = atan(uv.y, uv.x); float runner = sin(angle * 3.0 - pulseTime * 2.0); float runnerBoost = smoothstep(0.7, 1.0, runner) * 2.5; // 3. 计算赛博朋克双色辉光（洋红 Magenta + 电子青 Cyan） vec3 cyanGlow = vec3(0.0, 0.95, 1.0); vec3 magentaGlow = vec3(1.0, 0.05, 0.65); // 基础轮廓抗锯齿 float outlineAlpha = 1.0 - smoothstep(0.0, 0.003, boxOutlineDist); // 解析光晕衰减层 float glowDist = max(boxOutlineDist, 0.0); float primaryGlow = getGlow(glowDist, 0.012, 1.4); float wideGlow = getGlow(glowDist, 0.045, 0.85); // 色散分离（RGB 物理偏移） float glowR = getGlow(max(abs(sdRoundedBox(uv + vec2(0.002, 0.0), boxSize, boxCorners)) - 0.004, 0.0), 0.015, 1.3); float glowB = getGlow(max(abs(sdRoundedBox(uv - vec2(0.002, 0.0), boxSize, boxCorners)) - 0.004, 0.0), 0.015, 1.3); // 颜色混合与色相调制 vec3 finalGlow = mix(cyanGlow, magentaGlow, 0.5 + 0.5 * sin(uv.x * 4.0 + pulseTime)); finalGlow += vec3(glowR * 0.4, 0.0, glowB * 0.4); // 叠加动态光子脉冲能量 vec3 litColor = finalGlow * (primaryGlow + wideGlow * 0.35 + runnerBoost); // 4. 背景细微微电子晶格点阵 vec2 gridUv = fract(uv * 24.0) - 0.5; float dotDist = length(gridUv) - 0.04; float dotAlpha = 1.0 - smoothstep(0.0, 0.02, dotDist); vec3 gridColor = vec3(0.0, 0.4, 0.6) * dotAlpha * 0.12; // 综合像素输出 vec3 composite = bgColor + gridColor + litColor; // 核心亮白实线高光 composite += vec3(1.0) * outlineAlpha; gl_FragColor = vec4(composite, 1.0); }浏览器端挂载驱动与性能评测
通过轻量原生 WebGL 上下文，我们只需申请一个单片网格缓冲区（Quad VBO），将全屏尺寸与高精度计时器传入uniform。整个渲染过程没有任何 CPU 几何装配开销，显存占用恒定小于 4MB：
export class CyberpunkSDFBackground { constructor(canvas) { this.canvas = canvas; this.gl = canvas.getContext("webgl", { antialias: false, powerPreference: "high-performance" }); this.program = null; this.uniforms = {}; this.startTime = performance.now(); this._setupPipeline(); this._onResize(); this.render = this.render.bind(this); requestAnimationFrame(this.render); } _setupPipeline() { const gl = this.gl; const vsSource = ` attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); } `; const vs = this._compile(gl.VERTEX_SHADER, vsSource); const fs = this._compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE); this.program = gl.createProgram(); gl.attachShader(this.program, vs); gl.attachShader(this.program, fs); gl.linkProgram(this.program); // 全屏双三角形四边形顶点数据 const quad = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]); const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW); const posLoc = gl.getAttribLocation(this.program, "a_pos"); gl.enableVertexAttribArray(posLoc); gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); this.uniforms.res = gl.getUniformLocation(this.program, "u_resolution"); this.uniforms.time = gl.getUniformLocation(this.program, "u_time"); } _compile(type, src) { const gl = this.gl; const shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); return shader; } _onResize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); this.canvas.width = this.canvas.clientWidth * dpr; this.canvas.height = this.canvas.clientHeight * dpr; this.gl.viewport(0, 0, this.canvas.width, this.canvas.height); } render(timestamp) { const gl = this.gl; gl.useProgram(this.program); const elapsed = (timestamp - this.startTime) * 0.001; gl.uniform2f(this.uniforms.res, this.canvas.width, this.canvas.height); gl.uniform1f(this.uniforms.time, elapsed); gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(this.render); } }相较于传统切图方案，SDF 纯着色器生成方案带来了划时代的升级：文件体积由原来的 2.4MB 图片直降至 6KB 着色器文本代码；无论在 8K 显示器还是折叠屏旗舰机上，光斑轮廓始终呈现出无缝矢量级锐利平滑；配合 GPU 硬件级浮点插值，在移动端满跑 60FPS 时仅占用 2% 的 CPU 负载，完美解决了双 11 主会场在极限并发下的视觉保真度与加载性能难题。
