# How to get the perfect outline **URL:** \ **Category:** Questions\ **Tags:** mesh\ **Created:** [June 27, 2022, 6:03am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711 "2022-06-27T06:03:44Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\ **Post date:** [June 27, 2022, 6:03am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/1 "2022-06-27T06:03:44Z")
I tried several methods, but the results were not very good； I just need the outline of ground ！！！ > **[Babylon.js Playground](https://playground.babylonjs.com/#FA6RTK%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/d/cd07e40e62c22bb60e0c0ecc0ed7d9f4005ceb3f.png) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/6/569b3b482b4c553037cbea011fbee2b91ee8505a.png) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/a/8ab1838682df5df7877e31740e0a8d63b8b9fd3e.png) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [June 27, 2022, 8:16am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/2 "2022-06-27T08:16:47Z")
Hi, May I just ask what for you is “the perfect outline”? You have 5 methods (may be more) to make an outline of your mesh. I can see you tried your luck on 3 already. I believe two more would be using the line system to create lines around your ground. The other would be get adjacent vertices and color them. So, what should your perfect outline look like? Blured, sharp, thick, tiny, displaced? ---
**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\ **Post date:** [June 27, 2022, 8:21am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/3 "2022-06-27T08:21:54Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/8/68306cdc1d627b1a526a1317d128a708394b3f61.png) Please ignore that the line segment is not straight I want it to look like this I’ve seen other PGS on the forums, but I can’t reproduce some of the effects ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [June 27, 2022, 8:59am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/4 "2022-06-27T08:59:10Z")
I see. Ideally, you would use the edge rendering but there’s an issue with objects not having smooth edges. This issue is described [here](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/10) and [here](https://forum.babylonjs.com/t/how-to-custom-color-gradient-of-highlight-mesh-effect/24558). A solution can be found [in this PG](https://playground.babylonjs.com/#0YG7IF#50) Else, applying this method on sharp edges will turn [like this](https://playground.babylonjs.com/#FA6RTK#3) ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [June 27, 2022, 10:10am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/5 "2022-06-27T10:10:42Z")
> [@mawa](#): > > A solution can be found [in this PG](https://playground.babylonjs.com/#0YG7IF#50) The minimizeVertices function is now part of the core as ‘forceSharedVertices’ so PG is now > **[Babylon.js Playground](https://playground.babylonjs.com/#0YG7IF%2354)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [June 27, 2022, 10:15am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/6 "2022-06-27T10:15:20Z")
Awesome. 😋Thx for the info. Bookmarked it. Makes things just so much easier 😃 ---
**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\ **Post date:** [June 28, 2022, 1:58am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/7 "2022-06-28T01:58:30Z")
> **[Babylon.js Playground](https://playground.babylonjs.com/#0YG7IF%2356)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes What if there are multiple meshes in the scene ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/1/e1b17cb83e8b551e3e9639879398e98dd9689f2d.png) I also think the outline approach looks like copying a source mesh and hiding it behind the source mesh with depth properties. This is why there is no stroke below ground in the image ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [June 28, 2022, 7:48am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/8 "2022-06-28T07:48:16Z")
> [@ecojust](#): > > This is why there is no stroke below ground in the image You can solve this with a thin box > **[Babylon.js Playground](https://playground.babylonjs.com/#0YG7IF%2357)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes This is the best I can achieve with the two meshes > **[Babylon.js Playground](https://playground.babylonjs.com/#0YG7IF%2359)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\ **Post date:** [June 28, 2022, 8:01am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/9 "2022-06-28T08:01:46Z")
> **[Babylon.js Playground](https://playground.babylonjs.com/#0YG7IF%2360)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/a/4a065692fd95c41320dfd12a875fbc16457ddbc3.jpeg) This might seem like a bad idea to implement in Blender if you just use existing apis [https://threejs.org/examples/?q=outline#webgl\_postprocessing\_outline](https://threejs.org/examples/?q=outline#webgl_postprocessing_outline) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/e/3e5b998853a1000a78b06731feb5030c8d23db95.jpeg) I have also used this function of three.js, but it is implemented in the late stage, and the calling process is complicated ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [June 28, 2022, 11:36am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/10 "2022-06-28T11:36:40Z")
Is this still a question or some sort of feature request? Thx, ---
**Author:** ![Electromorphous](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/electromorphous/32/34863_2.png) [@Electromorphous](https://forum.babylonjs.com/u/Electromorphous)\ **Post date:** [September 7, 2023, 1:48am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/11 "2023-09-07T01:48:45Z")
Would love for a way to implement these kind of outlining shaders ourselves and apply them to the meshes. @ecojust ---
**Author:** ![Caner](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/caner/32/15711_2.png) [@Caner](https://forum.babylonjs.com/u/Caner)\ **Post date:** [June 5, 2024, 4:03pm UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/12 "2024-06-05T16:03:00Z")
`forceSharedVertices()` does not work well with all meshes, for example animated meshes and the ones involve a mesh hierarchy (consider imported files). So such a feature could be useful 🙏 😁 ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [June 5, 2024, 5:31pm UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/13 "2024-06-05T17:31:29Z")
The perfect outline of a mesh take a mesh, duplicate it and scale an offset then convert meshes to CSG and subtract the inner mesh from the outer mesh [perfect outline](https://www.babylonjs-playground.com/#DEBUR8) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/0/30b5a203364e8200214e6388ce6f5a2e5f6ae78f.png) the attribute “perfect” deserves it from the idea that you can take any mesh to create an outline. If you need just a slice then cut the mesh. ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [June 5, 2024, 5:35pm UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/14 "2024-06-05T17:35:38Z")
Here is a shader for outline the hole scene [Test porting xeogl camerawork to Babylon.js | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#V1DU10#1) via [Porting example by ChatGPT (Porting from xeogl to Babylon.js) - Demos and projects - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/porting-example-by-chatgpt-porting-from-xeogl-to-babylon-js/41072/3) ---
**Author:** ![Caner](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/caner/32/15711_2.png) [@Caner](https://forum.babylonjs.com/u/Caner)\ **Post date:** [June 6, 2024, 6:44pm UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/15 "2024-06-06T18:44:46Z")
Not sure if this will work well on meshes with irregular shapes and holes. ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [June 7, 2024, 6:58am UTC](https://forum.babylonjs.com/t/how-to-get-the-perfect-outline/31711/16 "2024-06-07T06:58:30Z")
Logically, it should work. I have not tested the subtraction function on complex formations. What I can offer you as an idea is this example that I programmed years ago to calculate a shadow. If you take the same point of view with the camera as the sphere, you can see a grey outline around the box. this is your outline. if i were you, i wouldn’t take the sphere, but the camera. the plane should be statically attached to the camera and always look at the camera. [shadow generator](https://www.babylonjs-playground.com/#NALFWH#1) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/8/187cd29651b97444660d272d2b025ebc1b360434.jpeg) There are more techniques for creating an outline with blender on youtube.