How to rotate EquiRectangularCubeTexture?

Questions
1

I’m using EquiRectangularCubeTexture as a reflection texture in my scene with PBRMaterials.

The EquiRectangularCubeTexture does not have a rotateY property. How can I rotate the texture 180 degrees?

See playground link from docs for repro, etc. https://playground.babylonjs.com/#RY8LDL#32

1 Like
2

Iirc it’s not possible to rotate it, but let me tag @sebavan to check :slight_smile:

3

As a workaround you may just rotate the image itself on temp canvas.

let rotateImage = () => {
            // Create canvas context.
            let ctx = canvas.getContext("2d");	

            // Assign width and height.
            canvas.width = img.width;
            canvas.height = img.height;

            ctx.translate(canvas.width / 2,canvas.height / 2);

            // Rotate the image and draw it on the canvas. 
                // (I am not showing the canvas on the webpage.
            ctx.rotate(Math.PI);
            ctx.drawImage(img, -img.width / 2, -img.height / 2);
        }
4

Thanks for the answer @labris .

IIUC you are suggesting to first rotate the image on a temp canvas and then use Canvas API methods to get the image data and feed that back to the equirectangular texture. Did I get that right?

That makes a lot of sense.

5

If you cannot rotate the texture before loading with some external tools, it seems the valid way to go.

1 Like
6

I would not recommend to use EquiRectangularCubeTexture with PBR as they are not prefiltered and do not have HDR support.

3 Likes
7

Thanks @sebavan for the recommendation.

I ended up going with a .env file instead. The issue I’m facing is I’m not sure how to compress the .env file as the hdr image used to create the env file is too large.

Any recommendations on how to resize and / or texture compress like etc1s the .env files?

8

https://www.babylonjs.com/tools/ibl/

If HDR is really large probably it is better to lower the resolution?

9

Yes, bouncing on @sebavan input, I faced the same problem and chose to turn it into an hdr. If you don’t have the original, there are tools such as i.e. flexify for PSD that can help you turn an equirectangular into panoramic and make an .hdr cube from there. With the hdr or pre-filtered you can use ‘setReflectionTextureMatrix(BABYLON.Matrix.RotationY(Math.PI));’ to rotate it to your likin.

The other option is to simply rotate the skybox. But then, of course, you will need to work you scene and cam views from this base.