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:


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