Performance issues with Phaser.JS and WebGL in Chrome

[Bobby Martin]

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

[Ken Russell]

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:

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_alphafalse_which_can_be_expensive

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]

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]

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]

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]

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]

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