Jump to content

Optimized rendering of big amount of items

Mykola Martyniuk

Recommended Posts

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();
// here I need to add ONE instance of text (let text = new PIXI.text(...properties))
graphics.drawCircle(radius, radius, radius);
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);
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);

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!

Link to comment
Share on other sites

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 ;)

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.

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.


  • Recently Browsing   0 members

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