@dubois I have checked it it is outdated as well 
1 Like
Experiments with Fat Lines: Conditional Edges + thresholdAngle, all in one shader (r145)
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 
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 
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.
3 Likes
@ 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.
Model.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ā¦