Render WebGL non-contiguous lines as a single object

Question

I have multiple WebGL lines to render, and they all have the same rendering style. So for performance, I want to render them all as a single object, in a single draw call.

But the problem is that the lines don't all connect to each other.

See example here: http://jsfiddle.net/b6jgS/6/

As you can see the rings connect, but I don't want them to. Yet I still want to draw them in a single draw call.

The relevant code is this, which simply generates some geometry for some rings:

# Pardon the coffeescript!
ringsGeom =  new THREE.Geometry()
for u in [-2..2]
  for v in [0..100]
    ringsGeom.vertices.push new THREE.Vector3(
      Math.sin(v/100 * 2 * Math.PI)
      Math.cos(v/100 * 2 * Math.PI)
      u
    )


rings = new THREE.Line(
  ringsGeom
  new THREE.LineBasicMaterial(
    color: 0xffff00
    linewidth: 1
  )
)
scene.add rings

How do I have a single object draw multiple discreet disconnected lines?

Answer 1

You construct your geometry as an array of pairs of points representing individual line segments, and then create your line like so:

var line = new THREE.Line( geometry, material, THREE.LinePieces );

For an example, see GridHelper.js.

three.js r.58

P.S. three.js includes the requestAnimationFrame() shim. You do not need to include it yourself.