diff --git a/edu/.beans/edu-10m1--9-exercise-2-draw-a-coloured-triangle.md b/edu/.beans/edu-10m1--9-exercise-2-draw-a-coloured-triangle.md new file mode 100644 index 0000000..24e56b1 --- /dev/null +++ b/edu/.beans/edu-10m1--9-exercise-2-draw-a-coloured-triangle.md @@ -0,0 +1,11 @@ +--- +# edu-10m1 +title: '§9 Exercise 2: draw a coloured triangle' +status: todo +type: task +created_at: 2026-03-13T19:54:52Z +updated_at: 2026-03-13T19:54:52Z +parent: edu-4u7w +--- + +Write the exercise to draw a hard-coded coloured triangle: define three vertices in a vertex buffer, write a vertex shader that passes colour through, write a fragment shader that outputs the interpolated colour. First rendered geometry. Part 3 of the Shader Programming chapter. diff --git a/edu/.beans/edu-1nox--17-signed-distance-fields-for-font-rendering.md b/edu/.beans/edu-1nox--17-signed-distance-fields-for-font-rendering.md new file mode 100644 index 0000000..bc761ed --- /dev/null +++ b/edu/.beans/edu-1nox--17-signed-distance-fields-for-font-rendering.md @@ -0,0 +1,11 @@ +--- +# edu-1nox +title: §17 Signed Distance Fields for font rendering +status: todo +type: task +created_at: 2026-03-13T19:55:11Z +updated_at: 2026-03-13T19:55:11Z +parent: edu-4u7w +--- + +Write the conceptual section on SDFs for font rendering: what an SDF encodes, why it scales better than bitmaps, how to threshold and anti-alias in the fragment shader. Brief — reading and intuition only. Part 6 of the Shader Programming chapter. diff --git a/edu/.beans/edu-2ak3--3-what-is-wgsl-syntax-overview.md b/edu/.beans/edu-2ak3--3-what-is-wgsl-syntax-overview.md new file mode 100644 index 0000000..0d6049f --- /dev/null +++ b/edu/.beans/edu-2ak3--3-what-is-wgsl-syntax-overview.md @@ -0,0 +1,11 @@ +--- +# edu-2ak3 +title: §3 What is WGSL? Syntax overview +status: todo +type: task +created_at: 2026-03-13T19:54:41Z +updated_at: 2026-03-13T19:54:41Z +parent: edu-4u7w +--- + +Write the WGSL syntax overview: types (scalars, vectors, matrices), functions, entry points, built-in variables (@vertex, @fragment, @builtin), uniforms and bindings. Show annotated snippets of a minimal vertex+fragment shader pair. Part 1 of the Shader Programming chapter. diff --git a/edu/.beans/edu-2sqo--13-compute-pipelines-dispatching-work-groups.md b/edu/.beans/edu-2sqo--13-compute-pipelines-dispatching-work-groups.md new file mode 100644 index 0000000..1065c76 --- /dev/null +++ b/edu/.beans/edu-2sqo--13-compute-pipelines-dispatching-work-groups.md @@ -0,0 +1,11 @@ +--- +# edu-2sqo +title: '§13 Compute pipelines: dispatching work groups' +status: todo +type: task +created_at: 2026-03-13T19:55:02Z +updated_at: 2026-03-13T19:55:02Z +parent: edu-4u7w +--- + +Write the lesson on compute shaders: ComputePipeline vs RenderPipeline, dispatch_workgroups, workgroup size declarations in WGSL, global_invocation_id and how threads are indexed. Part 5 of the Shader Programming chapter. diff --git a/edu/.beans/edu-3l9h--7-vertices-buffers-and-the-vertex-shader.md b/edu/.beans/edu-3l9h--7-vertices-buffers-and-the-vertex-shader.md new file mode 100644 index 0000000..a6dc2d1 --- /dev/null +++ b/edu/.beans/edu-3l9h--7-vertices-buffers-and-the-vertex-shader.md @@ -0,0 +1,11 @@ +--- +# edu-3l9h +title: §7 Vertices, buffers, and the vertex shader +status: todo +type: task +created_at: 2026-03-13T19:54:49Z +updated_at: 2026-03-13T19:54:49Z +parent: edu-4u7w +--- + +Write the lesson on vertex data: vertex structs in Rust, VertexBufferLayout, uploading a buffer to the GPU with wgpu::util::DeviceExt, and what the vertex shader receives (position, colour, normals). Part 3 of the Shader Programming chapter. diff --git a/edu/.beans/edu-4u7w--edu-write-chapter-on-shader-programming.md b/edu/.beans/edu-4u7w--edu-write-chapter-on-shader-programming.md index 379f7de..3ef6567 100644 --- a/edu/.beans/edu-4u7w--edu-write-chapter-on-shader-programming.md +++ b/edu/.beans/edu-4u7w--edu-write-chapter-on-shader-programming.md @@ -1,11 +1,11 @@ --- # edu-4u7w title: 'edu: write chapter on shader programming' -status: todo -type: task +status: in-progress +type: feature priority: low created_at: 2026-03-10T23:30:00Z -updated_at: 2026-03-10T23:30:00Z +updated_at: 2026-03-13T19:54:32Z --- ## Background diff --git a/edu/.beans/edu-5g0l--1-cpu-vs-gpu-parallel-execution-model.md b/edu/.beans/edu-5g0l--1-cpu-vs-gpu-parallel-execution-model.md new file mode 100644 index 0000000..374a340 --- /dev/null +++ b/edu/.beans/edu-5g0l--1-cpu-vs-gpu-parallel-execution-model.md @@ -0,0 +1,11 @@ +--- +# edu-5g0l +title: '§1 CPU vs GPU: parallel execution model' +status: todo +type: task +created_at: 2026-03-13T19:54:37Z +updated_at: 2026-03-13T19:54:37Z +parent: edu-4u7w +--- + +Write the lesson on the CPU vs GPU execution model: SIMD vs SIMT, thread hierarchies (threads, warps/waves, workgroups), why GPUs excel at data-parallel work and struggle with branching. Part 1 of the Shader Programming chapter. diff --git a/edu/.beans/edu-6jjp--5-exercise-1-create-a-window-and-clear-it-to-a-col.md b/edu/.beans/edu-6jjp--5-exercise-1-create-a-window-and-clear-it-to-a-col.md new file mode 100644 index 0000000..27ff9f7 --- /dev/null +++ b/edu/.beans/edu-6jjp--5-exercise-1-create-a-window-and-clear-it-to-a-col.md @@ -0,0 +1,11 @@ +--- +# edu-6jjp +title: '§5 Exercise 1: create a window and clear it to a colour' +status: todo +type: task +created_at: 2026-03-13T19:54:44Z +updated_at: 2026-03-13T19:54:44Z +parent: edu-4u7w +--- + +Write the first hands-on exercise: create a winit window, initialise a wgpu surface, and clear it to a solid colour each frame. Walk through Instance → Adapter → Device → Surface → RenderPass with annotated Rust code. The GPU hello world. Part 2 of the Shader Programming chapter. diff --git a/edu/.beans/edu-7m8d--18-resources-learn-wgpu-shadertoy-the-book-of-shad.md b/edu/.beans/edu-7m8d--18-resources-learn-wgpu-shadertoy-the-book-of-shad.md new file mode 100644 index 0000000..ea424c5 --- /dev/null +++ b/edu/.beans/edu-7m8d--18-resources-learn-wgpu-shadertoy-the-book-of-shad.md @@ -0,0 +1,11 @@ +--- +# edu-7m8d +title: '§18 Resources: Learn WGPU, Shadertoy, The Book of Shaders' +status: todo +type: task +created_at: 2026-03-13T19:55:12Z +updated_at: 2026-03-13T19:55:12Z +parent: edu-4u7w +--- + +Write the resources and next-steps section: links and descriptions for the Learn WGPU tutorial, Shadertoy for experimentation, The Book of Shaders for mathematical foundations, and any other curated pointers. Part 6 of the Shader Programming chapter. diff --git a/edu/.beans/edu-9lda--16-post-processing-effects-bloom-blur-conceptual-o.md b/edu/.beans/edu-9lda--16-post-processing-effects-bloom-blur-conceptual-o.md new file mode 100644 index 0000000..2895092 --- /dev/null +++ b/edu/.beans/edu-9lda--16-post-processing-effects-bloom-blur-conceptual-o.md @@ -0,0 +1,11 @@ +--- +# edu-9lda +title: '§16 Post-processing effects (bloom, blur): conceptual overview' +status: todo +type: task +created_at: 2026-03-13T19:55:11Z +updated_at: 2026-03-13T19:55:11Z +parent: edu-4u7w +--- + +Write the conceptual overview of post-processing: render to texture (off-screen framebuffer), Gaussian blur as a separable two-pass compute shader, bloom as blur applied to bright regions. No full exercise — reading only. Part 6 of the Shader Programming chapter. diff --git a/edu/.beans/edu-bycd--11-texture-coordinates-uvs-texture-creation-sample.md b/edu/.beans/edu-bycd--11-texture-coordinates-uvs-texture-creation-sample.md new file mode 100644 index 0000000..3e8cafb --- /dev/null +++ b/edu/.beans/edu-bycd--11-texture-coordinates-uvs-texture-creation-sample.md @@ -0,0 +1,11 @@ +--- +# edu-bycd +title: §11 Texture coordinates (UVs), texture creation, sampler config +status: todo +type: task +created_at: 2026-03-13T19:54:56Z +updated_at: 2026-03-13T19:54:56Z +parent: edu-4u7w +--- + +Write the lesson on textures: UV coordinates, wgpu texture creation from image data, TextureView, Sampler configuration (filter modes, address modes), and bind group layout for textures. Part 4 of the Shader Programming chapter. diff --git a/edu/.beans/edu-cr0w--10-exercise-3-animate-the-triangle-using-a-time-un.md b/edu/.beans/edu-cr0w--10-exercise-3-animate-the-triangle-using-a-time-un.md new file mode 100644 index 0000000..dd31106 --- /dev/null +++ b/edu/.beans/edu-cr0w--10-exercise-3-animate-the-triangle-using-a-time-un.md @@ -0,0 +1,11 @@ +--- +# edu-cr0w +title: '§10 Exercise 3: animate the triangle using a time uniform' +status: todo +type: task +created_at: 2026-03-13T19:54:54Z +updated_at: 2026-03-13T19:54:54Z +parent: edu-4u7w +--- + +Write the exercise to animate the coloured triangle: introduce uniform buffers, upload a time value each frame, rotate or pulse the triangle in the vertex shader using the time uniform. Introduces the uniform/bind-group pattern. Part 3 of the Shader Programming chapter. diff --git a/edu/.beans/edu-exby--15-exercise-5-gpu-accelerate-a-particle-simulation.md b/edu/.beans/edu-exby--15-exercise-5-gpu-accelerate-a-particle-simulation.md new file mode 100644 index 0000000..a93e388 --- /dev/null +++ b/edu/.beans/edu-exby--15-exercise-5-gpu-accelerate-a-particle-simulation.md @@ -0,0 +1,11 @@ +--- +# edu-exby +title: '§15 Exercise 5: GPU-accelerate a particle simulation' +status: todo +type: task +created_at: 2026-03-13T19:55:05Z +updated_at: 2026-03-13T19:55:05Z +parent: edu-4u7w +--- + +Write the compute shader exercise: implement an N-body or simple gravity particle simulation. Store particle positions and velocities in storage buffers, update them in a compute shader each frame, render the result as points. Part 5 of the Shader Programming chapter. diff --git a/edu/.beans/edu-ga8p--8-interpolation-and-the-fragment-shader.md b/edu/.beans/edu-ga8p--8-interpolation-and-the-fragment-shader.md new file mode 100644 index 0000000..bcdfd0c --- /dev/null +++ b/edu/.beans/edu-ga8p--8-interpolation-and-the-fragment-shader.md @@ -0,0 +1,11 @@ +--- +# edu-ga8p +title: §8 Interpolation and the fragment shader +status: todo +type: task +created_at: 2026-03-13T19:54:50Z +updated_at: 2026-03-13T19:54:50Z +parent: edu-4u7w +--- + +Write the lesson on rasterisation and interpolation: how values output from the vertex shader are interpolated across fragments, what the fragment shader receives and outputs (colour), and how the pipeline assembles a final image. Part 3 of the Shader Programming chapter. diff --git a/edu/.beans/edu-hrfy--6-the-render-loop-swap-chains-frames-command-encod.md b/edu/.beans/edu-hrfy--6-the-render-loop-swap-chains-frames-command-encod.md new file mode 100644 index 0000000..02eccd5 --- /dev/null +++ b/edu/.beans/edu-hrfy--6-the-render-loop-swap-chains-frames-command-encod.md @@ -0,0 +1,11 @@ +--- +# edu-hrfy +title: '§6 The render loop: swap chains, frames, command encoders' +status: todo +type: task +created_at: 2026-03-13T19:54:44Z +updated_at: 2026-03-13T19:54:44Z +parent: edu-4u7w +--- + +Write the lesson on the wgpu render loop: SurfaceTexture acquisition, CommandEncoder, RenderPass, queue submission, present. Explain double/triple buffering conceptually. Part 2 of the Shader Programming chapter. diff --git a/edu/.beans/edu-j35d--4-what-is-wgpu-cross-platform-graphics-api-in-rust.md b/edu/.beans/edu-j35d--4-what-is-wgpu-cross-platform-graphics-api-in-rust.md new file mode 100644 index 0000000..495cf93 --- /dev/null +++ b/edu/.beans/edu-j35d--4-what-is-wgpu-cross-platform-graphics-api-in-rust.md @@ -0,0 +1,11 @@ +--- +# edu-j35d +title: §4 What is wgpu? Cross-platform graphics API in Rust +status: todo +type: task +created_at: 2026-03-13T19:54:43Z +updated_at: 2026-03-13T19:54:43Z +parent: edu-4u7w +--- + +Write the wgpu introduction: what it is, how it maps to WebGPU/Vulkan/Metal/D3D12, the key types (Instance, Adapter, Device, Queue, Surface), and how it differs from OpenGL. Part 2 of the Shader Programming chapter. diff --git a/edu/.beans/edu-r52d--2-the-programmable-pipeline-vertex-fragment-comput.md b/edu/.beans/edu-r52d--2-the-programmable-pipeline-vertex-fragment-comput.md new file mode 100644 index 0000000..5b9dcb4 --- /dev/null +++ b/edu/.beans/edu-r52d--2-the-programmable-pipeline-vertex-fragment-comput.md @@ -0,0 +1,11 @@ +--- +# edu-r52d +title: '§2 The programmable pipeline: vertex, fragment, compute shaders' +status: todo +type: task +created_at: 2026-03-13T19:54:39Z +updated_at: 2026-03-13T19:54:39Z +parent: edu-4u7w +--- + +Write the lesson on the programmable graphics pipeline: what happens at each stage, which stages are programmable, what vertex and fragment shaders each receive and output, and where compute shaders fit. Part 1 of the Shader Programming chapter. diff --git a/edu/.beans/edu-uxa1--14-storage-buffers-and-readwrite-access-from-wgsl.md b/edu/.beans/edu-uxa1--14-storage-buffers-and-readwrite-access-from-wgsl.md new file mode 100644 index 0000000..83edd5e --- /dev/null +++ b/edu/.beans/edu-uxa1--14-storage-buffers-and-readwrite-access-from-wgsl.md @@ -0,0 +1,11 @@ +--- +# edu-uxa1 +title: §14 Storage buffers and read/write access from WGSL +status: todo +type: task +created_at: 2026-03-13T19:55:04Z +updated_at: 2026-03-13T19:55:04Z +parent: edu-4u7w +--- + +Write the lesson on storage buffers: var in WGSL, creating STORAGE | COPY_SRC buffers in Rust, reading results back to CPU, and the difference between uniform and storage buffers. Part 5 of the Shader Programming chapter. diff --git a/edu/.beans/edu-xv9j--12-exercise-4-render-a-textured-quad.md b/edu/.beans/edu-xv9j--12-exercise-4-render-a-textured-quad.md new file mode 100644 index 0000000..f0c5ed5 --- /dev/null +++ b/edu/.beans/edu-xv9j--12-exercise-4-render-a-textured-quad.md @@ -0,0 +1,11 @@ +--- +# edu-xv9j +title: '§12 Exercise 4: render a textured quad' +status: todo +type: task +created_at: 2026-03-13T19:54:58Z +updated_at: 2026-03-13T19:54:58Z +parent: edu-4u7w +--- + +Write the exercise to render a textured quad: two triangles forming a rectangle, UV coordinates per vertex, load an image with the image crate, upload to a wgpu texture, sample it in the fragment shader. Part 4 of the Shader Programming chapter. diff --git a/edu/src/SUMMARY.md b/edu/src/SUMMARY.md index d6b49f2..a7b121a 100644 --- a/edu/src/SUMMARY.md +++ b/edu/src/SUMMARY.md @@ -17,3 +17,7 @@ # Compilers - [Writing a Lisp-to-C Compiler in Rust](lisp-compiler.md) + +# Graphics + +- [Shader Programming with wgpu and WGSL](shaders.md) diff --git a/edu/src/shaders.md b/edu/src/shaders.md new file mode 100644 index 0000000..52dadca --- /dev/null +++ b/edu/src/shaders.md @@ -0,0 +1,163 @@ +# Shader Programming with wgpu and WGSL + +This document is a self-guided course on GPU shader programming. It is organised into six parts: the GPU execution model, setting up with `wgpu`, vertex and fragment shaders, textures and samplers, compute shaders, and a look at where to go next. Each section is either a reading lesson or a hands-on Rust programming exercise. Sections marked 🚧 are stubs whose full content is tracked in a beans ticket — follow the ticket ID to find the detailed learning objectives and instructions. + +--- + +## Table of Contents + +**Part 1 — The GPU and the Graphics Pipeline** + +1. [CPU vs GPU: parallel execution model](#1-cpu-vs-gpu-parallel-execution-model) +2. [The programmable pipeline: vertex, fragment, compute shaders](#2-the-programmable-pipeline-vertex-fragment-compute-shaders) +3. [What is WGSL? Syntax overview](#3-what-is-wgsl-syntax-overview) + +**Part 2 — Setting Up with wgpu** + +4. [What is wgpu? Cross-platform graphics API in Rust](#4-what-is-wgpu-cross-platform-graphics-api-in-rust) +5. [Exercise 1: create a window and clear it to a colour](#5-exercise-1-create-a-window-and-clear-it-to-a-colour) +6. [The render loop: swap chains, frames, command encoders](#6-the-render-loop-swap-chains-frames-command-encoders) + +**Part 3 — Vertex and Fragment Shaders** + +7. [Vertices, buffers, and the vertex shader](#7-vertices-buffers-and-the-vertex-shader) +8. [Interpolation and the fragment shader](#8-interpolation-and-the-fragment-shader) +9. [Exercise 2: draw a coloured triangle](#9-exercise-2-draw-a-coloured-triangle) +10. [Exercise 3: animate the triangle using a time uniform](#10-exercise-3-animate-the-triangle-using-a-time-uniform) + +**Part 4 — Textures and Samplers** + +11. [Texture coordinates (UVs), texture creation, sampler config](#11-texture-coordinates-uvs-texture-creation-sampler-config) +12. [Exercise 4: render a textured quad](#12-exercise-4-render-a-textured-quad) + +**Part 5 — Compute Shaders** + +13. [Compute pipelines: dispatching work groups](#13-compute-pipelines-dispatching-work-groups) +14. [Storage buffers and read/write access from WGSL](#14-storage-buffers-and-readwrite-access-from-wgsl) +15. [Exercise 5: GPU-accelerate a particle simulation](#15-exercise-5-gpu-accelerate-a-particle-simulation) + +**Part 6 — Going Further** + +16. [Post-processing effects (bloom, blur): conceptual overview](#16-post-processing-effects-bloom-blur-conceptual-overview) +17. [Signed Distance Fields for font rendering](#17-signed-distance-fields-for-font-rendering) +18. [Resources: Learn WGPU, Shadertoy, The Book of Shaders](#18-resources-learn-wgpu-shadertoy-the-book-of-shaders) + +--- + +## Part 1 — The GPU and the Graphics Pipeline + +### 1. CPU vs GPU: parallel execution model + +🚧 This section is a stub. Full content tracked in [edu-5g0l]. + +--- + +### 2. The programmable pipeline: vertex, fragment, compute shaders + +🚧 This section is a stub. Full content tracked in [edu-r52d]. + +--- + +### 3. What is WGSL? Syntax overview + +🚧 This section is a stub. Full content tracked in [edu-2ak3]. + +--- + +## Part 2 — Setting Up with wgpu + +### 4. What is wgpu? Cross-platform graphics API in Rust + +🚧 This section is a stub. Full content tracked in [edu-j35d]. + +--- + +### 5. Exercise 1: create a window and clear it to a colour + +🚧 This section is a stub. Full content tracked in [edu-6jjp]. + +--- + +### 6. The render loop: swap chains, frames, command encoders + +🚧 This section is a stub. Full content tracked in [edu-hrfy]. + +--- + +## Part 3 — Vertex and Fragment Shaders + +### 7. Vertices, buffers, and the vertex shader + +🚧 This section is a stub. Full content tracked in [edu-3l9h]. + +--- + +### 8. Interpolation and the fragment shader + +🚧 This section is a stub. Full content tracked in [edu-ga8p]. + +--- + +### 9. Exercise 2: draw a coloured triangle + +🚧 This section is a stub. Full content tracked in [edu-10m1]. + +--- + +### 10. Exercise 3: animate the triangle using a time uniform + +🚧 This section is a stub. Full content tracked in [edu-cr0w]. + +--- + +## Part 4 — Textures and Samplers + +### 11. Texture coordinates (UVs), texture creation, sampler config + +🚧 This section is a stub. Full content tracked in [edu-bycd]. + +--- + +### 12. Exercise 4: render a textured quad + +🚧 This section is a stub. Full content tracked in [edu-xv9j]. + +--- + +## Part 5 — Compute Shaders + +### 13. Compute pipelines: dispatching work groups + +🚧 This section is a stub. Full content tracked in [edu-2sqo]. + +--- + +### 14. Storage buffers and read/write access from WGSL + +🚧 This section is a stub. Full content tracked in [edu-uxa1]. + +--- + +### 15. Exercise 5: GPU-accelerate a particle simulation + +🚧 This section is a stub. Full content tracked in [edu-exby]. + +--- + +## Part 6 — Going Further + +### 16. Post-processing effects (bloom, blur): conceptual overview + +🚧 This section is a stub. Full content tracked in [edu-9lda]. + +--- + +### 17. Signed Distance Fields for font rendering + +🚧 This section is a stub. Full content tracked in [edu-1nox]. + +--- + +### 18. Resources: Learn WGPU, Shadertoy, The Book of Shaders + +🚧 This section is a stub. Full content tracked in [edu-7m8d].