Migration from WebGL to WebGPU
summary
Chrome 130 and recent engines already expose WebGPU so migrating means concrete API shifts not vague promises: shaders move from glsl to wgsl and can be converted with Naga (WASM in‑browser), depth clip changes from -1..1 to 0..1 so apply z fixes or adjust projection matrices, textures flip vertically so use y = 1 - y, uniforms consolidate into uniform buffers with dynamic offsets, one GPU device can drive multiple canvases, command encoding uses a queue and render/compute passes, pipeline creation is async so prefer createPipelineAsync and use render bundles to avoid jank.
AI-written summary · about
chapters (34)
- 0:00intro
- 0:22preamble
- 0:38background
- 2:41current state of webgpu
- 3:44webgpu core concepts
- 4:06gpu adapter
- 4:48gpu device
- 5:17features and limits
- 5:58gpucanvascontext
- 6:19resource types
- 7:21queue
- 7:54recording gpu commands
- 8:24passes
- 9:25high-level conceptual differences
- 10:33buffers
- 10:57shaders
- 11:27programs vs pipelines
- 13:34drawing
- 14:07uniforms
- 14:18in webgl 1.0
- 14:34in webgl 2.0
- 15:35in webgpu
- 16:37shaders
- 16:52glsl vs wgsl
- 17:13comparison of data types
- 17:36structures
- 17:53function declarations
- 18:05built-in functions
- 18:55convention differences
- 19:07texture 2d
- 19:49viewport space
- 20:07clip spaces
- 21:43webgpu tips
- 23:26resources & links
related talks
38mWebGPU: Next-generation 3D Graphics on the Web
40mThe WebGPU Revolution: Full GPU Power on the Web and Beyond
34mWhat WebGPU means for Web platform?
34mNext-Generation 3D Graphics on the Web
22mWebGL For More Than Graphics: Is It Possible?
20mEmbracing WebGPU and WebXR With Three.js
26mBuilding a 2D Game from Scratch with WebGPU
37mMoving Web applications into Virtual Reality