{"id":"ea94a5e0-59f3-4851-8049-fb5addfee217","shortId":"5LKU2D","kind":"skill","title":"shader-programming-glsl","tagline":"Expert guide for writing efficient GLSL shaders (Vertex/Fragment) for web and game engines, covering syntax, uniforms, and common effects.","description":"# 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// 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// 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/fragments (passed from CPU).\n- `varying`: Data interpolated from vertex to fragment shader.\n\n```glsl\n// Passing UV coordinates\nvarying vec2 vUv;\n\n// In Vertex Shader\nvoid main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n\n// In Fragment Shader\nvoid main() {\n    // 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) / iResolution.y;\n    vec3 ro = vec3(0.0, 0.0, -3.0); // Ray Origin\n    vec3 rd = normalize(vec3(uv, 1.0)); // Ray Direction\n    \n    float t = 0.0;\n    for(int i = 0; i < 64; i++) {\n        vec3 p = ro + rd * t;\n        float d = sdSphere(p, 1.0); // Sphere radius 1.0\n        if(d < 0.001) break;\n        t += d;\n    }\n    \n    vec3 col = vec3(0.0);\n    if(t < 10.0) {\n        vec3 p = ro + rd * t;\n        vec3 normal = normalize(p);\n        col = normal * 0.5 + 0.5; // 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.","tags":["shader","programming","glsl","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-shader-programming-glsl","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/shader-programming-glsl","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34515 github stars · SKILL.md body (3,599 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T12:51:45.515Z","embedding":null,"createdAt":"2026-04-18T21:44:47.558Z","updatedAt":"2026-04-22T12:51:45.515Z","lastSeenAt":"2026-04-22T12:51:45.515Z","tsv":"'-3.0':289 '0':306,456 '0.0':239,245,248,287,288,302,332 '0.001':325 '0.5':238,244,249,281,347,348 '1':106,254,457 '1.0':153,167,209,224,225,237,240,243,250,297,319,322,355,439 '10.0':335 '2':168 '2d':120 '3':226 '3d':117 '64':308 'access':230,390 'actual':444 'applic':450 'ask':491 'attribut':136 'avoid':378 'base':216 'basic':135,157 'best':356 'black':430 'bloom':88 'blur':87 'boundari':499 'branch':380,395 'break':326 'calcul':409,417 'check':432,440 'clarif':493 'clear':466 'col':330,345,354 'color':89,127,160,166,235,349 'color.rgb':241 'color.zyx':246 'common':22 'compil':426 'compon':232 'comprehens':29 'concept':48 'constant':174,410 'coordin':118,192,453 'correct':90,437 'cover':18 'cpu':180,421 'creat':64 'criteria':502 'custom':65 'd':316,324,328 'data':173,182,383 'describ':470 'direct':299 'edg':377 'effect':23,56,67,86 'effici':9 'els':398 'engin':17,73 'environ':482 'environment-specif':481 'exampl':252,253 'expert':5,487 'float':260,264,300,315 'fragcolor':131,164,220,274,352 'fragcoord':277,280 'fragment':110,125,155,187,211 'freeli':233 'game':16,72 'generat':94 'geometri':97 'gl':123,130,147,163,203,219,434 'glsl':4,10,26,36,132,154,189,259 'gpu':33,100,405 'gradient':215 'graphic':77 'guid':6,30,105 'heavi':394 'host':449 'hurt':404 'if-els':396 'implement':82 'individu':128 'input':496 'insid':399,412 'instead':364 'int':304 'interpol':183,363 'iresolution.xy':282 'iresolution.y':283 'key':46 'languag':39 'learn':40 'length':267 'like':49 'limit':458 'linear':362 'loop':400 'main':146,162,200,214 'mainimag':271 'manual':366 'mat4':140,143 'match':467 'math':229,367 'mathemat':47 'memori':389 'minim':388 'miss':504 'mix':360 'modelviewmatrix':141,150,206 'normal':294,342,343,346,351 'opengl':37 'oper':53 'optim':76 'origin':291 'output':476 'overview':27 'p':263,268,311,318,337,344 'pack':382 'parallel':406 'pass':178,190 'perform':79 'permiss':497 'pipelin':113 'pixel':129 'posit':124,138,148,152,204,208 'position.w':435 'possibl':402 'post':84 'post-process':83 'practic':357 'pre':416 'pre-calcul':415 'problem':424 'procedur':93 'process':85 'program':3,25 'projectionmatrix':144,149,205 'radius':321 'ray':290,298 'raymarch':256 'rd':293,313,339 'render':78 'reorder':251 'requir':495 'return':266 'review':488 'ro':285,312,338 'safeti':498 'scope':469 'screen':121,428 'sdf':257 'sdsphere':261,317 'set':446 'shade':38 'shader':2,11,24,34,115,126,134,156,188,198,212,414,425 'shader-programming-glsl':1 'simpl':255 'skill':61,461 'skill-shader-programming-glsl' 'smoothstep':372 'soft':376 'solut':431 'source-sickn33' 'space':122 'specif':483 'sphere':258,320 'step':102,104,370 'step-by-step':101 'stop':489 'structur':107 'substitut':479 'success':501 'swizzl':50,227 'syntax':19,41 'task':465 'test':485 'textur':95 'three.js':70 'threshold':374 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':116 'treat':474 'troubleshoot':423 'understand':111 'uniform':20,42,139,142,158,169,172,422,442 'use':35,59,62,74,80,91,359,369,393,459 'usual':438 'uv':191,202,218,279,296,452 'valid':484 'valu':411 'vari':43,171,181,193 'variabl':44 'vec2':194,276,278 'vec3':137,159,242,247,262,284,286,292,295,310,329,331,336,341 'vec4':151,165,207,221,234,236,273,353,386 'vector':52,228,231,385 'verifi':451 'vertex':108,114,133,185,197 'vertex/fragment':12 'vertices/fragments':177 'visual':55,66 'void':145,161,199,213,270 'vs':109 'vuv':195,201 'vuv.x':222 'vuv.y':223 'web':14 'webgl':69 'within':455 'write':8,32","prices":[{"id":"a12b74e6-7907-4d81-935d-eefb4ac5cb14","listingId":"ea94a5e0-59f3-4851-8049-fb5addfee217","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:44:47.558Z"}],"sources":[{"listingId":"ea94a5e0-59f3-4851-8049-fb5addfee217","source":"github","sourceId":"sickn33/antigravity-awesome-skills/shader-programming-glsl","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl","isPrimary":false,"firstSeenAt":"2026-04-18T21:44:47.558Z","lastSeenAt":"2026-04-22T12:51:45.515Z"}],"details":{"listingId":"ea94a5e0-59f3-4851-8049-fb5addfee217","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"shader-programming-glsl","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34515,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"aad05082bbfbbff959e5b36f161c6ef80eac8ce2","skill_md_path":"skills/shader-programming-glsl/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"shader-programming-glsl","description":"Expert guide for writing efficient GLSL shaders (Vertex/Fragment) for web and game engines, covering syntax, uniforms, and common effects."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/shader-programming-glsl"},"updatedAt":"2026-04-22T12:51:45.515Z"}}