用途：面向 Three.js 的自定义着色器开发技能，适用于内置材质无法满足的自定义材质、噪声、溶解、Fresnel、全息、水面、卡通着色、色差等视觉效果，以及程序化纹理、几何位移、光线步进与 SDF 场景。
方案选择：优先使用 TSL（Three Shader Language），自 r163 起可用于生产，自动编译到 WGSL 并支持 WebGL 回退，内置 uniform 自动推断，适合新项目与 R3F；仅在需兼容旧环境或必须手动控制 RawShaderMaterial 时使用 GLSL。
主要能力与用法：TSL 通过 three/webgpu 与 three/tsl 导入，渲染器使用 WebGPURenderer，缺失 WebGPU 时自动回退 WebGL2。GLSL 使用 ShaderMaterial，uniform 需用 useMemo 记忆化，并在 useFrame 中更新其 value 而非对象引用，避免材质重编译。后处理使用 pmndrs/postprocessing（bun add postprocessing 或 bun add @react-three/postprocessing），推荐用单个 EffectPass 合并多个效果。效果顺序有严格要求，例如 SSAO 需优先、Bloom 在色调映射之前、Vignette 与 Noise 置于最后。
调试：着色器错误通常表现为黑屏、粉色或不可见。可将中间值直接输出为颜色进行可视化排查，也借助 Spector.js、Chrome GPU profiler 和 renderer.info。
性能与限制：避免片段着色器中的动态分支，尽量用 step、mix 或 select；在顶点着色器预计算；减少纹理采样并缓存结果；必要时使用 mediump；控制 overdraw；噪声（如高倍频 FBM）开销较大，需先测量再增加倍频。移动端建议跳过 SSAO 与 DepthOfField，Bloom 不使用 mipmapBlur。技能附带 tsl-guide、glsl-patterns、postprocessing 三份参考文件，可查阅完整 API 与配方。具体价格与收费信息暂未提供。