SHADERS
// Every pixel — a parallel computation in the GPU's visual nervous system
// Fragment Shader Pipeline
A fragment shader runs once for every pixel. It receives interpolated vertex attributes and outputs a final RGBA color. The entire visible universe of real-time graphics passes through this program, running millions of times per second in parallel on thousands of GPU cores.
vUV / varyings
Interpolated texture coordinates [0,1]² across the triangle surface. The primary navigation tool in fragment shader space.
texture2D / texture
Samples a texture at UV coordinates. Hardware bilinear filter, mipmap selection, and anisotropic filter all happen inside this single call.
gl_FragColor
Output vec4(r,g,b,a) in [0,1]. All the work of the shader converges to this one value written to the framebuffer.
discard
Kills the fragment entirely, making it transparent. Used for cutout materials without blending overhead.
// Shader Playground
Live WebGL preview driven by GLSL fragment logic — every parameter change propagates to the GPU immediately. This is how Shadertoy, GLSL Sandbox, and TouchDesigner's GLSL TOP work.
// MAT Systems (TouchDesigner)
In TouchDesigner, MAT operators wrap GLSL shaders in a node interface. GLSL MAT provides full vertex + fragment control. PBR MAT handles physically-based rendering. Custom GLSL MATs can sample TOP textures and read CHOP data via uniform exports.
GLSL MAT
Full programmable vertex + fragment pipeline. Uniforms set from Parameters CHOP or Python expressions. Direct GPU access.
PBR MAT
Physically Based Rendering material with Cook-Torrance BRDF, GGX distribution, and IBL support.
Phong MAT
Classic Blinn-Phong shading. Faster than PBR, good for stylized renders where physical accuracy isn't required.
Point Sprite MAT
Renders SOP points as billboard quads with custom GLSL texture — creates GPU particle systems with per-particle attributes.
// Realtime Shader Modulation
Shaders become instruments when their uniforms are driven by live data: audio amplitude, MIDI CC values, OSC messages. The uniform interface is the connection between external signal and GPU computation.
Uniform Injection
uniform float u_bass receives values set from JS or via Export in TD. Updated every frame before draw call.
Spectrum as Texture
1D FFT spectrum uploaded as texture each frame. Fragment shader reads via texture2D. Full frequency data available per pixel.
CHOP → Export
In TD: right-click any MAT parameter → Export → select CHOP channel. Drives shader uniform automatically every cook.
Delta Time Uniform
Passing u_dt enables frame-rate independent animation. Critical for consistent behavior at 30, 60, and 120fps.
// Shader Performance
At 1080p60, the GPU must shade 124 million pixels per second per pass. Profiling with NSight, RenderDoc, or Chrome DevTools WebGL reveals whether shaders are ALU-bound, texture-bound, or bandwidth-bound.
ALU Bound
Too many math operations. Bake expensive lookups into textures, use half-precision where possible, precompute constants.
Texture Bound
Too many samples or poor cache locality. Use mip-maps, power-of-two textures, avoid random-access patterns.
Bandwidth Bound
Too much memory read/write. Reduce render target count, use R11G11B10F instead of RGBA32F, enable framebuffer compression.
Warp Divergence
if/else in fragment shaders serializes warp execution. Prefer mix(a, b, step()) over conditional branching where coherence is low.
// Audiovisual Shader Synchronization
In live AV performance, shader uniforms become the score. Beat events trigger state changes. Frequency bands modulate spatial parameters. The shader receives music as data and renders visual interpretation frame by frame.
Beat Detection
Onset detection from AudioSpectrum CHOP energy derivatives. Ableton Link syncs beat grid across machines. MIDI clock for hardware.
Phase Accumulator
Accumulate phase += bpm/60 * dt. fract(phase) gives [0,1) within the current beat — drives periodic shader animations.
Envelope Shaping
Beat triggers ADSR envelope. Exponential decay: value *= exp(-dt * rate). LagFilter pattern applies directly.
Spectral Mapping
Map FFT bins to shader parameters spatially — bass drives low-frequency oscillation, treble drives high-frequency detail.