Increase and decrease the visibility of the mesh by clicking on the buttons

Hi
I want to click on a particular mesh and then use the buttons to increase and decrease the visibility.
I tried using mesh id, but somewhere I’m wrong …
Some simplest answer ???
This is an example of Babylon: lines 83 and 97;
https://playground.babylonjs.com/#G2F8LN#7
Thank you

Hi A! Here ya go… https://playground.babylonjs.com/#G2F8LN#8

bjsevt (a name I made-up)… is not available everywhere. It is only available inside the function… called by ActionManager… executeCodeAction.

So, I added a wide-scope selectedMesh variable up at line 20. In line 112… I made sure that… clicking on nothing… sets it to null.

At line 128, inside the executeCodeAction function… I set selectedMesh to… you know… the mesh that got clicked-on. :slight_smile: Should work.

A little bird told me that you will seek “isolation” of a selectedMesh… soon… using an “Isolate This” and “Show All” buttons. (are you hot enough to REPLACE the “Isolate This” with the “Show All” ?)

Really, you won’t need both buttons displayed at the same time, right? :slight_smile: In fact, you might have a completely different menu of choices… when in “Isolated Mode”, eh? Perhaps add a “make it dance” button, when in isolation mode? No? Too goofy? Unh. :slight_smile:

With isolating a single mesh (show selectedMesh-only/show-all buttons)… it’s all about looping thru scene.meshes and setting everymesh.enabled(false)… and then setting selectedMesh.enabled(true).

(I hope I didn’t ruin your exploring fun)

With show all… you know what needs to be done. All scene.meshes setEnabled(true). :slight_smile:

Likely, you will want to set camera target to center of isolated mesh, and then return the target to original position… when show-all is chosen. Go get 'em, Aldin! :smiley:

1 Like

This has something broken, yet. Selecting boxes, then clicking viz buttons… causes selectedMesh to go null. Checking…

We are getting lots of Active camera not set at console, too. Not sure why, yet. Might be affecting buttons… allowing intermittent “click thru”, and thus triggering our “click-in-space” checker.

Update: Verfied: https://playground.babylonjs.com/#G2F8LN#9 (click in space checker… disabled) (viz buttons work better)

Active camera errors at console… MIGHT be related.

The HTML viz buttons are sometimes allowing clicks to pass-thru the buttons, and hit the blank space behind them. You might need some DOM dis-allow-event-propagation stuff… inside the onClick code.

Good reading… DOM event-cascading and event-bubbling prevention. FUN!

But, consider finding the reason WHY the active camera errors are happening FIRST… before adding anti-event-propagation methods to the onClick handlers. The active camera error MIGHT BE the ACTUAL problem.

PG #10 allows choosing no mesh… by clicking the dark green ‘header’ label. :slight_smile:

2 Likes

Here it is : https://playground.babylonjs.com/#G2F8LN#17

You need to be more careful when writing JS, you had lots of scoping and typings issues in the code.

2 Likes

Hi
Thank you for your answers.
A great explanation and tutorial for everyone who needs a similar answer.
The little bird told you a little detail, and you’re so good in this, that you’ve all described what I’ve imagined. At the moment i want every button to have a special function and later I would link to one button. :slight_smile:

In this visibility idea there is a small problem…, so to explain;
If there are a lot of models and if a lot of models make it invisible 100%, it is difficult to find and restore everything in a visible state.
I tried to make in the code not to go up to 100%, but 90%, but somewhere I’m mistaken … or to add an extra button that will return everything to the visible state …, some idea?

Hey, thx for the playground cleanup, @sebavan! Nice!

Hi AA! Time to learn about layerMasks, huh?

First, let’s visit Wingnut’s wonderful LayerMasks playground/tutorial.

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

In lines 1-48 area, I set a layerMask value (in binary notation)… upon the camera, and upon every mesh in the scene. Each is different. Study how they are different from one another.

In lines 176-210, I use the button observers… to change the camera layerMask value, dependent-upon which GUI button was clicked. Having 8 layers (groups) of mesh… for toggling on/off, would be handy in your project, yes?

Now let’s visit a newer version of YOUR testing playground: https://playground.babylonjs.com/#G2F8LN#21

Please ignore box2 new position. I was testing picking THRU transparent mesh… and doing some isPickable tests - in line 151 area. I was pondering… if (somemesh.visibility < 1) {thatmesh.isPickable = false}… in the renderLoop! (omg).

Might be cooler to install a custom observer on each mesh.visibility… testing mesh.visibility onValueChanged - then if new value < 1, set mesh.isPickable = false. Else isPickable remains true. That would be more performant. Here’s the custom observer playground from the docs-link above.

