I am facing a challenge with rendering multiple WebGL lines that share the same style. To optimize performance, I aim to render them all as one object in a single draw call.
The issue arises from these lines not connecting to each other.
Take a look at this example: http://jsfiddle.net/b6jgS/6/
Observe how the rings connect, which is not my desired outcome. Nevertheless, I still want them to be drawn in a single draw call.
The code snippet below showcases the generation of geometry for multiple rings:
# Please excuse 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 can I achieve drawing multiple discrete and disconnected lines as a single object?