阶段 5 · 进阶高级24 分钟

Web Worker 中的 WebGPU

后台计算、消息传递与主线程响应性

在动态 Worker 中请求 WebGPU、运行计算着色器并把结果发回主线程。

LEARNING GOALS

先明确本课目标

在 WorkerNavigator 上访问 gpu

通过 postMessage 传递结果

理解 Buffer 可转移与 GPU 资源不可直接跨线程共享

MENTAL MODEL · 再建立心智模型

Worker 可拥有自己的 GPUDevice；主线程负责界面，后台线程负责数据准备和 GPU 提交，通过消息传递边界协作。

MINIMAL EXAMPLE

把 WebGPU 放进 Worker 能解决什么？

Worker 中可通过 self.navigator.gpu 请求独立 Device，把数据准备、命令编码和计算调度移出主线程。Device 与 GPU 对象不能随意跨线程共享。

最小例子javascript

// worker.js
const adapter = await self.navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

self.onmessage = async ({ data }) => {
  // 创建资源、编码并提交计算
  self.postMessage({ done: true });
};

独立全局环境 Worker 使用 self，没有 window 和普通 DOM。
消息传数据 CPU ArrayBuffer 可 transfer，GPUDevice 不能直接 postMessage。
不代表 GPU 更快 收益主要是减少主线程 JS/编码负担，GPU 本身仍共享系统资源。

复杂计算准备不会阻塞页面交互，结果通过消息或可转移数据返回主线程。

本课概念

Web Worker WorkerNavigator.gpu OffscreenCanvas Structured Clone +1 个

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

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

展开⌄

并发Web Worker WebGPU在 WorkerNavigator.gpu 上创建独立 Device，把命令编码和 GPU 计算移出主线程。并发OffscreenCanvas可转移到 Worker 的画布对象，使后台线程承担渲染；支持情况需实际检测。并发Structured ClonepostMessage 使用的数据复制算法，支持多数结构化 JavaScript 数据；GPUDevice 等 GPU 对象不能借此跨线程传递。并发Threading把 JavaScript 工作分配到主线程与 Worker；各线程有独立全局环境，通过消息协作。并发WorkerNavigator.gpuWeb Worker 中访问 WebGPU 的入口；工作线程可以独立请求 Adapter 和 Device，但不能从主线程复制 GPU 对象。

LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

把粒子模拟与 OffscreenCanvas 渲染都迁移到 Worker。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

线程隔离

GPUDevice 和资源属于创建它们的执行上下文，不能像 ArrayBuffer 那样直接转移。通常传递普通数据或在 Worker 内完成整个 GPU 流程。

何时使用 Worker

复杂数据准备、着色器生成或大量命令编码可能占用主线程。Worker 能改善 UI 响应，但会引入消息同步和架构复杂度。

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

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

展开⌄

API COMPARISON

两者都可借助 Worker 与 OffscreenCanvas，但 WebGPU 还能在无 Canvas 时直接做 Compute。

WebGL

把 OffscreenCanvas 转移给 Worker，在 Worker 内创建 WebGL2 Context 并承担整条渲染。

WebGPU

Worker 可创建自己的 GPUDevice；既可绑定 OffscreenCanvas，也可只运行 Buffer Compute。

不要尝试把 GPU 对象 postMessage 回主线程；只传可结构化数据或把完整渲染所有权交给 Worker。