Subpar WebGPU performance on mobile devices (Issues with text, particles, transparency...)

[therealPaulPlay]

Problem description

Performance with WebGPU is significantly worse on mobile devices compared to WebGL. I have attached a simple test project that showcases different weaknesses of the new renderer. The main issues include transparency and overdraw, particles and most importantly text rendering. I'll also include videos showcasing these issues here. Make sure to use a device with a high refresh rate, so that these issues are more apparent. At least my devices were able to maintain above 60fps (if there is no moving text) but had severe stutters as they couldn't achieve enough fps for proper vsync.

Attach a .c3p

This is a minimal project derived from my main project, I have spent more than 7 hours tracking down the issues and removed 99.9% of of it to make for a simple presentation.

WebGPUTest8.zip

Steps to reproduce

1. Create a construct project
2. Use a few high-res images, non-static text, particles, a few objects with simple behaviors
3. Test performance on a mobile device that has a 120hz / high refresh rate display

Observed result

The game fails to meet the target framerate (120fps here) and there are very noticeable framedrops and stutters.

Expected result

Performance should be as good as WebGL, ideally, better even, as WebGL is not necessarily performant on smartphones.

More details

I have tested this on my Galaxy S20+ as well as Pixel 7 Pro. For the test, I have used the WebView Beta 123 as well as 122 stable and Google Chrome 121. The performance, while being slightly different, is pretty bad in both web and APK exports.

System details

I'm using r381 for testing - see example project.

[WilsonPercival]

We already know of a case of FPS drop when using the Text object: #6905

You also mentioned that you noticed a drop in FPS when using particles. Could you provide a project file that demonstrates just this?

You also mentioned that you noticed a drop in FPS when changing transparency. Could you provide a project file that demonstrates just this?

Please do not combine all problems into one whole, otherwise it will be extremely difficult to help.

[therealPaulPlay]

The project includes buttons to switch between these things. You can press on "toggle layout" which will switch between a layout that includes text and one that doesn't. There are also toggles to enable and disable the particles as well as the vignette (transparency). Even with all these disabled though, performance is still quite bad (below 120fps with bad frame timing, so it doesn't feel fluid).

I'm not sure which of these are individual issues and which are not, and there are likely more issues than that - that's why I've created one test project because replicating these issues is really hard with a project that just has one thing going on, because then performance will likely be okay/above 120fps, and framerate unlimited isn’t working as it should be.

In the drive folder there is a test project where I tried to test the transparency thing but ran into this exact issue - performance was over 120fps and I couldn’t tell by how much. I even added fast moving background objects but that didn‘t worsen the performance, so it was extremely difficult to tell what was going on.

I‘ve also tested the experimental WebGPU support in iOS 17.4 Beta but that doesn’t really seem to work at all, for some specific things it does, but it’s far from running a full game.

This project simply showcases how an extremely simple game, using just a few sprites, a few particles and a few behaviors, is close to unplayable. Even with everything that seems to severely affect performance disabled, it is still not a pleasant gameplay experience.

[therealPaulPlay]

Any updates regarding this? With WebGL the performance isn't amazing either - much better than with webGPU but even a simple project like this has many stutters and dips below 120fps regularly.

[AshleyScirra]

This issue refers to WebGPU performance. There are some known issues with WebGPU performance that we are waiting on Chrome to fix, such as: https://issues.chromium.org/issues/40273077

I suspect that is the cause of this, so for now we're waiting for that to be resolved and see if that affects this issue. If WebGPU performance is worse than WebGL, for now you can just switch back to using WebGL.

[therealPaulPlay]

Okay, thanks for clarifying!

[kingpirux]

Most android devices are noticebly lower performance. The only thing i can say here is maybe should make a blacklist again to all GPUs up to 2021, for example ipad with A15 and lower and from Helio G85 chipset and lower... I tested with those two and constant crashes and really bad performance on very simple things. The same devices on webgl no problem.

Problems i found:

• Using too many images bigger than 1000 pixels will cause crashes, normally happening in very crowded layouts.
• if you configure to use lossy quality and export as png, all images will loose transparency, this only happens with webgpu
• More examples on this weird crashes
  

• Performance is severily dropped with the text object on screen, more noticebly if affected by fades and z elevation.

• It affects the Video object, no idea why, but with webgl the video play instantly, but in webgpu it takes time and some times fail to load the video with no error from construct but in the console there is a failed to fetch and webgpu "loose blob" or something like that...

[AshleyScirra]

ipad with A15 ... I tested with those two ...

AFAIK Safari doesn't support WebGPU in a stable release yet. If you've changed device settings to enable WebGPU when it is still in development and incomplete, then those problems are likely all due to the fact it's an unfinished implementation.

[AshleyScirra]

In r419 there is a new option to turn off multitexturing, and the new default 'auto' mode disables it on mobile and only enables it on desktop. This should make a significant improvement to fill-rate performance with WebGPU on mobile, so it would be worth re-testing this again to see if this has improved it on real-world devices. @therealPaulPlay - is there an improvement for you with that release?

[therealPaulPlay]

Hi Ashley,
Thank you for experimenting with this!

I've done the same tests on my test devices now (they use the newest chrome and system webview versions), but unfortunately, performance has not improved.

There are still constant, extreme stutters and it's not really playable. When everything is moving slower (I simulated this by lowering the time scale in construct) the performance seems to be significantly better. Moreover, when I just move the player on the screen (and not have the camera follow it) it also performs a bit better, still not really playable though.

I can confirm that iOS 18.1 does not ship with WebGPU enabled by default, and it's also only possible to enable it via feature flags for Safari, not the Webkit Webview. Apple keeps the development names for these flags secret, I did some "guessing" in Xcode but couldn't get it to work... Somebody in the forums suggested to search for the names in the Webkit github repo, though reading through all that code would take a lifetime😆

[AshleyScirra]

To be clear on what you're testing, can you answer the following:

• Are you testing with the project provided in this issue, or some other project (perhaps the full version of the project)?
• Do you have any other tests not using the Text object to compare performance with? (There is still a known issue with Text objects being slower to update in WebGPU)
• Are you testing in the Chrome browser or as an Android export?

The most interesting test would be a project not using Text objects running in the Chrome browser, as that makes sure to avoid any other known issues.

Don't bother testing iOS yet. When it's ready, they'll have it enabled by default. Before then it's probably broken or has other serious known issues, and testing will only show up those problems, which Apple probably already know about, hence leaving it disabled.