Bug 244172 – WebGL performance issue. <10fps for simple shader. Resolves with tiny tweaks to shader

• Component: WebGL
• Status: NEW

[Ian Kettlewell]

Created attachment 461779 [details]
A minimal index.html that reproduces the performance issue

Attached is an ~160 line index.html / shader that contains a reduced self-contained example of a performance issue with Safari WebGL2.

The original context where I discovered this bug is within rendering code with visuals, but in the process of reducing the repro case the visuals were removed.

When viewing this page the canvas will remain black but Safari will become extremely laggy.

Chrome and Firefox run this page at 60fps.

There are three comments in the shader that begin with "NOTE: " and call out locations
where the shader can be slightly tweaked to increase performance to 60fps. 

The most interesting (to me) tweak that improves performance is simply changing the for loop from
 `for (int i = 0; i < 10; i++) {`  to for (int i = 0; i < 9; i++) {` 
makes the page run at 60 fps again.


This repro case was reduced with help from `webgl-capture` (https://github.com/greggman/webgl-capture)

I have tested this exclusively on an M1 Macbook Air. I have tested this is Safari 15.6 and Safari Technology Preview 16.0.

[Ian Kettlewell]

Over on Twitter Sam Sneddon recommended testing out Chrome's ANGLE Metal backend for comparison.

It also performs just as poorly, which seems to indicate this is an ANGLE / Metal issue.

[Kimmo Kinnunen]

Thanks for the repro.
Cannot reproduce on M1 Pro. Will try on M1.

[Radar WebKit Bug Importer]

<rdar://problem/99004251>

[Alexey Proskuryakov]

I am getting 11 fps on M1, both Safari 15.6.1 and STP 150 on macOS 12.5.1.

[Ian Kettlewell]

I revisited this today and it no longer reproduces in Safari 16.5.1 or in Chrome 116.0.5845.140 with the Metal ANGLE backend enabled. I assume something else fixed it. Hooray!