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

sometimes lines are thin at certain angles (was face billboarding doesn't quite work) #5

Open trusktr opened 1 year ago

trusktr commented 1 year ago

For example, here is a portion of the SVG demo with a line thickness greater than 1 and sizeAttenuation enabled, with the camera line of site perpendicular to direction of the lines (note the area in the red circle):

Screenshot 2023-01-16 at 3 31 55 PM

When we start to make the camera line of sight parallel with the map from down below, we can see the same area loses its thickness:

Screenshot 2023-01-16 at 3 36 44 PM

Here's a similar angle but from the side instead of below, and the line maintains its thickness:

Screenshot 2023-01-16 at 3 35 24 PM
trusktr commented 1 year ago

The joint lines are billboarded, but the user lines are also approaching parallel with the direction of the joint line, so there's nothing that can be done with the current geometry.

To fix this, we need to take advantage of WebGL 2 geometry shading (generate the vertices in the shader, so that the only thing we need to pass in is the user line points), or WebGPU compute shading (similar, but different).

Ultimately the user will provide only a single array of line points, then shading handles the rest, which includes generating points or pixels around the user points to draw the region of the line, including joint miters, rounded corners, end caps, etc.

We will implement that in, https://github.com/lume/three-meshline/issues/7, and that will close this issue.