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