Bug 211750 – WebGL video texture frames aren't updating when using high resolution source

• Status: NEW
• Component: WebGL

[Dustin Kerstein]

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?

[Dustin Kerstein]

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

[Radar WebKit Bug Importer]

<rdar://problem/63152846>

[Dustin Kerstein]

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