关于 threejs-shaders
threejs-shaders 是面向 Three.js 自定义着色器开发的指导技能，帮助开发者在现有项目架构和已安装版本中实现着色效果。内容涵盖着色器编写、渲染细节、兼容性检查与验证。
主要功能
- 01识别渲染器与着色器管线
- 02规范坐标空间与法线变换
- 03稳定更新 uniforms
- 04分步构建并检查着色器
- 05处理位移、阴影与包围体
适用场景
- 01为 Three.js 项目添加自定义着色效果
- 02排查着色器编译或链接错误
- 03验证阴影、拾取及移动端精度
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/threejs-shaders确认已加载。
详细介绍
自定义着色器
使用项目已安装的版本和现有架构。这些说明是对用户任务的补充，不授权进行无关更改或外部操作。
编写着色器代码前，先确认渲染器、已安装的版本、着色器语言和材质扩展机制。在兼容的管线中使用 GLSL ShaderMaterial/RawShaderMaterial；不要假定 WebGL 着色器可以直接用于 WebGPU 材质。
明确记录每个位置、法线、光线向量和 varying 所处的坐标空间。在非均匀缩放下正确变换法线。保持 uniform 稳定，更新其值，而不是每帧重建材质。避免不必要的逐片元运算和动态着色器变体。
逐步构建效果：恒定输出、坐标、纹理采样，然后再实现效果。启用完整错误信息，检查编译和链接日志。对零向量的归一化、接近零的除法以及未定义的 smoothstep 范围进行防护。导数需要在适当的阶段使用，并确保获得支持。
置换顶点时，应更新法线或计算合适的着色结果，扩展边界以支持剔除，并考虑为阴影匹配相应的深度/距离材质。除非提供相应方案，否则 CPU 射线检测仍使用 CPU 几何体。
将 onBeforeCompile 和着色器块视为对版本敏感的内容。自定义编译变体需要不同程序时，使用合适的自定义程序缓存键，并保留可复现的着色器测试样例以供升级使用。在输出边界验证显示颜色和色调映射。
检查极端参数值、调整大小、移动设备精度、透明对象重叠、阴影和拾取。若此功能为可选功能，应保留普通材质作为回退方案。
API 参考
请查阅官方文档，了解准确的签名和特定版本的行为。如果无法访问文档，请检查已安装的类型定义和源代码，并说明任何尚未确定之处。