# ReflectionTexture in a viewpoint-based mesh

**URL:** https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747
**Category:** Questions
**Tags:** material, skybox, reflections
**Created:** [April 17, 2024, 2:18am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747 "2024-04-17T02:18:38Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![eCodant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecodant/32/38316_2.png) [@eCodant](https://forum.babylonjs.com/u/eCodant)
#### Post date: [April 17, 2024, 2:18am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/1 "2024-04-17T02:18:38Z")

</div>

**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**](https://axeon.fr/CLIENT/ROXIM/Montpellier/#/VRRT/index.html). 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**](https://www.babylonjs-playground.com/#DXKYSE) is the playground. It’s the same code from [**this**  **post**](https://www.html5gamedevs.com/topic/39558-cubemap-skybox_mode-projection-origin/), 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!

---

<div class="post-metadata">

### Author: ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)
#### Post date: [April 17, 2024, 8:15am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/2 "2024-04-17T08:15:34Z")

</div>

I think this post may help:

> [@How could I create this 360 panorama transition effect using bablylon.js?](https://forum.babylonjs.com/t/how-could-i-create-this-360-panorama-transition-effect-using-bablylon-js/10156/3):
>
> Hi, [I made this effect in Babylon](http://axeon.fr/CLIENT/ROXIM/Montpellier/#/VRRT/index.html) I will try to explain the process but I should say it’s tricky and required a lot of 3D skills :p… The main point is to use high quality rendering (CubeTexture) for several hotspots on the scene. So you will have maximum quality of rendering (but a lot of images to download) We used Unreal to generate the Cube Textures export a very basic geometry of the scene (like the bounding box of each mesh). The basic geometry is a collision mesh and we use a standa…

---

<div class="post-metadata">

### Author: ![eCodant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecodant/32/38316_2.png) [@eCodant](https://forum.babylonjs.com/u/eCodant)
#### Post date: [April 17, 2024, 7:13pm UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/3 "2024-04-17T19:13:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)
#### Post date: [April 18, 2024, 12:18am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/4 "2024-04-18T00:18:16Z")

</div>

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](https://www.babylonjs-playground.com/#DXKYSE#1) (see L46) 😅

Good luck !

---

<div class="post-metadata">

### Author: ![eCodant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecodant/32/38316_2.png) [@eCodant](https://forum.babylonjs.com/u/eCodant)
#### Post date: [April 18, 2024, 3:30am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/5 "2024-04-18T03:30:28Z")

</div>

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](https://www.babylonjs-playground.com/#DXKYSE#2), sorry to bother you, but I want to create the transition effect and you mentioned in [this](https://forum.babylonjs.com/t/how-could-i-create-this-360-panorama-transition-effect-using-bablylon-js/10156/3) 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.

---

<div class="post-metadata">

### Author: ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)
#### Post date: [April 18, 2024, 8:30am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/6 "2024-04-18T08:30:00Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![eCodant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecodant/32/38316_2.png) [@eCodant](https://forum.babylonjs.com/u/eCodant)
#### Post date: [April 20, 2024, 3:24am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/7 "2024-04-20T03:24:47Z")

</div>

Thank so much, based on your suggestions I was able to achieve the expected transition effect [**PG**](https://www.babylonjs-playground.com/#F77J2B#1), 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?

---

<div class="post-metadata">

### Author: ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)
#### Post date: [April 22, 2024, 7:01am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/8 "2024-04-22T07:01:05Z")

</div>

👏 👏

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.

---

<div class="post-metadata">

### Author: ![eCodant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecodant/32/38316_2.png) [@eCodant](https://forum.babylonjs.com/u/eCodant)
#### Post date: [May 10, 2024, 1:23am UTC](https://forum.babylonjs.com/t/reflectiontexture-in-a-viewpoint-based-mesh/49747/9 "2024-05-10T01:23:19Z")

</div>

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**](https://www.babylonjs-playground.com/#F77J2B#2) what I’ve been doing. I’m planning to work on a better one, but really, thanks for the assist. I really appreciate it
