shader-dev
Shader Craft — GLSL 着色器技术
生成完整的、可用于生产环境的 GLSL 着色器，用于实时视觉效果——从光线步进 3D 场景到流体模拟，全部在浏览器中使用 WebGL2 运行。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“shader-dev”。 使用极坐标 UV 变换和 Voronoi 调色板创建万花筒图案
预期结果:
- 带有 WebGL2 画布的完整 HTML 页面
- 带有极坐标/对数极坐标变换的片段着色器
- 用于单元图案生成的 Voronoi/Worley 噪声函数
- 用于鲜艳色彩的余弦调色板映射
- 通过角度重复实现万花筒对称（如 8 重对称）
- 基于时间的动画旋转以实现动态视觉效果
正在使用“shader-dev”。 构建一个路径追踪全局光照场景，包含柔和阴影和颜色溢出
预期结果:
- 带有蒙特卡洛采样的完整路径追踪器
- 包含多个物体和材质的 SDF 场景定义
- 漫反射和镜面 BSDF 采样
- 俄罗斯轮盘赌路径终止
- 用于渐进式渲染的累积缓冲
- 用于收敛图像的色调映射和显示
安全审计
安全This skill consists entirely of GLSL shader reference documentation (36 markdown files in techniques/ and reference/ directories). Detected risk factors (external_commands, scripts, filesystem, network) are false positives triggered by code examples in markdown documentation. The skill contains no executable scripts, no network requests, no filesystem operations, and no external command invocations. All code samples are GLSL shader snippets for educational/reference purposes. Safe to publish.
质量评分
你能构建什么
交互式着色器艺术与演示场景
使用 GLSL 着色器在网页浏览器中实时运行，创建迷人的视觉艺术作品、演示场景作品或生成艺术装置。结合光线步进、程序化噪声和域扭曲等技术来制作独特的视觉效果。
WebGL 游戏特效与着色器
实现游戏可用的视觉效果，包括水面/海洋表面、地形渲染、火焰/火花/雪的粒子系统、后处理管线和大气光照——全部在 WebGL2 中客户端运行。
科学可视化与模拟
构建 GPU 加速的科学数据可视化：流体动力学模拟、N 体引力模拟、元胞自动机、反应扩散图案和体积云/雾渲染。
试试这些提示
创建一个独立的 HTML 页面，包含光线步进 SDF 场景，其中有多个几何物体（球体、立方体、圆环），并使用平滑最小值（smin）进行组合。添加柔和阴影、环境光遮蔽和三光源室外光照模型。包含通过鼠标控制的相机旋转。
生成一个 WebGL2 着色器来渲染程序化地形。使用带有 FBM 地形的高度场光线步进（6 个八度，带导数用于侵蚀细节）。添加双平面纹理、基于高度的大气散射（Rayleigh/Mie）以及海平面处的 Gerstner 波海洋。应用 ACES 色调映射和 2x SSAA。
使用 GLSL 中的 Navier-Stokes 求解器构建流体模拟，采用多通道乒乓帧缓冲。包括对流、扩散、压力投影（雅可比迭代）和鼠标交互（添加染料/速度）。使用调色板可视化流场。
创建火焰效果的无状态粒子系统着色器。使用程序化噪声实现湍流，使用从亮黄色到深红色的暖色调渐变，以及正确的 Alpha 混合。使用单独的粒子系统添加带有重力效果的第二层火花。
最佳实践
- 始终遵守性能预算：≤ 128 次光线步进、≤ 32 次体积采样、≤ 6 个 FBM 八度、≤ 每像素 1000 次嵌套循环迭代
- 在 GLSL 中先声明函数再使用——与 C/C++ 不同，GLSL 并非所有实现都支持前向声明
- 对需要跨帧保持状态的效果使用多通道缓冲技术（流体模拟、路径追踪、粒子系统）
- 正确适配 ShaderToy 代码：将 mainImage() 包装在 main() 中，使用 gl_FragCoord 代替 fragCoord，声明 out vec4 fragColor
- 优先使用 const 而非 #define——GLSL 宏不能使用函数调用且有诸多限制
避免
- 超出性能预算——每像素超过 1000 次迭代的循环会导致浏览器卡死
- 使用 #define 宏处理计算值——GLSL 预处理器无法在宏中求值函数调用
- 访问可能被编译器优化掉的 uniform 变量——始终确保 uniform 在片段输出中被使用
- 在另一个循环内嵌套光线步进或体积采样——这会成倍增加复杂度并超出 GPU 时间限制
常见问题
我可以直接使用 ShaderToy 着色器吗？
techniques/ 和 reference/ 目录有什么区别？
如何组合多种着色器技术？
为什么某些效果需要多通道渲染？
这些着色器能在移动设备上运行吗？
如何调试 GLSL 着色器错误？
开发者详情
文件结构
📄 SKILL.md