Shader Vocabulary

A vocabulary for shaders

This is the language I use to describe the shaders in Fragments — a glossary of terms for talking about what a shader is doing, and for pinning down what you actually want from one. It's inspired by Animation Vocabulary by Emil Kowalski.

Naming the thing you want gets you far closer than describing a vibe. "Make it swirly and glowing" leaves a lot to guesswork; "a kaleidoscopic fractal with a cosine palette and a touch of bloom" is something concrete to work from. Everything here turns up across Fragments, in the techniques, the utilities and the sketch breakdowns, so the words are worth knowing well.

Techniques

The headline methods, each with its own article. Naming one is the biggest shortcut you have — it's a whole approach captured in a couple of words.

• Geometric shapes — SDF primitives combined and blended into clean or amorphous forms.
• Domain repetition — tiling one shape infinitely by wrapping coordinates with fract/mod.
• Kaleidoscopic fractal — folding and rotating space around a center for self-similar, symmetric complexity.
• Mesh gradient — a smooth multi-color blend warped through space, weighted between color points.
• Raymarching — stepping a ray through an SDF scene to render 3D surfaces inside a flat shader.
• Volumetric raymarching — a raymarching variant that pushes through a density volume and accumulates light, for fog, gas and nebulae.
• Flow field — particles following a field of direction vectors, for swirling organic streams.
• Cellular automata — grids where cells follow neighbour rules, growing emergent patterns like Game of Life.
• Pixel sorting — reordering pixels by a property such as luminance for glitch-art streaks.
• Procedural color palettes — generating a whole color scheme from math, usually a cosine palette.

Space & coordinates

You rarely draw a shape directly. More often you bend the space first, then ask what color each point should be — so most of the work lives in these operations.

• UV — the normalized 0–1 coordinates you transform before drawing anything.
• Aspect-correct — coordinates corrected for the screen's proportions so circles stay round instead of stretching.
• Polar — addressing space by angle and radius instead of rows and columns; the natural choice for anything radial or rotational.
• Quantize — snapping a continuous value to discrete steps with floor/step, for bands, grids and stepped color.
• Fold / mirror — reflecting space back on itself to create symmetry.
• Rotate / twist — rotating coordinates, often more with distance, to produce a vortex.
• Warp — bending coordinates so straight lines curve; driven by noise, this becomes domain warping.
• Displacement — pushing positions or samples along a vector, for ripples and relief.
• smoothstep — a smooth 0→1 ramp; the workhorse for soft edges and anti-aliasing.
• mix / lerp — blending between two values or colors by a factor.
• remap — rescaling a value from one range into another.
• step / threshold — a hard cutoff that splits a value into on/off at a boundary.

Shapes & SDFs

Ways to define and combine shapes with math, so they stay crisp at any size.

• Signed distance field (SDF) — a shape described by its distance to the nearest surface, which makes it easy to blend, outline and scale.
• Smooth minimum (smin) — a soft union that fuses two SDFs like droplets; smax is the soft intersection.
• Metaball — a blobby form made by smin-blending several SDFs together.
• Silhouette — a shape read as a solid fill against the background.
• Outline vs fill — drawing just the edge of a shape, or its whole interior; with an SDF it's only a question of how you threshold the value.
• Negative space — the empty areas you carve out, which shape a composition as much as the marks you keep.

Noise & randomness

Coherent randomness — values that drift smoothly instead of jumping — sits behind almost everything that feels organic.

• Noise — a function that turns a coordinate into a smoothly-varying pseudo-random value.
• Perlin / simplex — the everyday smooth, cloudy gradient noises.
• Curl noise — a divergence-free vector field for swirling, fluid-like motion.
• Turbulence — noise built from rotating sine layers, for chaotic, weathered texture.
• Fractal Brownian motion (fbm) — stacking noise layers to build up rich, natural detail.
• Octaves — those individual layers, each finer and fainter than the last.
• Domain warping — feeding noise back into the coordinates before sampling, which turns rigid patterns organic.
• Seed — a fixed input that makes a randomized result repeatable.

Color & tone

Turning raw values into color you'd actually want to look at.

• Palette — the limited set of colors a piece draws from.
• Cosine palette — generating a harmonious palette from a handful of coefficients with a cosine function.
• Gradient — a smooth transition between colors across space.
• Posterize — collapsing a smooth gradient into a few flat bands, usually with floor.
• Tonemapping — compressing bright values into a displayable range; filmic curves like Reinhard or ACES give a graded, cinematic feel.
• Color space / gamma — getting the conversion between linear and sRGB right so colors aren't washed out or crushed.
• Banding — visible stair-steps in a gradient; a little grain usually hides it.
• Bloom — bright areas bleeding light into their surroundings.

