Render large amount of single text labels

[Bass]

Hello dear Pixi developers and community,
my goal is to draw a lot (up to 10.000) different text labels at different positions on the stage (each label has a different text and position).

This works pretty sweet for graphics/shapes, because I can batch them all together in one graphics object:

let graphics = new PIXI.Graphics();
loop {
    this.graphics.lineStyle(1, color);
    this.graphics.drawRect(x, y, width, height);    
}
app.stage.addChild(graphics);

But I don't know how to do this with text. I read that BitmapText should be used in terms of performance, but even with the example I don't know how to batch them together.
It looks like I would have to do something like this:

loop {
    let bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' });
    bitmapFontText.x = x;
    bitmapFontText.y = y;
    app.stage.addChild(bitmapFontText);
}

which seems bad in terms of batching and object allocation.

I'm new to Pixi, so maybe someone can show me how to do this with a little code example?

[ivan.popelyshev]

There's DynamicText in pixi-ui repo, but no docs for it https://github.com/pixijs/pixi-ui , src/DynamicText, you should ask author for examples. It uses dynamic spritesheet.

Also bitmaptext has to work with batching, but 10000 is too many even for batched elements. Why do you need that? Are you sure they are all in the same screen?

[Bass]

I'm currently using Pixi to draw a tree diagramm (its awesome btw, I can even draw 1 million nodes) and in the case of zoming out, all the labels could be potentialy visible (even if they would be way too small to see).

Quote

Also bitmaptext has to work with batching,

Ok, but how would I batch them? I guess my previous example isn't the right way, or is it?

Quote

There's DynamicText in pixi-ui repo,

Just for my understanding: This would convert the font into a spritesheet/one single image and then render the letters one by one from the spritesheet?

Quote

you should ask author for examples. It uses dynamic spritesheet.

Where should I ask the author? on Github?

So beside the fact, that I could hide the text labels when they are to tiny/not on the screen, what would be the most effiecent way to render as much text labels as possible?

[ivan.popelyshev]

In general: If you make 1000 containers each consists of one sprite and one graphics - it wont be batched, because shader will be switched each time. You have to separate sprites and graphics into separate containers so sprites appear together in natural order of the tree. Or use pixi-display to sort through containers. I dont know if there are any other objects in your case, that's why im giving this advice.

Now, regarding BitmapText: one bitmapfont uses one spritesheet, and bitmaptext is actually collection of sprites. 10000 bitmaptexts by 10 lettets each = 100k sprites, which will be slow in any case. To optimize that thing you'll need really big advices and several hours of consultation. Even 10k sprites are a problem. Do you require that consultation or do you want to know how to effectively hide/show text and not have huge architectural problems with code?

Pixi-ui DynamicText also uses one spritesheet but it'll automatically add all unicode letters that user needs in runtime. If you need only basic 128 chars - just use BitmapText.

I'm giving same advice to everyone who wants to work with huge number of objects: 

Quote

Maintain a window that's 2x or 3x times larger than camera. When camera hits the bounds, move the "window",  re-calculate all the background objectts inside the "window" and put them in Graphics/tilemap/mesh/whatever_you_use_for_the_map.

 If it works, you dont have to go for difficult solutions, they are significantly affecting your code quality.

[Bass]

Thanks for your explanations!

Quote

Do you require that consultation or do you want to know how to effectively hide/show text and not have huge architectural problems with code?

I would prefer the consultation

Quote

10000 bitmaptexts by 10 lettets each = 100k sprites, which will be slow in any case.

I came across this post, so I thought the text sprites could somehow be btached the same way.

Your "window approach" is a good idea, but before I do anything related to this I just want to draw as much text labels as possible, because I'm testing for the limits of WebGL. It seems like font rendering is such a limit, unlike simple shapes/graphics.

[ivan.popelyshev]

100k is not webgl limit. Transforms take a lot, ParticleContainer is faster because omits many operations and moving them to GPU side.

Since its a test and not direct pixi usage, I wont spend my time with explanations, go talk to @finscn in pixi slack or anyone who ready to spend several hours on this. We'll talk when you read the code and understand how Container, ParticleContainer, Renderer, pixi-gl-core and webgl core work.

IN ATTACHMENT: Here is million bunnies test with different webgl draw methods. Instancing is not present in pixi-v4 but we'll use it in v5. May be I'll write huge article on that later.

> It seems like font rendering is such a limit, unlike simple shapes/graphics.

Make your own bitmaptext that will call sprite renderer directly and you'll get 10x times on transforms. PIXI does not have such optimizations because there are really many ways to improve performance for specific cases that make code unreadable which is very bad for open-source project.

Also turn on legacy mode (MAX_TEXTURES=1) that will eliminate problem with the cost of multi-texturing on some devices.

P.S. Video of 10k animated objects exported from Flash in special renderer for pixi, with pixel-perfect interaction. "limits", heh.

 

million-bunnies-instanced.zip