Bug 171924 - WebGL animation freezes
Summary: WebGL animation freezes
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 10
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-05-10 08:41 PDT by Nik S
Modified: 2017-05-16 17:15 PDT (History)
7 users (show)

See Also:


Attachments
Test page to reproduce the issue and issue screencast (7.14 MB, application/x-7z-compressed)
2017-05-10 08:41 PDT, Nik S
no flags Details
Testcase in less exotic format (3.85 KB, application/octet-stream)
2017-05-16 17:15 PDT, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nik S 2017-05-10 08:41:18 PDT
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)
Comment 1 Radar WebKit Bug Importer 2017-05-10 09:21:40 PDT
<rdar://problem/32109304>
Comment 2 Simon Fraser (smfr) 2017-05-16 17:15:35 PDT
Created attachment 310323 [details]
Testcase in less exotic format