Rerverse side a material of a mesh

[Jez]

Hello!

I’m projecting a skybox into a mesh. The skybox looks normal but when I project to the mesh this one it reverses the direction like the following photos:

This one is just the skybox in the right side

The second one is the projection into the mesh and the side was flipped. So it dind’t match the mesh.

I could try to flip the mesh but I need the skybox too because the mesh has some holes so I nee dthe skybox in background in case of holes.

This is the main code, I will try to get a PG in the near futur:

BABYLON.SceneLoader.AppendAsync("model/", "Monday-test-1.glb", scene)
        .then(function (scene) {
            console.log(scene);
            meshPos = scene.getMeshByName("__root__").position;
            // Offset the skybox center.
            console.log("mesh Pos "+ meshPos);
            var point1ToPoint2 = meshPos.subtract(camera.position);
            console.log("p1top2 "+point1ToPoint2);
            var reflectionMatrix = BABYLON.Matrix.Invert(BABYLON.Matrix.Translation(point1ToPoint2.x, -point1ToPoint2.y, point1ToPoint2.z));
            console.log("refMatrix"+reflectionMatrix);
            meshMat = new BABYLON.StandardMaterial("mat", scene);
            var tempSkybox = skyboxMaterial;
            //tempSkybox.sideOrientation = 0;
            // tempSkybox.scaling.x = -1;
            meshMat.reflectionTexture = tempSkybox.reflectionTexture;
            //meshMat.reflectionTexture.invertZ = true;
                                    
            meshMat.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
                                    
             meshMat.reflectionTexture.setReflectionTextureMatrix(reflectionMatrix);
             meshMat.backFaceCulling = false;
             meshMat.disableLighting = true;
                                    

             //meshMat.reflectionTexture.rotationY = Math.PI;
                                    
             //meshMat.invertZ = true;
             //scene.useRightHandSystem = true;
             //meshMat.sideOrientation = BABYLON.Material.AntiClockWiseSideOrientation;
             //meshMat.reflectionTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;


             setVisibilityOfMeshes(scene);
        })

I already try to change sideOrientation of the material but doesn’t work.
By the way I followed this link to help me.

[sebavan]

The PG would be amazing

[Jez]

Hello,

So this is the PG,
It’s come from this PG,

What you see when you play it it’s this:

So What I want it’s to flip the material finally to get this, and I want to flip only the material not the mesh the mesh should be at the same place with the same orientation:

[JohnK]

Line 54 does reflect the image but perhaps not how you wanted it https://www.babylonjs-playground.com/#JCZIXE#17

[Jez]

Hey hello JohnK!

First thanks for your help!
But it’s not this kind of flip I want, finally here the material just rotate? Tell me if I’m wrong.

If we check the building with the moutain in background, the building is still at the right of the mountain and what I want is to see the building at the left of the mountain like apply a mirror effect to the material and not just a rotation.

[JohnK]

Yes you are right, my brain must have skipped a beat or two

[sebavan]

Could you not flip the source texture ???

[jerome]

not sure to get the goal … but doesn’t uScale = -1 simply do the job ?

[EDIT] negative values seem to not work as expected with dynamicTexture. Maybe they work with standard images… I can remember they used to at some time.

[EDIT 2] works https://www.babylonjs-playground.com/#RK0W5S#31 (line 11) … for 2D, right

[sebavan]

yup uScale is only for 2d not cube as it kind of tricks the UV setup.

You could probably modify the reflection matrix to flip x:
https://www.babylonjs-playground.com/#JCZIXE#18

Else flipping the source would be the easiest and cheapest as no gpu transform would be required.

[Jez]

@JohnK Ahah don’t worry you already helped me a lot for others queries

@sebavan

@sebavan

Could you not flip the source texture ???

Unfortunately I need to keep the source texture in the original orientation

And the reflection matrix flip x work really well thank you! I thought about it too but in my real project (not in the PG) I already set the reflection matrix with an other matrix to offset it as you did in this PG @sebavan with the following code:

// Offset the skybox center.
var point1ToPoint2 = cameraPoint02.position.subtract(cameraPoint01.position);
var reflectionMatrix = BABYLON.Matrix.Translation(point1ToPoint2.x, point1ToPoint2.y, point1ToPoint2.z);
otherOriginRefMat.reflectionTexture.setReflectionTextureMatrix(reflectionMatrix);

So I tried to multiply the Matrix Identity with Matrix.m[0] = -1 with the offset reflectionMatrix but it didn’t work.

So Maybe I don’t do it correctly or maybe it’s not at all what I have to do.
This is the part of the code where I multiplied the two matrixes:

var matIdentity = BABYLON.Matrix.Identity();
        matIdentity.m[0] = -1;
        var reflectionMatrix = BABYLON.Matrix.Translation(point1ToPoint2.x, point1ToPoint2.y, point1ToPoint2.z);
        reflectionMatrix.multiplyToRef(matIdentity,reflectionMatrix);
        meshMat.reflectionTexture.setReflectionTextureMatrix(reflectionMatrix);

By the way @jerome merci tout de meme cela va me servir dans un autre projet aussi, le trick pour la 2D

[sebavan]

I will see if I can find something for it but did you try changing the matrix multiplication order ?

[JohnK]

@sebavan and @Jez I have been having a play with the reflectionMatrix https://www.babylonjs-playground.com/#JCZIXE#19

Changing to negative values seems to only have an effect in CUBIC_MODE and PLANAR_MODE, SKYBOX_MODE seems to ignore negatives.

In the above PG change any of the 1s in the vectors on lines 55, 56, 57 to -1s and you will see the change.

Now on line 61 change CUBIC_MODE to SKYBOX_MODE and whether you use 1 or -1 makes no difference.

However when in SKYBOX_MODE changing values does make a difference provided all the values are not the same. Try changing one of the 1s to a 2 or 0.5 or anything you fancy and you will see the distortion. Changing any values to negative ones still makes no difference. Bug or expected I do not know.

EDIT By the way I still think the idea of having one set of images for the ‘sky’ and a reflected set of those images for the ‘box’ the simplest idea.