在视觉极其丰富的 Web 应用中，基于 GLSL 的 Custom Shader 是提升视觉感染力的利器。然而，低效的着色器代码会导致移动设备发热、掉帧甚至引发 WebGL Context 丢失。本文梳理 Pocketmelon 团队的高性能 Shader 优化准则。

一、GPU 渲染瓶颈分类

着色器瓶颈通常分为两类：Fill-rate / Fragment Limited（片元着色器过载） 和 Geometry / Vertex Limited（顶点着色器过载）。在 Web 端的 3D 视觉场景中，>80% 的性能瓶颈集中在 Fragment Shader 复杂度过高。

二、GLSL 着色器编码优化准则

2.1 无分支编程 (Branchless Logic)

在 GPU 的 SIMD (Single Instruction, Multiple Data) 架构下，if/else 条件分支会导致线程束 (Warp/Wavefront) 发生分支分歧，被迫顺序执行两个分支。我们可以利用内置数学函数（如 step, smoothstep, mix, clamp）实现无分支运算：

// 🚫 避免这种显式分支
if (color.r > 0.5) {
  finalColor = vec3(1.0, 0.0, 0.0);
} else {
  finalColor = vec3(0.0, 0.0, 1.0);
}

// ✅ 推荐的无分支替代
float factor = step(0.5, color.r);
finalColor = mix(vec3(0.0, 0.0, 1.0), vec3(1.0, 0.0, 0.0), factor);

2.2 纹理通道打包 (Channel Packing)

减少纹理采样次数 (Texture Fetch) 是提升 Fragment Shader 速度的利器。我们将粗糙度 (Roughness)、金属度 (Metalness)、遮蔽 (AO) 与高度图打包合并入单一 RGBA 纹理的 4 个通道中，将采样次数减少 75%。

三、Raymarching 步长与 SDF 优化

在使用符号距离场 (SDF) 进行光线追踪 (Raymarching) 渲染体素或流体时，固定步长极其消耗算力。通过引入动态距离阈值 (Adaptive Distance Threshold) 与 Early Exit 步进切断，可以在保持高精度光影的同时降低 40% 的 GPU 运算消耗。