Optimizing tube geometry creation?

Questions
,
1

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;
}
2

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