用途：在需要编写 GPU 片元着色器时使用，例如动画渐变、噪声/等离子/极光背景，图像转场（溶解、位移、故障、波纹、擦除），扭曲、色差、生成式图案、SDF 形状，以及对已渲染场景的后处理。片元着色器逐像素并行执行，是全屏生成式动效性能最好的方式。
主要能力：提供片元着色器骨架（归一化坐标、宽高比校正、余弦调色板生成动画渐变）；核心构件包括 smoothstep 与 mix、用 fwidth 做抗锯齿边缘、hash 与 value noise、fbm 分形噪声、SDF 形状（圆、矩形等，内部为负外部为正）、域扭曲实现流体大理石效果；图像转场包含溶解/噪声擦除、位移贴图、故障（行位移加 RGB 通道偏移）；并给出 Three.js ShaderMaterial 的 uniforms、全屏四边形、渲染循环与 resize 接线方式。
使用方式：着色器作为 uniforms 的纯函数，动画统一由 u_time 驱动，转场用 u_progress（0→1）。独立交付物为一个可直接在浏览器打开的 HTML 文件，通过 importmap 从 CDN 引入 Three.js，一个全屏四边形、一个渲染循环，无需构建步骤。提供 ?t=N 冻结帧测试钩子，固定时间渲染单帧用于截图。验证可用 npx playwright screenshot --wait-for-timeout=600 "file://$PWD/shader.html?t=2.0" frame-mid.png，在起始、中间、结束三个时刻截图检查保真度与伪影。
适用场景：全屏生成式背景、图像转场、后处理通道、SDF 图形与故障风格效果。
限制：GLSL ES 循环必须有常量边界，fbm 倍频建议不超过 5–6；热路径避免分支，优先 mix/step/smoothstep；移动端按需使用 mediump，并限制像素比；黑屏通常意味着着色器编译或解析错误，需查看控制台 GLSL 日志；WebGL 需要 GPU 上下文，无头环境由 Playwright/Chromium 提供。更多完整噪声、SDF 库与转场实现见 references/glsl-cookbook.md。