Create outline around a 3D object

Hi ,

So I know how to add highlight layer on a 3D object - Highlight a Mesh - Babylon.js Documentation

but what I want is an outline around an object - I tried looking at the documentation - HighlightLayer - Babylon.js Documentation

But didn’t find anything to proceed with.

Please suggest what should be the way forward

What my project demands -
shader.PNG

(also when @Cedric will be back from vacation :smiley:
I need his support in another issue - How to Gizmo on empty node?)

regards,
Nipun David

You can use the outline renderer:

https://playground.babylonjs.com/#ESJVY6

2 Likes

Thanks @Evgeni_Popov :smiley:

I was using the bounding box renderer to get similar results

image

(Combined with a glow layer in the image above to produce the glow effect around the screen)

image

For me, render outline gave some unexpected results on my imported mesh. It’s applied to the screen in the image above.

Is there any reason NOT to use the bounding box renderer in this situation?

The bounding box of a mesh is not the same thing than its outline.

If you can provide a repro PG for your problem with the outline renderer we could try to look for the problem.

Right, I get that bounding box and outlines don’t render the same visual. Since my object is a flattened cube, however, bounding box still gives me the desired visual result (as long as I turn off back lines).

My question is, is there a reason (performance, functionality, or something else) I should switch to outline instead of continuing to use the bounding box renderer as a constant visual element?

Here’s a playground with a simplified version of the above model:
https://playground.babylonjs.com/#KLJBA0

No, if the bounding box renderer is ok for you you should use it instead of the outline renderer as it has better performances.

[EDIT]
Regarding your problem, it’s because the object has very small coordinates, so you should adapt the outlineWidth accordingly:

https://playground.babylonjs.com/#KLJBA0#1
[/EDIT]

3 Likes

Hi!

Sorry to revive this topic eight months later, but I just found that the render inconsistencies using the mesh.renderOutline property are due to the “smooth” or “flat” shading on the mesh.

I post some examples here: Render Outline - Buggy - #3 by Sidharth_Suresh

Does anyone have an idea how to solve this?

Thank you