Bug 171924 – WebGL animation freezes

• Status: NEW
• Component: Layout and Rendering

[Nik S]

Created attachment 309609 [details]
Test page to reproduce the issue and issue screencast

I've noticed that if I set is quite large canvas size for webgl rendering may causes to animation freezes and macOS UI sluggishness. However, the same canvas sizes works with good smooth animation in latest Firefox and Google Chrome.

Also I’ve noticed that if I add  ‘WebGLRenderingContext.finish()’ call to the end of animation loop then animation will smoothly. And it looks questionable to me. After quick investigation results of timelines profiler I guess that `requestAnimationFrame` callback is called before previous frame was handled (composed) by browser.

Steps to Reproduce:

0. See my screencast from attachment where I reproduce the issue on my hardware. Video clearly shows the essence of the issue;
1. Make sure that there aren't high gpu usage applications which run now. Better way to reproduce issue is performing the test on integrated GPU I prefer to use gfxCardStatus from https://gfx.io/ to determine which GPU is active now;
2. Open index.html from attachment. You will see few rotating boxes on the page. In case of issue is reproduced You will see twitching rotation animation. Also you can click-and-drag to rotate the boxes to feel animation sluggishness;
3. If your GPU is powerful enough to handle current canvas size without animation freezes you have to increase canvas size. From my observations, in order to reproduce the issue, it is necessary to increase canvas size until the FPS drops to 30-35. To change canvas size, you need to edit the line ‘const size = 1500;’ in scene.js. Another way to determine canvas size use the ‘Increase canvas size’ button and wait before needful canvas size will be set.
4. After you determinate canvas size and reproduce the issue you may add `WebGLRenderingContext.finish()` call in animation loop via ‘Enable Safari fix’ button. When safari fix is enabled animation should be played smoothly.

The reason of creating the report is that I want to figure out why safari has a significantly lower performance on this page than other browsers and why WebGLRenderingContext.finish() call improve performance. It looks like a bag for me.

Testing hardware:
MPB, 13”, Early 2015, 2,7 GHz Intel Core i5, 16GB, SSD, Intel Iris Graphics 6100. macOS 10.12.4, Safari 10.1 (12603.1.30.0.34)
MPB, 15”, Mid 2016, 2.6GHz quad-core Intel Core i7, 16GB, SSD, Intel HD Graphics 530. macOS 10.12.4, Safari 10.1 (12603.1.30.0.34)

[Radar WebKit Bug Importer]

<rdar://problem/32109304>

[Simon Fraser (smfr)]

Created attachment 310323 [details]
Testcase in less exotic format