How to create a perfect outline？

Questions
, ,
1

Bro, I have run into a big trouble.

aim: I want a contour line like HighlightLayer.

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

Plans:

1:renderOutline

2:HighlightLayer

3:two box

Issues — renderOutline:

1: Each mesh requires a separate setting of ‘outlineWidth’ size.

2: After zooming in and out，Different sizes of Outline.

Issues — HighlightLayer:

Exactly what I want. but!

1: Outline is distorted!

2: Even when obscured, Outline will appear(highlight).

configuration: i7-10870h + GTX 1650 (notebook) Google Chrome：141.0.7390.55(Official Version) (64)

Issues — two box:

copy mesh and set ‘renderingGroupId‘‘outlineMesh.scaling = new Vector3(1.05, 1.05, 1.05)‘

1: After zooming in and out，Different sizes of Outline(The border is relatively clear. Not too bad).

2: Setting the ‘renderingGroupId’ causes the ‘HighlightLayer’ to malfunction

3: The back box1 covers the front box2 (because renderingGroupId)

Ps: If you know how to do it. Please try to use concise and universal expressions as much as possible. like ‘Primary English’ （doge.jpg）(￢‿￢ )

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

捕获
捕获821×597 44 KB

捕获2
捕获2882×590 42.1 KB

1 Like
2

1 possible solution is to change outline size based on camera distance:

2 Likes
3

I’ve been thinkin about how to get a constant width. Would it have to include fov? Something like what’s in the “Dolloy Zoom”:

Width per world unit at distance “d” is maybe

camera.metadata = {width: 2*d*Math.tan(camera.fov/2)}
4

Best way to have a constant width is to work on 2D pixels with a post process. Any other vector way will give wrong results (or less wrong ones). Like just the way to compute the distance ‘d’ is problematic: distance to object center, with pivot or not, what to do with long objects, if object is partially behind camera,…

1 Like
5

I’m a beginner.

I decided to use HighlightLayer.(mainTextureRatio: 2). beautiful!!!.

Your approach should have the best performance.It’s too complicated for me now(￢‿￢ )

6

Hi @rain and welcome to the babylonJS family,

Why don’t you use the edge rendering ( Babylon.js docs ) ?

It is pretty simple.

8

https://playground.babylonjs.com/#QKPRI5 These are two different effects，‘HighlightLayer ’The simplest way

9

That playground link is super helpful for showing the difference between the two styles!

For a “perfect” (smooth/glowy) outline, the simplest and most robust way is almost always the HighlightLayer solution, which is what the last post points to.

If you are after a hard, crisp line on the object’s edges, you’ll want to use the EdgesRenderer, but that one can be trickier to set up perfectly on complex models.

For general use, stick with the HighlightLayer—it gives the best result for the least effort.