# How can I create a beautiful outline for meshes aka "Cell Shading" **URL:** \ **Category:** Questions\ **Tags:** meshes, edge-rendering\ **Created:** [November 25, 2025, 6:22am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556 "2025-11-25T06:22:03Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 6:22am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/1 "2025-11-25T06:22:03Z")
Good afternoon. I want to create an outline for meshes( **Cell Shading** ), as in CAD programs, for example in SketchUp. I tried the built-in enableEdgesRendering method, tried to write shaders, used postprocesses, but I don’t like the way it looks. I want clear, thin lines along all the edges. Like for example in these screenshots: ![c57883e1a6351f268e130eb01a968cd7c36e1777](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/4/f4a221c6107316c13a06764ac4f5ebed5f296410.png) ![no_diagonals](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/b/3bbad55a1c34254651bf5d3d64e7e81b30f620e5.png) ![composition](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/2/92771d1ec02e08a20b858be3e9695411f3fe7dd8.jpeg) How can I get such lines for any loaded model without manually adjusting for each model? I found these articles and tried to use them to achieve my goals, but it didn’t work out: - [Wireframe hidden line shader?](https://forum.babylonjs.com/t/wireframe-hidden-line-shader/5171) - [OpenGL - Detection of edges - Computer Graphics Stack Exchange](https://computergraphics.stackexchange.com/questions/2450/opengl-detection-of-edges) - [OpenGL GLSL - Sobel Edge Detection Filter - Computer Graphics Stack Exchange](https://computergraphics.stackexchange.com/questions/3646/opengl-glsl-sobel-edge-detection-filter) - [Clipping Space: Single-Pass Wireframe Rendering](https://strattonbrazil.blogspot.com/2011/09/single-pass-wireframe-rendering_10.html) - [Clipping Space: Single-Pass Wireframe Rendering Explained and Extended](https://strattonbrazil.blogspot.com/2011/09/single-pass-wireframe-rendering_11.html) ---
**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\ **Post date:** [November 25, 2025, 8:13am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/2 "2025-11-25T08:13:02Z")
I’m interested by the answers ! 🙂 ---
**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:** [November 25, 2025, 8:39am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/4 "2025-11-25T08:39:38Z")
did you try this: ```auto var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene); box1.position.x = -2.5; // Kanten für Box 1 var box1Edges = [ // Untere Fläche [new BABYLON.Vector3(-1, -1, -1), new BABYLON.Vector3(1, -1, -1)], [new BABYLON.Vector3(1, -1, -1), new BABYLON.Vector3(1, -1, 1)], [new BABYLON.Vector3(1, -1, 1), new BABYLON.Vector3(-1, -1, 1)], [new BABYLON.Vector3(-1, -1, 1), new BABYLON.Vector3(-1, -1, -1)], // Obere Fläche [new BABYLON.Vector3(-1, 1, -1), new BABYLON.Vector3(1, 1, -1)], [new BABYLON.Vector3(1, 1, -1), new BABYLON.Vector3(1, 1, 1)], [new BABYLON.Vector3(1, 1, 1), new BABYLON.Vector3(-1, 1, 1)], [new BABYLON.Vector3(-1, 1, 1), new BABYLON.Vector3(-1, 1, -1)], // Vertikale Kanten [new BABYLON.Vector3(-1, -1, -1), new BABYLON.Vector3(-1, 1, -1)], [new BABYLON.Vector3(1, -1, -1), new BABYLON.Vector3(1, 1, -1)], [new BABYLON.Vector3(1, -1, 1), new BABYLON.Vector3(1, 1, 1)], [new BABYLON.Vector3(-1, -1, 1), new BABYLON.Vector3(-1, 1, 1)] ]; box1Edges.forEach(function(edge){ var line = BABYLON.MeshBuilder.CreateLines("box1edge", {points: edge}, scene); line.color = new BABYLON.Color3(1, 0, 0); line.parent = box1; }); // box1.renderOutline = true; ``` ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 8:42am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/5 "2025-11-25T08:42:52Z")
Thanks for the reply, but here is the code for the faces of a cube, and I need to circle “any” 3D model. And to “manually” draw the edges of models from hundreds to thousands of meshes is to kill. ---
**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:** [November 25, 2025, 8:46am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/6 "2025-11-25T08:46:32Z")
I see. Maybe you can modify this example for your purposes: [Porting example by ChatGPT (Porting from xeogl to Babylon.js) - Demos and projects - Babylon.js](https://forum.babylonjs.com/t/porting-example-by-chatgpt-porting-from-xeogl-to-babylon-js/41072) ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 8:49am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/7 "2025-11-25T08:49:59Z")
Thanks, I see the shaders, I’ll go figure it out if it’s useful or not! ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [November 25, 2025, 8:54am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/8 "2025-11-25T08:54:41Z")
What about this? > **[Babylon.js docs](https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary/edgeDetectionPP/)** ![EDPP](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/0/b00820e10fa433ee4e589bf6dbd96d2721df8d8f.jpeg) ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [November 25, 2025, 9:00am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/9 "2025-11-25T09:00:16Z")
Hey @u4iha1, welcome 🙂 > [@u4iha1](#): > > I tried the built-in enableEdgesRendering method, tried to write shaders, used postprocesses, but I don’t like the way it looks Maybe it would be nice if you could show us what you tried and explained a bit more what’s wrong. > [@u4iha1](#): > > Like for example in these screenshots I can reach similar result with [enableEdgesRendering](https://playground.babylonjs.com/#TYAHX#349) : ![Screenshot from 2025-11-25 09-55-26](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/d/8de07dc9a4d8d89384e79fdbe5ad06cf6a303af1.png) So maybe you can explain a bit more what you look for ? > [@u4iha1](#): > > I want clear, thin lines along all the edges `FYI`: let’s not confused mesh edges (which is the screenshot above) and the global “shape” edges which is the one “Cel-shading” version of your Smurf. For this kind of rendering, a shader will be needed. I would advice to have a look at the toon shader tuto here : [![](https://img.youtube.com/vi/YmcZ69xlOjM/maxresdefault.jpg "Create Your Own Toon Shader with Babylon.js! Part 3") ](https://www.youtube.com/watch?v=YmcZ69xlOjM) A part is dedicated to this contour ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 9:03am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/10 "2025-11-25T09:03:36Z")
I tried using postprocesses. The problem is in the drawing of the lines, some are too thick, some for some reason are displayed as dotted lines when you rotate the camera around the model - the lines are flashing. ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 9:07am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/11 "2025-11-25T09:07:11Z")
This is the effect I get when using enableEdgesRendering. It doesn’t seem pretty to me. ![2025-11-25_12-05-54](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/d/fdbcbb7115f63ac694eaf3a675a2bf6899e474f6.png) And here’s what a Wireframe looks like: ![2025-11-25_12-07-21](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/1/816468587692b472b6165d89b3f64fdb711ffe8a.jpeg) ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [November 25, 2025, 9:19am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/12 "2025-11-25T09:19:34Z")
Can you repro your issue in a playground? That would help figuring this out 👍 ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 9:22am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/13 "2025-11-25T09:22:04Z")
My project is 20k lines of code and I’m not sure if I can quickly create a project on the “playground”. But I’ll try to find the time and implement my problems in the sandbox. ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [November 25, 2025, 9:26am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/14 "2025-11-25T09:26:00Z")
> [@u4iha1](#): > > My project is 20k lines of code For sure we don’t need all of your code : try to isolate a mesh on which you want your effect (export to GLB for example) and share a playground which loads this GLB. Since it’s a shading-related question, almost no code is needed 🙂 ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 9:28am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/15 "2025-11-25T09:28:34Z")
I understand, but the problem is that this is an Electron application created using the FSD architecture on React with all its features. To properly transfer everything to the sandbox, i will have to try 😅 ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [November 25, 2025, 9:33am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/16 "2025-11-25T09:33:40Z")
This thread may help - [Outline Post-Process](https://forum.babylonjs.com/t/outline-post-process/50488) There is a nice PG - [https://playground.babylonjs.com/#WGZLGJ#10564](https://playground.babylonjs.com/#WGZLGJ#10564) > [@u4iha1](#): > > but the problem is that this is an Electron application created using the FSD architecture on React with all its features. I believe just a sample GLB model will be enough to test outline for your case. ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [November 25, 2025, 9:37am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/17 "2025-11-25T09:37:24Z")
Just call the GLTF exporter on a simple scene with the mesh you are using for testing 🙂 > **[Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/Exporters/glTFExporter)** ---
**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:** [November 25, 2025, 9:51am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/18 "2025-11-25T09:51:18Z")
It would be interesting to know how these round meshes were made. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/2/e2e7574457b28c0141b577b2b54df5acc5c607d7.png) I mean, if the circles are composed of individual triangles, even a shader or post-process won’t deliver good results. ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 9:58am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/19 "2025-11-25T09:58:00Z")
Thanks for the interesting links, I will definitely test it soon! ---
**Author:** ![u4iha1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/u4iha1/32/49178_2.png) [@u4iha1](https://forum.babylonjs.com/u/u4iha1)\ **Post date:** [November 25, 2025, 9:58am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/20 "2025-11-25T09:58:50Z")
I can’t share/show these models. Now I’m looking for something similar, for demonstration and testing. ---
**Author:** ![fuyutami](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/fuyutami/32/49210_2.png) [@fuyutami](https://forum.babylonjs.com/u/fuyutami)\ **Post date:** [November 25, 2025, 9:59am UTC](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556/21 "2025-11-25T09:59:52Z")
For better edge lines with edges renderer I would suggest tweaking edges renderer properties mainly mesh.edgesWidth and epsilon parameter. [Next page](https://forum.babylonjs.com/t/how-can-i-create-a-beautiful-outline-for-meshes-aka-cell-shading/61556.md?page=2)