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:
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.
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.
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
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.