Make SpriteText more efficient when graph is large

[giorgi-ghviniashvili]

Hi, when graph has 10,000+ nodes and would like to show texts using nodeThreeObject and SpriteText, it becomes very slow.

Is there any solution for this to make it very efficient and fast? Something like buffer geometry or something instead of creating 10K instances of SpriteText?

[vasturiano]

@giorgi-ghviniashvili you can try with TextGeometry, but I'm not sure it will be more perfomant than the Sprite approach.

Perhaps there's some ideas here that are worth a try also: https://threejs.org/docs/#manual/en/introduction/Creating-text

[giorgi-ghviniashvili]

@vasturiano thank you so much. Will try the ides and see if they are more performant.

[mneunomne]

@giorgi-ghviniashvili you can try with TextGeometry, but I'm not sure it will be more perfomant than the Sprite approach.

Perhaps there's some ideas here that are worth a try also: https://threejs.org/docs/#manual/en/introduction/Creating-text

I have just tested out loading the strings as TextGeometry, and it actually made it really slow. Not sure if it was because of the font I loaded, or the ammount of nodes I have (>500). But based on my tests, its best to stick to the SpriteText instead.

[zzr1001]

try CSS3DSprite,creat a div,it's fast

[themaximalist]

I tried CSS3Sprite and CSS3Object and both were pretty slow. It took me a bit to even get the test working, here's what I used if anyone else is looking:

nodeThreeObject(node) {
      const nodeEl = document.createElement("div");
      nodeEl.textContent = node.name;
      nodeEl.style.color = node.color;
      return new CSS3DSprite(nodeEl);
}

Also to get this working I needed to add new CSS3DRenderer() to the extraRenderers array of objects.

What has worked so far, is hiding labels over a certain amount, and selectively letting the user toggle them and calling graph.refresh() — it's not perfect, would love to find a high-performance way to render 10k+ text nodes