Video Texture on Safari causes this weird lines

Questions
1

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:

Screen Shot 2021-11-14 at 11.25.21 AM
Screen Shot 2021-11-14 at 11.25.21 AM1296×680 85.2 KB

While in Safari, it looks like this:

Screen Shot 2021-11-14 at 11.22.56 AM
Screen Shot 2021-11-14 at 11.22.56 AM1494×796 30.4 KB

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?

2

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

3

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

4

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?

5

Probably because Safari is bugged…

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

6

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

1 Like
7

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

8

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

9

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

10

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.

11

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

12

I recently had a similar issue with VideoTexture on iOS 14+ (regardless the browser), where VideoTexture seems not visible at all.
vScale fix mentioned here didn’t help with my issue. Then after loads of testing it turned out to be the texture vOffset value.
I still don’t understand why, but I had to set videoTexture.vOffset = -1 in order to make the videoTexture map correctly for all iOS devices.
This change won’t affect other environment (like macOS, Android etc.)
Hope this help any other people with similar issue and vScale fix didn’t work.

2 Likes