环境体检:浏览器是否真的能跑 WebGPU?
navigator.gpu、Secure Context、Adapter 特性与限制
先确认安全上下文、WebGPU 入口、适配器、可选特性和硬件限制,避免把环境问题误判为代码错误。
先明确本课目标
识别 WebGPU 的运行前提
读取 adapter.features 与 adapter.limits
理解“支持 API”不等于“支持所有特性”
navigator.gpu 像 GPU 世界的总入口;GPUAdapter 是候选硬件能力快照,GPUDevice 才是应用真正提交工作的逻辑连接。
浏览器“支持 WebGPU”到底代表什么?
navigator.gpu 只是 WebGPU 的入口;真正可用前还要取得 GPUAdapter。Adapter 是浏览器为当前机器选出的候选 GPU/后端及其能力快照,requestAdapter() 仍可能返回 null。
javascriptif (!navigator.gpu) throw new Error('WebGPU API 不存在');
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) throw new Error('没有可用的 GPU 适配器');
console.log([...adapter.features]);- 先查入口 navigator.gpu 不存在时,后续任何 WebGPU 调用都不能执行。
- 再请求 Adapter Adapter 不是可提交命令的设备,它用于查询 features/limits 并创建 Device。
- 始终处理 null 系统策略、驱动或运行环境都可能让 requestAdapter() 找不到可用实现。
成功时得到一份当前设备能力快照;失败时能明确区分“API 不存在”和“没有可用适配器”。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开,不打断主线实验。
展开⌄
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
做一个“能力评分卡”,根据特性与限制给当前设备分成基础、标准和高性能三档。
回到原理,解释刚才发生了什么
先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。
核心讲解
为什么先做体检
WebGPU 只在可信来源中暴露。localhost 通常可用于本地开发,部署时应使用 HTTPS。不同设备的特性与上限不同,程序必须先查询再决定是否启用。
能力协商
Adapter 暴露“可能得到什么”,Device 描述“这次会话实际请求了什么”。可移植程序应尽量只请求必要特性,并为缺失能力准备降级路径。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。
展开⌄
WebGL 检查“有没有上下文”,WebGPU 先协商“能得到什么设备能力”。
WebGL
创建 WebGL2RenderingContext 后,通过 getParameter 与扩展列表了解当前上下文。
WebGPU
从 navigator.gpu 请求 Adapter,先查询 features/limits,再决定如何请求 Device。
不要把 WebGL2 Context 直接类比成 GPUDevice;它还混合了画布、全局状态和命令入口。