ReflectionTexture in a viewpoint-based mesh

Questions
, ,
1

Reflection Texture on a mesh

Hi, first of all, thank you for taking the time to read my post. I’m new to Babylon.js and I’m currently working on a project where I’m trying to achieve something similar to this. I’m trying to understand how the reflection CubeTexture works on a custom mesh so, I’ve exported a custom mesh from Blender to Baby, the mesh is the interior of an apartment with several walls, similar to the link provided.

What I understand until now, is that the material of the mesh projects the CubeTexture and in order to prevent the projection from getting deformed, it must be moved with the translation of the reflection. I’ve attempted to implement this, but I haven’t been able to achieve the expected results here is the playground. It’s the same code from this post, but with some assets changed. With this context the my question is: What am I doing wrong? And what concepts do I need to understand to achieve a result similar to the first link?

Any help would be greatly appreciated. Thank you in advance!

2

I think this post may help:

3

Thanks, actually is that I’ve seen that post, from there I got the code I used, but I don’t get the same results, maybe there is something I don’t fully understand, I’m stuck.

4

Hi @eCodant, your reflectionMatrix is not right <=> it should represent the center of your skybox <=> the camera position. I’m not sure the geometry you provided match with the CubeTexture because I tried to find it but this is the best I could do (see L46) :sweat_smile:

Good luck !

1 Like
5

You’re right, thank you. I’ve made some changes in the reflectionMatrix and ree exported the mesh and it works fine and I’ve added some buttons to move between CubesTextures here is the PG, sorry to bother you, but I want to create the transition effect and you mentioned in this post that the transition effect can be done by cloning the mesh and make a fadeOut / In between the current position and the destination which is great, but how should I do to sync everything correctly? I mean, based on the code that I have, I think that maybe there is a delay between the change of the CubeTextures and I want everything to be synchronized and smoothly.

6

Nice one good job !

In your scene you could clone the mesh Collision Apto. Let say we now have 2 meshes collision1 and collision2.

  • collision1.visibility = 1
  • collision2.visibility = 0
  • When you want to go to the next point position2 you preload the cubeTexture2 and when it’s loaded :
    • apply cubeTexture2 to collision2.
    • apply a synchronized animation :
      • collision2.visibility → 1
      • collision1.visibility → 0
      • camera.position → position2

Let us know when you succeed, your playground could be helpfull for the community :slight_smile:

1 Like
7

Thank so much, based on your suggestions I was able to achieve the expected transition effect PG, I just set up the logic for the “Next” button, however I can’t think how to go back using the two meshes, as one of them is loaded with the next CubeTexture while the current one has the current CubeTexture, so there is nothing behind them in case I want to go back, what logic could I follow to make this work?

8

:clap: :clap:

You already made the hardest part !

Maybe you could implement a next() and a back() functions to

  • check your cubesTexturesURL to find which texture to preload
  • find the position and the reflectionMatrix

Then an apply() function to apply this parameters to the scene.

1 Like
9

Hey, sorry for putting this on the back burner. Thanks for the help, I’m gonna give that approach a shot. I’ve been preloading each CubeTexture, which isn’t better way to do it. It works, but I would like to improve it. For anyone who’s looking a simple approach for something like this, here’s what I’ve been doing. I’m planning to work on a better one, but really, thanks for the assist. I really appreciate it

2 Likes