home/ modules/ orient-shaders-as-pixel-functions

Orientation: the fragment shader as a per-pixel color function

L0Orientation 2h G · Shaders & GPU programming 7 atoms

Learning objectives

learner can explain that a fragment shader runs in parallel and maps each pixel coordinate to an RGB color
learner can normalize gl_FragCoord to UV space and visualize the coordinate field as a gradient
learner can locate the Book of Shaders standard-uniform conventions (u_resolution/u_mouse/u_time) as a reference anchor

Capstone — one whole task that evidences the objectives

Write your first Book-of-Shaders GLSL fragment shader that fills the canvas with a UV-as-RGB gradient driven by u_resolution, and annotate it explaining the per-pixel parallel model.

In a live-visuals rig — Hydra, a Shadertoy tab, or a GLSL layer behind your TidalCycles set — everything you will ever project starts from one idea: the fragment shader is a tiny pure function that the GPU calls once per pixel, millions of times per frame, in parallel. This module builds toward writing that first shader yourself: a canvas-filling gradient where the coordinate field itself becomes the image, annotated in your own words so the mental model sticks before any club-ready patching begins.

The arc is deliberately gentle. Start in the Book of Shaders live editor with its default template already running, and lean on two just-in-time how-tos: “Dividing gl_FragCoord by u_resolution maps pixel coordinates to the [0,1] UV range” gives you the one line that opens nearly every shader you will ever write, and “Mapping UV coordinates directly to RGB channels visualizes the coordinate space as a gradient” turns that abstract space into something you can see and debug. From there, strip the template and rebuild it blank-page for the capstone, pulling the standard-uniform conventions (u_resolution, u_mouse, u_time) from the fact atom rather than from memory.

The required atoms gate the capstone directly: you cannot write the gradient without normalization and the UV-to-RGB mapping, cannot wire it without the standard uniforms, and cannot honestly annotate the parallel model without the pixel-color-function and massively-parallel concepts. The supporting atoms enrich the picture without gating the work: the free PBR textbook is worth bookmarking as a long-term theory anchor, and triangles-as-the-only-GPU-primitive foreshadows what the GPU is actually rasterizing in the vertex-buffer world ahead — but nothing in the capstone depends on either yet.