[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7174DGPKA8XFD7P7V2WR4X5":3,"skill-same:01M7174DGPKA8XFD7P7V2WR4X5":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":14,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M7174DGPKA8XFD7P7V2WR4X5","shader-programming-glsl",null,"Expert guide for writing efficient GLSL shaders (Vertex\u002FFragment) for web and game engines, covering syntax, uniforms, and common effects.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fshader-programming-glsl\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"programming","GLSL","shader programming glsl","shader","expert","2026","glsl shaders","effects","for","fragment","community","writing","guide","syntax","common","game","shaders","web","safe","2026-11-10 10:12:30",false,"---\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","# 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",{"name":5,"risk":42,"source":34,"date_added":48,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcursor\u002Fshader-programming-glsl","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill shader-programming-glsl",{"tool":61,"command":62},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill shader-programming-glsl",{"tool":64,"command":65},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill shader-programming-glsl","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fshader-programming-glsl\u002FSKILL.md",true,[],[70,91,117,127,140,159],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":79,"publishedAt":43},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[76],{"categoryNo":77,"categoryName":78,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000037","律师与法务",[80,81,82,83,84,85,86,87,41,88,89,90],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","official","fetch","with",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":43},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[98,99,100,101,102,103,82,104,105,106,107,108,109,110,111,112,113,114,115,116],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":118,"name":119,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":43},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[124,125,98,109,110,111,112,102,82,114,126,115,116,108,106,105,104,113,103,101],"trend radar","radar","pulse",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":43},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[134,135,136,137,138,139],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":151,"publishedAt":43},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[146],{"categoryNo":147,"categoryName":148,"taxonomyType":149,"taxonomyTypeDesc":150},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[142,41,152,153,154,90,109,155,156,157,100,158,113],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":165,"publishedAt":43},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[161,166,167,168,113,169,156,170,171,172,173,174],"status","play","go","latest","github","discover","control","cmd","volume"]