Fundamentals & Structure
Modules, declarations, entry points, attributes, dispatch, UVs, and debugging loops.
Read chapterCompiler-backed WGSL learning
Learn WGSL by following source all the way to the GPU.
Original lessons for people writing real WebGPU shaders. Read the concept, open the module in Studio, then inspect diagnostics, reflection, invocations, memory layout, and execution without leaving the browser.
Reference path
A chapter map that grows with the Studio.
Type System
Scalars, vectors, matrices, arrays, structs, address spaces, and texture types.
Read chapterVariables & Expressions
Values, variables, expressions, operators, references, pointers, and const evaluation.
Read chapterProgram Flow & Functions
Control flow, loops, functions, assertions, and how diagnostics point back to source.
Read chapterGPU Interface & Memory
Bindings, buffer layouts, entry-point IO, host code, and data movement.
Read chapterParallelism & Correctness
Workgroups, lanes, barriers, shared memory, uniformity, and race-aware thinking.
Read chapterAtomics & Memory Synchronization
Atomic types, histogram bins, barriers, scratch memory, and layout habits.
Read chapterBuilt-in Library
Constructors, numeric helpers, textures, atomics, synchronization, subgroups, and grammar notes.
Read chapterInteractive stations
Practice loops, rebuilt around the real compiler.
Read
Longer chapters explain the mental model without dumping syntax tables. Each section gives you a module, a prediction, and a compiler surface to inspect.
original textmeasured reading
Inspect
Open the lesson module in Studio and check diagnostics, reflection JSON, binding layout, uniformity, and host code.
libwgslreflectionLSP
Run
Use WebGPU execution, compute readback, invocation tracing, and profiling to connect WGSL syntax to GPU behavior.
WebGPUtraceprofile
00 / source
Start from a tiny module.
Every lesson keeps one concrete WGSL file at the center instead of explaining syntax in the abstract.
01 / compiler
Ask the compiler what it sees.
Studio turns the same source into diagnostics, resources, entry points, layouts, and generated host code.
02 / runtime
Run the idea on your GPU.
The final check is executable: dispatch the kernel, inspect the readback, and trace one invocation.
Practice library
Extra labs are attached to the Learn path.
Syntax skeleton
Comments, numeric suffixes, identifier rules, keyword collisions, scope, structs, and a complete shader.
Type-system path
Scalars, explicit conversion, vector swizzles, matrix multiplication, arrays, struct layout, and aliases.
Visual exercises
Color, UV, time, SDF, smoothstep, noise, transforms, raymarching, compute, and workgroup memory.
Eight chapters
A compact reference path runs alongside the hands-on lessons for quick lookup.