Fat lines - best approach for 10k+ lines


I need to render 10k+ complex polygons (maximum ~70k vertices each, but most of them have up to 500 verts) on 2D space with raycast.

Currently im using spite/THREE.MeshLine and with merged geometries performance is ok. However this library doesn’t have correct line joining which leads to inconsistent line width.

Due to this, and due to MeshLine being dead, I’m trying to implement my own MeshLine with miter up to limit then bevel, (with help from Drawing Lines with WebGL), and that also performs ok, but it’s incorrect geometrically for some cases. To be more precise - very low angles between line segments case (line segments overlapping) - a weird spike is rendered:

  • raycast implementation may be painfully complex for this.

There is another solution - three.js webgl - lines - fat and it seems to be perfect one. Unfortunately I’m unable to merge geometries due to InterleavedBufferAttributes, therefore performance is unsatisfying here. Is it possible to merge geometries with InterleavedBufferAttributes with custom merge function?

Could you give me an advice which approach should I go with?

Best regards, sw