Three.js: Video examples get errors

[greggman]

Description of the problem

It seems like most of the samples with video get errors at the beginning, at least when run locally (which means there's a timing issue?)

three.module.js:15 WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty

I don't know what the correct way to use video in WebGL is honestly and I'm not sure anyone actually does. It seems like every 2-3 years browsers break it again. Checking the WebGL conformance tests, they wait for video.currentTime to be > 0 before calling texImage2D but I suspect that's just some voodoo that made the tests run and not the official way you're supposed to do it. Though maybe if it's good enough for the tests?

I don't think you'll see this on the website as it seems to be related to timing. If I use servez or http-server to serve the three.js folder and go to http://localhost:8080/examples and run webgl_video_panorama_equirectangular.html then I see the errors

Note: It's Chromium only that has the issue but checked 2 macs and a windows and they all get the errors.

Three.js version

• [X] Dev

Browser

• [ ] All of them
• [X] Chrome
• [ ] Firefox
• [ ] Safari

OS

• [x] All of them
• [x] Windows
• [x] macOS
• [?] Linux
• [?] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

I've investigated this issue today and found a possible solution at the pixi.js community, see https://github.com/pixijs/pixi.js/issues/5996#issuecomment-522518514.

Adding autoload preload="auto" to the video tag seems to solve the issue in webgl_video_panorama_equirectangular and webxr_vr_video. Can you please test this fix on your systems?

[greggman]

tested. The error went away but it was just luck. I went to the network tab of chrome and set network speed to Fast 3G and the errors came back.

[Mugen87]

Yeah, I can reproduce 😞 . Unfortunately, using video.currentTime > 0 in VideoTexture does not help either...

[Mugen87]

Filed an issue at the Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1107827

[greggman]

I am unable to repo with the currentTime > 0 check (though this seems totally voodoo)

https://jsfiddle.net/greggman/ro09gb4k/

Do you have a repo?

[greggman]

Okay, strange, I was able to repo with three.js locally and currentTime > 0 test

[greggman]

Here's a repo in three.js

https://jsfiddle.net/greggman/9wdtyr7h/

[makc]

maybe wait for metadata event?

video.addEventListener('loadedmetadata', (event) => { ....

[looeee]

I've previously (just a few days ago actually) spent some time trying to solve this using 'loadedmetadata' and 'loadeddata' events. The problem is that in most cases, these events have already fired by the time you access the video in JS.

Added this code to the fiddle:

var video = document.getElementById( 'video' );
video.addEventListener('loadedmetadata', (event) => {
  console.log('meta data loaded')
})

video.addEventListener('loadeddata', (event) => {
   console.log('data loaded')
})
video.play();

After reloading about ten times I was about to get both events to fire one time.

[makc]

then what about doing something like video.videoWidth > 0 check, or maybe video.readyState > HTMLMediaElement.HAVE_METADATA

[greggman]

This issue is already solved is it not? The code was updated to use requestVideoFrameCallback where it exists which solves the issue in Chrome. Firefox and Safari didn't have the issue previously right?