[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-316a7988-fa52-40df-bfa2-ff369c0c9d30":3,"$fcroHNIas7s0ocPCHX_kuwQX2eIBwlMPkrqkPRXH5ZaY":44},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"316a7988-fa52-40df-bfa2-ff369c0c9d30","shader-programming-glsl","高效编写Web和游戏引擎GLSL着色器（顶点\u002F片段）的专业指南，涵盖语法、uniforms和常见效果。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: shader-programming-glsl\ndescription: \"Expert guide for writing efficient GLSL shaders (Vertex\u002FFragment) for web and game engines, covering syntax, uniforms, and common effects.\"\nrisk: safe\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Shader Programming GLSL\n\n## Overview\n\nA comprehensive guide to writing GPU shaders using GLSL (OpenGL Shading Language). Learn syntax, uniforms, varying variables, and key mathematical concepts like swizzling and vector operations for visual effects.\n\n## When to Use This Skill\n\n- Use when creating custom visual effects in WebGL, Three.js, or game engines.\n- Use when optimizing graphics rendering performance.\n- Use when implementing post-processing effects (blur, bloom, color correction).\n- Use when procedurally generating textures or geometry on the GPU.\n\n## Step-by-Step Guide\n\n### 1. Structure: Vertex vs. Fragment\n\nUnderstand the pipeline:\n- **Vertex Shader**: Transforms 3D coordinates to 2D screen space (`gl_Position`).\n- **Fragment Shader**: Colors individual pixels (`gl_FragColor`).\n\n```glsl\n\u002F\u002F Vertex Shader (basic)\nattribute vec3 position;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nvoid main() {\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n```\n\n```glsl\n\u002F\u002F Fragment Shader (basic)\nuniform vec3 color;\n\nvoid main() {\n    gl_FragColor = vec4(color, 1.0);\n}\n```\n\n### 2. Uniforms and Varyings\n\n- `uniform`: Data constant for all vertices\u002Ffragments (passed from CPU).\n- `varying`: Data interpolated from vertex to fragment shader.\n\n```glsl\n\u002F\u002F Passing UV coordinates\nvarying vec2 vUv;\n\n\u002F\u002F In Vertex Shader\nvoid main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n\n\u002F\u002F In Fragment Shader\nvoid main() {\n    \u002F\u002F Gradient based on UV\n    gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0);\n}\n```\n\n### 3. Swizzling & Vector Math\n\nAccess vector components freely: `vec4 color = vec4(1.0, 0.5, 0.0, 1.0);`\n- `color.rgb` -> `vec3(1.0, 0.5, 0.0)`\n- `color.zyx` -> `vec3(0.0, 0.5, 1.0)` (reordering)\n\n## Examples\n\n### Example 1: Simple Raymarching (SDF Sphere)\n\n```glsl\nfloat sdSphere(vec3 p, float s) {\n    return length(p) - s;\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    vec2 uv = (fragCoord - 0.5 * iResolution.xy) \u002F iResolution.y;\n    vec3 ro = vec3(0.0, 0.0, -3.0); \u002F\u002F Ray Origin\n    vec3 rd = normalize(vec3(uv, 1.0)); \u002F\u002F Ray Direction\n    \n    float t = 0.0;\n    for(int i = 0; i \u003C 64; i++) {\n        vec3 p = ro + rd * t;\n        float d = sdSphere(p, 1.0); \u002F\u002F Sphere radius 1.0\n        if(d \u003C 0.001) break;\n        t += d;\n    }\n    \n    vec3 col = vec3(0.0);\n    if(t \u003C 10.0) {\n        vec3 p = ro + rd * t;\n        vec3 normal = normalize(p);\n        col = normal * 0.5 + 0.5; \u002F\u002F Color by normal\n    }\n    \n    fragColor = vec4(col, 1.0);\n}\n```\n\n## Best Practices\n\n- ✅ **Do:** Use `mix()` for linear interpolation instead of manual math.\n- ✅ **Do:** Use `step()` and `smoothstep()` for thresholding and soft edges (avoid `if` branches).\n- ✅ **Do:** Pack data into vectors (`vec4`) to minimize memory access.\n- ❌ **Don't:** Use heavy branching (`if-else`) inside loops if possible; it hurts GPU parallelism.\n- ❌ **Don't:** Calculate constant values inside the shader; pre-calculate them on the CPU (uniforms).\n\n## Troubleshooting\n\n**Problem:** Shader compiles but screen is black.\n**Solution:** Check if `gl_Position.w` is correct (usually 1.0). Check if uniforms are actually being set from the host application. Verify UV coordinates are within [0, 1].\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,209,1197,"2026-05-16 13:40:14",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":43},"2a3d68a7-d8c4-4a68-bb51-61ef28e09a3b","1.0.0","shader-programming-glsl.zip",1915,"uploads\u002Fskills\u002F316a7988-fa52-40df-bfa2-ff369c0c9d30\u002Fshader-programming-glsl.zip","43e1b5f2aee0564c5e3f14e4c14606b03cd878a65f2b1d7db6db92fd7aef678c","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3857}]","2026-05-16 13:40:15",{"code":45,"message":46,"data":47},200,"success",{"items":48,"stats":49,"page":52},[],{"averageRating":50,"totalRatings":50,"ratingCounts":51},0,[50,50,50,50,50],{"limit":53,"offset":50,"hasMore":54,"nextOffset":53,"ratedOnly":16},15,false]