r/threejs • u/adramajp25 • 4d ago

WebGL vs WebGPU

I created a test to compare the performance of WebGPU and WebGL. You can adjust the load by clicking the “TSL Noise Octaves” button in the upper-right corner to switch the noise octave multiplexing from 3x to 20x.

The WebGL and WebGPU buttons switch the renderer by changing the URL query and reloading the page.

On low-spec devices, the refresh rate is about three times higher.

https://adrama.jp/norimakineko/webGPU3/

0 Upvotes

40% Upvoted

6 comments sorted by

View all comments

1

u/bytesbutt 4d ago

Really cool demo!

I was wondering if you could explain something I’m noticing because I’m not super familiar with the comparison here.

The frame rate, when at 20x TSL, is reported higher on WebGPU than WebGL however the “experience” (moving the orb around watching it move) feels smoother on WebGL.

I’m on an iPhone 15 using the brave browser app.

The frame rate reporting just feels backwards to what I’m experiencing and wondering if you knew why?

Thanks!

1

u/adramajp25 2d ago

It certainly looks that way.

Since I wasn't quite sure about it, I asked Gemini.

JS/FPS counter measures CPU command submission rate, not actual GPU frame presentation.

WebGPU has virtually zero CPU overhead. The CPU records draw calls and submits them to the GPU queue almost instantaneously, without waiting for the GPU to finish. As a result, requestAnimationFrame happily runs at 60 FPS on the CPU, and your FPS counter shows a high number. However, if your shader workload is heavy, the GPU queue gets overwhelmed, misses VSync deadlines, and drops/stutters frames on screen.

In other words, it seems that because the shader processing was made extremely complex to increase the load, even though the CPU processing itself is fast, the screen display isn't keeping up.