Learn WebGPU

Beginner

资源初始化

使用 wgpu 接口的第一步是创建实例: Instance, wgpu的全部实例对象. 而 Instance 的主要用途是用于创建 Adapter 和 Surface. 再由 Adapter 创建获取到 Device, Queue

Instance 的使命估计就是用于创建 Adapter 和 Surface, 后续不需要了(todo: 有待确认)

• Instance 代表了与底层图形系统的连接. 它是一个全局的句柄, 用于管理与图形 api 的交互和初始化
  • 负责创建 Surface 和 Adapter
  • 通过指定后端来选择要使用的图形 api(例如 vulkan, metal, dx12…)
  • 可以被看作是图形系统的入口点, 用于启动整个图形渲染的流程
• Adapter 代表了一个特定的物理图形设备或驱动程序的抽象, 它提供了对硬件功能和特性的访问
  • 可以查询其支持的功能和限制, 例如支持的纹理格式, 最大纹理尺寸…
  • 用于请求创建 Device, 根据特定的需求和硬件能力进行配置
  • 帮助确定系统中可用的图形硬件资源, 并为后续的图形操作提供基础
• Surface 是一个用于渲染的抽象表面, 可以是窗口, 缓冲区或其他可绘制的目标
  • 与特定的窗口或显示设备相关联, 提供了一个绘制目标
  • 可获取其支持的功能信息, 如支持的格式和呈现模式
  • 在图形渲染中, 作为最终输出的目标, 将图形数据渲染到这个表面上
• Device 是执行图形操作的核心对. 它代表了一个逻辑上的图形设备, 可以进行各种图形计算和渲染操作
  • 可以创建缓冲区, 纹理, 渲染管线等各种图形资源
  • 执行计算和渲染命令, 将图形数据提交到队列(Queue) 进行处理
  • 负责管理图形资源的生命周期和内存分配
• Queue 是一个命令队列, 用于提交图形命令进行异步处理
  • 接收来自设备(Device) 的命令, 如绘制命令, 资源上传命令…
  • 将命令提交到图形硬件进行执行, 通常以异步的方式进行处理
  • 确保命令按照正确的顺序执行, 以保证图形渲染的正确性

综上所述, 这些组件在图形渲染中相互协作, Instance 启动整个流程, Adapter 选择硬件, Surface 提供绘制目标, Device 执行操作, Queue 管理命令的提交和执行顺序

关于创建 Adapter

思路: 明确指定获取一个 Adapter or 查找一个适配的 Adapter

通过异步请求一个与给定表面兼容且不强制使用备用适配器的适配器

let adapter = instance
    .request_adapter(&wgpu::RequestAdapterOptions {
        compatible_surface: Some(&surface),
        force_fallback_adapter: false,
        ..Default::default()
    })
    .await
    .unwrap();

当前使用的部分通过枚举所有支持的后端适配器，筛选出与给定表面兼容的第一个适配器并使用它

let adapter = instance
    .enumerate_adapters(wgpu::Backends::all())
    .into_iter()
    .filter(|adapter| adapter.is_surface_supported(&surface))
    .next()
    .unwrap();

鼠标移动, 改变背景颜色渲染

fn input(&mut self, event: &WindowEvent) -> bool {
    match event {
        WindowEvent::CursorMoved { position, .. } => {
            // clear_color 类型为 wgpu::Color
            self.clear_color = wgpu::Color {
                r: position.x as f64 / self.size.width as f64,
                g: position.y as f64 / self.size.height as f64,
                b: 1.0,
                a: 1.0,
            };
            return true;
        }
        _ => false,
    }
}