786 字
2 分钟
[2] 初识Wgsl
2026-03-29

项目地址:https://github.com/MrTwoc/learn-wgpu-demo

根据文章内容,完成了基础阶段的最后一章代码——第九章的完整实现。

已实现的核心功能#

1. 窗口管理与渲染基础#

程序使用 winit 库创建窗口并管理事件循环。wgpu 负责 GPU 渲染,通过创建 Instance、Surface、Adapter、Device 和 Queue 等核心对象与 GPU 通信。渲染目标为支持动态调整大小的窗口表面。

2. 3D 模型加载#

使用 tobj 库加载 .obj 格式的 3D 模型。加载过程中解析顶点位置、纹理坐标和法线数据,并创建对应的顶点和索引缓冲区。模型可包含多个网格(Mesh)与材质(Material)。

3. 纹理系统#

支持加载 PNG 格式的纹理图像。纹理数据上传至 GPU 创建 Texture 对象,同时创建对应的 TextureView 用于渲染,Sampler 用于定义采样方式(线性过滤、边缘环绕等)。

4. 着色器渲染#

使用 WGSL 编写着色器。顶点着色器接收模型顶点数据和实例变换矩阵,计算裁剪空间位置并传递纹理坐标;片元着色器根据纹理坐标采样纹理颜色,实现纹理映射效果。

5. 相机系统#

实现 3D 相机功能,包含位置、朝向、视场角、近裁剪面和远裁剪面等参数。通过计算视图矩阵与投影矩阵的乘积(view_proj),完成 3D 场景到 2D 屏幕的变换。

6. 键盘控制#

支持键盘控制相机移动。W/A/S/D 键和方向键控制前后左右移动,空格键和 Shift 键控制上下移动。键盘事件通过 winit 库捕获并转换为相机位置更新。

7. 实例化渲染#

采用实例化渲染技术一次性绘制 100 个立方体(10×10 排列)。每个实例拥有独立的位置和旋转角度,通过实例缓冲区传递至顶点着色器。相比单独绘制每个物体,这种方式效率更高。

8. 深度缓冲#

实现深度缓冲(Z-buffer)功能。创建深度纹理并在渲染管线中启用深度测试,确保远处物体不会被近处物体遮挡。深度格式采用 32 位浮点数。

9. FPS 统计#

实现帧率统计功能。每秒计算一次渲染帧数,并在窗口标题栏显示当前 FPS 值,便于了解程序性能。

技术架构#

程序采用典型游戏引擎架构:资源加载(模型、纹理)→ 渲染初始化(管线、缓冲区、绑定组)→ 事件处理(键盘输入、窗口调整)→ 渲染循环(更新逻辑、绘制帧)。主程序使用 Arc 与 Mutex 实现状态共享,通过异步初始化和 pollster 库处理异步操作。

[2] 初识Wgsl
https://www.twocblog.site/posts/wgpu/初识2/
作者
Twoc-Prime
发布于
2026-03-29
许可协议
CC BY-NC-SA 4.0