How to Achieve Multiple Reflections Between Two Mirrors in Babylon.js

Questions
,
1

I’m working on a project in Babylon.js where I need to create an effect of two mirrors reflecting each other multiple times, ideally around 10 times, to achieve an infinite mirror effect. However, I’m having trouble setting this up correctly. The reflections don’t seem to be aligning as expected, and the reflections appear to be moving in the opposite direction from reality.

var planeMirrorRight = BABYLON.MeshBuilder.CreatePlane(“planeMirrorRight”, {height: 10, width: 10}, scene);
planeMirrorRight.position = new BABYLON.Vector3(5, 0, 0);
planeMirrorRight.rotation.y = Math.PI / 2;
planeMirrorRight.material = new BABYLON.StandardMaterial(“planeMirrorMaterialRight”, scene);
planeMirrorRight.material.reflectionTexture = new BABYLON.MirrorTexture(“planeMirrorRight”, 1024, scene, true);
planeMirrorRight.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(1.0, 0, 0, -5.0);
planeMirrorRight.material.reflectionTexture.renderList = [greenSphere, yellowSphere, blueSphere, knot, mirror];
planeMirrorRight.material.reflectionTexture.level = 1.0;

var planeMirrorLeft = BABYLON.MeshBuilder.CreatePlane(“planeMirrorLeft”, {height: 10, width: 10}, scene);
planeMirrorLeft.position = new BABYLON.Vector3(-5, 0, 0);
planeMirrorLeft.rotation.y = -Math.PI / 2;
planeMirrorLeft.material = new BABYLON.StandardMaterial(“planeMirrorMaterialLeft”, scene);
planeMirrorLeft.material.reflectionTexture = new BABYLON.MirrorTexture(“planeMirrorLeft”, 1024, scene, true);
planeMirrorLeft.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(-1.0, 0, 0, -5.0);
planeMirrorLeft.material.reflectionTexture.renderList = [greenSphere, yellowSphere, blueSphere, knot, mirror, planeMirrorRight];
planeMirrorLeft.material.reflectionTexture.level = 1.0;

// Add mirrors to each other’s render list
mirror.material.reflectionTexture.renderList.push(planeMirrorRight);
mirror.material.reflectionTexture.renderList.push(planeMirrorLeft);
planeMirrorRight.material.reflectionTexture.renderList.push(planeMirrorLeft);
planeMirrorRight.material.reflectionTexture.renderList.push(mirror);
planeMirrorLeft.material.reflectionTexture.renderList.push(planeMirrorRight);
planeMirrorLeft.material.reflectionTexture.renderList.push(mirror);

2

Hello :slight_smile:

  • Please provide a Playground of your current state (better for us to help, than code in the topic), for example : Playground

  • Also, keep in mind that Babylon.JS is not a RayTracing Renderer : real light bounces are not calculated. The BABYLON.MirrorTexture allows a trick where a “flipped” version of the objects (along the mirrorPlane) are rendered to the texture, but it’s not tracing any light rays, and it won’t “automatically” bounce 10 times or whatever.

  • To acheive what you want I guess the solution would be some kind of recursive loop of rendering RenderTargets textures between both mirror, for each single frame render of the scene.

++
Tricotou

3

and use the stencil to make the illussion of a flat mirror

4

Here is the example with recursive screenshots - https://igiuk.com/3d-utilities/scrshotmaker1/

1 Like