LDraw-like edges

@dubois I have checked it it is outdated as well :frowning:

1 Like

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

Demo: serene-margulis-iuiob3 - CodeSandbox

16 Likes

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.

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

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 :blush:
I want to get a exported SVG file to due with pixelation.
Thank you!

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 :slight_smile:

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

Amazing how could you reach such an effect!

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!


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.

2 Likes

Thank you very much! That is quite helpful!

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

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

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

2 Likes