Pixi Text - performance problem

[Saeki Amae]

Hello I am fighting with this problem since few days already and didn't find solution so I thought i would write here )

I need to render texts (about 1000 instances). Those texts may change change size and/or content during running - let's say once per 1-3 seconds average.

Those texts also consist strings written by users - so may be any unicode character (so PIXI.bitmapText rather is no solution). 

My app is already at quite nice performance because of usage of graphics.generateCanvasTexture() method advised by nice ivan.popelyshev  

Only those texts are the issue (if i disable PIXI.Text instances my fps can grow 2-4 times even).

I tried to use cacheAsBitmap option to true when texts aren't updating and setting it to false only when need to update but performance is still quite poor.

What can I do? Please help me!

 

[b10b]

Is it fair to say you want to continuously update ~8 x PIXI.Text at 60fps?  This assumption is based on simplifying your numbers (8Texts x 60fps x 2seconds =~ 1000instances ).

How long are the text strings?

[jonforum]

rendering text sprite by generate texture should give you better perf.
here for you
https://www.pixiplayground.com/#/edit/HTCynNez9S1Lae0Hnekrh

 

ps:for update maybe make a custom texture renderer. it should really more faster !
https://pixijs.io/examples/#/textures/render-texture-basic.js

Edited August 12, 2020 by jonforum

[Saeki Amae]

@b10b  - <=16 unicode characters

@jonforum - I will try your solutions out

[themoonrat]

The very latest version of pixi let's you dynamically create a Bitmap Font, which I think would work really well here.

https://pixijs.download/dev/docs/PIXI.BitmapFont.html#.from

You get the flexibility of dynamic styles, as PIXI.Text can generate, but it'll generate texture atlases for you so the rendering speed, and changing text speed, will be as fast as BitmapText

Initially it could just generate the ASCII characters, but if you detect a different character you can regenerate the atlas?

[Saeki Amae]

5 hours ago, themoonrat said:

The very latest version of pixi let's you dynamically create a Bitmap Font, which I think would work really well here.

https://pixijs.download/dev/docs/PIXI.BitmapFont.html#.from

You get the flexibility of dynamic styles, as PIXI.Text can generate, but it'll generate texture atlases for you so the rendering speed, and changing text speed, will be as fast as BitmapText

Initially it could just generate the ASCII characters, but if you detect a different character you can regenerate the atlas?

OMG!! This is exactly something that i was looking for. Thank you so much!!!

[Shukant Pal]

@Saeki Amae @jonforum The Text display-object already uses a canvas-as-a-texture to render the text into, i.e. caching Text into another texture will generally not improve performance. In fact, it may inflate memory (GPU texture memory) unnecessarily.

If you are working on a commercial product, then the PixiJS text implementation might not fare well for you. For maximum performance, I've seen companies parse fonts and generate a text mesh (plus other tricks); however, that may be out of scope for you.

I would say that @themoonrat's suggestion would be the best PixiJS can offer right now.

[Saeki Amae]

Looks like you know the subject well @Shukant Pal   

Thank you for the advice, i also found themoonrat's advice best

 

[jonforum]

On 8/12/2020 at 10:16 AM, Shukant Pal said:

@Saeki Amae @jonforum The Text display-object already uses a canvas-as-a-texture to render the text into, i.e. caching Text into another texture will generally not improve performance. In fact, it may inflate memory (GPU texture memory) unnecessarily.

 

@Shukant Pal

Ho maybe you true, by experience I have seen a serious performance problem using multiple text transform.
That's why I was talking about preferring a textures renderer.
But I can be confused with talking about several nested texts elements.
In my text engine, i use this approach , because each letter are pixi text + many hacky filter + animations.....
So rendering as text only are unplayable, but when rendering pixi texts in texture + custom rendering, i have no issue.

From what i remember in v4 , text and graphics was very low vs sprites, but maybe this changed in v5, i cant play with yet, with because v5 no have solution for normals map. 

Edited August 13, 2020 by jonforum