# 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:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![D13](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@D13](https://discourse.threejs.org/u/D13)\
**Post date:** [July 28, 2020, 6:42pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/21 "2020-07-28T18:42:20Z")

</div>

This is great. Awesome effect! A lot more control of edge, but, right now I’m still having to use LineMesh to get a merged line, with a custom line width, and material that I can control. Though, this is amazing and, I can easily see its use in many things, including - “Instructions”, I still cant help but feel like the ThreeJS lines / edges need more work. Creating an edge, custom width, and coloring it, along any side of a geometry, should be properties to switch on and customize:

{  
**outline** : edge[faces][width] || vertex[index][width],  
**lineColor** : color,  
**outlineMaterial** : [materials][index/face],  
**outlineGlow** : glowMaterial[startPix, endPix]  
}

It could solve glow outline cases with SpriteMesh too. I mean, until an actual THREE.Neon (light emitting line) is created anyways. It would alleviate the need for THREE.line in a lot of uses cases that really want an “outline”. Right now, I have to create shapebuffer paths of existing geometries and wrap the lines where they need to go, then merge them. Its overhead. Granted, I’m not an expert, and if a better solution exists please point me in the right direction, but outlines in ThreeJS seem harder than they should be right now.

---

<div class="post-metadata">

**Author:** ![vishnukool](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vishnukool/32/14840_2.png) [@vishnukool](https://discourse.threejs.org/u/vishnukool)\
**Post date:** [November 30, 2020, 9:16am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/22 "2020-11-30T09:16:44Z")

</div>

Thanks for this! This is awesome  
I wish doing this was easier though, rather than having to create a whole new set of meshes and adding it in the scene ☹

---

<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:** [November 30, 2020, 5:00pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/23 "2020-11-30T17:00:09Z")

</div>

The effect requires custom vertex attributes so unfortunately there’s no getting around creating new geometry / meshes.

---

<div class="post-metadata">

**Author:** ![jakubrpawlowski](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jakubrpawlowski/32/9276_2.png) [@jakubrpawlowski](https://discourse.threejs.org/u/jakubrpawlowski)\
**Post date:** [February 12, 2021, 8:44pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/24 "2021-02-12T20:44:00Z")

</div>

Love the demo gkjohnson! Will play around with it today.

Personally I would love if I could just mark edges in Blender like I already do for Freestyle renders, export gltf including custom vertex props and from there custom edges shader should figure out the rest in one render pass. Unfortunately my limited glsl knowledge isn’t enough to get there yet.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 1:09pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/25 "2021-10-26T13:09:09Z")

</div>

@prisoner849 do you know if this approach of outlining will work on instancedMesh using gltfGeometry?

---

<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 26, 2021, 1:16pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/26 "2021-10-26T13:16:50Z")

</div>

@Lawrence3DPK 🤔 If you implement instancing for conditional line segments, then it should work.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 1:19pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/27 "2021-10-26T13:19:31Z")

</div>

@prisoner849 i’m not quite sure i get what you mean, would i need to add a seperate instanced mesh for both the original gltf model with textures and such and then create a secondary instanced mesh for the conditional line segments?

---

<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 26, 2021, 1:23pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/28 "2021-10-26T13:23:14Z")

</div>

@Lawrence3DPK That outlining is not a mesh, it’s a set of line segments, that uses its own material to be able to show lines conditionally.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 1:26pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/29 "2021-10-26T13:26:00Z")

</div>

@prisoner849 ok i sort of get you, i’m going to try to compile a live example to share

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 1:39pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/30 "2021-10-26T13:39:48Z")

</div>

@prisoner849 here’s a live example that simply creates instanced mesh from your gltf horse template, i am looking into it but i have no idea where to…

> [@prisoner849](#):
>
> implement instancing for conditional line segments

https://codepen.io/forerunrun/embed/preview/GRvmpOp?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=GRvmpOp

---

<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 26, 2021, 2:25pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/31 "2021-10-26T14:25:07Z")

</div>

Turned `BufferGeometry` into `InstancedBufferGeometry`, it’s for the outline.  
Added an instanced attribute for positions `instPos`, also changed vertex shader.

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/5/c520a8f0ebd550d37f6c11af76583c3b26555cc0.png)

Example: [https://codepen.io/prisoner849/pen/vYJmLJx?editors=0010](https://codepen.io/prisoner849/pen/vYJmLJx?editors=0010)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 2:32pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/32 "2021-10-26T14:32:20Z")

</div>

@prisoner849 ohhh That is way more simple and efficient than the hacky approach i found!! i basically added createOutlineSegments(geometry, color) to container in a for loop for each instance and setting the oulineSegments position to the instance position…

see live example [here](https://codepen.io/forerunrun/pen/GRvmpOp?editors=1010)

but as i see your way is actually the correct way i shall have a look at your example and see what your master mind has done 🙂

thank you for your help man!! really appreeciate it!!

---

<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 26, 2021, 2:42pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/33 "2021-10-26T14:42:09Z")

</div>

> [@Lawrence3DPK](#):
>
> i basically added createOutlineSegments(geometry, color) to container in a for loop for each instance and setting the oulineSegments position to the instance position…

If it works, then it works 🙂

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 2:44pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/34 "2021-10-26T14:44:42Z")

</div>

@prisoner849 for sure, i’m just worried about performant issues if not using instanceMesh, i’m sure lineSegments is quite lightweight as it is but of course instanceMesh is always going to be more efficient in terms of performance

---

<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 26, 2021, 2:47pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/35 "2021-10-26T14:47:41Z")

</div>

@Lawrence3DPK There are no instanced versions for lines and points, so all you have for that is `InstancedBufferGeometry`

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 2:55pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/36 "2021-10-26T14:55:37Z")

</div>

@prisoner849 one problem i have now is using r133 with the `EdgesGeometry` and `createOutlineSegments` functions you have created as r133, of course, no longer uses `THREE.Geometry`, trying to create a workaround for later versions than r124…

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 26, 2021, 5:50pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/37 "2021-10-26T17:50:26Z")

</div>

@prisoner849 i am having a really difficult time updating the example to bufferGeometry in r133, been trying for a while with no luck, any chance you have some pointers or guidance on how to update your example to use bufferGeometry in r133?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 31, 2021, 2:43am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/38 "2021-10-31T02:43:52Z")

</div>

hey @prisoner849 i managed to upgrade your example to r133 using BufferGeometry without having to import the deprecated Geometry class 🙂 was long but i managed it…

https://codepen.io/forerunrun/embed/preview/bGrWaKK?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=bGrWaKK

Thank you so much for all your help with this! you are a true legend!

EDIT: this only seems to work well with standard geometries with nicely spaced vertices, i think i’m still calculating something wrong and the bufferUtils.MergeVertices works strangely on models that have non uniformly spaced vertices

---

<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:** [April 28, 2022, 6:41am UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/39 "2022-04-28T06:41:42Z")

</div>

Hello Three.js community  
@prisoner849 are there any plans to update this example so it will work with buffer geometry  
Thank you in Advance

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [April 30, 2022, 1:39pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100/40 "2022-04-30T13:39:59Z")

</div>

This looks similar:

> **[three-line-outline](https://www.npmjs.com/package/three-line-outline)**
>
> Three.js outlines rendered with lines. Latest version: 0.0.7, last published: a year ago. Start using three-line-outline in your project by running \`npm i three-line-outline\`. There are no other projects in the npm registry using three-line-outline.

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

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