Performant way to render many disconnected lines with different numbers of verticies

Questions
1

A bit of context, I’m trying to rewrite a loader that creates a bunch (10k-60k) of three geometries representing lines in 3d space with differing numbers of points making up with each line. The lines are not expected to be connected. Initially, each geometry is then used to create a separate THREE.Line.

This works and things look like I expect, however the performance is subpar.

My approach to optimization thus far has been to create a single BufferGeometry using position instead of vertices and then to render the whole geometry with a THREE.LineSegments object. However, it seems like LineSegments makes the assumption that each line is made up of 2 3d points and breaks up the lines accordingly. If I use a Line object instead, it appears to connect all of the disconnected lines, which makes sense but isn’t what I’m looking for ultimately. I tried some experiments with BufferGeometry indicies but feels like I may be going in the wrong direction with that.

So my question is: what is a performant way to build up a BufferGeometry for and render many disconnected lines each made up of a different number of points?

Created a small live code demo of what I’m attempting here: https://jsfiddle.net/xpqL8o6b/15/

2

Hi!
Maybe this example will give you some ideas about how index works: https://jsfiddle.net/prisoner849/cea4szgL/
7 points, 5 lines.

3

Hello Paul, thanks for a speedy reply and very helpful example!

If I understood your example correctly, I think I’m more convinced that indicies aren’t what I’m looking for here. Generally, almost no lines will share any given point.

I’ve updated the fiddle here to better show what I have at the moment that I’m trying to optimize: https://jsfiddle.net/Lm5g9kqd/11/

4

Just in case: Using NaN in attributes - #7 by prisoner849 :slight_smile:

5

Thanks for that example, indexing properly is exactly what I was looking for!

Updated my small sandbox version for future readers: https://jsfiddle.net/Ljvh5fbw/5/

1 Like