How to fix the outline width, regardless of the distance from the camera

Questions
1

For enabling outline and setting outline width, regardless of how far the camera is, fix the current model on the screen. How to do it?

2

I’m not sure what you need exactly, but here’s an example of using the outline feature on a mesh:

Does that answer your question?

Thanks!
Kevin

3

and you can use the camera.radius to adapt the outline width: Outline Example | Babylon.js Playground (babylonjs.com)

1 Like
4

Thank you for your answer. There may be a problem with the translation. I would like to use OutlineWidth to achieve this feature of protruding edges. Please use the mouse wheel to pull it far and near to feel this feeling. The camera can adapt to the size of the object’s edge in both far and near directions.

5

Thank you, maybe it’s based on this principle. My idea is to use a fragment shader to achieve better results

6

Also, can OutlineRenderer disable deep writing to achieve this effect? Even if the object is obstructed, the outline can still be displayed.

I want:

26100532
26100532730×487 21.8 KB

now:

now6
now6796×583 20 KB

7

Also using isStroke could look similar-ish to outline ?https://playground.babylonjs.com/#1KUJ0A#2537

8

Unfortunately there’s no easy way for outlines to render even if obstructed. @roland - would greased lines work for this?

1 Like
9

I’m currently on vacation so responding from my phone, no PG this time.

GreasedLine is a mesh, so you can position it precisely by setting its z position and move it in front or behind any other mesh. If you need to outline a sphere, you can draw a circle. If you want to use any mesh, you’ll have to calculate the outline of the mesh.

I’ll be at home in two days. I could create a PG.

There is already a cool PG which uses GreasedLine for edge rendering. Search for: edge greased

1 Like
11

Thank you, I will try to search for it. Thank you for your reply

12

It is indeed similar, but HighlightLayer has transparency issues that are difficult to fix. For transparent objects, the contour of HighlightLayer is not satisfactory

13

Using GreasedLine will fix the transparency issue since you can use standard or pbr material to render it. However you might want to try the approach used here first to fix transparency issues with the HighlightLayer.

1 Like
14

thanks, I’ll give it a try

1 Like
15

I hope it helped you! You could use GreasedLine to visualize the outline but the math to calculate the coordinates for the outline in realtime would crack any CPU. That’s why outlines are relying on other techniques as stencilled rendering or edge detection post processes.

16

So Babylon has never had an outline based on post-processing

1 Like
17

Search the forum. For example:

18

There are still many shortcomings in the post-processing based outline solution in the forum. When I have time, I will write a set of post-processing based outline solutions

2 Likes
19

This topic may interest you as well.

20

Can be studied and researched

1 Like