Efficient 3D Line Plot in Plotly js?

Question

Drawing lines is hard. I am looking for a way to draw a lot of 3D line segments in Plotly without the corresponding huge time cost, where drawing ~1000 segments takes over 10 seconds. I am currently using scatter3d lines.

I understand that limiting the number of traces would help a lot with these scaling concerns, but I don't think I'm able to limit the number very much because I would like to incorporate 3 other features:

1. Color coding segments by a value as seamlessly as possible
2. Giving the 3D lines variable width, which I have not come across a way to do smoothly and so could only be accomplished by small segments with gradual width changes
3. Drawing a connected line structure that branches off like a tree (complicating any possibility of using a colorscale feature for the whole figure)

I'd like to know if there are other ways I could use Plotly in a more efficient way to draw this 3D line structure. Attached is a codepen with a simple example showing the huge time costs of drawing many line traces:

Lines Example

If there aren't other ways to increase Plotly efficiency in this specific case, does anybody have suggestions for other ways to render 3D lines with the above features? I have tried MeshLines of Three.js but ran into several issues. Thanks very much!

var d = 1;
let numlines = 1000;

function draw_trace(x0, y0, z0, x1, y1, z1, diam) {
    var trace = {
        type: 'scatter3d',
        mode: 'lines',
        x: [x0, x1],
        y: [y0, y1],
        z: [z0, z1],
        line: {
            width: diam,
            color: 'black',
        }
    };
    return trace;
}

traces = [];
for (var i=0; i < numlines; i++) {
    var x0 = Math.random()*100;
    var y0 = Math.random()*100;
    var z0 = Math.random()*100;
    line = draw_trace(x0, y0, z0, x0+(d*3), y0, z0, d);
    traces.push(line);
}
Plotly.newPlot('lines', traces, layout={'showlegend': false});

Answer 1

Have you already tried intanceMesh from ThreeJS?

It creates as many instances as you want from a given Mesh, maybe it can help you... Here is a simple example: https://codepen.io/matheus-wc/pen/eYvPpbB

let m = new THREE.MeshLambertMaterial();

let rows = 50;
let cols = 125;

let o = new THREE.InstancedMesh(g, m, rows * cols);