Baking MirrorTexture to CubeTexture

Questions
1

I am trying to use MirrorTexture as texture of a ground in a scene with ~1000 draw calls, but I found that with each MirrorTexture reflecting meshes in my scene, it added ~1000 extra draw calls to my scene, making it suffers from some performance issues.
Since most meshes in my scene is static, is there a way to bake MirrorTexture to CubeTexture or something like that, so I can reduce draw calls.

2

I assume that at least one mesh is dynamic, else you would simply use a static texture?

In that case, you could add only the dynamic meshes to the mirror texture and mix this texture with a pre-rendered texture containing the static meshes, maybe by using a node material?

2 Likes
3

So do I have to bake the static texture using modeling software like blender, or it is possible to create the static texture in babylon.js?
MirrorTexture seems to be a regular texture with contents changed each frame, which is rendered on each frame based on the properties of active camera.

https://playground.babylonjs.com/#1YAIO7#5
https://playground.babylonjs.com/#1YAIO7#5876×608 23.6 KB

4

In fact, even for static meshes, you can’t bake the result to a texture because a mirror is view dependent: it will change based on the camera position / direction.

Try to change bakeTexture to false in this PG to see the difference:

2 Likes
5

Would it be possible to bake it to CubeTexture? Maybe move the camera to 6 fixed position, render the MirrorTexture, and capture the rendering result using methods like readPixels, and combine the 6 captured render result to a CubeTexture.

6

Yes, you could try to use a reflection probe to generate a cube texture for the static meshes:

1 Like
7

Can this apply on planes? I have tried but the rendering seemed incorrect.

the plane
the plane950×718 75 KB

8

You probably need a local cube map to make the reflection probe better fit the scene:

1 Like
9

Code added, but it does seems like the correct effect.

mirror.material.reflectionTexture.boundingBoxSize = bound.boundingBox.maximumWorld.subtract(bound.boundingBox.minimumWorld);
mirror.material.reflectionTexture.boundingBoxPosition = mirror.getAbsolutePosition();

the mirror
the mirror751×440 44.9 KB

10

You need to use a larger bounding box, and also set the probe position:

1 Like
11

This seems good, but how does the boundingBoxSize = new BABYLON.Vector3(6, 6, 6) calculated? Can this be calculated based on properites of models in this scene?

12

Yes, it could be calculated as the bounding box enclosing all the objects you want to be visible in the probe. For the position, it should be the center of this bounding box but setting the Y coordinate to be the Y position of the plane.

1 Like
13

I have tried with this calculation, but got boundingBoxSize with (3.4796489223636806, 3.625403110282009, 1.7996203628949377), and boundingBoxPosition with 0.16016328897401788, 0, -0.0000016653893812335063. What am I doing incorrent?

Code here:

    var min = new BABYLON.Vector3(Infinity, Infinity, Infinity),
        max = new BABYLON.Vector3(-Infinity, -Infinity, -Infinity);
    for (let mesh of probe.renderList) {
        let bound = mesh.getBoundingInfo();
        min.minimizeInPlace(bound.boundingBox.minimumWorld);
        max.maximizeInPlace(bound.boundingBox.maximumWorld);
    }
    var center = max.add(min).scale(0.5);
    center.y = mirror.getAbsolutePosition().y;
    mirror.material.reflectionTexture.boundingBoxSize = max.subtract(min);
    console.log( mirror.material.reflectionTexture.boundingBoxSize, center)
    mirror.material.reflectionTexture.boundingBoxPosition = center;
    probe.position = mirror.getAbsolutePosition();
14

All objects must be at their final position (the knot position is modified after you’ve performed your calculation) and you must call mesh.computeWorldMatrix(true) to make sure the world matrix is up to date. In addition, the probe position must be set to the same value as the bounding box position:

To avoid artifacts on the edge, you could perhaps calculate the bounding box a little differently, taking the main object (such as the knot) as the center of the bounding box and extending the box to encompass all other objects.

In the PG, I’ve displayed the bounding box (in transparency) as well as the position of the probe (with a small sphere) to better see what’s going on.

Note: artifacts are limited if objects are further from the mirror :

1 Like
15

May I ask if there is a way to improve the reflection effect, especially when the range of reflected objects is large？

16

Maybe you can try SSR?

1 Like