LDraw-like edges

Resources
,
21

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.

2 Likes
22

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

23

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

1 Like
24

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.

25

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

26

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

27

@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?

28

@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.

1 Like
29

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

1 Like
30

@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…

31

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

Picture:

изображение
изображение808×798 77.1 KB

Example: https://codepen.io/prisoner849/pen/vYJmLJx?editors=0010

6 Likes
32

@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

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

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

33

If it works, then it works :slight_smile:

1 Like
34

@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

35

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

2 Likes
36

@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…

37

@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?

38

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

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

4 Likes
39

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

40

This looks similar: