Node - Link Visualisation with expandable SDS and labels

Questions
, ,
1

Hi all,

I am looking to push the limits with BabylonJS without stepping into WebGL content at a lower level.
The requirements are:

  • many selectable, addable, removable, unique nodes (colour, shape, size, icon).
  • links between nodes unique (directed L, directed R, undirected, colour)
  • optional text labels for each node, unique text content.

The application will easily see 50k + nodes and about the same transactions, and Ideally a usable FPS should be achieved.

I’ve been fiddling around for the past few days with instances, thin instances, SPS, etc. and have landed on what I feel is close to suitable for my needs functionally (not currently performance wise).

I couldn’t go with instances or thin instances because they didn’t handle uniqueness well.
I picked SPS as it now handles multimaterial, enabling nodes to have different colours and icons.
I tested the functionality of removal, and selection of nodes - which seems to work okay for my scenario.

  1. What my question to you Jedi’s out there, is how can I better this model?
    I am new to rendering frameworks - especially BabylonJS - So I know I have probably done some questionable stuff to get it rendering.

  2. How can I add one single node to a SPS model

I’ve got a very small concept playground which shows my current way of doing things:
https://www.babylonjs-playground.com/#JKRLKH#47

Here is also a 64k node cube which renders at about 11fps without labels.
https://www.babylonjs-playground.com/#JKRLKH#46

  1. Can I add a lightweight version of the labels so that the example #47 can run with a much larger node count?

I appreciate your responses, and excuse myself for any dumb code within the playgrounds :smiley: smiley:

Regards,
Aldebaran

2

Pinging @jerome regarding the SPS and the possible optimizations.

With that many meshes you need to freeze them by calling freezeActiveMeshes(true) so that the engine does not scan them each frame:

https://www.babylonjs-playground.com/#JKRLKH#48

This one runs at 45fps instead of 11fps.

For text rendering, you should search the forum, I think there has been some discussions about it lately.

…and welcome aboard!

3

Simply don’t call setParticles() each frame when it’s not required
https://www.babylonjs-playground.com/#JKRLKH#49

[EDIT] oops, I didn’t notice the SPS was billboarded, so every particle rotation needs to be recomputed each frame actually.
Well, in this case, maybe it’s better either to NOT use billboarded solid particles and to NOT call setParticles() each frame (say, use 3D particles instead)
or
use something more fitted to the billboard mode, like sprites for instance or standard particles

2 Likes
4

Regarding the freezeActiveMeshes(true) call, it seems that when I remove one particle from the SPS, it removes all. That is why I had to remove it. Ill have a play around with those suggestions. With your expertise, how likely is it that I will get a decent FPS with say 100k - 200k nodes and 100k links?

5

Very hard to tell as it depends on your computer, best thing to do is to test :slight_smile:

6

I tried using sprites as a way to use billboard, but it slowed even more at the same count. That was with removing all unnecessary calls to redraw.
When you say standard particles, do you mean a 3d particle? The issue is that I would still have to render another plane ontop to display a logo. Eg. render a sphere, render a logo onto it; render a rectangle, render a logo onto it. I will need the flexibility of each variable to change in this design. It already sounds very expensive considering it is already struggling for FPS just including basic features like links and nodes at the node count i’d want to be able to run.

It isn’t looking good for having a high performance prototype which can contain the number of nodes

7

I meant the standard particle system Particles - Babylon.js Documentation

1 Like