Shaders for Games (GLSL)

What you'll be able to do

• Understand what a fragment shader is and why it runs once per pixel on the GPU
• Turn a pixel’s coordinates into color
• Build gradients and blend colors with mix()
• Shape values along curves with smoothstep(), pow() and sin() for eased, non-linear transitions
• Draw shapes with step() and smoothstep() and a distance field
• Draw rectangles and combine shapes with union, intersection and subtraction
• Draw any regular polygon (triangle, pentagon, hexagon) from the angle around its center
• Animate a shader over time with u_time and sin()
• Make a shader interactive with u_mouse — a glow, spotlight or cursor that follows the pointer
• Tile repeating patterns with fract(), including connected Truchet tilings, and move, scale and rotate the coordinate space
• Compute a repeatable random value from a coordinate with a hash, per pixel or per cell
• Use noise and fBm to make organic textures like clouds and terrain
• Build cellular (Voronoi) noise for cracked-cell textures like stone, scales and mud
• Color by hue with HSB for rainbows and hue-cycling
• Sample an image with texture2D and write real filters — grayscale, invert, threshold
• Combine it all with domain warping into a living effect — fire, smoke or clouds
• Write and run real GLSL — every exercise is graded by executing your code

Lessons

1. 1 What a shader actually is A tiny program the GPU runs once for every pixel, to decide its color.
2. 2 From position to color Each pixel knows where it is. Turn that position into a color.
3. 3 Gradients and mixing colors Blend between two colors with mix() — the workhorse of shaders.
4. 4 Shaping values with curves Bend a 0-to-1 value along a curve with smoothstep, pow and sin — the basis of easing.
5. 5 Drawing shapes Distance fields + step() turn math into a circle.
6. 6 Rectangles and combining shapes Draw a box with step(), then union and intersect shapes with max() and multiply.
7. 7 Any-sided shapes with angles One formula draws a triangle, pentagon or hexagon — just change the number of sides.
8. 8 Animating with time u_time + sin() makes it move — a shader runs every frame.
9. 9 Following the mouse u_mouse turns a shader into something you can touch — an input that follows the pointer.
10. 10 Repeating patterns fract() tiles the whole screen into a grid you can fill once.
11. 11 Truchet tiles — patterns that connect Give each cell a random orientation and watch a maze of flowing curves appear.
12. 12 Moving, rotating and scaling Transform the coordinate space — translate, scale, and a 2×2 rotation matrix — then draw.
13. 13 Randomness — the seed of noise Fake a repeatable random number from a coordinate with a hash, then cell-ify it.
14. 14 Noise — the organic look Random, smoothed into noise, is how you make clouds, fire and terrain.
15. 15 fBm — layering noise into detail Stack octaves of noise for the rich look of clouds, smoke and terrain.
16. 16 Cellular (Voronoi) noise Scatter points and color by the nearest one — cracked mud, scales, stone, cells.
17. 17 Color by hue (HSB) Think in hue, saturation and brightness — the easy way to pick and cycle colors.
18. 18 Sampling an image Feed a picture into a shader and read its pixels with texture2D — the door to filters.
19. 19 Image processing — real filters A filter is a function run on every pixel of an image — grayscale, invert, threshold.
20. 20 Capstone: a living fire Combine everything — noise, fBm, color and time — into one rich, animated effect.
21. Graded quiz + certificate 22 questions. Pass to earn a shareable certificate.