Post

Joan León
@nucliweb.net

A Gaussian blur in Canvas 2D takes 280ms. The same filter with WebGPU: 8ms. I wrote the second article in the WebGPU series: image processing in the browser with WGSL shaders and real benchmarks. joanleon.dev/en/webgpu-im... #WebPerf #WebGPU #JavaScript #Performance

joanleon.devImage processing in the browser with WebGPU | Joan LeónHow to use WebGPU to apply filters and transformations to images in the browser. Real benchmarks comparing with Canvas 2D.
Joan León@nucliweb.net

For years, the performance ceiling in the browser has been clear: the CPU. WebGPU changes that. 🧵 It’s not a library or a framework. It’s a browser API that gives direct access to the device’s GPU, enabling a level of parallelism the CPU cannot match. #WebPerf #WebGPU

2 reposts7 likes

Joan León
@nucliweb.net

Fair point! WebGL is definitely the battle-tested veteran here. I focused on WebGPU to showcase the modern API and its compute shader capabilities, which handle memory and parallelization differently. 🧵

Alex Suzuki
@alexsuzuki.com

Who knows, if I find the time and inclination… Your blurs could be massively sped up by exploiting separability by the way (blur in one direction, then other). See: bartwronski.com/2020/02/03/s...

bartwronski.comSeparate your filters! Separability, SVD and low-rank approximation of 2D image processing filtersIn this blog post, I explore separable convolutional image filters: how can we check if a 2D filter is separable, and how to compute separable approximations to any arbitrary 2D filter represented …
GhostConvert
@ghostconvert.cc

The 280ms isn't all compute — Canvas2D getImageData/readback + a JS loop dominate. For separable kernels, WASM+SIMD in a Worker gets close without a secure context. WebGPU's real win is large non-separable filters and full pipelines.

GhostConvert
@ghostconvert.cc

8ms vs 280ms is a great benchmark. One gotcha from shipping browser image tools: WebGPU still has holes on Safari/iOS, so a Canvas2D/WebGL fallback saves a chunk of users from a blank canvas. The WGSL work pays off once baseline support lands.