GLSL
Shaders · 4 stages · 28 units in the full series · 28 published in English
Series goal
Understand stage inputs and mathematics in GLSL ES, and implement, diagnose, and compare visual effects in WebGL2.
Prerequisites
WebGL pipeline and vectors
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Shader Language and Data Flow
- 01. Vertex and Fragment — Editable example
- 02. Scalar and Vector Types — Editable example
- 03. Precision and Numeric Range — Editable example
- 04. Attributes and Interpolation — Editable example
- 05. Tracking Coordinate Spaces — Editable example
- 06. Looking Up and Updating Uniforms — Editable example
- 07. Debug Output and Minimal Reproductions — Editable example
Stage 2 · Coordinates, Textures, and Time
- 08. UVs and Aspect Ratio — Editable example
- 09. Step and Smoothstep Masks — Editable example
- 10. Tiling and Repeating Coordinates — Editable example
- 11. Texture Sampling — Editable example
- 12. Derivatives and Edge Smoothing — Editable example
- 13. Time and Periods — Editable example
- 14. UVs, Uniforms, and Waves — Editable example
Stage 3 · Lighting and Procedural Surfaces
- 15. 2D Distance-Field Shapes — Editable example
- 16. Building Value Noise — Editable example
- 17. Octaves and Band Limiting — Editable example
- 18. Normals and Diffuse Lighting — Editable example
- 19. Specular Lighting and View Vectors — Editable example
- 20. Normals on Deformed Surfaces — Editable example
- 21. Alpha and Compositing State — Editable example
Stage 4 · Interaction, Postprocessing, and Cost Evaluation
- 22. Framebuffers and Screen Passes — Editable example
- 23. Texel Size and Filters — Editable example
- 24. Pointer Coordinates and Input Smoothing — Editable example
- 25. The Cost of Branches and Loops — Editable example
- 26. Editing Failures and Context Recovery — Editable example
- 27. Quality Criteria and Regression Records — Editable example
- 28. Interaction and Cost — Editable example
Capstone project and deliverables
An experiment with a pointer-controlled procedural surface and postprocessing, compilation recovery, and quality and cost records
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.