Agent skill · design visual · aiskillstore
shader-programming-glsl
Expert guide for writing efficient GLSL shaders (Vertex/Fragment) for web and game engines, covering syntax, uniforms, and common effects.
Why this skill is useful
Provides domain-specific knowledge on GLSL shader programming, including optimization techniques and common effects that the AI wouldn't generate reliably on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 (glPosition). Fragment Shader: Colors individual pixels (glFragColor). 2. Uniforms and Varyings uniform: Data constant for all vertices/fragments (passed from CPU). varying: Data interpolated from vertex to fragment shader. 3. Swizzling & Vector Math Access vector components freely: 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) (reordering) Examples Example 1: Simple Raymarching (SDF Sphere) Best Practices ✅ Do: Use mix() for linear interpolation instead of manual math. ✅ Do: Use step() and smoothstep() for thresholding and soft edges (avoid if branches). ✅ Do: Pack data into vectors (vec4) to minimize memory access. ❌ Don't: Use heavy branching (if-else) inside loops if possible; it hurts GPU parallelism. ❌ Don't: Calculate constant values inside the shader; pre-calculate them on the CPU (uniforms). Troubleshooting Problem: Shader compiles but screen is black. Solution: Check if glPosition.w is correct (usually 1.0). Check if uniforms are actually being set from the host application. Verify UV coordinates are within [0, 1]. Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment-specific validation, testing, or expert review. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/shader-programming-glsl