More lume-line instance attributes

[Pecos7]

Add styling to the lume-line attributes similar to many design editors such as:

• Line thickness
• Cap type and corner types
• Dashed and dotted lines
• Gap and length specifications for dashed/dotted lines
• Line alignment (inside, center, outside)

Example (Adobe Illustrator):

The ability to curve lines like a bezier. Perhaps something similar to what lume-shape already has.

[trusktr]

Hey Kyle! GPU shaders are tricky. Lines are based on points (geometry). SVG is based on math curves and not. We won't be able to support all SVG features.

To get an idea of how the near-term HTML line abilities will be, see here:

https://docs.lume.io/three-meshline/

That's a more complicated JavaScript interface for Three.js directly, and we'll be using that to improve the HTML line element.

So the near-term updates that we can realistically do will be:

• curves, but these curves are not math pixel algorithms like SVG, but based on geometry (a series of points). So with curves, we will generate discrete points along the hypothetical curve path.
  • To get an idea of what I mean, the following demo has "curves" around the shape of a person, but if you zoom in, you can see the discrete geometry points: https://docs.lume.io/three-meshline/demo/shape.html
  • The HTML interface will have an option to configure how many points to place around each curve, but ultimately they will be geometry points. SVG is 2D, and pixel-based, so when you zoom in on an SVG, it re-calculates the 2D pixels in a very different way (not 3D shaders) and the result is always smooth, but not as fast, and not 3D.
• line thickness with size attenuation (in that previous demo with the person, the lines have a thickness in world units, and a part of a line closer to the camera is thicker than a part of the line further away)
• dashes (see dashArray and dashRatio in https://docs.lume.io/three-meshline/demo/index.html to play with dashes, and more).
  • There will be no dotted lines (as in circles/dots along a line?) for now, but it might be possible to generate a sequence of evenly-spread points (vertices) along a line and render them as GPU particles instead of lines, as a workaround, TBD.

The rest will require some tricky math and shader work, and would be longer term if possible. For you mapping use case, we'd need to stick to these initial near-term limits.

[trusktr]

I forgot to mention, these lines in the GPU are made using sets of triangles. They are meshes. That's why they are difficult to make compared to SVG. They are meshes with triangles that, on screen, give the resemblance of a line.

[Pecos7]

Thank you for these resources, Joe! I'll dive deeper in to the docs from the links provided and work within these constraints. Your amendments to my feature request make sense given your framework. I'm excited!

[trusktr]

Listing some resources here on making shader/geometry-based lines:

• https://offscreencanvas.com/issues/webgl-line-rendering/
• https://blog.scottlogic.com/2019/11/18/drawing-lines-with-webgl.html
• https://mattdesl.svbtle.com/drawing-lines-is-hard
• https://medium.com/@hjhimanshu01/connecting-dots-drawing-lines-in-webgl-7c35a0dc0e72
• https://wwwtyro.net/2019/11/18/instanced-lines.html)/2019/11/18/instanced-lines.html
• https://ownkng.dev/thoughts/webgl-line
• https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-animated-lines/
• https://sudonull.com/post/69577-Drawing-thick-lines-in-WebGL