Light & depth

A flat plane can still read as lit and three-dimensional if you fake the right cues.

• Diffuse — base shading from the angle between a surface and the light.
• Specular — the tight highlight where light reflects toward the viewer.
• Ambient — flat fill light with no direction.
• Fresnel / rim — extra brightness at grazing angles, lighting up the edges of a form.
• Volumetric — light and haze filling a 3D space, like god-rays or fog you can see through.
• Atmosphere — haze that fades distant things, suggesting depth and air.
• Parallax — nearer things moving faster than distant ones, which sells depth as the view shifts.
• Translucency — light passing partway through a surface, like wax or frosted glass.

Motion

How things move, and the energy that movement carries — almost all of it driven by time.

• Seamless loop — animation that repeats with no visible jump.
• Drift — slow, continuous movement in one direction.
• Flow — smooth, fluid, directional motion.
• Swirl / churn — turning, folding motion.
• Pulse — a repeating swell in size or brightness.
• Ripple / undulate — wave-like rolling motion across a surface.
• Oscillate — a value swinging back and forth, usually via sin.
• Turbulent — chaotic, agitated motion, often built from layered noise.
• Momentum — motion that keeps coasting after the force driving it shifts or stops.
• Easing — how motion accelerates and slows; ease-out feels natural, linear feels mechanical.

Looks & post-processing

Named treatments applied over a finished image. Ask for one of these and you'll get a recognizable style straight away — each has a utility in Fragments.

• Chromatic aberration — colored fringing at edges, like a cheap lens.
• Vignette — darkened edges that pull focus toward the center.
• Pixellation — snapping the image to chunky, low-res blocks.
• Halftone — tone built from sized dots on a rotated grid, like a comic.
• Dither — patterned dots that fake extra color depth, for a retro look.
• CRT / scanlines — faint horizontal lines and optional barrel distortion, like an old monitor.
• LED — the image rendered as a grid of glowing dots.
• ASCII — the image rebuilt out of text characters.
• Grain — fine film-like noise overlaid for a tactile feel, and to hide banding.
• Bulge / pinch — a radial push-out or suck-in around a point, like a fisheye.
• Swirl distortion — twisting pixels around a center into a spiral.
• Wave distortion — displacing pixels along a sine wave, like water.
• Glitch — torn, displaced, corrupted-looking artifacts.

Interaction

How a piece responds to whoever's looking at it.

• Pointer uniform — feeding the cursor or touch position into the shader.
• Trail — a fading path left behind the cursor as it moves.
• Ripple-on-touch — a circle expanding from a tap or click.
• Falloff — influence that weakens with distance, for a soft zone around an input.
• Decay — an effect that fades on its own once it's triggered.
• Feedback / ping-pong — reading the previous frame to compute the next, for trails and simulations.

Improving performance

There's no silver bullet — Optimization Strategies goes deeper — but these are the first levers I reach for when something's running hot, especially on mobile.

• Reduce raymarch steps — the iteration count of a march is usually the first thing to trim when a 3D shader chugs.
• Limit texture reads — every sample costs, and dependent reads (UVs computed in-shader) are the worst, since the GPU can't fetch them ahead of time.
• Drop an octave — each fbm layer is another noise evaluation; losing one or two often costs nothing you can see.
• Lower the render scale — rendering below native resolution and upscaling is the bluntest fix for a fill-bound shader.
• Cut overdraw — shading the same pixel many times through stacked layers or big passes adds up; flatten it where you can.
• Mind your precision — mediump is faster than highp, but it can band or wobble on mobile, so choose it deliberately.
• Go easy on discard — it's handy for skipping fragments, but heavy discard breaks tile compression on mobile, so a cheap output or a branch is often faster.

Principles

A few ideas the rest of it rests on.

• Everything is a function of uv and time — you're not placing objects, you're computing a color per pixel from coordinates and the clock.
• Stay in the fragment shader — Fragments leans on a single full-screen plane with all the work done per pixel; ask for that, or you'll get meshes and a camera you didn't want.
• Soften your edges — a hard cutoff aliases; reach for smoothstep and the ramp is what actually reads as crisp.
• Cheap before expensive — math and mix are nearly free, so spend them before adding texture reads, raymarch steps or octaves.