# Optimizing tube geometry creation?

I have some code that is being used to generate a spiral cable model, using a CatmullRomCurve3 and a TubeGeometry. Currently, when the cable gets to be long enough, the call to create the TubeGeometry from the curve starts to take a very long time, and consume a lot of memory. Here is some minimal code that shows off my issue. I build an array of points along the curve, calculate the curve, then build the mesh. This call takes over 2 seconds to complete, and a lot of memory. In the real code, it takes longer and consumes more memory, but I’d like to start here. Is there anything crazy that I’m doing here?

``````console.time('page');
const pointsOnCurve = helixPointsArray();

const curve = new THREE.CatmullRomCurve3(pointsOnCurve);
const geometry = new THREE.TubeGeometry(
curve,
pointsOnCurve.length * 5,
0.1,
24,
false,
);
console.timeEnd('page');

function helixPointsArray() {
var path = [];

var t = 0;
t += 0.25;
for (let i = 0; i < 5000; i++) {
path.push(new THREE.Vector3(t, t, t));
t += 0.25;
}

return path;
}``````

Here is your code in a live example: https://jsfiddle.net/pq7f5rwa/

The second parameter `tubularSegments` of `TubeGeometry` has a value of 25000 in your case. This is way to much since the resulting geometry has 1.2 million faces. Is there a specific reason for generating such a complex geometry?

Notice that you can speed-up the process by using `TubeBufferGeometry`. Why? Because all instances of `Geometry` are converted to `BufferGeometry` within `WebGLRenderer`. This conversion process causes quite a lot of overhead. Check out the performance improvement of the following example by just using `TubeBufferGeometry`.

https://jsfiddle.net/pq7f5rwa/2/

1 Like