Showing and hiding mesh children(layers?)

[Bladetrick]

Hello,

I noticed that when I am working with a pre-existing model in some 3D creating environment, like 3DS Max, there are a lot of objects have what appear to be layers or children (not sure what the terminology is here). In the environment you're able to turn on and off the visibility of these layers. Like in the picture attached.

I want to emulate what is in the picture but using Babylon Js. So that a user can load up a model and decide which layers are visible. Is there an example that already exists that does this?

Appreciate the help.

 

[Bladetrick]

If there isn't a technical term for it already, I'd like to propose... Mesh Babies!

[Arte]

Hi @Bladetrick

Best option for your is babylon js tags

https://doc.babylonjs.com/resources/tags

"Tags in babylon.js can be used to categorize/group elements, and helper functions are provided to retrieve/gather tagged elements."

[babbleon]

Hi @Bladetrick, may I ask - what is the UX you're using there with the tree?

[Bladetrick]

Babbleon, its 3ds MAX 2017, i think.  

I exported it to an OBJ file.  I noticed that each object in the mesh is labelled inside the OBJ file.  Each label corresponds to an item on that tree.  So I know its possible to get the info.  I just need to know how to get reference to the child objects so i can list them on the UI and turn their visibility on and off at will.

The tag idea looks cool, but I think there's probably a way to do it built into babylon js already.  Just need to find it.  Maybe through the Assets Manager?  That's what I used to load the OBJ file on suggestion from another post.

[babbleon]

@Bladetrick, thank you. I thought it was a web based thing!

[Bladetrick]

hehe i want it to be.  

So I found that using the Assets Manager like so:
       

 task.loadedMeshes[0].name

gives me the label in the file.  I just need to find out how to get the other mesh that are in it now.

For instance, if the main mesh is Whale_01, my list might look like:

Whale_01
     DorsalFin_01
     Flipper_01
     Flipper_02
     Mouth_01

etc.

Then, as a user, I can turn off visibility of the two flippers.  Or the mouth, if i wanted to.

[babbleon]

Does this help you?

https://www.babylonjs-playground.com/#0E2PG3#1

check the console.

[Bladetrick]

That's exactly it hehe.  I just got the same thing using the AssetsManager as posted above.  I didn't realize how many meshes were loaded... until I looked.  haha, whoops.

Thanks for the help talking it out!  this is perfect

[babbleon]

No problem, pleased I could help.

It's always worth searching the playgrounds when you're stuck on something: https://doc.babylonjs.com/playground/ 

[Wingnut]

Hey BT... there is a system active in BJS.. called layerMasks  (and there's mesh.renderingGroupId, too, but we'll save that for another day).

Team BJS recently completed a testing playground... where various scene mesh are "masked-off"... depending upon which button is pressed.  The buttons change the camera.layerMask.  Each mesh in the scene... uses a different layerMask.  Eight custom layers are used in the test scene.  I think there are 255 possible user-settable masks.

https://www.babylonjs-playground.com/#11NJQT#12

In some modelers, there is a feature to add a "custom property" to any mesh.  Try to learn to add a custom .metadata property to all the mesh... in your modeling software scene.

The .metadata property is an empty property which you can use to send data... thru Max or Blender exporter, and have it automatically import onto all your BJS mesh.metadata properties.

Let's look at line 13 in that playground.

box.layerMask = 0x00000001; 

You COULD make a box in 3dsMax... and set its .metadata property to "0x00000001".  (a string)  (You do this in the modeler scene.)

THEN... when the box arrives into BJS scene via export->import, you could do...

for (mesh in scene.meshes) {
     if (scene.meshes[mesh].metadata) {
          scene.meshes[mesh].layerMask = Number(scene.meshes[mesh].metadata);  // or similar
     }
}

See how we have told the mesh to belong-to a certain specific layer... while inside the modeler?  Then we used the .metadata custom property to haul that "layer ID" into BJS scene, and then we can use it with buttons, like the above playground demo does.

For example, in a VR world... all trees could be 0x11110000.  All buildings... 0x11000000.  Roads... 0x00001000, etc, etc.  The buttons... set the camera.layerMask... so that only certain group(s) can be seen with the camera.  View-by-layer.  Cool!

Lights can also have the .layerMask property.  Custom lighting for each layer, if desired!  YUM!

Notes:  I think .metadata is the ONLY custom modeler-property... included in Max and Blender exports.  Make sure you use the property name "metadata" with no deviation.  I believe .metadata can be used to export serialized JSON objects [JSON.parse(it) after arrival into BJS scene], so if you need to haul LOTS of data out-of the modeler and into BJS scene... can do!  The .metadata truck has strong springs and a large cargo area. 

I don't know if I am on-subject... but... this seems like something you might find useful.  I thought I had better tell you about it. Be well, party on.

[Bladetrick]

That's awesome!  I'd already accomplished what I needed just iterating through meshes and assigning their names to be the ids of checkboxes.  Then using the checkbox to denote visibility on the meshes, I get what I need; however, this looks like a better route because I found that some of my inherited models have duplicate names.  The modeler was being lazy, I guess.  I'll just have my data minions go through and assign the metadata as you describe above and get that sorted.  Thanks, Wing.