How to render geometry edges?

Questions
, ,
1

I want to render the outline of a cube, which includes the ‘front-facing’ edges. I don’t want to be able to see through the mesh, so a wireframe or edgesGeometry wouldn’t fit in this scenario (see demo codepen - https://codepen.io/danlong/pen/KbEVKp?editors=1010)

I don’t want to duplicate the cube (as per this demo - https://stemkoski.github.io/Three.js/Outline.html)

If a cube is touching another, I don’t want to render it’s touching edges but still want to be able to control the cube individually so I don’t want to merge the geometry. Two screenshots attached show the two scene states that I want to be able to replicate.

Is this possible and could anyone give me some resources/techniques/advice on achieving this?

Thanks in advance!

Together Apart

2

Hi!
Straight from the twilight zone of my mind:

https://jsfiddle.net/prisoner849/96npfk1r/

EdgedBox
EdgedBox809×445 22.6 KB

I’m not sure that the approach is efficient enough. The other users can comment on it :slight_smile:

8 Likes
3

Have you tried to use THREE.OutlinePass (a post-processing approach)?

https://threejs.org/examples/webgl_postprocessing_outline

Set the hiddenEdgeColor parameter to 0x000000 so hidden edges are not visible in the demo.

3 Likes
4

Thank you @prisoner849 and @Mugen87 for your ideas.

I’ll investigate both of these options and see what I come up with :slight_smile:

5

Amazing. How can I use it for any meshes?

6

@Signa
This is a very specific solution, intended excelusively for boxes.

7

@danlong
I think there’s a better solution, using this shader: http://madebyevan.com/shaders/grid/

https://jsfiddle.net/prisoner849/kmau6591/

BoxEdges

5 Likes
8

Oh, awesome. I’ll take a look and think about implementing! Thanks for the info :slight_smile:

9

Hey there! im a newbie in this field and i was wondering if there is a way to render only the borders. in other words i want the pure black to be fully transparent and only the borders to be visible. Thanks in advance :smiley:

10

Maybe this helps?

From the Collection of examples from discourse.threejs.org
EdgesGeometry-InstancedMesh
FatLineEdges

11

In addition to @hofk 's links: LDraw-like edges

12

@prisoner849 is there a way to use your shader with triangles? (all polygons of a BufferGeometry with edges, like there were a WireframeGeometry, but only with a custom shader)