How to prevent overlapping mesh outline issue?

Questions
1

Hi, I’m trying to draw the outline of my character.

The actual file is owned by the company and cannot be shared.

So I prepared a playground link by using dude.babylon

https://www.babylonjs-playground.com/#11BH6Z#836

I’ve tried Highlight Layer, Edge rendering but for some reason, I can’t apply them to my project

How do I prevent overlapping mesh outline issues using renderOutline?

Please let me know. I really appreciate in advance any help you can provide

I have also attached a picture of the original file that had a problem

화면 캡처 2022-05-17 142715

2

The problem is that the outline is drawn per mesh (actually, per submesh). I guess that like for the dude, your mesh is made of several meshes / sub-meshes, that’s why you don’t get the result you want.

A solution would be to merge all the meshes into a single one by calling Mesh.MergeMeshes, then draw the outline for this mesh.

For this to work you need to make sure this mesh will be displayed before your regular meshes so that the outline is drawn under the meshes and not over. To do so, you can assign a material to this mesh that has a uniqueId lower to the lowest ids of your other mesh materials: since 5.0, the (non transparent) meshes are sorted by ascending material.uniqueId (or mesh.uniqueId if the meshes don’t have materials).

You should also disable depth/color writing for the merged mesh, to save some performances as this mesh won’t be seen anyway, as it will be overwritten by your regular meshes.

Here’s a PG that demonstrates that:

Maybe there’s a simpler way. Using the highlight layer would definitely be simpler. See:

2 Likes
3

Yes, but in this case you cannot animate dude anymore with its edge rendering. What about the toon shader? I haven’t used it so far but it seems to be a perfect match for this kind of thing, or isn’t it?

4

I don’t know the toon shader but it may suffer the same problem because in the end each sub-mesh is drawn separately, so each sub-mesh will have its own outline.

1 Like
5

Thanks for the info. Just an idea as I recently saw some posts from Japan that seem to have somehow dealt with this issue. Don’t know how though.

6

Thank you for your reply :grinning:
First, I’ve tried a lot of things.
One of them was mesh merging.
I have to keep changing the character’s clothes, so I can’t change clothes if I merge them. :disappointed_relieved: :disappointed_relieved: (+As Mawa mentioned below, there are animations)

So now I’m researching to apply to the toon shading, and I’m frustrated, so I posted a question.
I learned a lot from the answers and codes. Thank you!

7

Kenshin Toon Shading, which is shared on the forum, doesn’t have an outline.
So, I used “Highlight Layer” for the outline.
If it overlaps, the overlapping parts disappear and only the outline of the whole is visible.
so I use the high light layer for each character’s outline, but there’s a bit of a load

9

Thanks!
I used HL parameter like this.

isStroke: true,
mainTextureRatio: 2,
blurVerticalSize: 0.6,
blurHorizontalSize: 0.6,
innerGlow: false

As mentioned above, is there a way to use the outline to be drawn on the overlapping mesh instead of applying each highlight layer?

11

I know. HL will add to the draw calls. There has been (a number) of other posts recently in the forum about how we could possibly make edge rendering apply more specifically to an object group (or exclude objects or object groups). But the subject is complex and then, far beyond my reach. :dizzy_face: Let’s just hope the ‘big brains’ :brain: :wink: will eventually find one of their own automagical :magic_wand:solution for this. Meanwhile, we’ll do what we can.

1 Like