WebGPU、WebGL 与 3D 图形学

先确认安全上下文、WebGPU 入口、适配器、可选特性和硬件限制，避免把环境问题误判为代码错误。

从 Adapter 请求 Device，理解 requiredFeatures、requiredLimits、device.queue 和 device.lost。

取得 webgpu 上下文，使用首选画布格式配置，并把一个清屏命令提交到当前交换纹理。

用命令编码器记录多个步骤，结束为不可变 CommandBuffer，再一次性提交给 GPU。

不使用顶点缓冲区，仅靠 vertex_index 在 WGSL 中生成三角形，走完最小渲染流程。

通过一个程序化渐变学习标量、向量、结构体、函数、属性和内建坐标。

把位置和颜色交错存储在一个 GPUBuffer 中，并用顶点缓冲区布局解释每一段字节。

用四个顶点和六个索引画矩形，对比非索引绘制的重复数据。

观察三个顶点颜色在三角形内部自动插值，并切换为 flat 插值理解阶段接口。

用 uniform 传递时间、颜色和缩放，逐帧更新同一个缓冲区而不重建资源。

把两个 uniform 资源绑定到固定槽位，理解 BindGroupLayout 与 BindGroup 的区别。

显式创建两套 BindGroupLayout，组合为 PipelineLayout，并在多个对象间复用。

生成棋盘格像素，上传到二维纹理，并在片元着色器中采样显示。

并排比较最近邻和线性过滤，并观察 repeat 与 clamp-to-edge 的区别。

手动写入多级 mip，显式采样不同 LOD，理解为什么远处纹理需要预过滤。

构建旋转立方体，用 MVP 矩阵串起模型、相机和透视投影。

为 3D 场景添加深度附件，让前方表面覆盖后方表面，而不是依赖提交顺序。

把每个实例的位置、比例和颜色放进实例缓冲区，一次 draw 绘制数百个几何体。

绘制重叠半透明形状，比较标准 alpha 混合与加法混合。

创建 4 倍多重采样颜色纹理，渲染后 resolve 到单采样 Canvas 纹理。

第一遍渲染到普通纹理，第二遍采样该纹理并施加颜色变换后显示到 Canvas。

在顶点着色器中从 storage buffer 读取位置与颜色，理解它和 vertex/uniform buffer 的差异。

把一组数字送入 GPU，每个 invocation 独立执行平方与偏移，再读回结果。

把二维调度中的全局、工作组和局部编号写入缓冲区，直观看见线程层级。

把离屏纹理复制到可映射缓冲区，处理 bytesPerRow 对齐，再从 CPU 读取像素。

计算着色器更新粒子，渲染管线读取更新后的缓冲区，一次提交完成模拟和显示。

大量 invocation 并行统计随机数据直方图，用 atomicAdd 避免多个线程覆盖同一计数。

计算着色器逐像素写入 rgba8unorm 存储纹理，再由渲染管线采样显示。

把多个对象的 uniform 块打包进一个缓冲区，绘制时用动态偏移选择当前对象。

计算着色器写入绘制参数缓冲区，随后渲染 pass 用 drawIndirect 消费，无需 CPU 读取。

为两个对象记录遮挡查询，解析到缓冲区并读回；同时检查 timestamp-query 是否可用。

故意创建不合法资源并捕获 GPUValidationError，同时读取 WGSL 编译诊断和模拟设备销毁。

复用管线、缓冲区和附件，测量命令编码开销，并用 onSubmittedWorkDone 理解提交完成点。

在动态 Worker 中请求 WebGPU、运行计算着色器并把结果发回主线程。

把本教程核心概念组合成一个可交互粒子系统：计算更新、双缓冲、实例化四边形、颜色映射和鼠标力场。

用 WebGL2 重画入门三角形，逐项对照上下文、着色器、顶点输入、渲染状态和提交模型，理解迁移时真正变化的部分。

从顶点数据进入 GPU，到光栅化、片段着色与深度测试，搭建完整实时渲染心智模型。

穿过 Three.js 抽象层，理解场景渲染、局部/世界矩阵、法线贴图和射线拾取。

汇集法线、UV、Raycaster、BatchedMesh、相机矩阵与曲线路径等高频三维问题。

以 WebGLRenderer 为控制中心，按核心对象、材质、加载器与后处理建立源码阅读顺序。

从相机坐标系、球坐标和输入状态机出发，实现旋转、平移、缩放与惯性更新。

把 glTF 解析、几何合并和可转移对象搬到 Worker，降低大模型处理对主线程的阻塞。

沿 Scene → Node → Mesh → Primitive → Accessor → BufferView → Buffer 读懂模型数据。