shader-fundamentals_skill

Overview

This skill teaches GLSL shader fundamentals for writing and debugging vertex and fragment shaders. It covers data types, qualifiers (uniforms, attributes, varyings), built-in variables, coordinate spaces, and common math and vector functions. Use it to build, optimize, and diagnose real-time GPU shading code.

How this skill works

The skill explains how vertex shaders transform per-vertex data into clip space and pass interpolated varyings to fragment shaders, which compute per-pixel color. It summarizes common GLSL types (scalars, vectors, matrices, samplers), qualifier lifetimes, built-in variables, and the full transform chain from object to screen space. Practical snippets show typical vertex/fragment structure, texture sampling, UV handling, and debugging visualizations.

When to use it

• When writing custom vertex or fragment shaders for WebGL, OpenGL, or Three.js/R3F.
• When debugging rendering issues like black screens, incorrect UVs, or missing uniforms.
• When learning how coordinate spaces and matrix transforms map geometry to screen.
• When optimizing shader math, precision, or interpolation behavior.
• When implementing texture sampling, lighting basics, or post-processing effects.

Best practices

• Always set gl_Position in the vertex shader; check for NaNs that cause black screens.
• Use uniforms for data constant per draw, attributes for per-vertex values, and varyings to pass interpolated data to fragments.
• Prefer combined modelViewMatrix and projectionMatrix transforms for efficiency.
• Declare precision in fragment shaders for WebGL1 (precision mediump float or highp where needed).
• Visualize values (UVs, normals, depth) as colors to narrow down rendering bugs quickly.

Example use cases

• Create a time-based animated material: pass uTime as a uniform and modulate color in the fragment shader.
• Implement normal mapping: transform normals with normalMatrix and sample a normal map sampler2D.
• Build a fullscreen post-process shader: render a full-quad and sample the scene texture in the fragment shader.
• Tile and aspect-correct textures: adjust UVs using resolution uniform and fract for repeating patterns.
• Debug depth or facing issues: visualize gl_FragCoord.z or gl_FrontFacing to identify culprits.