Video Texture on Safari causes this weird lines

Hello Everyone,
I’m currently working on some VideoTexture and for some reason on Safari the video texture is not showing properly.

Here it is on Chrome:

While in Safari, it looks like this:

I tried it on the playground but it seems from there it works okay as well (But I’ll try to create a playground for this).

Would you know what could possibly cause this?.
Any inputs is greatly appreciated!

(Edit) I found the cause of the issue! It seems the culprit is the videoTexture.vScale (issue can be seen on Safari on this playground). When it is set to -1, it causes this on Safari. But I need it in order to have the video not inverted. Is there any other way to solve this issue?

You can update the y coordinates of the uvs of your plane:

https://www.babylonjs-playground.com/#08A2BS#120

Why not using the invertY parameter of the texture itself: https://www.babylonjs-playground.com/#08A2BS#121

That could also work but another question here is why does it not work only on Safari but for the rest of the browsers it is okay?

Probably because Safari is bugged…

Have you tried with the WebGL1 engine? WebGL2 is very bugged in Safari at the time…

Video texture on Safari only support [0…1] UV range. It’s a known issue that’s on my todo list.

1 Like

Actually it is the case, all uvs of the plane are in the 0…1 range in the PG.

video texture sampling mode is clamped on Safari for some reason.

Ah my bad, there’s the -1 multiplier I forgot…

Can you check my PG, I use the way to update the y coordinates of the uvs but it is the same thing on my iphone.

After I change the uvs of that mesh, it works.

In this PG the v coordinates are already upside down it seems, so you don’t need to do 1-v on them.