How to reverse backUVs image in Babylon.js (Y axis)?

Question

After spliting my image in half and rotating it, I see mirrored image, I can't find a soultion for my problem.

On inuput I have image like this: https://i.imgur.com/YBjMY49.png And after rotating by Y axis I have back like this: https://i.imgur.com/agyCAiW.png

I already tried inverting image using invertY and multiple vector by -1, but none of this works.

function defineCards (imgPath, scene)
{
    let f = new BABYLON.Vector4(0.5, 0, 1, 1);
    let b = new BABYLON.Vector4(0, 0, 0.5, 1);    

    let plane = BABYLON.MeshBuilder.CreatePlane("plane", {height:1.5, width: 1.05, sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: f, backUVs: b}, scene);

    let mat = new BABYLON.StandardMaterial("", scene);
    mat.diffuseTexture = new BABYLON.Texture(imgPath, scene);
    plane.material = mat;

    return plane;
}
...
...
...
animation = new BABYLON.Animation("animationPlane1", "rotation.y", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

I expect for the image not to be reversed.

Thank you.

Answer 1

You need to swap the second and fourth parameters.

Instead of this:

let f = new BABYLON.Vector4(0.5, 0, 1, 1);

You should have something like this:

let f = new BABYLON.Vector4(0.5, 1, 1, 0);