# LDraw-like edges

**URL:** <https://discourse.threejs.org/t/ldraw-like-edges/17100>\
**Category:** Resources\
**Tags:** outline, shader-material\
**Created:** [July 14, 2020, 9:40pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100 "2020-07-14T21:40:53Z")\
**Posts on this page:** 14\
**Page:** 3

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [May 2, 2022, 10:27am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/41 "2022-05-02T10:27:25Z")

</div>

@dubois I have checked it it is outdated as well ☹

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 19, 2022, 4:46pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/42 "2022-10-19T16:46:33Z")

</div>

Experiments with Fat Lines: Conditional Edges + thresholdAngle, all in one shader (r145)

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4d663f1b641d36922af94528ec5be33894d4a8fa.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4d663f1b641d36922af94528ec5be33894d4a8fa.mp4)

**Demo: [serene-margulis-iuiob3 - CodeSandbox](https://codesandbox.io/s/serene-margulis-iuiob3)**

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [January 16, 2023, 11:52pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/44 "2023-01-16T23:52:32Z")

</div>

Re horses image:

I assume you do something like giving an edge a face-averaged normal and then measure the angle between the camera forward vector and the normal?

I wonder if it’s possible (as in, has it been done before) to move those edges inwards along their normals to create a “skeleton” or bone structure?

I want to create a glow shader, where you could calculate a skeleton for a shape on the fly and then measure the distance from it to give the shape a gradient outline like unreal bloom-ish.

---

<div class="post-metadata">

**Author:** ![hekatx](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hekatx/32/33507_2.png) [@hekatx](https://discourse.threejs.org/u/hekatx)\
**Post date:** [February 21, 2023, 7:55pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/45 "2023-02-21T19:55:50Z")

</div>

Is there any way to hide the lines behind without the “background model”?

---

<div class="post-metadata">

**Author:** ![luatdt-ttlab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luatdt-ttlab/32/33475_2.png) [@luatdt-ttlab](https://discourse.threejs.org/u/luatdt-ttlab)\
**Post date:** [February 23, 2023, 8:07am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/46 "2023-02-23T08:07:29Z")

</div>

Hi @prisoner849 , in this fatlines example, could it be rendered by SVGRenderer. I tried to use SVGRenderer but it seems the problem lies in the LineMaterial so the outlines did not show.  
My usecase is to export a 2d outline projection of the scene and I’m using exactly your solution 😊  
I want to get a exported SVG file to due with pixelation.  
Thank you!

---

<div class="post-metadata">

**Author:** ![amvdxc](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@amvdxc](https://discourse.threejs.org/u/amvdxc)\
**Post date:** [October 19, 2023, 1:00pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/47 "2023-10-19T13:00:51Z")

</div>

Thanks so much for this. It’s really impressive and such a helpful example. I am wondering, if I wanted to instance this (both helmet and edges), would you have the same suggestion as you did about the horses (that suggestion being using instancedBufferGeometry for the edges and instancing both the model and the edges separately)? The code has evolved so much between the two examples I am having a hard time piecing together this wizardry you have drummed up 🙂

---

<div class="post-metadata">

**Author:** ![Bravest](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bravest/32/39205_2.png) [@Bravest](https://discourse.threejs.org/u/Bravest)\
**Post date:** [October 22, 2023, 12:59pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/48 "2023-10-22T12:59:59Z")

</div>

Hi I have a few questions  
I am running r132 and i am wondering what you need to change to get it to work with instancedmesh and also does this work for animated meshes? does fog work with this shader also? im using the r145 relase of this but running r132 still works thou

---

<div class="post-metadata">

**Author:** ![MKebsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mkebsi/32/44441_2.png) [@MKebsi](https://discourse.threejs.org/u/MKebsi)\
**Post date:** [February 7, 2024, 2:39pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/49 "2024-02-07T14:39:58Z")

</div>

Amazing how could you reach such an effect!

---

<div class="post-metadata">

**Author:** ![Licash](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/licash/32/45261_2.png) [@Licash](https://discourse.threejs.org/u/Licash)\
**Post date:** [May 16, 2024, 8:04am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/50 "2024-05-16T08:04:35Z")

</div>

Hi! Thank you very much for the great work! That is the exact effect I need for my application. I tried to implement it but it creates some extra lines when the camera zooms in and is in a certain angle. Would you happen to know how can I fix it? I attached some images. When not zoomed in it is perfect. Thanks a lot in advance!

 ![Screenshot 2024-05-16 100037](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/10b1eaec697dde52b78ba1eb5ad20fae3bb84100.png)  
 ![Screenshot 2024-05-16 100048](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/4/a4ee1e7c315cc0f8dcd71f19c72be0769ca2df8a.png)

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [May 16, 2024, 12:50pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/51 "2024-05-16T12:50:29Z")

</div>

> [@Licash](#):
>
> Would you happen to know how can I fix it

Unfortunately it can’t easily be fixed unless you use 1 pixel width GL\_LINEs. These lines use geometry to render the thickness that scales based on camera position and this is an artifact of the mesh edges widening and poking through other geometry.

With some creativity and other geometry and depth parameters you may be able to address thsi but it won’t be straight forward I don’t think.

---

<div class="post-metadata">

**Author:** ![Licash](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/licash/32/45261_2.png) [@Licash](https://discourse.threejs.org/u/Licash)\
**Post date:** [May 16, 2024, 12:59pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/52 "2024-05-16T12:59:20Z")

</div>

Thank you very much! That is quite helpful!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 17, 2024, 7:27am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/54 "2024-05-17T07:27:03Z")

</div>

we have added something like it to drei, it does not require postprocessing and is quite simple to use

example: [https://codesandbox.io/p/sandbox/edgesgeometry-iup24?file=%2Fsrc%2FApp.js](https://codesandbox.io/p/sandbox/edgesgeometry-iup24?file=%2Fsrc%2FApp.js)

```jsx
<mesh geometry={geo}>
  <Edges />
  <Outlines />

```

 ![GIegpXkXMAA2g-i](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/b/1b930d19a43efcce962ba968590a5dd23142b413.jpeg)

it is not good enough for CAD, due to line detection, but good enough for games or simpler visualisations.

---

<div class="post-metadata">

**Author:** ![ntk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ntk/32/47635_2.png) [@ntk](https://discourse.threejs.org/u/ntk)\
**Post date:** [June 9, 2024, 2:43pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/55 "2024-06-09T14:43:30Z")

</div>

@ [drcmda](https://discourse.threejs.org/u/drcmda)  
It is very nice.  
Thanks for adding it to drei.

I’ve been using it for my own projects asap,  
It worked on a simple prototype, but in my project that manipulates morphTarget, I get an error.

> Uncaught TypeError: Cannot read property ‘length’ of undefined

Do you have any advice?  
\*I’m a beginner, so I may be making a fundamental mistake.  
I am attaching the Model.tsx code.

 ![error](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/0/d045fc91195cf7bdfad2ea87468b834820d53cc4.jpeg)

[Model.tsx](https://discourse.threejs.org/uploads/short-url/9QxA0320Mr76Yiauc2eo6FqtXtC.tsx) (4.1 KB)

P.S.  
The error was resolved by drawing outlines using direi’s `<Line>` instead of direi’s `<Edges>` and `<Outlines>`.

However, I also found it difficult to generate outlines dynamically for MorphTargets, which was my ideal.

Any good advice would continue to be appreciated… 🙂

---

<div class="post-metadata">

**Author:** ![Licash](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/licash/32/45261_2.png) [@Licash](https://discourse.threejs.org/u/Licash)\
**Post date:** [October 10, 2024, 2:19pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/56 "2024-10-10T14:19:14Z")

</div>

This would be precisely what I need for my project. However, it doesn’t seem to work with primitives, or am I doing something wrong?

[Previous page](https://discourse.threejs.org/t/ldraw-like-edges/17100.md?page=2)