WebGL drawElements slow in Safari 14

• Component: WebGL
• Status: NEW ---

[Yegor]

Safari 14 is noticeably slower than Chromium-based browsers when running CanvasKit (a WebGL-based canvas library).

The issue can be reproduced on https://skia.org/user/modules/canvaskit

According to the timeline, most of the time is spent in https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements (see attached screenshot from the Web Inspector).

This is also reproducible in Flutter apps that use CanvasKit:

- https://gallery.flutter.dev
- https://flutterplasma.dev/showroom/5

All of them point to `drawElements`.

[Yegor]

Corresponding downstream issues:

- CanvasKit/Skia: https://bugs.chromium.org/p/skia/issues/detail?id=11739
- Flutter: https://github.com/flutter/flutter/issues/77774

[Kenneth Russell]

Submitter, could you please:

1) Point to specific examples where you can most visibly see the performance regression

2) Try Safari Technology Preview, and report the version you tested and whether the problem exists there

Chromium sees a performance improvement using ANGLE as the WebGL backend (on macOS in particular) vs. not.

[Tom Gilder]

Here's another real-world example: https://moi.codemate.dev

To see the poorest performance:
1. Click login
2. Click the main big box below the "Usage information" header

The resulting animation plays at 60fps in Chrome, but stutters at 30fps in Safari, including Technology Preview Release 121 (Safari 14.2, WebKit 16612.1.4.3).

[Yegor]

Tested tech preview Release 122 (Safari 14.2, WebKit 15612.1.6.2). It is still largely affected, although it improves in some situations, e.g. the 3D cube demo on https://skia.org/user/modules/canvaskit.

The tech preview includes WebGL 2, which CanvasKit prefers, so perhaps it brings some improvements. It also brings weak-refs (FinalizationRegistry), which Flutter automatically picks up. That probably speeds up non-WebGL parts a little bit.

`drawElements` is still the biggest contributor to the slowdown in my performance profiles.

I noticed that many WebGL samples (e.g. http://webglsamples.org) perform well, so it must be something that CanvasKit specifically triggers. I'll work with the Skia team on the smallest repro case we can get. So far, the smallest repro is https://skia.org/user/modules/canvaskit, which doesn't include Flutter, just CanvasKit itself.

[Yegor]

Created attachment 423057 [details]
drawElements in timeline recording

Just a screenshot of the timeline recording that points to drawElements.

[Kimmo Kinnunen]

Thanks for the report. I'll investigate it. It appears my Safari crashes on it.

[Kimmo Kinnunen]

Thanks for the report. I'll investigate it. It appears my Safari crashes on it.

[Yegor]

Is there a way to enable the ANGLE backend for testing? According to https://trac.webkit.org/wiki/AngleforWebGL it should be used for WebGL 2, but I'm not seeing much difference between WebGL 1 and 2, so perhaps it's not yet ANGLE?

[Kimmo Kinnunen]

(In reply to Yegor from comment #8)
> Is there a way to enable the ANGLE backend for testing?

It's on by default on Mac (Big Sur) and iOS (14).

[Kenneth Russell]

Kimmo, have you been able to profile any bottlenecks in ANGLE's validation of glDrawElements calls? It's now difficult or impossible to do before-and-after measurements of ANGLE in WebKit on macOS. Still, maybe using the EGL_KHR_create_context_no_error extension we can see whether validation of these calls is the dominating cost.

[Radar WebKit Bug Importer]

<rdar://problem/75598703>