My first WebGPU app!

(The Repl)

Every now and then, I decide to get into WebGL. It never works out, I usually eventually give up or forget about it. But this time was different, I found out about something called WebGPU. WebGPU is basically like the modern version of WebGL. Basically, WebGL is based on OpenGL, which in turn is outdated and based on old hardware.

Many big companies like Apple and Google are actively working on WebGPU so it has a bright future, and there are already some great resources on it, like this codelab: Your first WebGPU App.

The above codelab is pretty much as easy to follow as it will probably get. It takes you through rendering the two triangles that make up a square, to using vertex and fragment shaders to position them in a grid and colour them in a gradient. Then using a compute shader and two buffers to simulate each frame/step. Through the tutorial you build Conway’s Game of Life. Some of the stuff I learnt still went over my head, but I think I understood enough that I’ll be able to start to experiment and try making my own stuff.

5 Likes

image
But I like Firefox.

I tried Chrome.
image

So what is this? A way for websites to use my GPU? It’s built into the CPU atm.

In short, pretty much.

So WebGL was like JS bindings for OpenGL, WebGPU is like a modernised version of WebGL that I think (at least in my understanding) can play with most of the modern GPU APIs like Vulcan and Metal and stuff, idk for sure, but I do know, its supposed to be more modern than WebGL and it is definitely more performant.

Basically WebGPU lets you run shader programs on the GPU (the name shaders is misleading because the term is outdated, back when GPUs were first invented, shaders only shaded in pixels, but nowadays we have lots of different types of shaders that can do anything from machine learning to crypto currency mining).

Apart from changing the API to be more modern, WebGPU only really introduces one new feature compared to WebGL 2.0, (proper) compute shaders, which allow you to just run code on the GPU without it having to manipulate pixels.

With the no GPU adapter found message, (assuming your device has a GPU) it could be something weird with Chrome flags, I got the same message on my desktop until I went to chrome://flags and clicked reset all. :man_shrugging:

Also, you can enable WebGPU in Firefox with the dom.webgpu.enabled flag.

2 Likes

Tried that. All I get is a black screen. :man_shrugging: So I tried that on my laptop which has an integrated and dedicated GPU and made sure it was running on the dedicated GPU and same result. Tried Chromium on the laptop w/ dedicated GPU and got the same error. Tried resetting flags (I never changed any anyway) and got the same error Chromium was throwing before (No appropriate GPU adapter was found! :(). Maybe it just doesn’t work on Linux (I’m using Arch Linux w/ KDE Plasma DE). :man_shrugging: