Shader Programming Glsl

This walks you through writing GLSL shaders for WebGL and game engines, covering the vertex/fragment pipeline, uniforms, varyings, and vector operations like swizzling. It includes a working raymarching example with signed distance functions and emphasizes GPU-friendly patterns like using smoothstep instead of branching. The best practices section is genuinely helpful, calling out common performance pitfalls like calculating constants in the shader instead of passing them as uniforms. If you're implementing custom visual effects or procedural generation and need a quick reference for GLSL syntax and optimization patterns, this covers the essentials without drowning you in theory.

skills.sh installs: 126
GitHub stars: 39.4K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill shader-programming-glsl --agent claude-code

Installs into .claude/skills of the current project.

Files

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

The basic syntax below targets GLSL ES 1.00/WebGL 1. Host engines may inject matrices/attributes; raw WebGL must bind them explicitly. GLSL ES 3.00 uses in/out and a declared fragment output instead of attribute/varying/gl_FragColor. Compile the vertex and fragment shaders separately, link them into a program, and inspect compile/link logs.

Understand the pipeline: