How to draw multiple line strips in one draw call?

Questions
#1

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 (https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glPrimitiveRestartIndex.xhtml)

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

#2

Hi!
What about using THREE.LineSegments() with an indexed buffer geometry?
https://threejs.org/examples/?q=index#webgl_buffergeometry_lines_indexed

#3

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.

#4

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

#5

Just found this https://www.khronos.org/registry/webgl/specs/latest/2.0/#NO_PRIMITIVE_RESTART_FIXED_INDEX

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

#6

This will only work with WebGL 2.

#7

does THREE.JS use webgl 2 or 1?

#8

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
#9

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

1 Like
#10

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

1 Like
#11

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