Toggle Materials (aka dispose / remove and revert / show again)

Hi there, I am a FE-Dev and relatively new to BabylonJS. I’m currently working on a feature of our software, where a construction pit is 3D-laser scanned and the resulting model is displayed in a part of our React App.

What I want to achieve is a possibility to hide all materials on all meshes, so that the model (delivered as a .glb by the way) is displayed “naked”.

I already found out how to remove the materials (setting them null like).

mesh.material = null;
mesh.material.dispose(true, true);

but there seems no native BabylonJS way to reverse that, aka show the material again?

I found quite the similiar question here, but I don’t want to just grayscale the scene.

What I could do is just save all the meshes and the corresponding materials and re-apply them, but that seems quite hacky and not very perfomant?

Btw, I’m also using react-babylonjs if that info is of any help.

Cheers and thank you in advance.

you can store the material as part of the metadata during the time it is hidden and restore it later :slight_smile:

I would suggest to rely on a default material which is PBR too to prevent any weird looking switch when you go from one material to the next.

Hello and welcome!

You can actually use the metadata field for that:

mesh.metadata = {oldMaterial: mesh.material};
mesh.material = null;

then to restore:

mesh.material = mesh.metadata.oldMaterial

Hope that helps :wink:


@Deltakosh @sebavan Thanks for welcoming me and the fast reply! That does the trick!