mrdoob/three.js — Issue #1370: Performance with drawing lines
Author: libe
Created: 2012-02-21 13:34:55+00:00
State: open

I am using this very basic code to draw lines:

```
for (var i = 0; i < Lines.length; ++i)
{
material = new THREE.LineBasicMaterial( { color: 0xff7700, opacity: 1, linewidth: 3.0});
line = new THREE.Line( Lines[i], material);
scene.add( line );
}
```

The problem is that is very inefficent: I am displaying 3D model with edges and in some cases, when I get almost 800 "lines" I see a big performance hit.

So I tried to merge geometry client side with this:

```
var combined = new THREE.Geometry();
for (var i = 0; i < Lines.length; ++i)
{
THREE.GeometryUtils.merge( combined, Lines[i] );
}
line = new THREE.Line( combined, new THREE.LineBasicMaterial( { color: 0xff7700, opacity: 1, linewidth: 3.0}));
scene.add( line );
```

but doesn't work because I have a huge single continuos line and not many disjoint ones (also it takes a lot to merge them into one).

So I was wondering if you could give some tips to efficiently render many edges in a scene? Should I draw lines as real meshes with an almost degenerate triangle for a single edge?

Thanks