WebGPU is the hot topic right now. A brand-new web API that will most likely replace WebGL sooner rather than later (I won't miss you, bro 👋).
It’...
For further actions, you may consider blocking this person and/or reporting abuse
Getting anything done in WebGL means you have to write ungodly amounts of boilerplate--even compared to WebGL, which wasn't exactly light in this respect. Fortunately, nowadays LLMs can do a lot of it for you. Try this one.
Looks fantastic!!! 🔥🔥🔥
This demo is 🔥, Sylwia! WebGPU + React makes it so approachable, and the glowing trails effect is mesmerizing. Your explanation of WGSL and compute shaders really demystifies what feels like a “next-gen web” API—definitely excited to try this in my own projects! 🚀
Thank you so much! 😄🔥
Good luck with your project — and please do share what you build, I’d love to see it! 🚀
It works on mobile! Really well actually, I just stared at the swirlies for 10 minutes while waiting for my croque monsieur 😅 I'm kinda sad I can't think of any project right now where I could utilize webgpu... I like that you put in the extra effort to figure out how to work with it in React + typescript 👍
I actually had to look up what a croque monsieur is - and now I made myself hungry 😄
Really glad it works well on your phone! Though yeah, unfortunately WebGPU still isn’t supported everywhere yet 🙂
Fantastic! I’d been waiting for this article, and it was absolutely worth it. I finally understand the value of WebGPU (even if, for my personal use cases, it’s still fairly limited). I played with the demo — it’s brilliant. Tweaking the settings and seeing everything update live is genuinely enjoyable.
Thank you so much, Pascal! I’m really glad the article and the demo helped clarify the value of WebGPU 😊
And yes — I totally agree. In day-to-day dev work the use cases can feel pretty limited… until they suddenly aren’t. I’ve had more than a few moments where a “simple” feature turned into something that really needed serious performance, and then having tools like this starts to matter a lot 😄
Absolutely — same here. And to be honest, given the kind of projects I’m working on, I don’t expect to need WebGPU anytime soon. But I was curious to see what it felt like in practice: the possibilities, the rendering, the kind of problems it can unlock down the road.
And your demo was perfect for that — it gave me a clear sense of where this tech could matter later, even if today my use cases stay pretty modest. Still, it’s great to see what’s coming. 😊
That was exactly my goal with the demo: not to push WebGPU as something everyone needs now, but to give a tangible feel for what it unlocks when the time comes. Even if today the use cases are modest, it’s exciting to see what’s ahead. 🚀
Great article Sylwia as usual
Thanks, Ben 😊 Always nice to see you here!
You are welcome! Yes, indeed:)
I am here or LinkedIn:)
Thanks for the article, it’s exciting to see how this API could push web graphics forward. From my own experience, the challenge is that in real projects we often can’t fully use these advanced features. For example, even when working with WebGL maps, we still usually have to provide a Canvas fallback because not all users support it. Hopefully WebGPU adoption speeds up over time :)
Thanks for the comment! Yes, that’s exactly how it looks in larger, commercial projects. Fallbacks are often unavoidable, and I think this will remain the case for a while. WebGPU without a fallback will probably make sense first in environments where you can enforce modern browsers.
That said, WebGPU feels much more flexible than WebGL, so I’m cautiously optimistic that adoption - and real-world usability - will improve over time 🙂
We loved your post so we shared it on social.
Keep up the great work!
I'm having too much fun with the demo
Haha, then the demo is doing exactly what it’s supposed to do 😄
I really appreciate the distinction you made between WebGL’s 'hacks' and WebGPU’s explicit design. We’re essentially trading the comfort of high-level abstractions for the predictability of modern GPU architectures like Vulkan or Metal. It’s a significant shift in the mental model for web devs, but moving away from that 'magical global state' is a necessary step for building truly resilient, high-performance browser tools
Thank you — that’s a great way to put it.
That shift in mental model is probably the hardest part, but also the most valuable one. Losing the “magical” global state can feel uncomfortable at first, yet it gives you predictability and control that simply weren’t possible with WebGL. For long-lived, performance-critical tools in the browser, that trade-off really starts to make sense.
I think the killer feature will be when secondary (non-JS) languages get more streamlined access to the WebGPU runtime--WASM in particular. I could see a batched command buffer approach helping with some sort of minimal shim but I'd rather do away with the need altogether!
Oh... and this was the killer anti-feature that made me finally drop Firefox (will miss you!). Can't believe how long this API was in experimental/beta.
Yesss, totally agree 😄 Thanks for the comment - I’m 100% on the same page.
If WASM ever gets cleaner access to WebGPU or somehow to the DOM/browser APIs, we’re basically set. And yeah… the Firefox wait really hurt 🥲
Hi Sylwia,
This is awesome, thanks for your post. I just could go thru the live demo but will check the code asap.
Hi! I’m really glad you liked it - thanks a lot 😊
Hope you’ll enjoy digging into the code as well!
When ThreeJS uses that then yes I go for it!
threejs.org/docs/#WebGPU
Yep - they already do 😄
Three.js has experimental WebGPU support now, so it’s definitely happening 🚀
Excited for your next POST, once stable :)
Yesss 😄 absolutely - I’ll definitely be writing more posts on this topic! 🚀
just wow.
Awww thanks!!! 😊
I have been working on this side of tech for past year,i m creating a game engine(multi threaded simulation runtime more accurately) since i dont know if anyone nothiced or not but browsers have been growing quite powerful with advent of webgpu,opfs can actually have a workable foundation for metaverse and start where zuck failed
Haha, totally 😄 I feel the same. Once you combine WebGPU with OPFS, workers, and a bit of WASM where it really matters, the browser starts to look like a seriously powerful runtime.
We’re not “there” yet for every use case, but the direction is honestly exciting.
Love this write-up. You explain why WebGPU matters without the usual hype, and the WebGL comparison really hits home for anyone who’s fought GPU hacks before. The demo is a great example of using the GPU for something genuinely expressive, not just “better graphics.” Also appreciate the honest notes about React Strict Mode and TS gotchas, super helpful for anyone trying this for real.
Thank you - I really appreciate that 😊
Avoiding hype and showing where WebGPU actually changes the mental model was exactly my goal. I’m also glad the WebGL comparison and the React/TS notes resonated - those small, practical details tend to matter a lot once you try this for real.
We all knew WGSL is great but we don't wanna spend time learning it (or it's just me?), but hope AI will have boarder knowledge on it, so it can rewrite/migrate all existing GLSL into it.
I’ve actually had the same thought.
At least for a limited, well-defined subset, AI should be able to migrate GLSL → WGSL reasonably well.
I really need to try this in practice 👀
I did try it last year, when I need a WGSL fire shader so bad, and failed to do so with CC. I dunno if it's getting better now.
Yeah, totally - a year ago WebGPU was still very young 😅
It’s definitely getting better though, and now you’ve made me curious… I really have to give it a try 😄
Loved this breakdown. WebGPU finally feels like the web catching up with modern GPU thinking. The demo looks awesome, and the note about React Strict Mode is super helpful — not something you see mentioned often.
Thank you! I’m really glad you found it useful 😊
And yes — WebGPU does feel like the web finally aligning with modern GPU thinking. I’m especially happy the React Strict Mode note helped, it’s one of those small but important gotchas that’s easy to miss.
Excellent article — very clear and well-structured 👏 The WebGL vs WebGPU comparison explains the differences extremely well.
The demo is impressive and makes the compute-driven workflow easy to understand ✨ The notes about React Strict Mode and TypeScript setup are especially useful. Great work 🚀
Thanks a lot! 😊
I’m really glad the WebGL vs WebGPU comparison and the demo came through clearly - and happy to hear the React Strict Mode + TypeScript notes were useful. Appreciate you taking the time to share this!
Like many in the DEV Community, I’ve been eagerly waiting for this post. It’s not an area I’m very familiar with, so I was really pleased to see you taking it on, Sylwia. You’ve delivered a clear, easy-to-follow article that explains everything beautifully - thank you!
Thank you so much - that’s really lovely to hear 😊
I’m very happy the article felt clear and approachable, especially if WebGPU isn’t something you work with every day.
You might be interested in the bevy game engine.
bevy.org/examples-webgpu/
This is AWESOME — thank you so much for the link!!! 🙌 I’ll definitely check it out 😄
Good to know Firefox supports it. I thought only Chrome did.
Yes 🙂 since December all major browsers support WebGPU now.
Thank you for your sharing.
💖💖💖
nothing - Chrome for Android 😕
Yeah… unfortunately 😕 WebGPU is still very new, especially on mobile - lots of catching up to do.
Great showcase of how WebGPU’s modern GPU power can expand what’s possible in the browser beyond old-school WebGL limitations.
Thanks a lot! 😊 Really glad you enjoyed it!
Very fun read! ☺️ I havent played with this very much but some very good stuff to know!! thanks for the write up! 👌
Thank you! I’m really glad you enjoyed it 😊
Ah the demo, mesmerizing!
Thank you so much! I’m really glad you liked it - especially since it definitely wasn’t the easiest demo to put together 😅