Bug 223100

Summary:

WebGL drawElements slow in Safari 14

Product:

WebKit

Reporter:

Yegor <yegor.jbanov>

Component:

WebGL

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

caiiiycuk, dino, geofflang, jonahr, kbr, kkinnunen, tom, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 10.15

See Also:

https://bugs.webkit.org/show_bug.cgi?id=223129

Attachments:

Description	Flags
drawElements in timeline recording	none

Yegor

Reported 2021-03-11 16:22:41 PST

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`.

Attachments
drawElements in timeline recording (92.55 KB, image/png) 2021-03-12 09:53 PST, Yegor	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Yegor

Comment 1 2021-03-11 16:51:40 PST

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

Comment 2 2021-03-11 17:08:55 PST

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

Comment 3 2021-03-11 23:09:03 PST

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

Comment 4 2021-03-12 09:51:47 PST

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

Comment 5 2021-03-12 09:53:43 PST

Created attachment 423057 [details] drawElements in timeline recording Just a screenshot of the timeline recording that points to drawElements.

Kimmo Kinnunen

Comment 6 2021-03-12 11:30:51 PST

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

Kimmo Kinnunen

Comment 7 2021-03-12 11:30:57 PST

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

Yegor

Comment 8 2021-03-12 14:36:53 PST

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

Comment 9 2021-03-15 07:57:24 PDT

(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

Comment 10 2021-03-15 11:10:45 PDT

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

Comment 11 2021-03-18 17:23:15 PDT

<rdar://problem/75598703>

Note You need to log in before you can comment on or make changes to this bug.