Outline is sometimes very small, almost invisible

When using renderOutline on a box or box-like mesh, the lines are sometimes very small and sometimes nearly invisible.

For instance, here are screenshot comparisons between Blender on the left, which has a constant size outline around the selected mesh, Babylon in the middle, and Babylon with a large outline width on the right.

Also here are the simple playgrounds to create the screenshots and issue.
https://www.babylonjs-playground.com/#B21PEK#23
https://www.babylonjs-playground.com/#B21PEK#24

For now I’m just using a highlight layer instead because its width is constant around the mesh and it seems to always be clearly visible, but it’s a bit overbearing/distracting to use for selecting a mesh, compared to using a solid outline like blender IMO.

So I wonder if anyone has a fix for or ideas on how to fix this issue? :slightly_smiling_face:

I just remembered somebody added a stroke mode in the highlight renderer: https://playground.babylonjs.com/#1KUJ0A#1323

3 Likes

Thanks @sebavan, that’s just what I was hoping for. Here it is with the box, which looks right about like Blender’s outline IMO. :+1: :beers:
https://www.babylonjs-playground.com/#B21PEK#25

Edit, with the line width doubled it looks really nice and clean. :slightly_smiling_face: I guess there’s not enough pixels to smoothen it out when it’s too thin thou? :thinking:
https://www.babylonjs-playground.com/#B21PEK#26

1 Like

Hi Blake,

Regarding why this happens, this is because Babylon’s outline renderer creates the outline by essentially pre-rendering a second copy of the mesh with the vertices translated according to the normals. If the normals are discontinuous (i.e., not smooth) as they are with the cube, this results in the faces of the outline render disconnecting from each other; and if the angles between the faces are high (again, like the cube shows) then it’s possible to get edge-on to these disconnected faces and see them in isolation, which will cause them to look thin.

Probably the most reliable way to solve this would be to include your own outline mesh in your 3D model (a simple convex mesh with inward-facing normals and your unlit outline material on it). Another option would be to pre-render the mesh manually at a slightly larger scale using the outline material and without writing to the depth buffer, then rendering the real mesh on top of it. This second approach won’t work well on all meshes, though; especially for meshes with small concavities far from their object-space origins, it will tend to shift the concavity in the outline render away from the concavity in the mesh render. That scenario should be handled correctly by Babylon’s built-in outline renderer, but of course at the cost of handling meshes like the cube (which would be handled flawlessly by an upscaled outline mesh pre-render) less well.

Sounds like the stroke renderer was what you were looking for, but since I already typed this I’ll just leave it here for fun. :upside_down_face:

2 Likes

Thanks @syntheticmagus for the great detailed reply. I think the highlight layer will work well for me, but need to experiment more with it’s options. :slightly_smiling_face: :beers: