Three.js: VideoTexture uses the WebM source to display an exception

[liaohengfan]

Description of the problem

The actual situation is to use WebM as the source of Videotexture in three.js. The texture rendered has all the historical content of the video, not just the current frame of the video. But the content displayed on the Chrome VideoElements is normal.This error appears in the Chrome browser version 70.0.3538.110, and there is no problem in the chrome 69 version, this situation makes me very trouble, thank you.

Three.js version

• [ ] Dev
• [ ] r99
• [ ] ...

Browser

• [ ] Chrome

OS

• [ ] Windows

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

[Mugen87]

I don't understand why you have created a new issue. If it's a problem in the browser, this section is the wrong place for your post.

[liaohengfan]

Sorry, I am just looking for a solution to see if anyone is experiencing the same problem.

[liaohengfan]

I will give feedback in chormium, because WebM shows no abnormalities in Chormeium, I think they may not pay attention to this problem,

[Mugen87]

Playing a WebM video with a video tag is something different than using a WebM video as a texture's data source. Can you try to reproduce the problem without three.js but with plain WebGL? A small test case that demonstrates the issue would be a huge help for the Chromium team.

[Mugen87]

BTW: The following example uses a WebM video and I'm not able to see a problem with Chrome 70.0.3538.110.

https://threejs.org/examples/webgl_video_panorama_equirectangular.html

[liaohengfan]

My project is to incorporate a dynamic character explanation in a panorama, so I need a transparent channel webm, VideoTexture format RGBA, I will provide screenshots displayed in different versions tomorrow, thank you for your attention. :-)

[liaohengfan]

This displays in chrome 70.0.3538.110:

This displays in chrome 69:

[Mugen87]

Ca you share a link to your app?

[liaohengfan]

Sorry, this project material can't be shared. I think you just lack a transparent WebM. I'll try to make one for you tomorrow.

[Mugen87]

That's great. We can only make progress if we have a small test case that reproduces the problem.

[liaohengfan]

This is the latest test result:

coding files:
WebMAlphaVideoTexture.zip

[Mugen87]

WebM_Test.zip

I have refactored your demo a bit and added a "play" button (since it's not allowed to play the video automatically).

BTW: I'm actually not able to reproduce the error with Chrome 71.0.3578.80. Don't forget to run this demo on a web server.

[liaohengfan]

Your computer is Windows? My environment is Win10, 71.0.3578.80. Version is not solved.

[mrdoob]

The problem is with a transparent video, right? https://github.com/mrdoob/three.js/issues/4656

[liaohengfan]

Yes, a transparent WebM video file. Thank you.

[Mugen87]

Your computer is Windows?

No, I'm on macOS 10.14.1. Unfortunately, I'm not able to test with Windows.

I strongly recommend you use the isolated test case and file a bug right here:

https://bugs.chromium.org/p/chromium/issues/list

In any event, this issue can't be fixed by three.js.

[liaohengfan]

I've already feedback to chrome. Thank you.

[kainino0x]

For reference, the Chrome bug is https://crbug.com/912842.