solved Highlight effect

[BlackMojito]

Hi Folks,

Just one question about the highlight and the selection effect implementation. 

I appreciate this official sample http://microsoft.teia-solution.com/gerland very much. I would like to achieve the same highlight effect as shown, which means adding a transparent "orange" layer on top of the original material when hover. What is the best practice to implement this? I tried to look into the source code but it seems that the related JS is concated. 

 

Please help! I really like it!

Thanks

[RaananW]

Hey,

the doc page is currently being revamped, so the page is 404 (soon to be fixed!) but since all infos are on github, we can... Paste a link! https://github.com/BabylonJS/Documentation/blob/master/content/How_To/mesh/Highlight_Layer.md

Until everything is fixed, here it is : http://doc.babylonjs.com/tutorials/highlight_layer :-)

 

[BlackMojito]

38 minutes ago, RaananW said:

Hey,

the doc page is currently being revamped, so the page is 404 (soon to be fixed!) but since all infos are on github, we can... Paste a link! https://github.com/BabylonJS/Documentation/blob/master/content/How_To/mesh/Highlight_Layer.md

Until everything is fixed, here it is : http://doc.babylonjs.com/tutorials/highlight_layer :-)

 

But it highlights only the silhouette right? In the demo I listed, the selected face changes its color.

[RaananW]

this can be achieved using the emissive color of the standard material when picked. a good example can be found in the playground (the actions playground can be selected from the top)

[Wingnut]

http://playground.babylonjs.com/?17

It's not a very simple playground, is it?

A quick briefing:  Any mesh can have an "actionManager".  Here's the docs for that.  Most actionManager "things"  have two parts... a trigger and an action.

Triggers:  Find the list of triggers.  As you can see, there are far more than 12 triggers, so ignore the '12' part.    The two most important triggers for you... is onPointerOverTrigger, and onPointerOutTrigger.  Both of those can be registered on a SINGLE actionManager... which has been added to your "hover-able" mesh.

Actions:  BABYLON.SetValueAction would be handy, for you.  When onPointerOverTrigger happens, you want your SetValueAction to perhaps, set mesh.material.emissiveColor = new BABYLON.Color3(.8, .8, 0);   // hovered = orange.    When onPointerOutTrigger, you want your SetValueAction to perhaps set mesh.material.emissiveColor = [original color];   // un-hovered

You could also use the ExecuteCodeAction action (instead of setValueAction)... to run functions for actions.

If you DO use executeCodeAction, then you should know that a Babylon event object is sent to the executed function automatically, in the first parameter/arg.  This is exactly the same as DOM eventHandlers, which receive an event object as their first/only arg/parameter.

SO, you might have a function called... onSomeMeshHovered(bjsEvent), which executeCodeAction has been told to RUN.  The bjsEvent object has a few properties on it... such as .source property.  That property will contain a ref to the mesh that is being hovered.  Other info can be found upon that bjsEvent object, too.  Use your browser's built-in "object inspector" for fast learning of what methods/properties are found upon ANY JS object.

Hope this helps.  Holler as needed. 

[BlackMojito]

30 minutes ago, Wingnut said:

http://playground.babylonjs.com/?17

It's not a very simple playground, is it?

A quick briefing:  Any mesh can have an "actionManager".  Here's the docs for that.  Most actionManager "things"  have two parts... a trigger and an action.

Triggers:  Find the list of triggers.  As you can see, there are far more than 12 triggers, so ignore the '12' part.    The two most important triggers for you... is onPointerOverTrigger, and onPointerOutTrigger.  Both of those can be registered on a SINGLE actionManager... which has been added to your "hover-able" mesh.

Actions:  BABYLON.SetValueAction would be handy, for you.  When onPointerOverTrigger happens, you want your SetValueAction to,perhaps, set mesh.material.emissiveColor = new BABYLON.Color3(.8, .8, 0);   // hovered = orange.    When onPointerOutTrigger, you want your SetValueAction to perhaps set mesh.material.emissiveColor = [original color];   // un-hovered

You could also use the ExecuteCodeAction action (instead of setValueAction)... to run functions for actions.

If you DO use executeCodeAction, then you should know that a Babylon event object is sent to the executed function automatically, in the first parameter/arg.  This is exactly the same as DOM eventHandlers, which receive an event object as their first/only arg/parameter.

SO, you might have a function called... onSomeMeshHovered(bjsEvent), which executeCodeAction has been told to RUN.  the bjsEvent object has a few properties on it... such as .source property.  That property will contain a ref to the mesh that is being hovered.  Other info is on that bjsEvent object, too.

Hope this helps.  Holler as needed. 

Thank you! I got the idea. But how can I have semi-transparent effect? Do I need to change totally the material?

[Wingnut]

21 minutes ago, xuchen_shadow said:

Thank you! I got the idea. But how can I have semi-transparent effect? Do I need to change totally the material?

My pleasure.

I think if you set material.alpha = 0.5, or set mesh.visibility = 0.5, that should be half-transparent.

Seeing that you are working-with "selecting"... it might be interesting to know... that the graphics (thin lines) used for mesh.showBoundingBox = true... can be seen THROUGH other mesh, even when they are not set transparent.  It is related to "depth rendering", I think.  We consider it a feature. 

Goof around with mesh.showBoundingBox = true;   ... if bored, someday.  I saw some boundingBoxes being shown in the Teia demo.  Perhaps you want to change to orange AND showBoundingBox = true, both. 

Another fun thing... is... onHover... clone the original mesh, then set a new material on the clone, and set clone.material.wireframe = true;  When in wireframe, material.diffuseColor determines the color of the wires.  No wire thickness options available. 

Oh yeah... when de-hover, clone.dispose() or clone.visibility=0 or maybe clone.setEnabled(false). 

Various fun ways to indicate that a mesh is hovered or selected.