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

Questions
1

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;
or
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.

2

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.

3

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:

3 Likes
4

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

2 Likes