When I Used AI to Write an HTML Game but Was Forced to Learn WebGPU Compute Shaders

Short summary

AI generated a working Canvas 2D particle firework in seconds, but it tanked to 12 fps at 5,000 particles because Canvas 2D's per-particle draw calls are CPU-bound. The author rewrote the update logic as a WebGPU compute shader in WGSL, offloading parallel position/velocity/life calculations to the GPU. The post includes the particle struct, shader entry point, and explains how compute shaders enable massive parallelism for independent data elements.

• •AI-generated Canvas 2D code worked but hit 12 fps at 5,000 particles due to CPU-bound draw calls
• •WebGPU compute shaders offload parallel particle updates to the GPU in a single dispatch
• •Includes WGSL particle struct and shader entry point code

Generated with AI, which can make mistakes.