Firefox VideoTexture flipped

[c4ntin]

Description

Hi, on last version of Firefox v135 (and maybe before) the VideoTexture are flipped of 90°.
It works fine on Chrome/Edge.
It provided a codepen sample.

Reproduction steps

1.Just display a video in any plane. codepen sample provided.
2.
3.

Code

const video = document.querySelector("#video");
const videoTexture = new THREE.VideoTexture(video);
const material = new THREE.MeshBasicMaterial({
	map: videoTexture,
	side: THREE.FrontSide,
	toneMapped: false
});
const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(1.6, 0.9), material);
scene.add(plane);

Live example

• jsfiddleTest Sample

Screenshots

Version

0.173.0

Device

Desktop

Browser

Firefox

OS

Windows

[Mugen87]

You use a very outdated three.js version that we don't support anymore. Please upgrade the codepen to the latest release r173.

The official video texture examples work without issues in Firefox 135: https://threejs.org/examples/?q=video

[c4ntin]

Sorry @Mugen87, I recycled an old coldepen. But the problem still on the lastest version.

https://jsfiddle.net/79jn4r16/27/

I suspect the problem comes from metadata from the video probably taken with a cell phone.

[Mugen87]

You are right. This issue seems to be caused by rotation metadata (https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/).

When looking at the respective resources online, there seems to be no viable fix for WebGL though. It would probably best to transcode the video (e.g. via ffmpeg) without rotation so it works in all browsers in the same way. Otherwise you might want to file an issue at Bugzilla. It's open for debate whether using a video as a data source for textures should honor the rotation metadata. It's definitely not a help if Firefox behaves differently compared to all major browsers.

[c4ntin]

Thanks for your quick response.
Reprocess videos seem to be the best short term solution....
I will let you know if the subject progress.

[Mugen87]

Closing this issue as a Won't fix.