shader-fundamentals
Dive into the core concepts of shader programming with this comprehensive guide to GLSL. Learn how vertex and fragment shaders work together to control rendering pipelines, explore essential techniques for lighting and color manipulation, and build the foundation needed to create custom visual effects in graphics applications.
shader-fundamentals covers how vertex and fragment shaders form the core of the graphics pipeline. Vertex shaders process each vertex individually, handling transformations and per-vertex calculations. Fragment shaders then determine the final color of each pixel. Together, they control rendering by passing data through the pipeline—vertex shaders output varyings that fragment shaders receive as interpolated values, enabling effects like smooth lighting and texture mapping across surfaces.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/shader-fundamentals · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/shader-fundamentals ~/.claude/skills/shader-fundamentalsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are vertex and fragment shaders and how do they work together?
shader-fundamentals covers how vertex and fragment shaders form the core of the graphics pipeline. Vertex shaders process each vertex individually, handling transformations and per-vertex calculations. Fragment shaders then determine the final color of each pixel. Together, they control rendering by passing data through the pipeline—vertex shaders output varyings that fragment shaders receive as interpolated values, enabling effects like smooth lighting and texture mapping across surfaces.
How do I write custom shaders in GLSL?
shader-fundamentals teaches GLSL shader fundamentals by starting with the basic structure of vertex and fragment programs. You'll learn to declare attributes (per-vertex inputs), uniforms (constant across all vertices), and varyings (data passed between stages). The guide covers essential operations like matrix transformations, vector math, and built-in functions. You'll progress from simple color output to implementing lighting models and coordinate transformations needed for real graphics applications.
What are GLSL uniforms, varyings, and attributes?
shader-fundamentals explains these three fundamental qualifier types. Attributes are per-vertex data (position, normal, texture coordinates). Uniforms remain constant for all vertices in a draw call (projection matrices, time values, light positions). Varyings pass interpolated data from vertex to fragment shaders—the GPU automatically interpolates their values across triangle surfaces. Understanding these qualifiers is essential for controlling data flow through the graphics pipeline and implementing effects like per-pixel lighting.
What are the main GLSL data types and built-in variables?
shader-fundamentals references GLSL data types including scalars (float, int, bool), vectors (vec2, vec3, vec4), and matrices (mat2, mat3, mat4). Built-in variables include gl_Position (vertex output), gl_FragColor (fragment output), gl_VertexID, and gl_FragCoord. The guide covers vector swizzling operations (accessing components like .xyz or .rgb) and matrix operations essential for transformations. These form the vocabulary for writing any shader program.
How do coordinate systems and transform matrices work in shaders?
shader-fundamentals explains shader coordinate systems including object space, world space, view space, and clip space. Transform matrices move vertices between these spaces—model matrices handle object-to-world, view matrices handle world-to-camera, and projection matrices handle camera-to-clip. The guide covers normal matrix transformations for lighting calculations and demonstrates how to apply these transformations in vertex shaders to position geometry correctly on screen.
What techniques help debug shader code and troubleshoot rendering issues?
shader-fundamentals covers shader debugging techniques including visualizing intermediate values by outputting them as colors, checking for common errors in matrix math and coordinate space conversions, and validating that data flows correctly through the pipeline. The guide addresses precision issues, performance considerations, and common shader patterns that solve typical problems. Understanding error messages and using visual debugging helps identify whether issues stem from vertex processing, fragment calculations, or data flow between stages.
SKILL.md
rendered from the published skill — quoted content, verbatim
Shader Fundamentals
GLSL (OpenGL Shading Language) runs on the GPU. Vertex shaders transform geometry; fragment shaders color pixels.
Quick Start
// Vertex Shader
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// Fragment Shader
uniform float uTime;
varying vec2 vUv;
void main() {
vec3 color = vec3(vUv, sin(uTime) * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);
}
Graphics Pipeline
Vertex Data → [Vertex Shader] → Primitives → Rasterization → [Fragment Shader] → Pixels
↑ ↑ ↑
attributes transforms per-pixel color
| Stage | Runs Per | Purpose
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/shader-fundamentals/SKILL.md
skills/shader-fundamentals/_meta.json
skills/shader-fundamentals/references/glsl-types.md