shader-programming-glsl
使用 GLSL 编写 GPU 着色器
创建令人惊艳的视觉效果并优化图形渲染。本指南将教授 GLSL 语法、顶点和片段着色器，以及用于实时图形的着色器数学。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“shader-programming-glsl”。 创建一个着色器，使屏幕中心产生脉冲发光效果
预期结果:
一个片段着色器，使用 smoothstep 和基于时间的 sin 函数创建径向渐变动画，从中心到边缘进行颜色插值
正在使用“shader-programming-glsl”。 如何优化这个运行 100 次迭代的着色器循环？
预期结果:
建议减少迭代次数、使用提前终止、在 CPU 上预计算常量，并用 step/mix 函数替换分支以获得更好的 GPU 性能
安全审计
安全All 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.
质量评分
你能构建什么
创建交互式视觉效果的 Web 开发者
为 Three.js 项目构建自定义着色器，包括动画背景、粒子系统和网站的后期处理效果。
实现自定义效果的游戏开发者
为 Unity 或 Unreal Engine 编写着色器，创建独特的视觉风格、地形生成和实时光照效果。
探索生成艺术的创意程序员
使用 SDF、光线步进和片段着色器技术进行程序化生成实验，用于数字艺术装置。
试试这些提示
帮我编写一个基础的 GLSL 片段着色器，基于 UV 坐标创建颜色渐变，用于 Three.js。
生成一个顶点着色器，使用时间 uniform 和 sin/cos 函数对网格应用波浪变形。
创建一个光线步进步片段着色器，包含多个 SDF 形状（球体和盒子），使用平滑并集操作组合。
编写一个 bloom 后期处理着色器，提取明亮像素，应用高斯模糊，然后合成回原始图像。
最佳实践
- 使用 mix() 进行插值，使用 step()/smoothstep() 进行阈值判断，而不是 if-else 分支
- 在 CPU 上预计算常量值并作为 uniforms 传递，而不是在着色器中计算
- 将相关数据打包到 vec4 中以最小化内存带宽并利用 GPU 向量单元
避免
- 循环中的重度条件分支会降低 GPU 并行性并导致线程分歧
- 每个片段计算静态值，而不是从 CPU 传递预计算的 uniforms
- 不必要的精度（在 mediump 足够时使用 highp）会在移动设备上浪费带宽和电量