Performance issues with Phaser.JS and WebGL in Chrome

135 views
Skip to first unread message

Bobby Martin

unread,
May 10, 2022, 1:57:24 PMMay 10
to Graphics-dev, Michael Nguyen

Hey folks,


We have a WebGL app (kumospace.com) that is having FPS issues in Google Chrome.


The baseline is ~30-40 FPS.  Interestingly, when we open a game (league of legends, steam, etc.), the FPS increases to a stable 60 FPS.  When the game is closed, the FPS decreases to the baseline.


This is pretty weird behavior, and we were hoping you might have some ideas about how to troubleshoot.  This behavior does not occur in Firefox or Safari.


We took a look into about:tracing and here’s what we found:


  1. When a game is open (e.g., riot games client), in the CrGpuMain track, it looks like the average frame takes no more than 10ms.

  2. When the game is closed, in the CrGpuMain track, ThreadControllerImpl::RunTask events take longer, leaving almost no idle time.  Repeat offender sub events that take the most time tend to be:

    1. RasterDecoderImpl::DoEndRasterCHROMIUM

    2. SkiaOutputSurfaceImplOnGpu::FinishPaintRenderPass

    3. CommandBufferService:PutChanged

    4. GLContext::BackpressureFenceCreate

    5. Scheduler::RunNextTask

    6. SkiaOutputSurfaceImplOnGpu::SwapBuffers


Attached are the about:tracing profiles for each of the runs (with and without the riot client).  


Here are some additional stats:

MacBook Pro (16-inch, 2019)

CPU: 2.6 GHz 6-Core Intel Core i7

Memory: 16 GB 2667 MHz DDR4

GPU: AMD Radeon Pro 5300M 4 GB

Chrome: Version 101.0.4951.54 (Official Build) (x86_64)


Bobby and Michael

trace_with-riot-client.json.gz
trace_without-riot-client.json.gz

Ken Russell

unread,
May 10, 2022, 6:32:12 PMMay 10
to Bobby Martin, Graphics-dev, Michael Nguyen
Hi Bobby,

On the dual-GPU MacBook Pro you're using, running Steam or another game is almost certainly implicitly activating the discrete GPU on the system. If kumospace's frame rate improves in this situation, then you can get the same effect by passing an argument when you call canvas.getContext('webgl'):

  canvas.getContext('webgl', { powerPreference: 'high-performance' })

I've tried Kumospace on a dual-GPU MacBook Pro here, passing the command line argument --force_high_performance_gpu to achieve a similar effect, and think I'm seeing a framerate improvement for your app. Please try it.

That looks like the best workaround for your app at the moment. Other browser-level improvements are on the way, but this will get you past this hurdle in the short term.

-Ken

P.S. If you'd been using the alpha:false context creation attribute, I would have steered you away from it:

It has especially detrimental effects on Intel GPUs. However, it looks like your app uses the default WebGL context creation attributes, so no need to make a change in this area.


Michael Nguyen

unread,
May 11, 2022, 12:43:02 PMMay 11
to Graphics-dev, Kenneth Russell, Graphics-dev, Michael Nguyen, Bobby Martin
Hi Ken,

This works great, thank you!  However, it comes with an unintended side-effect: switching to the kumospace tab is noticeably slower.  The initial load is fine, it's just slow when I switch off tab and come back.  

Do you know what might be causing this?  Or is this just the nature of using 'high-performance'?  For what it's worth, the slow tab switch seems to be independent of number of assets we're loading.  It also happens in 'canvas' mode, but does not happen in firefox.

Michael

Ken Russell

unread,
May 20, 2022, 5:41:24 PMMay 20
to Michael Nguyen, Graphics-dev, Bobby Martin
Hi Michael,

Sorry for the delay replying, got buried last week.

This is probably due to the nature of automatic graphics switching in Apple's OpenGL driver and the fact that Chrome releases the discrete GPU for backgrounded tabs. We're moving Chrome's WebGL implementation over to Metal via ANGLE, so hopefully in a few Chrome releases this will improve. Also, WebGPU will provide even better performance characteristics.

-Ken


Michael Nguyen

unread,
May 21, 2022, 6:36:01 PMMay 21
to Ken Russell, Graphics-dev, Bobby Martin
No worries, we really appreciate the help!

We've rolled out the 'high-performance' flag to all of our users and it's working great.  I'll keep my eyes peeled for those WebGL updates.

Thanks again.

Michael

Nenad Bojkovski

unread,
Aug 25, 2022, 1:30:40 PMAug 25
to Graphics-dev, mic...@kumospace.com, Graphics-dev, bo...@kumospace.com, Kenneth Russell
Hi Kenneth,

I see you are recommending using powerPreference option when a webgl context is requested from canvas, however from what I can see on the internet it is not supported by the browsers just yet. Also not by chrome.
https://caniuse.com/?search=powerpreference
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext.

I see that Michael says that they have rolled it out and it is working great, so I wonder if I'm missing something.
Is the powerPreference option supported/working in Chrome(ium)? How about other browsers? 

Best,
Nenad

Ken Russell

unread,
Aug 29, 2022, 7:54:40 PMAug 29
to Nenad Bojkovski, Graphics-dev, mic...@kumospace.com, bo...@kumospace.com
In Chrome today, powerPreference: 'high-performance' is supported on dual-GPU MacBook Pros. A major rearchitecture is almost done which will soon bring this support to dual-GPU Windows laptops.

-Ken
Reply all
Reply to author
Forward
0 new messages