shader-programming-glsl
Expert guide for writing efficient GLSL shaders (Vertex/Fragment) for web and game engines, covering syntax, uniforms, and common effects.
Profile →npx skills add sickn33/agentic-awesome-skills --skill shader-programming-glsl --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Shader Programming GLSL ## Overview A 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. ## When to Use This Skill - Use when creating custom visual effects in WebGL, Three.js, or game engines. - Use when optimizing graphics rendering performance. - Use when implementing post-processing effects (blur, bloom, color correction). - Use when procedurally generating textures or geometry on the GPU. ## Step-by-Step Guide ### 1. Structure: Vertex vs. Fragment Understand the pipeline: - **Vertex Shader**: Transforms 3D coordinates to 2D screen space (`gl_Position`). - **Fragment Shader**: Colors individual pixels (`gl_FragColor`). ```glsl // Vertex Shader (basic) attribute vec3 position; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ``` ```glsl // Fragment Shader (basic) uniform vec3 color; void main() { gl_FragColor = vec4(color, 1.0); } ``` ### 2. Uniforms and Varyings - `uniform`: Data constant for all vertices/fragments (pass
- Overview
- When to Use This Skill
- Step-by-Step Guide
- 1. Structure: Vertex vs. Fragment
- 2. Uniforms and Varyings
- 3. Swizzling & Vector Math
- Examples
- Example 1: Simple Raymarching (SDF Sphere)
- Best Practices
- Troubleshooting
- Limitations
What does the shader-programming-glsl skill do?
Expert guide for writing efficient GLSL shaders (Vertex/Fragment) for web and game engines, covering syntax, uniforms, and common effects.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill shader-programming-glsl --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.