FatLine: Add Arrow Rendering Support to webgl and webgpu

[CahierX]

Summary

This PR extends the functionality of LineSegmentGeometry and LineMaterial in Three.js to support arrow rendering directly on fat lines. By adding customizable options to LineMaterial, users can now configure arrow properties for lines without needing additional geometries or meshes.

New Options in LineMaterial

• arrow (boolean): Enables or disables arrow rendering on lines. Default: false.
• arrowSize (number): Defines the size of the arrows. Default: 1.
• arrowStep (number): Sets the interval between arrows along the line. Default: 1.
• arrowReverse (boolean): Reverses the direction of the arrows. Default: false.

The arrows are positioned between consecutive vertices along the line and are rendered using the existing line geometry and material properties.

Motivation

Rendering arrows for large datasets using InstancedMesh or separate arrow geometries often leads to performance and memory issues. By integrating arrow rendering into LineSegmentGeometry and LineMaterial, we solve the following problems:

1. Performance Optimization: Reduces the need to render a separate arrow mesh for each line, which can be computationally expensive for large datasets.
2. Memory Efficiency: Avoids the memory overhead of managing additional arrow meshes for every line segment.
3. Simplified Codebase: Eliminates the need to synchronize arrow meshes with their corresponding lines, especially during visibility or state changes.
4. Consistent Styling: Arrows inherit line attributes such as width, color, and opacity, ensuring a unified appearance without extra effort.

Arrow Rendering Demonstration on Fat Lines

Example Usage

const lineMaterial = new LineMaterial({
    color: 0xff0000,
    linewidth: 5,
    arrow: true,
    arrowSize: 2,
    arrowStep: 10,
    arrowReverse: false,
});
line = new Line2( geometry, matLine );
line.computeArrow();  

world units

Since I am not very experienced with vertex shaders, I utilized a simple approach to implement arrows in world units. The arrow size is scaled by a factor of 20 to achieve consistent visual proportions.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	339.21 79.01	339.21 79.01	+0 B +0 B
WebGPU	486.36 134.94	487.19 135.2	+829 B +255 B
WebGPU Nodes	485.83 134.84	486.66 135.1	+829 B +257 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	465.1 112.07	465.1 112.07	+0 B +0 B
WebGPU	555.49 150.38	555.49 150.38	+0 B +0 B
WebGPU Nodes	511.4 140.12	511.4 140.12	+0 B +0 B

[Mugen87]

Thanks for your efforts but I have the feeling this feature is too use case specific for the wide line implementation. Also given the amount of code that needs to be changed, it seems better leave this kind of arrow rendering out.

[CahierX]

Thanks for your efforts but I have the feeling this feature is too use case specific for the wide line implementation. Also given the amount of code that needs to be changed, it seems better leave this kind of arrow rendering out.

Okay, so if you need to render a large number of line with arrow, is there any better solution

[Mugen87]

The solution itself is fine for what you have described but it is not suited as library code. This kind of rendering is just too specific.

[CahierX]

The solution itself is fine for what you have described but it is not suited as library code. This kind of rendering is just too specific.

Got it, thank you for explaining~