Render Outline - Buggy

Hi,
In the project I am working I am using render outline property of mesh to draw an outline of the mesh. However, I have noticed that for some meshes the result if not quite accurate. Instead of drawing an outline of the mesh, a bubble is formed. At times a circle is formed around the object. Could you please look into this issue? I won’t be able to share any images for reference.

Hey @Sidharth_Suresh, you should probably create example of that in playground, it would be good to see the code :wink:

I don’t mind writing the code but I won’t be able to recreate the issue without the right mesh. I am just setting renderOutline as true and changing the outlineWidth. Finally setting the color using outlineColor. Not much to show.

If you just trying to highlight selection you might wanna consider HighlightLayer.

Pulled import example from docs and just added it on imported mesh.
Check this out.
https://playground.babylonjs.com/#XDI3YS#1

1 Like

Is this a behavior that occurs everytime on a same mesh (not randomly)? Like some of your meshes seem to highlight an object that is not your (rendered) mesh shape… do I understand this correctly?
If so, could it be that there are remaining invisible meshes/layers/polygons in your imported mesh…?

Highlight layers gives a glowing effect which I don’t need. While render outline serves my purpose.

that is correct. It occurs every time on the same mesh. And no the mesh is a single mesh and don’t have sub meshes.

It seems odd to give you this answer, but with the little I have here, all I can make is assumptions.
I assume that if it’s only one object/mesh and always the same having (constantly) the same issue, well, I’d say it’s likely that this object is the cause (or at least part of it).

Is there anyway you can either? 1) share your model/mesh or 2) reproduce similar in the PG.

If not and if I was you, I assume I would start with checking this model again: Make sure there is no selection of invisible polygons. No loose or invisible points. No other objects (props, lights,…). No other layers. Check the model normals. Check if no i.e. planes with PNG texture around the model (i.e. for a tree - I don’t even know what your model is (lol).
May be you could also start by posting a SS?…

Thanks for the answer. Again, I won’t be able to provide a SS. I will validate the mesh once again. As an alternative instead of using render outline for this particular mesh, I am using edge rendering to get a similar result.

You are making me/us wonder what you’re building…it seems all very secret;) :zipper_mouth_face: Will we have a chance to see the final version of your project? :eyes: GL anyways and have a great day.

Hello everyone.

I don’t know if I’m talking about the same issue as @Sidharth_Suresh mentioned above, but I’m also having rendering problems with this property. For a moment I thought it was related to the angle between two face normals, because I had the issue with a cube, but not with a sphere. But after experimenting a little with an icosphere in Blender, I found that it’s related to the shading groups.
You can see in these PGs, that there’s a different behavior when the model (or even isolated faces) has been set to flat or to smooth shaded.

Babylon.js Playground (Blender models)
Babylon.js Playground (BJS built-in meshes)

Any idea how to solve this?

(PS. This is my first post here :slight_smile:. I’m learning to use BJS and loving it so far)

1 Like

Welcome aboard!

It’s a side-effect of the technic used: the vertices are pushed away from the surface in the direction of the normals to inflate it. If two faces sharing a vertex does not have the same normal at this vertex, there will be a gap between the faces at this vertex because the vertex is not pushed in the same direction for both faces.

The only fix I can see is to smooth the normals so that a vertex “shared” by multiple faces will have the same normal whatever the face it is in.

Thank you for the quick answer @Evgeni_Popov :slight_smile: !

Agree, the problem is the implemented solution to achieve the outline effect. The issue here is that shading groups are necessary to achieve different visuals, so ‘all-smoothed’ is not always suitable. (What if I want to use cubes, for example?)

I came up with three solutions: 1) Not setting the outlineWidth value too high, to keep the gaps barely unnoticeable; 2) use an alternative, like the HighlightLayer mentioned above (which works nice for my current project); or 3) (A more complex one) bake the hard edges into a normal map and keep the base mesh totally smoothed.

1 Like