How to connect reflectionTexture rotation to ArcRotateCamera rotation?

Hi everyone!

I would like to connect the reflectionTexture rotation to the ArcRotateCamera rotation.

This way, when the camera rotates around an object, the HDR light environment also rotates which creates a nice effect on the materials.

I came up with this:

.reflectionTexture.rotationY = camera.rotation.y

but ‘camera.rotation.y’ is always 0, no matter how I rotate the camera.

Any feedback will be greatly appreciated, thanks!

arcRotateCamera is using following properties

  • alpha
  • beta
  • radius

So I guess in your case you want camera.alpha not camera.rotation.

Wooof that was fast Nogalo, thank you! (I didn’t catch that before in the manual, was looking at the reference manual).

(reflectionTexture.rotationY = camera.alpha does the trick indeed)

I was wondering, what would be the equivalent of the beta value in the reflectionTexture rotation?

Because rotationX or rotationZ doesn’t exist.

But when you rotate the camera along the beta arc, it would be great if the reflectionTexture rotation would also rotate in that direction.

Thanks!

Hmm, I think that rotationY is the only property you can access. So there is no equivalent.

I am not sure if there is workaround for that. Maybe should wait for someone else to answer that. I did some tests, but nothing worked.

Thank you for looking into it!

Maybe the only ‘true’ solution would be to not rotate the camera, but the object itself.

I checked that out a year ago, but the ArcRotateCamera is really beautifully programmed and I couldn’t find an ‘object-rotation’ solution equally smooth.

You can overrige the getReflectionTextureMatrix method of the reflection texture and return any matrix you want (like the one from the camera):

https://www.babylonjs-playground.com/#Z1VL3V#236

Hi Evgeni_Popov, that is almost perfect, thank you!! Almost, because I would also like to ‘adjust’ the horizontal orientation of the ReflectionTextureMatrix along the camera’s alpha.

I probably have to multiply or substract something from the camera transformation matrix, and I tried to understand the documentation, but I have to admit those matrices really scare me haha!

What would I need to do to, for example, ‘adjust’ the horizontal orientation by 20 degrees?

Thank you so much!

You can create a matrix that corresponds to a 20° rotation around X and multiply the camera transformation by this matrix:

https://www.babylonjs-playground.com/#Z1VL3V#237

Brilliant! Thanks again!

Hi @Evgeni_Popov, I’ve found an issue with your current solution.

There seems to be a difference in the way the HDR is deformed spherically after applying your code.

This is the original setup:
https://www.babylonjs-playground.com/#Z1VL3V#8

and this shows the difference after applying the new transformation matrix (I’m using RotationY instead of RotationX because I want to rotate the image horizontally):
https://www.babylonjs-playground.com/#Z1VL3V#239

The difference can be seen on the building on the left that has a different deformation.

Unfortunately this leads to a faulty lighting on my objects.

Does this have to do with the position of the camera? Is there a way to fix it, to keep the original HDR deformation?

Thanks again!

In fact it is the view matrix that has to be used, not the transformation matrix:

https://www.babylonjs-playground.com/#Z1VL3V#241

I can’t thank you enough @Evgeni_Popov! With every solution I feel there is this vast (for me) untouched potential with Babylon.js, but I only have so much time to study… :relaxed:

1 Like