WebGL Video Texture Warning and HLS Streaming
Intro Website that uses Three.js and Adaptive streaming solutions such as HLS.js package How it works? Basic implementation of the HLS.js that streams different 4K vid… (read more)
Website that uses Three.js and Adaptive streaming solutions such as HLS.js package
How it works? Basic implementation of the HLS.js that streams different 4K video at different levels/chunks (HD, FULL HD, 2K, QUADHD, 4K). Downloaded chunks from the stream are loaded to the WebGL/Three.js Video texture.
What is the problem? Whenever Video quality changes to higher resolution such as 3072x1536, WebGL is not rendering immediately the texture and displays black frame/screen.
This only happens on the Firefox, tested on Chrome, Safari, Edge and Firefox.
This warning appears on Firefox 105: WebGL warning: texImage: Fast Tex(Sub)Image upload failed without recourse, clearing to [0.2, 0.0, 0.2, 1.0]. Please file a bug!
When tested on latest Firefox 109.0.1 above warning message does not appear in the console, but there is still black blink bug and another logs:
[Video] Hls.Events.Error mediaError bufferStalledError false
[Video] BUFFER_STALLED_ERROR > Playback is stuck because buffer is running out of data.
Black screen blinks whenever video switches the quality to the higher than 2160x1080px and when below logs are fired to the console, example:
[Video] Hls.Events.LEVEL_SWITCHED > Quality switched to level 3: 3072x1536 @ 8.61Mbps
Couldn’t find any bug that was reported with the same warning message as this one.
Topics that I’ve found that could be or not related with this bug.
1709726 - Failed to upload video element to WebGL texture with texImage2D()
1322694 - WebGL video textures fail to render in Firefox Nightly for MP4 format with 2048x1024 pixels dimensions
Investigate with Firefox support why WebGL is not rendering frame when video switches to the higher quality.