[Question] How to use and improve Outline Post Process

Dear Experts,

Recently i am trying the outline post process method. The target is to introduce a “sketchup” feel effect when rendering the scenario.

Outliner Improvement | Babylon.js Playground

While the outline with close by object is nice, the problem i am facing is the object further away, and when the scenario is large, all objects are becoming very dark.

Distant object become dark

Darker when zoom out

Complete black

I have tried MMD one, but it is not as good as the outline post-process.
And tuned the parameters (e.g. width and intensity, as well as adaptive to the camera radius), but cannot achieve a reasonable result.

Please let me know if there is any other way to improve.

Many thanks.

I do not think there is an option; see here. So you probably have to edit the shader.

I wonder whether you can detect overlapping edges in the double for-loop of the shader?

Otherwise, since the postprocess uses the GeoBuffer, you could either sample the worldPosition texture or calculate worldPosition from depth. Then you constraint outline width by distance to camera.


Here is another playground for editing the shader: https://playground.babylonjs.com/#HBSUDW#8

2 Likes

Building on @Joe_Kerr idea:

But it’s not really good, there are still big artifacts on buildings when they are close…

2 Likes

Jumping on the thread with my current node material solution for my game. It is still a bit wip, maybe this can help as well?

Been aching to make a thread about perfecting it as well :smiley:

Robot one
HUUUGE scene

Here is the actual NME:
Babylon.js Node Material Editor

3 Likes

Thank you all for your suggestions.

Sorry that I have zero knowledge about shaders…

I will have a look and try to understand how it works.

I searched website and find this solution from ThreeJS

OmarShehata/webgl-outlines: Implementation of a post process outline shader in ThreeJS & PlayCanvas.

Demo
ThreeJS Outlines Post Process

When I throw my scene to it, the result looks better. Although the rendering is different, but it seems it only renders the outline (which is my initial understanding of outline).

It seems different from the post-process in BJS, as I can see that not only the outline, but part of scene is rendered “darker” as well in BJS. (is that possible to render the outline only?)