Best performance techniques for displaying lots of dynamic data in 3D?

[Koolala]

What are the best ways to stream data at runtime into Babylon to be visualized?

I have a Node.js TCP connection that is constantly receiving data packets. Each packet corresponds to data to display in different X Y Z locations. Imagine if there was 100 or 1000 or 10,000 of these information packets updating every second.

Naive solution:
Use a TextBlock object floating in space for each data packet. Update each blocks text as data comes into that location. I’m guessing this wouldn’t be feasible for 10,000 TextBlocks updating every second.

Best solution I can think of:
Create a textured plane with all possible text on it. Duplicate this object as an instance 10,000 times. Then use 10,000 instances of cubes to display data next to it, sizing them to create analog data or covering the texture to block out or highlight different options.

If you were pushing dynamic data visualization to its limits, how would you do something like this?

[JohnK]

@Koolala

Create a textured plane with all possible text on it.

This statement seems to imply that there is a finite number of words that can be displayed? Is this true? If so how many words?

The following PG is only for a small array of text and nothing like your intention of updating a large number of text items per second. It does show a way of using dynamic texture from a textured plane to display labels at given positions.

Babylon.js Playground

[Koolala]

Lets say an array of 8 words like:

Speed: 1.0
Tilt: 50
Sensing: ON
APM: 133
Encoding: B
Zones: 4
Downtime: 4.2
Type: Z

So say 1,000 of those. But maybe half the data is a different configuration, so it could be 500 of one array and 500 of another.

So 1,000 total blocks of text. 8 values per block. 8,000 values.

I was thinking to pre-compute the words on the left into a texture at start up like with the method you showed, copy it around as static textures, then use the highest performance dynamically changeable 3D mesh available to try and display the 8,000 changing values on the right. Maybe with colors, maybe with data bars. Maybe that mesh would be broken up into eight 1,000 arrays, each array updating every second?

I’m trying to think of ways to push performance and data visibility to the limit since I want to target a mobile device.

[ycw]

1. Prepare char meshes “0-9a-zA-Z :.”
2. Create instances from those meshes
3. Layout those instances

[Mike_Mainguy]

Ohhhhhhh, this is a brilliant idea…been struggling with this myself and I love this idea!

[dsaffo]

The solid particle system might be good for this use case: Babylon.js docs

[roland]

@Koolala

Create a textured plane with all possible text on it.

Yes, sort of a texture atlas.You put all your texts on it.

@Koolala

Duplicate this object as an instance 10,000 times.

You don’t need to duplicate it. You could the create a mesh with 10.000 quads and the just alter the vertex coords + uvs. All quads will use the same texture you will just change the uvs from quad to quad. Or you can use sprites.

IMHO I can’t imagine the daredevill who can read 10.000 pieces of information from the screen at once

Or you can use GreasedLine to create the quads to display different pieces from one texture atlas:

10.000 GreasedLine sprites moving aroung at 92 FPS - quite good.

What a mess LOL and these are only small sprites and are already covering each other multiple times. The texts will be absolutely unreadable.

The texture atlas:

Check out this topic if interested:

Sprites using GreasedLine

Hi! Here is an example how can you use GreasedLine to draw sprites. You have full control of the sprite’s corners so you can easily rotate them, flip them, skew them, move them… The sprites are not rendered in billboard mode by default though… In addition you can use all of the GreasedLine properties to control the appearance. For example dashed sprites:

You can combine it with @ycw 's proposal but you don’t need instances just to set the correct uvs.