lume / three-meshline

Mesh-based replacement for `THREE.Line` to allow lines thicker than 1 pixel and other features.
https://docs.lume.io/three-meshline/
MIT License
42 stars 4 forks source link

Handle sharp curves #11

Closed eulertour closed 1 year ago

eulertour commented 1 year ago

Shader Change

The old shaders don’t handle sharp curves well.

Pasted Graphic 1

The problem is that the vertices that determine the sides of the line are always extruded by half of the line’s width, regardless of curvature.

vec4 normal = vec4( -dir.y, dir.x, 0., 1. );
normal.xy *= .5 * w;
normal *= projectionMatrix;

This is an approximation that becomes worse and worse the more the line curves.

Pasted Graphic 1

The exact length of the normal vector is 0.5 * w / dot(perp, miter), where miter is the unit vector with the same direction as the normal vector.

Pasted Graphic 2

And the result looks much more natural.

Pasted Graphic 3
eulertour commented 1 year ago

Looking at bit more, this change actually needs some more work to handle the miter around the joints, otherwise they can stretch into infinity. This is probably why it was done this way in the first place, but neither solution is ideal.

https://github.com/lume/three-meshline/assets/43117506/2076a869-6d64-4e41-8782-b150a3505508

trusktr commented 10 months ago

@eulertour thanks for trying this out!