Three.js: Editor: Texture map doesn't render when refresh web page in Chrome

[linbingquan]

Texture map doesn't render when refresh web page in Chrome, but this problem doesn't reappear in Firefox

Three.js version

• [x] Dev
• [x] r97
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome 70
• [ ] Firefox 63

OS

• [x] Windows

---

refresh page and mouse hover model before:

refresh page and mouse hover model after:

[Mugen87]

I can confirm this bug. When reloading, the texture does only render if you transform the camera with the controls. There is also the following warning logged:

THREE.WebGLRenderer: Texture marked for update but image is incomplete

[Mugen87]

I think the problem is that ObjectLoader.parse() sets Texture.needsUpdate too early. And since Editor.fromJSON() is synchronous and does not apply an onLoad() callback to ObjectLoader.parse(), the editor does not wait until the texture resources are ready.

[elhigu]

I also started having the same problem with my old code, which is not waiting that video element is ready before starting to draw scene.

Works on firefox, but prints console errors on latest Chrome/Canary

WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty

https://codepen.io/elhigu/pen/pozNRNa

Documentation doesn't say anything that user should wait for video to be loaded before starting render loop. https://threejs.org/docs/#api/en/textures/VideoTexture

So is this a bug in library or missing documentation or am I just doing something wrong?

[elhigu]

Or should I maybe open a separate issue for this?

[Mugen87]

It seems your issue has nothing to do with three.js. At least on Chrome you can't just load and play a video with sound. This violates a security policy. As demonstrated in the example, you have to start the video after a user interaction. Or you just mute the video like demonstrated in this fiddle:

https://jsfiddle.net/ugm03821/

[elhigu]

@Mugen87 thanks! That seems to be the reason why it doesn't load. Strangely it seems to work every now and then even when video element is started with autoplay and not being muted.

Is there a way to initialize video texture in a way that playback in not started? If I create element without autoplay in a way that first frame is loaded anyways? just calling videoElement.load() didn't seem to work.

Right now only workaround I have found is to initialize the video like this:

  const videoElement = document.createElement('video');
  videoElement.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175382/SampleVideo_1280x720_1mb.mp4";
  videoElement.crossOrigin = 'anonymous';
  videoElement.loop = true;
  videoElement.muted = true;
  videoElement.play().then(() => {
    videoElement.pause();
    videoElement.muted = false;
  });

In our use case we actually need should just load video texture that is not playing, but is still rendered.

[elhigu]

Also this seems to be able to "autoplay" video without user interaction in chrome:

  videoElement.play().then(() => {
    videoElement.pause();
    videoElement.muted = false;
  }).then(() => videoElement.play());

Chrome bug maybe if unmuted autoplay should not work without user interaction? 🤔 I updated https://codepen.io/elhigu/pen/pozNRNa with unmuted autoplay workaround.

EDIT: ok this didn't work if I created new tab running the code. It threw DOMException 👍

[Mugen87]

Is there a way to initialize video texture in a way that playback in not started?

I would say just don't set autoplay to true and avoid to call videoElement.play().

[elhigu]

I would say just don't set autoplay to true and avoid to call videoElement.play().

That way I get the WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty error 😥 to console.

https://codepen.io/elhigu/pen/OJLbgdj

[Mugen87]

If you want avoid the warning, I suggest you create the texture when you actually want to playback the video.

[elhigu]

If you want avoid the warning, I suggest you create the texture when you actually want to playback the video.

Well... in that case I wouldn't be able to show first frame of stopped video before starting playback.

Anyways

  const videoElement = document.createElement('video');
  videoElement.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175382/SampleVideo_1280x720_1mb.mp4";
  videoElement.crossOrigin = 'anonymous';
  videoElement.loop = true;
  videoElement.muted = true;
  videoElement.play().then(() => {
    videoElement.pause();
    videoElement.muted = false;
  });

workaround does exactly what is needed without errors.

[Mugen87]

in that case I wouldn't be able to show first frame of stopped video before starting playback.

I was not aware that you want to show the first frame, sry.