Is it possible to attach the mirror material to a mesh from a blender file without using glass?

I have a mirror mesh from a .glb file and using the glass which has mirrorMaterial attached is causing some problems (getting at 90 degrees when attached as a child node and giving the reflections of other side), so is it possible to assign the mirror material to the blender mesh without using the glass in between in order to have the realistic reflection while the mirror is moving?

cc @PatrickRyan

@PreciousCord03, do you have a PG that shows the issue you are dealing with? It’s kind of hard to debug what is happening without seeing what you are seeing.

Here’s the code.

var canvas = document.getElementById(“renderCanvas”);

    var startRenderLoop = function (engine, canvas) {
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                sceneToRender.render();
            }
        });
    }

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
    var createScene = function () {
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("camera1",0,1,10, new BABYLON.Vector3(0, 5, -10), scene);

camera.setTarget(BABYLON.Vector3.Zero());

camera.attachControl(canvas, true);


var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 1, segments: 32}, scene);
sphere.position.x = -10;
sphere.position.y = 1;

var sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere2", {diameter: 1, segments: 32}, scene);

sphere2.position.x = -1;
sphere2.position.y = 1;
sphere2.position.z = -1.8;

var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

var glass = BABYLON.MeshBuilder.CreatePlane("glass", {width: 10, height: 10}, scene);
glass.rotation.y = Math.PI/2;
glass.position = new BABYLON.Vector3(10,0,0);

glass.computeWorldMatrix(true);
var glass_worldMatrix = glass.getWorldMatrix();
var glass_vertexData = glass.getVerticesData("normal");
var glassNormal = new BABYLON.Vector3(glass_vertexData[0], glass_vertexData[1], glass_vertexData[2]);	

glassNormal = BABYLON.Vector3.TransformNormal(glassNormal, glass_worldMatrix)


var reflector = BABYLON.Plane.FromPositionAndNormal(glass.position, glassNormal.scale(-1));


var mirrorMaterial = new BABYLON.StandardMaterial("mirror", scene);
mirrorMaterial.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true);
mirrorMaterial.reflectionTexture.mirrorPlane = reflector;
mirrorMaterial.reflectionTexture.renderList = [sphere, ground, sphere2];
mirrorMaterial.reflectionTexture.level = 1;

glass.material = mirrorMaterial;
glass.isVisible = true;

BABYLON.SceneLoader.ImportMesh(“”,“”,“mirror_test_01.glb”, scene, function(newMeshes){
scene.getMeshByName(“Cube.001”).material = mirrorMaterial;
})
scene.debugLayer.show();

return scene;

};
window.initFunction = async function() {

                var asyncEngineCreation = async function() {
                    try {
                    return createDefaultEngine();
                    } catch(e) {
                    console.log("the available createEngine function failed. Creating the default engine instead");
                    return createDefaultEngine();
                    }
                }

                window.engine = await asyncEngineCreation();
    if (!engine) throw 'engine should not be null.';
    startRenderLoop(engine, canvas);
    window.scene = createScene();};
    initFunction().then(() => {sceneToRender = scene                    
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });


As you can see, the reflection on the mirror is from the glass as the distance between the sphere and the mirror is short. Is there any way that the mirrorMaterial can be applied directly to the mesh from the model?

A repro in the playground would help us help you :slight_smile:

You would need to change the mirror plane to set it according to your mesh Babylon.js docs

2 Likes


Clickbait :smiley: :smiley: :smiley: I fell for it too!

1 Like

Sorry for being late, I couldn’t upload the mirror animation(Blender model) in the playground as it was showing me the 404 error. So, here is the PG link without the model being loaded.
MirrorWithoutGlass | Babylon.js Playground (babylonjs.com)

I’m gonna attach a video of the same showcasing the issue.

As in the video, you can see that the reflection is way too in the distance even if the sphere is just next to the mirror and distance between the glass(turned on and off) and the sphere is greater than the mirror(animation) and the sphere(as the mirror shows the reflection from the glass). Is there any way to make the reflection from the mirror to appear as the glass is on the same position as the mirror(like can glass be the child of the mirror and when mirror moves, glass moves too and shows the reflection of objects the mirror is approaching to). In short, wherever the mirror goes, it shows the reflection realistically. Need help on this one…

You need to move the reflector from the code you shared according to your animation. It will need to be moved every frame at the position of the plane with the normal fitting the plane forward direction.

I believe the issue lies within the model itself. Can you zip and upload the model file here?

I fixed the "modelURL"modelURL error but the PG cannot access the file because you didn’t share it publicly.

@PreciousCord03 @PreciousCord02

@sebavan was referring to something like this:

if you move the mirror you have to move the reflector as well. If you’ll transform the mirror itself you’ll need to recalc the normal too.

Use toRef wherever possible when calculating stuff in the render loop. I didn’t bother (sry it’s 00:08 here) to optimize nor do the correct math to have a realistic reflection.

Yeah sure,
mirror_test_01.zip (2.4 KB)

I misunderstood your question a little bit. You basically want to turn some faces into mirror on your imported 3d mesh. Right? And to reflect things as the mirror animates…

Yeah, like if a cube is in front of the mirror, it shows cube in the reflection and if I move the same mirror to somewhere else and there is a sphere, the mirror should show the sphere in the reflection.

1 Like

1 Like

Thanks! One thing in the PG, the mirror gets into the cube a bit but in the mirror it looks like that the cube is far. Any way to solve that?

1 Like

Change cubeMirror.position to cubeMirror.absolutePosition

const reflector = BABYLON.Plane.FromPositionAndNormal(cubeMirror.absolutePosition, cubeMirrorNormal));

1 Like

Thank you so much!! All of you @sebavan @Cedric @roland @PatrickRyan !!!

2 Likes

You are welcome!

I suggest you to tide up the code. I was in a hurry while writing the PG and you can find non-sense as .scale(1) which doesn’t do anything useful :smiley: I bet you can optimize the code by using toRefs or something… :muscle:

Will do! Many thanks!!

1 Like