Invert CubeTextures

Yo @Deltakosh and @trevordev … I got a situation where i need to FLIP HORIZONTAL the CubeTextures used for 6 Sided Skyboxes as well as Pre Filtered Environments.

I am using GLTF as a scene file. that means it has a root node with a negative Z scale.

Well the negative Z scaling messes up physics simulations. If i where to drop a cylinder shape on to a slightly rotated forward cube shape. The cylinder would contact the cube and fall forward to the ground as expected. But with negative z scaling, the cylinder would fall behind the cube even though the cube is rotated forward.

@trevordev pointed out this negative z scale is messing with physics and i should FORCE the scene into right handed mode using scene.useRighHandedSystem = true BEFORE loading the scene. That worked… now physics object fall the right way.

But this now FLIPPED all my cubemap textures in the scene. Both the skybox and the environment. Is there some kind of property of function that can used to flip the textures horizontally. If o manually use my Mac using Preview to open the textures in the scene file and do Tools->Flip Horizontal that fixes the issues… So i know is a horizontal flip issue with the CubeTexture and the scene being forced into right hand mode.

Here is the original Unity shot. Not the horizontal rotation of the clouds in the sky and the little brown bush reflected in the sphere:

IF I DO NOT FORCE RIGHT HANDED:

AND FINALLY WHEN I FORCE RIGHT HANDED:

As you can see the force right handed cube textures are flipped horizontally. The Rotation-Y is fine. Its at 3.14 so the skybox and reflection show the proper orientation on the world… Again they are just flipped horizontally.

UPDATE: Also note the shadow have HOLES in them.

Can you please show me how to fix this :slight_smile:

I don’t know about the shadows, but this seems to work for inverting:

The skybox (skybox.scaling.x = -1;)
https://www.babylonjs-playground.com/#UU7RQ#296

The prefiltered (hdrTexture.invertZ = true;):

https://playground.babylonjs.com/#CGA05F#44

@MackeyK24 can you repro the shadow issue on the playground. I am not seeing it https://www.babylonjs-playground.com/#IFYDRS#32 .

How are you loading the skybox/textures? Some may be bugs in babylon as some the loaders should look at the handedness of the scene but there is also a chance you should do it manually how Gijs mentioned. If you could create a playground that repros each issue it would be easier to determine which is solution is ideal.

Yo @Gijs … The skybox.scaling.x *= -1 worked perfect… But the ddsTexture.invertZ DID NOT flip the image reflected.

FYI… Here is how i create environments:

                // Setup Default Scene Environment
                if (skybox.hasOwnProperty("environment") && skybox.environment != null)  {
                    const environment:any = skybox.environment;
                    if (environment != null) {
                        const envname:string = (environment.hasOwnProperty("name") && environment.name != null && environment.name !== "") ? environment.name : "SkyboxEnvironment";
                        const envtype:string = (environment.hasOwnProperty("type") && environment.type != null && environment.type !== "") ? environment.type : null;
                        const envpath:string = (environment.hasOwnProperty("url") && environment.url != null && environment.url !== "") ? (skyurl + environment.url) : null;
                        if (envtype != null && envtype !== "") {
                            try {
                                if (envtype === "image/dds") {
                                    var ddsTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(envpath, this._loader.babylonScene);
                                    ddsTexture.name = envname;
                                    ddsTexture.gammaSpace = false;
                                    if (BABYLON.SceneManager.HandSystem <= 0) { 
                                        ddsTexture.rotationY = Math.PI;
                                        ddsTexture.invertZ = true;
                                    }
                                    this._loader.babylonScene.environmentTexture = ddsTexture;
                                } else if (envtype === "image/env") {
                                    var envTexture = new BABYLON.CubeTexture(envpath, this._loader.babylonScene);
                                    envTexture.name = envname;
                                    envTexture.gammaSpace = false;
                                    if (BABYLON.SceneManager.HandSystem <= 0) { 
                                        envTexture.rotationY = Math.PI;
                                        envTexture.invertZ = true;
                                    }
                                    this._loader.babylonScene.environmentTexture = envTexture;
                                } else {
                                    BABYLON.Tools.Warn("Unsupported environment texture type: " + envtype);
                                }
                                // Support Spherical Polynomial Scaling
                                if (this._loader.babylonScene.environmentTexture != null && polynomial !== 1.0) {
                                    const scene:BABYLON.Scene = this._loader.babylonScene;
                                    if (scene.isReady()) scene.environmentTexture.sphericalPolynomial.scale(polynomial);
                                    else scene.onReadyObservable.addOnce(() => { scene.environmentTexture.sphericalPolynomial.scale(polynomial); });
                                }    
                            } catch (e2) {
                                console.warn(e2);
                            }
                        }
                    }
                }

Yo @Gijs … It look like the invertZ DOES flip from left to right … But only shows correctly when useRightHandSystem = false.

Example Shot… Notice the PROJECTION of the background in sphere… its strait and clear and the bushes are on the RIGHT:

Now this is the original unity shot … which looks good of course:

But when i set scene.useRightHandSystem = true; /// Which i need for GLTF physics to work right… I also do a ddsTexture.invertZ = true… Which does flip it… But the PROJECTION of the reflected backgound looks all funky… Like the cubemab BOX and POS are out of wack:

Yo @Deltakosh or @sebavan or @trevordev … If you see anything… Let me know :slight_smile:

Are you able to repro this? I tried here https://playground.babylonjs.com/#8MGKWK#127 but no luck.

I will try to repo on playground… gonna take a sec … its a toolkit project

Hey hello did you find a solution finally? I have the same problem on a cubetexture projected into a mesh.