项目仓库

本教程全部内容由 AI 对话（Vibe Coding）生成，非手写代码。从 chapter01.html 到 chapter30.html、从首页到每个互动演示，一行代码都没有手动敲。生成过程依赖一份写作提示词 课程prompt.md，它是整个课程的”种子”。

2026年7月，这本面向零基础读者的 WebGPU / WGSL 图形学互动教材整理完成，全书共 30 章、约 60 万字、810 KB 内容，每章附带可运行的互动演示。

WebGPU 规范 定义了浏览器端 GPU 编程接口。本项目以 WGSL 作为全书主线着色器语言，配套 JavaScript 完成 CPU 端控制与数据准备，目标是让仅具备小学数学水平的读者理解图形学基础。

项目背景

教材所有概念以《我的世界》类比讲解：矩阵对应”旋转打包盒”，法线对应”表面朝向”，深度测试对应”画家排序难题”。数学表述降维到加减乘除与方格纸，不引入代数公式与希腊字母。全书由 AI 按统一约束逐章生成，少量人工修复记录在 第12章修复总结.md 与 坐标系修复总结.md。

核心特性

每章只引入一个核心概念，遵循渐进式教学。逐行中文代码注释覆盖所有代码块。每章配备互动演示，支持拖拽滑块实时观察着色器参数变化。每章设置一个优化主题，从缓冲复用到 Hi-Z、GPU 端剔除依次展开。每章预判 5 到 7 个常见困惑点并提前说明。每章正文、代码与演示均由 AI 按统一约束生成。

技术架构概览

页面层使用 HTML / CSS 构建容器与样式，基础绘图在第 1 章通过 Canvas 2D 完成，后续章节切换到 WebGPU 渲染管线。渲染流程在 JavaScript 中初始化 device、创建 shader module 与 render pipeline、分配 uniform buffer，并在 requestAnimationFrame 循环中提交 command encoder。

着色器层以 WGSL 为主，部分章节引入 WESL（WGSL 超集）以支持调试宏与条件编译。互动演示封装为 InteractiveDemo 类，组合参数面板、可视化调试面板与步骤控制面板；uniform 结构在 CPU 与 GPU 间传递变换矩阵、光照参数与调试模式，片元着色器按 debugMode 切换正常渲染、法线可视化、UV 可视化与深度可视化等输出。

内容覆盖体素世界引擎（Chunk 结构、实例化渲染、视锥体剔除）、计算着色器实战（康威生命游戏、门格海绵分形）、渲染优化（Early-Z、Hi-Z、LOD、Indirect Draw、纹理压缩）以及进阶主题（PBR、延迟渲染、后处理、粒子系统）。稀疏体素八叉树（SVO）由独立的 svo-builder.js 构建。

使用方法

环境要求 Chrome 113+ 或 Edge 113+，2019 年后出厂的集成或独立显卡，无需安装任何软件，无需服务器。克隆仓库后直接打开 index.html 进入课程首页导航；也可双击任意 chapterXX.html 独立运行对应章节。所有 HTML 文件均为独立、可直接运行的页面。