How to make mutilple mirror planes' textures render correctly?

const probe = new ReflectionProbe("main", 512, scene);
scene.onBeforeRenderObservable.add(() => {
  probe.position = camera.position;
});
SceneLoader.ImportmeshAsync('', modelUrl, filename, scene).then(result => {
  result.meshes.map(mesh => {
    probe.renderlist.push(mesh);
    if(mesh.name.includes('mirror')){
      const mirrorPBR = new PBRMaterial("pbr", scene);
      mirrorPBR.metallic = 1
      mirrorPBR.roughness = 0.0
      mirrorPBR.albedoColor = new Color3(0.41, 0.76, 1);
      mirrorPBR.reflectionTexture = probe.cubeTexture;
      mirrorPBR.realTimeFiltering = true;
      item.material = mirrorPBR
    }
  });
});

I have a scene with many mirror planes, these planes are defined within a GLTF file, and the most important thing is the camera can move. In this example, I tried to make a reflection probe and then set its position binded with camera. Then I realized the problem, for a mirror, a probe should be positioned at the opposite side to the plane. It will be kinda too complex to define everything if there are many mirror planes in a scene and I have no idea for curve mirror planes. Now I wonder, should there be another way to achieve that? How did this one made it? I had asked for its source code in another topic but sadly I can read nothing from that.

cc @sebavan @Evgeni_Popov might have some ideas?

If you want to reproduce the car example, you can simply use an environment cube. The example uses a static cube as the reflection texture:

image

image

You can use a probe to generate the cube if you want, but it should not move with the camera, the probe should capture the scene from a static position.

We have this example in the doc which is using a probe with a mirror:

1 Like