webgpu-core-workers
Installation
SKILL.md
WebGPU in Web Workers
Run the WebGPU render or compute loop inside a dedicated Web Worker and render to an OffscreenCanvas so the main thread stays free of jank. Baseline: WebGPU 1.0-stable (Chrome 113+, Safari 26+, Firefox 141+).
Quick Reference
| Step | Where | API |
|---|---|---|
1. Obtain an OffscreenCanvas from a DOM <canvas> |
Main thread | canvas.transferControlToOffscreen() |
| 2. Send the OffscreenCanvas to the worker | Main thread | worker.postMessage({ canvas }, [canvas]) |
| 3. Receive the OffscreenCanvas | Worker | event.data.canvas |
| 4. Access the GPU entry point | Worker | navigator.gpu (resolves to WorkerNavigator.gpu) |
| 5. Request adapter and device | Worker | await navigator.gpu.requestAdapter(), await adapter.requestDevice() |
| 6. Get the WebGPU context | Worker | offscreenCanvas.getContext("webgpu") returns GPUCanvasContext |
| 7. Configure and render | Worker | context.configure({ device, format }), then the render loop |
| 8. Resize | Main thread sends, worker applies | postMessage size, worker sets offscreenCanvas.width/height |
Key facts: