vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
https://vasturiano.github.io/react-force-graph/example/large-graph/
MIT License
2.25k stars 285 forks source link

Attempting to implement instancing for edges + nodes #492

Open roomyrooms opened 9 months ago

roomyrooms commented 9 months ago

Heya! In my force graph, we routinely get up above 400k edges and 100k nodes. Obviously this ends up lagging quite a bit, but we've already stripped out most fancy graphics and etc.

By far and away the largest impact to performance is the extremely high number of draw calls, so I've been trying to implement instanced meshes for these.

Unfortunately, I think this might be impossible without branching out my own version of three-forcegraph. Is that the case?

Here's a very, very rudimentary example of what I've been trying:

const nodeMaterial = new THREE.MeshLambertMaterial({ color: '#FFFFFF', transparent: false });
const nodeGeometry = new THREE.SphereGeometry();
const nodeInstance = new THREE.InstancedMesh(nodeGeometry, nodeMaterial, 100000); // placeholder #
let nodeIndex = 0;
const nodeMatrix = new THREE.Matrix4();
const getNodeComponent = (node: any) => {
    nodeIndex++;
    return [problem]
};

The main issue is that instanced meshes make use of the .setMatrixAt function to actually function. It seems like this is embedded pretty deep in the stack of force graph repos, but would be an otherwise simple change. I'd appreciate any guidance and/or confirmation that this is/isn't possible. Thanks so much, I love the repo & the work you do across all these amazing resources.

spartypkp commented 5 months ago

Bump! Also been trying to optimize performance for a graph of 250k nodes and 250k edges. Did you end up finding a workaround?