【研发类-游戏开发Skills】shader-programming-glsl 技能

编写高效GLSL着色器顶点/片段的专家指南适用于Web和游戏引擎涵盖语法、uniforms和常见效果。技能概述下载地址antigravity-awesome-skills/skills/shader-programming-glsl at main · sickn33/antigravity-awesome-skills · GitHubshader-programming-glsl 技能是一个全面的GPU着色器编写指南使用GLSLOpenGL着色语言。学习语法、uniforms、varying变量以及Swizzling和向量运算等关键数学概念用于创建视觉效果。主要功能顶点着色器开发教授如何将3D坐标转换为2D屏幕空间gl_Position片段着色器开发指导如何为单个像素着色gl_FragColorUniforms和Varyings深入讲解uniform和varying变量的使用Swizzling和向量运算教授向量组件的自由访问和重排序视觉效果实现提供常见视觉效果的实现方法性能优化分享着色器性能优化的最佳实践触发条件在以下情况下应该调用此技能在WebGL、Three.js或游戏引擎中创建自定义视觉效果优化图形渲染性能实现后处理效果模糊、泛光、颜色校正在GPU上程序化生成纹理或几何体核心概念1. 结构顶点 vs 片段理解渲染管线顶点着色器将3D坐标转换为2D屏幕空间gl_Position片段着色器为单个像素着色gl_FragColor顶点着色器基础// Vertex Shader (basic)attribute vec3 position;uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;void main() {gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0);}片段着色器基础// Fragment Shader (basic)uniform vec3 color;void main() {gl_FragColor vec4(color, 1.0);}2. Uniforms和Varyingsuniform对所有顶点/片段不变的数据从CPU传递varying从顶点着色器插值到片段着色器的数据传递UV坐标// Passing UV coordinatesvarying vec2 vUv;// In Vertex Shadervoid main() {vUv uv;gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0);}// In Fragment Shadervoid main() {// Gradient based on UVgl_FragColor vec4(vUv.x, vUv.y, 1.0, 1.0);}3. Swizzling和向量运算自由访问向量组件vec4 color vec4(1.0, 0.5, 0.0, 1.0);color.rgb→vec3(1.0, 0.5, 0.0)color.zyx→vec3(0.0, 0.5, 1.0)重排序使用示例示例简单光线步进SDF球体float sdSphere(vec3 p, float s) {return length(p) - s;}void mainImage(out vec4 fragColor, in vec2 fragCoord) {vec2 uv (fragCoord - 0.5 * iResolution.xy) / iResolution.y;vec3 ro vec3(0.0, 0.0, -3.0); // Ray Originvec3 rd normalize(vec3(uv, 1.0)); // Ray Directionfloat t 0.0;for(int i 0; i 64; i) {vec3 p ro rd * t;float d sdSphere(p, 1.0); // Sphere radius 1.0if(d 0.001) break;t d;}vec3 col vec3(0.0);if(t 10.0) {vec3 p ro rd * t;vec3 normal normalize(p);col normal * 0.5 0.5; // Color by normal}fragColor vec4(col, 1.0);}最佳实践✅推荐使用mix()进行线性插值而不是手动计算✅推荐使用step()和smoothstep()进行阈值处理和软边缘避免if分支✅推荐将数据打包到向量vec4中以最小化内存访问❌不推荐在循环内使用重分支if-else这会损害GPU并行性❌不推荐在着色器内计算常量值在CPU上预先计算它们uniforms故障排除问题着色器编译但屏幕是黑色的解决方案检查gl_Position.w是否正确通常为1.0检查uniforms是否实际从宿主应用程序设置验证UV坐标在[0, 1]范围内限制说明仅在任务明确匹配上述范围时使用此技能不要将输出作为环境特定验证、测试或专家审查的替代品如果缺少所需的输入、权限、安全边界或成功标准请停止并请求澄清