Building a 2D Game from Scratch with WebGPU
summary
Built a playable 2D Boulder Dash–style game from pixel sprites with three render backends: Canvas2D for a quick MVP, WebGL using two-screen-covering triangles and fragment shaders that compute per-pixel color, and a partially completed WebGPU backend wired through an interface with setup/frame/setSize. Uses 11ty, esbuild, TypeScript, vanilla web components and an ASCII level format; live engine switching works, WebGPU required manual texture recreation and indexed bindings and is stable in Chrome, behind a flag in Firefox, not in Safari. The WebGPU shader shows compute shaders and read/write storage buffers and the implementation is low-level and more explicit than WebGL.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 2:18Game design overview
- 4:31WebGPU support strategies
- 6:14Rendering architecture
- 7:17Canvas 2D approach
- 9:45WebGL basics
- 12:13WebGPU API differences
- 14:09Live demo
- 16:38Code walkthrough
- 23:26Shader syntax comparison
- 24:56Learning resources
