Jump to content

Render large amount of single text labels


Bass
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...