Lines over mesh are losing their actual width

I want to render lines of over a model. The lines are losing there actual width. I don’t want to scale the model down like I did in the image cos it won’t work when the model has protruding regions.

Edit: Also, I can’t use Material.wireframe cos the lines are generated based on something.

Can you please share your code that shows how you create the sphere with the wireframe (or even better share an editable live example)?

The approach from How to achieve this material effect [gif image]? works well on curved surfaces.

2 Likes

it is basically EdgesGeometry on a sphere, so i don’t think there is much to look in the code. https://jsfiddle.net/7L5xbs98/2/

it looks like the lines are calculated in the shader (using barycentric coords?). I don’t want to do that.

Computed in the shader, using UV coordinates.

1 Like

When using EdgesGeometry that way, the mentioned effect is inevitable. AFAIK, it’s not possible to mitigate the issue by using polygon offset so the only way is to scale down the model or scale up the wireframe. Or use a different approach for wireframes like mentioned by @prisoner849.

2 Likes

I think you are right. I will look into @prisoner849 code.

So we have two guys fighting over position. If we bump in mesh_obj the wireframe_obj should win the Z-fight.

polygonOffset: !0, polygonOffsetFactor: 2, polygonOffsetUnits: 2

Summary

3 Likes

wait what? polygonOffset works on lines too? Nice!!!
Edit: Oh you were doing it on the mesh. Amazing way to fix it! Thanks a lot :smile:

Updated fiddle with @rrrr_rrrr’s suggestion : https://jsfiddle.net/2g75rmy8/