WebGPU vs WebGL performance

[greggman]

I just wanted to pass on... The article in optimization goes over various ways to speed up WebGPU. There are also WebGL examples trying to use similar optimizations. They are linked at the end of the article on WebGPU from WebGL.

You can do your own comparisons and maybe look into them and see if anything is missing. I found WebGPU is almost always faster than WebGL, but, as others have found. You have to organize for it.

Interestingly I found uniform-blocks in WebGL2 to be slower than using gl.uniform which is unexpected. That's even true when they are split into global, per material, per object such that much less work should be happening. It has me curious, is this an issue in OpenGL or in WebGL's usage of OpenGL 🤷‍♂️

On an M1 Mac connected to at 60hz external monitor I got roughly these results. As in, I could draw this many objects before the frame rate drops below 60fps

60fps                   WebGL   WebGPU
--------------------------------------
opt-none(gl.uniform)     15000   N/A
opt-uniform-buffers      6000   12000
opt-glb/mat/obj bufs     7000   12000
opt-one-large-buf        9000   19000
opt-mapped-buffer         N/A   19000

On an AMD Ryzen 9 3900XT with an NVidia 2070 Super

60fps                   WebGL    WebGPU
---------------------------------------
opt-none(gl.uniform)    6000     N/A
opt-uniform-buffers     5000     3000
opt-glb/mat/obj bufs    5000     3000
opt-one-large-buf       9000     10000
opt-mapped-buffer       N/A      10000

Also note, at least in Chrome, there's a bug on MacOS where Chrome might be calling requestAnimationFrame at 60fps but frames are somehow being dropped. I'm sensitive to this so I can see it just by watching the cubes stutter. You can verify this by using Quartz Debugger which is something you can download from Apple as a developer.

Chrome seems to have another issue which is if I increase the count until I go under 60fps (or whatever the refresh rate on the monitor I'm on is), then if I decrease the count, it doesn't go back to 60fps. Instead I have to significantly decrease the count, then bring it back up.

In other words, take the opt-none example above in which I got 12000 objects at 60fps

1. At 12000 I get 60fps
2. At 13000 I see dropped frames (~57fps)
3. Lowering to 12000 I still see dropped frames
4. Lowering to 10000 it's now 60fps
5. Raising back to 12000 it's back to 60fps like it was the first time

What happened at step 3 that it didn't get back to 60? I have some ideas but still. 🤷‍♂️

Trying Firefox on the same M1 Mac, I can't run WebGPU as Firefox WebGPU is still in beta. Here's the numbers for WebGL though.

60fps           WebGL
---------------------
opt-none        11000
opt-none-ub      6000
opt-gbl/mat/per  6000
opt-one-large   12000

It is nice to see that, at least the optimized version using a single large uniform buffer with offsets for each object is faster the the un-optimized version, unlike Chrome

There's a bug filed for Chrome for WebGL semi-related to this here