By reducing the visibility, a green model appears?

Clicking on model appears a green outline. I want to highlight a model with a green outline. But clicking on the Vis - button, which reduces the visibility of the model, appears in a green model …, is there any idea how to fix this?

1 Like

Hi Aldin/gang. Use the #35 playground if #34 is failing.

On the subject: I talked with Aldin in PM a bit… so he knows this is probably a depth-sorting issue with the outliner… and might not be avoidable.

This harkens-back to the LONG-debated issue… of WHAT IS the best/available ways… to indicate that a mesh has been “selected”. I’ve always liked the “pulsating emissive color” mesh-is-selected indicator… as it doesn’t have depth-sorting problems.

Others… overlay a wireframe clone… a fancy isSelected indication.

And the layers… of course… glowLayer, highLightLayer, and outline. (I’m not sure if outline IS a layer-like thing, but it is acting like it is). Aldin needs a special type of isSelected-indicator… because he needs to use transparency in his project. (see-thru layers of mesh)

Anyway, I just wanted to say that Aldin has been “briefed” about depth-sorting (which heavily-involves transparency), and I THINK that is what causes this. Pretty sure. :slight_smile:

I think Aldin would welcome ALL creative ideas (transparency-friendly) for “How to indicate when a mesh isSelected”. :slight_smile: Fun topic. We need all the ideas that we can think-up.

Outline render cannot be used with transparent objects due to the depth rendering issue as @Wingnut stated.

The good news is that we recently udpated the glow layer to support transparent meshes so I guess it will be the way to go (Make Mesh Glow - Babylon.js Documentation)

Please note that the doc is not up to date


Thank you for your answers
Any professional program, and other 3d programs, I see using outline markup. For these reasons, I am looking for something that does not change the basics that people are familiar with.
I think babylon creators should work on the idea of introducing mesh has been “selected”, not just in one way but in several ways.
“Pulsating emissive color” is a great visual idea of selecting mesh. I thought of using it for other tools if I did not find a way to leave outline … Of course, mesh glow can serve …

Perhaps it is easy to remove the outline with the visibility of the mesh:

The engine already allows you to know when an object is “selected”, but it’s not its purpose to generate a selected effect. I think it’s more an editor (and/or a custom webapp) than an engine functionnality.

That said, I’m agree that I’m not sure if it’s possible to achieve this kind of effect:

Blender 2.8 viewport, cube having alpha in its material

EdgeRenderer could helps to achieve your result: Use EdgesRenderer - Babylon.js Documentation

but it haven’t backface cull option (yet?)

1 Like

Good tests and comments, guys.

I tested the glow layer…

Problem is… it colors the entire mesh. We just need the glow effect that surrounds the mesh.

The gltf-loads used in all those playground demos… sort of sucks. SLOW load times… not good for docs demos. And those PG’s seem to NEED-TO reload the gltf… EACH TIME an edit is made on the playground demos. Yikes!

Those docs playgrounds are not good glowLayer learning/testing environments. Somebody (who is NOT old like me) needs to add this to their issues list. (thx) :slight_smile:

Also, a docs search for “glowLayer” does NOT find the “How To” doc for glow. Conversely, a search for “highlightLayer” DOES find the “How To” doc for highlighting. Any repair on that… would be cool.

Ok, whining complete, carry-on. I agree with Aldin about finding new/better ways to indicate isSelected, but… Aldin, we haven’t thought-up a better method, yet. Maybe YOU will invent one… in a few months. :slight_smile:

Vincent, DK… thanks for your interest/participation. All comments/ideas welcome.

1 Like

That’s a bit like… clone the selectedMesh, add clone.material, wireframe-mode it, scale-up its size 1.01, and position the wire-framed clone… atop the selectedMesh. (wireframed-clone-overlay method). (WCOM?) :slight_smile:

I didn’t expect your #39 edgesRenderer playground to look SO SIMILAR to a WCOM. (it is because you used thin lines on your edgesRender, just like a wcom would do.) :slight_smile:

Yeah, I know, worthless post on my part. Coffee-Talk.

Little play:

1 Like

I absolutely agree that this is an editor choice to find a way to select mesh.
I just liked this way but did not figure out how to outline adjust visibility …
If other programs allow this, maybe babylon can do this, just need to find ways …

A little interesting talk, there. It seems EVERYONE struggles with good outlines.

I’m also seeing some talk about stencil buffer outline methods. Sniffin’ around. :slight_smile:

Aldin, perhaps… the reason that “pro modeling software” can do these nice outlines… is because they can “afford” to do 4-8 “rendering passes”… and not bog the machine. OpenGL running on machine language… is WAY WAY faster than webGL stuff… (maybe).

Possibly, everyone using webGL… is limited. Comparing webGL to OS-native OpenGL… perhaps we can expect vast differences.

1 Like

Little up 'cause I just stumbled upon this reddit thread about an outline shader tutorial in Unity, maybe this can help?


Interesting! Let see if we can do something out of that shader


Hey, I’m a little late to this thread but am looking into this now. I’m not sure if @Vinc3r 's outline shader idea will work, although it does look better than most outlines, it appears to be a screen space shader which might make it difficult to apply to a single object. Right now I’m looking to see if a stencil buffer could be used for the outline to only display the outline if it doesn’t overlap with the mesh to avoid the transparency issue.


Created a PR here do not show outline under mesh when it becomes transparent by TrevorDev · Pull Request #5986 · BabylonJS/Babylon.js · GitHub . Thanks to @sebavan for the stencil buffer guidance :slight_smile:


I get this same issue when using visibility of my collision meshes from a GLTF mesh object.

If i make a Box as a collider in code and set is visibility = 0.25 you get a LIGHT SEE THRU BOX

if i set visibility on a mesh from GLTF it just goes blue:

This is a shot with TWO BOXES … the left is authored in GLTF and the right is made with BABYLON.Mesh.CreateBox

Visibility = 1.0 for both boxes:

Now if i set Visibility = 0.25 for BOTH BOXES… The left GLTF box goes blue and the right box has the CORRECT alpha see thru look i am trying to go for:

Both boxes have NO Texture so its just a white color box… but the GLTF left box does not show the alpha visibility correctly… This actually happens WITH ALL GLTF MODELS with a texture or not.

@trevordev … and @bghgary … Do you know why the GLTF box is going blue, and how can i fix that ???

@MackeyK24 Can you create a playground with this issue?

Yo @bghgary

Here you go… A Cube from GLTF and a BOX from code… Both with visibility = 0.25 but only the box created in code using CreateBox actually displays correct.

Take a look: Babylon.js Playground

Yo @bghgary … Got another mesh visibility issue.

Here is a playground with Remy Character authored at Position Y = 6… Just out of Camera View… Only the bottom legs and feet can be seen by default camera position. After 5 seconds i move Remy Position Y = 2… Now he is in Camera View… But the MESHES ARE MISSING… The Body, The Hair, The Top Shirt

Please take a look at : Babylon.js Playground

This is a bug IMO. I’ve discussed this with @sebavan and I will try to fix it. Can you file an issue on GitHub?

The problem is that the bounding box is in the wrong place and the meshes are being culled. Investigating…