Ok, now back to your #21 playground…

Look carefully at the code in lines 29-31, 34-36, and 39-41. We are putting meshesOne on layer1, meshesTwo on layer2, and meshesThree on layer4. Yes, I said layer 4… not layer 3. Binary 0x00000100 == 4.

Now, look carefully at lines 156-159. Line 159 sets camera to view ALL THREE layers. But you can disable that line, and enable one of the other lines… to see… that your camera now has a “rotary switch” to select which layer(s) to view, or view ALL layers… or NO layers. And yes, you CAN tell the camera to view 2 or more layers at the same time.

By having this enhanced power to make layers of mesh disappear/re-appear, you might be able to design a system to solve your “too many mesh in view” problem. You could have a layers menu… with 10 buttons.

The demo I first showed you… has 9 buttons, because I didn’t include 0x00000000. Your HTML “layers selector menu”… could have all 10 buttons. POWER! There are other methods of “group management”, too - tags, mesh-name templates, metadata, or even building/maintaining your own custom arrays-of-mesh… but this method is pretty interesting and powerful.

Good luck! I hope this helps.

2 Likes

Hi
Thank you for your reply
This is great …, layerMasks :slight_smile:
Of course, at the moment it should be simpler, and later it should be more complicated, as learning progresses …

1 Like

Nod. You could experiment with more-advanced grouping right now, if you want.

Let’s pretend that you combined myMeshesOne/Two/Three… into a single load.
Then perhaps make some “grouping arrays”…

var g1 = [];
var g2 = [];
var g3 = [];

Now let’s pretend that you named all the mesh (in Blender) like this…

g01_boxOne, g01_boxTwo, g02_sphereOne, g02_sphereTwo, g03_cylinderOne, g03_cylinderTwo.

After the mesh arrives (myMeshes), you could loop thru myMeshes, and check for ‘g01_’ or ‘g02_’ or ‘g03_’ on the beginning of each mesh.name (possibly with JS subStr or subString or something similar).

Put the first four letters of the name… into a variable such as firstFourLetters.

Then (written in Wingnut pseudo-code):

IF firstFourLetters == “g01_”… THEN g1.push(thisMesh);
Else IF firstFourLetters == “g02_”… THEN g2.push(thisMesh);
Else IF firstFourLetters == “g03_”… THEN g3.push(thisMesh);

(you might want to use a JS switch/case feature to make that easier)

This allows around 99 separate groups of mesh. Wow, huh? But no more layerMask power. You would need to loop-thru g1, g2, and g3… setting eachmesh.setEnabled(true/false)… to make entire groups appear/disappear. You might use a helper function that YOU code… setGroupEnabled(anyGroupArrayName, trueOrFalse); Called like: setGroupEnabled(g2, false)

By doing this type of grouping-into-arrays, we are NOT removing any mesh from scene.meshes… but we are still grouping the mesh for YOUR uses. It is even possible to have SOME mesh… be members of multiple groups, but that would require a bit more work.

So, even AFTER you group-up (called ‘herd cutting’ on the cattle ranches), you can STILL do scene.getMeshByName() and scene.getMeshById() normally (for working with single mesh).

You could even modify the JS Array Object… and thus automatically install a .getMeshByName() and .getMeshById()… on all GROUP arrays such as g1, g2, and g3. THEN you could do… g2.getMeshByName(something) and similar commands. You would be “overloading” the JS Array Object… making it be more powerful, and be specially designed for YOUR project. Fancy, eh?

Aldin’s Custom Mesh-Storing Arrays - version 1.0 :slight_smile: Specially designed corrals (arrays) for cow (mesh) storage. :slight_smile: Smart-corrals… able to find specific cows… within their fencing. :smiley:

Lastly, keep in mind that ALL BJS ‘nodes’ (mesh, lights, cameras) have a .metadata property. I think you can install it onto Blender mesh… using Blender’s custom property features. According to those docs, STRING-type values are not allowed (such as “g02”). So, you might want to use ONLY a numeric value… in Blender custom .metadata property. (like 2, 3, 28, etc).

Then, when myMeshes arrive at BJS scene, the .metadata property on each mesh… will also arrive.

Then, you know… for mesh of scene.meshes… if mesh.metadata == 1… then g1.push(mesh)… else if mesh.metadata == 2, then g2.push(mesh), etc. That will cut-up the mesh herd nicely, too.

I would avoid using Blender Groups, Layers, or Collections (2.80), for now. BJS Blender-exporter work-in-progress, on those, I hear. Ok, that’s plenty for now. Good luck!