Highlight a LineMesh

Hello !

I’m currently working with LineMeshes and I want to set a highlight behaviors on some lines. But it seems that it’s not possible to do it just with the highlightLayer.

My alternative solution is to create an invisible box that covers the line and to highlight it but maybe it’s too over engeneered so maybe there’s another way to do it.

Any suggestion ?

By default, line meshes use alpha blending: highlight layer does not work for alpha blended meshes.

So, you should disable alpha blending:

https://www.babylonjs-playground.com/#1KUJ0A#209

See useVertexAlpha: false row 19.

@Evgeni_Popov
This works well when I have a full line but it does not seems to work with dashedLines :confused:
Since useVertexAlpha is not a parameter inside dashedLines constructor i changed it after the mesh creation but it doesn’t work, there’s probably a step that I miss.

Hi guys! @nathanidp … I did some glowLayer work with linesMesh… https://www.babylonjs-playground.com/#258JTK#13 (caution, extreme color flashing). This all MIGHT BE off-topic, but maybe not.

Code-lines 26, 30, 34, 38, 47… all the linesMesh are pushed into an array called lines.

Line 49… I establish the glow layer, and line 52… I use a handy glowLayer custom-function feature called customEmissiveColorSelector. I think it runs every render-frame… and it can be used to determine which lines-mesh get which glow-colors (and thus, MAYBE it can determine which lines-mesh get NO glow-color [color set to null?], or maybe which get glowColor matching background color).

Note: Lines 68-70 are in-active in that custom func… unless you create/push one more lines-mesh.

Another note: Line 77 turns-on showBoundingBox for linesMesh #1. It also glows white, its default color, and forms the white box around linesMesh #1 (screen center). Notice there is no WHITE conditional in the customEmissiveColorSelector function. THIS glowLayer tries to glow-ify everything in the scene… unless you tell it NOT to. :slight_smile:

I think we can prove that it runs every frame… by disabling/activating line 90. That will “rotate-shift” the lines array every 1/10 second.

GlowLayers are similar to highlightLayers… as far as alpha-blending/transparencies (what Evgeni and you are speaking-about). Get them too near-to half-transparent things, and they become unpredictable, depth-sorting-wise. I’m no expert. I just wanted to show you glowLayer’s customEmissiveColorSelector function… in case it was useful for you. Party on!

Comment about next post… EP, thx for checking dashed-lines… I should have done that so you didn’t have-to. Sorry. Well done.

2 Likes

@Wingnut solution does work with dashed lines too.

It can be possible to make it work with the highlightLayer too:

https://www.babylonjs-playground.com/#1KUJ0A#210

I have copied the current implementation and replaced:

var dashedLines = new LinesMesh(name, scene);

with

var dashedLines = new BABYLON.LinesMesh(name, scene, null, undefined, undefined, undefined, options.useVertexAlpha);

I’m going to make a PR for this.

3 Likes

PR has been merged, so you will probably get the new property in the next nightly build.

1 Like

@wingnut, @Evgeni_Popov
Thanks a lot for your answers !

I will use the patch until the nightly will be released :slight_smile:

1 Like

This should be deployed in 5 minutes, everything has been build

1 Like