WebGPU
Graphics · 4 stages · 28 units in the full series · 28 published in English
Series goal
Understand WebGPU devices, resources, and the command model, and validate rendering and compute through correctness and overall cost.
Prerequisites
WebGL pipeline, TypedArray, and asynchronous JavaScript
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 · Device and Command Fundamentals
- 01. Adapter·Device·Pipeline — Editable example
- 02. Negotiating Features and limits — Editable example
- 03. Canvas Configuration and the Current Texture — Editable example
- 04. Recording and Submitting Commands — Editable example
- 05. Shader Modules and Diagnostics — Editable example
- 06. Vertex Buffers and Attributes — Editable example
- 07. Indices and Primitives — Editable example
Stage 2 · Render Resources and Display Configuration
- 08. Uniforms and Bind Groups — Editable example
- 09. Uniform Struct Alignment — Editable example
- 10. Matrices and Cameras — Editable example
- 11. Textures and Samplers — Editable example
- 12. Depth Attachments — Editable example
- 13. Resize and Sample Count — Editable example
- 14. Buffers and Render Passes — Editable example
Stage 3 · Compute and Data Movement
- 15. A First Compute Array Transform — Editable example
- 16. Storage and Ping-Pong — Editable example
- 17. Mapping and Staging Buffers — Editable example
- 18. Copy Alignment and Texture Rows — Editable example
- 19. Workgroup Shared Memory — Editable example
- 20. Rendering Compute Results — Editable example
- 21. Instancing and Data Structures — Editable example
Stage 4 · Recovery, Measurement, and an Integrated Project
- 22. Device Loss and Reinitialization — Editable example
- 23. Asynchronous Errors and Task Identity — Editable example
- 24. The Scope of Timing — Editable example
- 25. CPU References and Error Budgets — Editable example
- 26. Workgroup Size Experiments — Editable example
- 27. Acceptance of the Integrated Particle Experiment — Editable example
- 28. Compute and Readback — Editable example
Capstone project and deliverables
A small particle experiment with support guidance, device loss recovery, compute updates, and readback validation
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.