# \[Question\] How to use and improve Outline Post Process **URL:** \ **Category:** Questions\ **Tags:** outline\ **Created:** [March 24, 2025, 10:31am UTC](https://forum.babylonjs.com/t/question-how-to-use-and-improve-outline-post-process/57379 "2025-03-24T10:31:30Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![hsonguk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hsonguk/32/37238_2.png) [@hsonguk](https://forum.babylonjs.com/u/hsonguk)\ **Post date:** [March 24, 2025, 10:31am UTC](https://forum.babylonjs.com/t/question-how-to-use-and-improve-outline-post-process/57379/1 "2025-03-24T10:31:30Z")
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](https://playground.babylonjs.com/#YH09TG#5) 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 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/0/30907d2dc7c1e1ca09d518edb65e490e0a2b2a89.jpeg) Darker when zoom out ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/b/9b0f819b22351f39bf8450e2d4fc6a87a9445ba4.jpeg) Complete black ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/f/9f6dc58a963567f3f8ea50fa5f0e6df86e958a0e.png) 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. ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [March 24, 2025, 12:16pm UTC](https://forum.babylonjs.com/t/question-how-to-use-and-improve-outline-post-process/57379/2 "2025-03-24T12:16:32Z")
I do not think there is an option; [see here](https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/postProcesses/src/edgeDetection/edgeDetection.fragment.fx). 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](https://github.com/BabylonJS/Babylon.js/blob/0f7e0af75e41d694bf576bed9e8f366e8511a9e6/packages/dev/postProcesses/src/edgeDetection/edgeDetectionPostProcess.ts#L97), you could either sample the worldPosition texture or [calculate worldPosition from depth](https://forum.babylonjs.com/t/pixel-position-in-world-space-from-fragment-postprocess-shader-issue/30232/2). Then you constraint outline width by distance to camera. * * * Here is another playground for editing the shader: [https://playground.babylonjs.com/#HBSUDW#8](https://playground.babylonjs.com/#HBSUDW#8) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [March 24, 2025, 2:25pm UTC](https://forum.babylonjs.com/t/question-how-to-use-and-improve-outline-post-process/57379/3 "2025-03-24T14:25:48Z")
Building on @Joe_Kerr idea: > **[Babylon.js Playground](https://playground.babylonjs.com/#HBSUDW%2314)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes But it’s not really good, there are still big artifacts on buildings when they are close… ---
**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\ **Post date:** [March 24, 2025, 3:30pm UTC](https://forum.babylonjs.com/t/question-how-to-use-and-improve-outline-post-process/57379/4 "2025-03-24T15:30:10Z")
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 😃 [Robot one](https://playground.babylonjs.com/#HBSUDW#15) [HUUUGE scene](https://playground.babylonjs.com/#HBSUDW#16) Here is the actual NME: [Babylon.js Node Material Editor](https://nodematerial-editor.babylonjs.com/#78QILP#5) ---
**Author:** ![hsonguk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hsonguk/32/37238_2.png) [@hsonguk](https://forum.babylonjs.com/u/hsonguk)\ **Post date:** [March 24, 2025, 3:44pm UTC](https://forum.babylonjs.com/t/question-how-to-use-and-improve-outline-post-process/57379/5 "2025-03-24T15:44:10Z")
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.](https://github.com/OmarShehata/webgl-outlines/) Demo [ThreeJS Outlines Post Process](https://threejs-outlines-postprocess.glitch.me/) 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). ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/1/21a0f519054317ccd2e91521d27949f9984957b1.jpeg) 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?)