$ show webgpu/webgpufundamentals
This is a comprehensive educational website and tutorial series for WebGPU, the next-generation graphics API. It provides over 100 interactive lessons covering fundamentals, 3D math, lighting, textures, compute shaders, post-processing, and more. The site is built as a static site with a custom build system, featuring live code editors, interactive diagrams, and multilingual support. The codebase includes reusable WebGPU utilities, a diagram framework, and helper libraries for timing, texture loading, and shader reflection. It serves as both a learning resource and a reference for WebGPU developers.
The LLM identified 5 files worth highlighting for reuse:
The diagram rendering framework used across all lessons. It provides a declarative mapping of diagram names to generator functions, enabling interactive SVG/Canvas diagrams. This pattern is reusable for any educational content that needs to generate complex visualizations from code.
A helper class for GPU timestamp queries, providing average timing and FPS display. Demonstrates non-obvious WebGPU timing API usage (GPUQuerySet, resolveQuerySet). Self-contained and can be extracted for any WebGPU project needing performance measurement.
GPU-based mipmap generation using compute shaders. A self-contained module that can be extracted for any WebGPU project needing mipmaps. Demonstrates compute shader dispatch and texture barrier usage.
Parses Adobe .cube LUT files into 3D LUT textures. Demonstrates file parsing and GPU data preparation pattern. Reusable for any project that needs to load color lookup tables.
Generates HTML tables showing memory layout of WGSL structs. Useful for debugging shader data alignment and understanding padding. Self-contained and can be used in any WebGPU project to visualize struct layouts.