Video examples get errors

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

• Dev

Browser

• All of them
• Chrome
• Firefox
• Safari

OS

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

Hardware Requirements (graphics card, VR Device, …)

[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?

[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.