Bug 211750 - WebGL video texture frames aren't updating when using high resolution source
Summary: WebGL video texture frames aren't updating when using high resolution source
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: Safari 13
Hardware: All All
: P2 Major
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2020-05-11 15:29 PDT by Dustin Kerstein
Modified: 2020-07-30 12:16 PDT (History)
6 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Dustin Kerstein 2020-05-11 15:29:12 PDT
I mentioned this issue in https://bugs.webkit.org/show_bug.cgi?id=211624 but figured it would be better to separate it into a new issue. 

Three.js was used make it easier to demo, but I'd be happy to post a pure WebGL based version if you'd prefer - https://jsfiddle.net/yj9vpfkr - Depending on a device's capabilities, the texture update won't complete before the next render loop which results in frozen frames. Strangely on iOS when this issue appears, sometimes touching the screen will force a texture refresh. And further, on iOS, the severity of this issue can be reduced by using setInterval (which overlaps with issue 211624).

*Note* that as this JSFiddle uses iFrames, you'll need to click into the result iFrame to get Safari to avoid using its low power mode (meant for ads) which limits rendering to 30fps.

If this is just due to exceeding the device's WebGL limits, can anything be done to detect this state to ensure the previous texture update has finished?
Comment 1 Dustin Kerstein 2020-05-12 05:43:00 PDT
FYI, I added video.playbackRate control to the above JSFiddle so you can fine-tune the threshold where the frames stop updating. On my first gen iPad Pro, the video plays perfectly at 0.5, starts to play erratically at 0.75, and is almost entirely frozen at 1.0
Comment 2 Radar WebKit Bug Importer 2020-05-12 14:01:49 PDT
Comment 3 Dustin Kerstein 2020-05-13 11:15:07 PDT
Note that the above JSFiddle relies on Media Source Extensions. There appears to be another issue related to MSE + WebGL which I have broken out into a separate ticket - https://bugs.webkit.org/show_bug.cgi?id=211852

See here for a non-MSE based demo (which still replicates the issue this ticket is about) - https://jsfiddle.net/knL126st