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

环境体检:浏览器是否真的能跑 WebGPU?

navigator.gpu、Secure Context、Adapter 特性与限制

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

LEARNING GOALS

先明确本课目标

1

识别 WebGPU 的运行前提

2

读取 adapter.features 与 adapter.limits

3

理解“支持 API”不等于“支持所有特性”

MENTAL MODEL · 再建立心智模型

navigator.gpu 像 GPU 世界的总入口;GPUAdapter 是候选硬件能力快照,GPUDevice 才是应用真正提交工作的逻辑连接。

MINIMAL EXAMPLE

浏览器“支持 WebGPU”到底代表什么?

navigator.gpu 只是 WebGPU 的入口;真正可用前还要取得 GPUAdapter。Adapter 是浏览器为当前机器选出的候选 GPU/后端及其能力快照,requestAdapter() 仍可能返回 null。

最小例子javascript
if (!navigator.gpu) throw new Error('WebGPU API 不存在');

const adapter = await navigator.gpu.requestAdapter();
if (!adapter) throw new Error('没有可用的 GPU 适配器');

console.log([...adapter.features]);
  1. 先查入口 navigator.gpu 不存在时,后续任何 WebGPU 调用都不能执行。
  2. 再请求 Adapter Adapter 不是可提交命令的设备,它用于查询 features/limits 并创建 Device。
  3. 始终处理 null 系统策略、驱动或运行环境都可能让 requestAdapter() 找不到可用实现。

成功时得到一份当前设备能力快照;失败时能明确区分“API 不存在”和“没有可用适配器”。

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

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

展开⌄
LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

做一个“能力评分卡”,根据特性与限制给当前设备分成基础、标准和高性能三档。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

01

为什么先做体检

WebGPU 只在可信来源中暴露。localhost 通常可用于本地开发,部署时应使用 HTTPS。不同设备的特性与上限不同,程序必须先查询再决定是否启用。

02

能力协商

Adapter 暴露“可能得到什么”,Device 描述“这次会话实际请求了什么”。可移植程序应尽量只请求必要特性,并为缺失能力准备降级路径。

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

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

展开⌄
API COMPARISON

WebGL 检查“有没有上下文”,WebGPU 先协商“能得到什么设备能力”。

WebGL

创建 WebGL2RenderingContext 后,通过 getParameter 与扩展列表了解当前上下文。

WebGPU

从 navigator.gpu 请求 Adapter,先查询 features/limits,再决定如何请求 Device。

不要把 WebGL2 Context 直接类比成 GPUDevice;它还混合了画布、全局状态和命令入口。