Reflection Matrix Inverted/Not Displaying Correctly

Questions
1

Hi there

I hope some of you really smart devs can help! Paging @sharp @Vinc3r

I am creating a 360 style tour using a base mesh and projecting a cube map from the camera location the cube map was generated from.

Something about how I am calculting my Reflection Matrix is not working correctly. I am subtracting the camera position from the mesh position and it is so close, but appears to be flipped vertically and I cannot figure it out. If I play with the Y value, say change it to -150 instead of 150, then I drop low enough to see the clean cube map (no geo messing it up as I am underneath), but it is upside down.

I have a playground of the problem - https://www.babylonjs-playground.com/#F7RLE8

Ignore the setTimeout, it is a quick and dirty for the playground to a) show me the base mesh quickly and b) wait for the everything to load before called.

2

I think it has to do witg glTF convention (Y rot of 180Ā° & Y scale -1).

Here the projection is quite rightā€¦ but the matrix need to be rotated 180Ā° along Z (or X ?): https://www.babylonjs-playground.com/#F7RLE8#2

(notice the * -1 line 20, Iā€™m not sure if the getAbsolutePosition() line 19 is necessary)

The simplest solution is to use .babylon format. For glTF you have to burn some neurons to know in which way the matrix have ot be rotated :smile: (you can see Iā€™ve tried this in my PG, without success)

3

This looks so all magic to me :slight_smile:

4

Thanks heaps for having a look. That mesh.enableEdgesRendering(); is such a cool trick!

You seem to be really close, the reflection is in the right position just upside down.

Also off topic but curious about your universal camera doing a pivot? I always thought I should be using arcrotate for that?

5

Also the .gltf/.glb should work just fine. We are using a plugin called Layama that does all this for us in Unreal, and spits out a babylon web app ready to go, but wanting to recode ourselves to make some tweaks. They use this exact mesh file with this exact cube map and camera position

6

Looking at your rotation code at line 27 @Vinc3r I think rotating 180 on X does flip the reflection matrix, but it also resets the centre of the projection. Any ideas on how to flip it but keep the projection centre that is based on the mesh.subtract(cameraPosition)?

7

Iā€™ve used a free camera 'cause the cam needs to not move from its position

free camera

arc rotate camera

When it comes to matrix operations, I have to say that Iā€™m more in ā€œI donā€™t know what Iā€™m doingā€ than ā€œIā€™m a mathematical expertā€ :smile: So I canā€™t help about how to fix this even if I understand the logic we have to do here.

8

By the way, instead of using the setTimeout trick, you can use the promise functionnality https://www.babylonjs-playground.com/#F7RLE8#6

9

Yes I did see the async import returns a promise. Man Iā€™ve tried so many ways to flip the matrix but I canā€™t seem to do anything without messing with the reflection centre. I also have absolutely no idea what is going on with the matrices so I am really just poking and prodding.

10

A dirty trick could be to modify skybox jpegs according to the current result :sweat_smile:

11

Hi @m-silver, I agree you can give a try to the @Vinc3r trick, it is not that dirty because changing the names of the jpegs in your export script is always a better solution than computing matrices :p.
You can use the parameter ā€˜filesā€™ in the constructor CubeTexture | Babylon.js Documentation like this :

let cubeTexture = new BABYLON.CubeTexture(url, scene, undefined, undefined, [
        url + "_px." + extension,
        url + "_py." + extension,
        url + "_pz." + extension,
        url + "_nx." + extension,
        url + "_ny." + extension,
        url + "_nz." + extension
      ]

then switch (_px, _nx) etc.

1 Like
12

Yeah playing with reflectionMatrix is always an intense experience :joy:

13

I tried this and it actually jumbles everything completely. The current reflection matrix is in the right place, just upside down, so if swap the px and nx it goes all over the place - see here Babylon.js Playground

14

cc @RaananW who is amazing with maths :smiley:

15

I do hope all of my math teachers in the past see that!!

Well, playing around with it a bit - Reflection Matrix Inverted | Babylon.js Playground (babylonjs-playground.com), but reflecting a skybox to a 3D mesh does have its downsides (likeā€¦ well, anything occluded will look weird).

1 Like
16

Your fix but with a freecam instead of an arcrot, to keep point of view in the center of the cubemap projection https://www.babylonjs-playground.com/#F7RLE8#8

1 Like