Visual LabINTERACTIVE LEARNING
阶段 1 · 起步入门15 分钟

Adapter 与 Device:建立 GPU 会话

能力请求、设备丢失与队列

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

LEARNING GOALS

先明确本课目标

1

请求必要的可选特性

2

认识 GPUQueue 的职责

3

监听 device.lost 并规划重建流程

MENTAL MODEL · 再建立心智模型

Adapter 是“菜单”,requestDevice 是“下单”;一旦设备创建,程序只能使用这次请求得到的能力。

MINIMAL EXAMPLE

为什么不能拿到 Adapter 后就直接绘制?

GPUDevice 是应用真正拥有的逻辑 GPU 会话,也是 Buffer、Texture、Pipeline 和 CommandEncoder 的工厂。可选特性必须在创建 Device 时请求,创建后不能追加。

最小例子javascript
const wanted = 'timestamp-query';
const requiredFeatures = adapter.features.has(wanted)
  ? [wanted]
  : [];

const device = await adapter.requestDevice({
  requiredFeatures,
});
  1. Adapter 是菜单 adapter.features 表示“硬件可能提供什么”。
  2. Device 是订单 requiredFeatures 表示“本次会话实际启用什么”。
  3. 只请求需要的能力 请求一个 Adapter 不支持的 feature 会让 requestDevice() 失败。

device.features 只包含本次启用的可选特性,命令最终通过 device.queue 提交。

本课概念
OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开,不打断主线实验。

展开⌄
LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

封装 createDeviceWithFallback():依次尝试高性能、低功耗和最小特性设备。

DEEP DIVE · 实验之后

回到原理,解释刚才发生了什么

先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

01

Device 是资源工厂

缓冲区、纹理、着色器模块、管线和命令编码器都由 GPUDevice 创建;命令最终通过 device.queue 提交。

02

只请求真正需要的能力

请求设备不支持的特性会直接失败。先用 adapter.features.has() 检查,再把可用特性放进 requiredFeatures。

OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。

展开⌄
API COMPARISON

WebGL 隐藏设备选择,WebGPU 把能力协商提升为正式的初始化阶段。

WebGL

浏览器在创建 Context 时隐式完成实现选择;应用主要面对参数和扩展。

WebGPU

Adapter 是能力快照,Device 是按需求创建的资源与命令边界。

迁移后的初始化代码会更长,但能力依赖因此可以被验证、记录和降级。