WebGPU 下一代3D渲染技术实战 · 课程目录

WebGPU初探：什么是WebGPU？为什么它是下一代3D渲染技术？WebGPU与WebGL的核心区别。

概念 · 对比 · 未来

开发环境搭建：浏览器支持、Chrome Canary配置、Adapter与Device获取

环境 · 配置 · 初始化

第一个三角形：彩色三角形、Pipeline、Shader、RenderPass核心概念

入门 · 管线 · 绘制

着色器基础WGSL：语法入门、数据类型、函数定义、与GLSL对比

WGSL · 着色器 · 基础

顶点缓冲区：Buffer创建与上传、顶点属性布局、VertexBufferLayout

Buffer · 布局 · 顶点

索引缓冲区：IndexBuffer使用、复用顶点数据、绘制复杂图形

索引 · 复用 · 效率

Uniform缓冲区：Uniform概念、BindGroup与BindGroupLayout、数据传递

Uniform · 绑定 · 数据

纹理与采样器：Texture创建、Sampler配置、纹理坐标映射

纹理 · 采样 · 映射

深度测试与模板测试：DepthStencilState、Z-fighting、模板缓冲

深度 · 模板 · 测试

多渲染目标：MRT技术、多个ColorAttachment、延迟渲染基础

MRT · 延迟 · 附件

计算着色器入门：Compute Shader概念、Dispatch、与渲染管线协作

Compute · 调度 · 协作

GPU粒子系统：计算着色器实现百万级粒子动画、性能优化

粒子 · 百万 · 优化

实例化绘制：Instance绘制原理、InstanceBuffer、大规模渲染

实例化 · 批量 · 性能

相机与矩阵：视图矩阵、投影矩阵（透视/正交）、LookAt实现

相机 · 矩阵 · 投影

光照模型基础：漫反射、镜面反射、环境光、Blinn-Phong实现

光照 · Blinn-Phong · 反射

PBR材质系统：基于物理渲染、金属度/粗糙度、IBL环境贴图

PBR · 金属度 · IBL

阴影映射：Shadow Map原理、PCF软阴影、Cascade Shadow Map

阴影 · PCF · CSM

后处理特效：全屏Quad绘制、Bloom泛光、色调映射

后处理 · Bloom · 色调

骨骼动画：Skinning原理、骨骼矩阵上传、顶点权重计算

骨骼 · 蒙皮 · 权重

GPU剔除与LOD：视锥剔除、遮挡剔除、LOD层级切换

剔除 · LOD · 优化

多线程与异步计算：CommandBuffer录制、多Queue提交、异步Compute

多线程 · 异步 · Queue

资源管理与内存池：Buffer Pool、Texture Pool、生命周期管理

内存池 · 资源 · 生命周期

调试与性能分析：WebGPU Debugging、GPU Timestamp Queries、瓶颈定位

调试 · 性能 · 分析

跨平台兼容：不同浏览器/设备差异、Fallback策略

兼容 · Fallback · 适配

与WebAssembly集成：Rust+Wasm+WebGPU、极致优化

Wasm · Rust · 高性能

VR/AR渲染：WebXR与WebGPU结合、立体渲染、控制器交互

VR/AR · WebXR · 交互

自定义管线状态：深度偏移、裁剪模式、光栅化状态配置

管线状态 · 深度偏移 · 裁剪

高级纹理技术：3D纹理、纹理数组、Mipmap生成与采样

3D纹理 · 数组 · Mipmap

Shader变体与宏：WGSL条件编译、Shader组合策略

变体 · 宏 · 组合

完整项目实战：构建可交互3D场景，综合运用所有知识点

实战 · 综合 · 交互