How to draw multiple line strips in one draw call?

I have a number of line strips (THREE.Line) that I need to draw and I was hoping I could group them all together into a single draw call. Is there a way to do this? With triangle strips, I can add degenerate triangles between each strip and have them all drawn together in one draw call. Is there a trick to do the same thing with line strips?

I see that in the OpenGL spec I could put all the line strips together and separate them with a reset index specified by glPrimitiveRestartIndex (

Is there a way to do the same sort of thing with THREE.js ?

What about using THREE.LineSegments() with an indexed buffer geometry?

Yes I could convert my line strips into lines, I was just hoping I could do something else that didn’t require me to enlarge my index buffer so drastically.

AFAIK, primitive restart and thus glPrimitiveRestartIndex are not available in WebGL.

Just found this

I’m going to try it out to see if if works

This will only work with WebGL 2.

does THREE.JS use webgl 2 or 1?

The latest release (R95) added support for working with a WebGL 2 context. But the device/browser support might be still problematic for projects.

1 Like

You can use the following example code if you want to experiment with three.js and WebGL 2.

1 Like

So what’s the verdict? Can anyone provide sample code that implements line strips with occasional discontinuities?

1 Like

The verdict seems to be (like said prisoner849):

  • Use LineSegments

  • Give your indexes to the Geometry:

let’s say you have 2 curves. Each curve has 4 points. The indexes would be:
[0,1, 1,2 , 2,3, 4,5, 5,6, 7,8]
[0,1, 1,2 , 2,3, < 1st line - 2nd line > 4,5, 5,6, 7,8]

Here is a working example using drei library and created thanks to @prisoner849 :slight_smile: codesandbox