Optimized rendering of big amount of items

[Mykola Martyniuk]

Hi there!

I'm totally new in using pixi.js, and I need some help)

I am using pixi.js v4, the task is to render a big amount of items (~10k circles with text for example).

...
let texture = new PIXI.RenderTexture.create(radius, radius),
graphics = new PIXI.Graphics();
graphics.beginFill(0xffffff);
// here I need to add ONE instance of text (let text = new PIXI.text(...properties))
graphics.drawCircle(radius, radius, radius);
graphics.endFill();
app.renderer.render(graphics, texture);
....
for (let i = 1, len = rowNumber; i <= len; i++) {
    let container = new PIXI.Container();
    for (let j = 1, leng = placesPerRow; j <= leng; j++) {
        drawCircle(texture, i*25, j*25, 8, container);
    }
    app.stage.addChild(container);
}
...
drawCircle(texture, x, y, radius, container) {
    let sprite = new PIXI.Sprite(texture);
    // here I need to have separate text object for every circle, with unique value
    sprite.position.x = x;
    sprite.position.y = y;
    sprite.anchor.set(0.5, 0.5);
    container.addChild(sprite);
}

The thing is that when I create an instance of PIXI.Text() for every circle (drawCircle function), I have some freezes in my app, because of ~10k text instances.

And I have 2 questions:

- Is it possible to create one text instance for all circles, and override it's value and render it on each circle render? (it is not ok to use sprites for text, because it should be editable);

- And what are the ways to optimize application rendering? (like async/promise-based rendering, using requestAnimationFrame, web workers, etc.).

Thank you in advance!

[ivan.popelyshev]

You can create one instance of Text and then use its texture to create a sprite
 

text = new PIXI.Text(...);
text.updateText(); // force it to render to texture inside

sprite = new PIXI.Sprite(text.texture);

If you want to make circles or any graphics in big amounts, I recommend to use "generateTexture" method, it was somewhere there. But the best method I think is to use html5 canvas2d api and then use "Texture.from(myGeneratedCanvas)"

Async/promise wont work here, RAF is used inside "PIXI.ticker.Ticker" and "PIXI.Application", as for webworkers you can use them only if you generate some textures in realtime and that takes a lot of time, and its difficult.

I will make some demos with deferred rendering this month, but its not about promises/asyncs,  Its multipass rendering.

If you are working with tiles that dont change position much, you can use "pixi-tilemap" plugin.

If you have many sprites with same base texture, sometimes "PIXI.particles.ParticleContainer" works good, but it has a lot of limitations.

I know some very difficult cases for which people created their own plugins. Creating your own hardcore algorithm for specific case is a valid way to enhance your PIXI experience. PIXI does not limit authors to some universal recipes.

P.S. i can invite you to pixijs slack, it has "russian" channel for those who are from ex-USSR. I'm not the only one who is helping people here

[Mykola Martyniuk]

Hi Ivan.

Thank you very much for your help!