Jump to content

Dealing with lots of small textures (+1000)


benoit_b
 Share

Recommended Posts

Hey there,

I'm working on a site that requires to display a lot of small textures (12x140). 
I'm trying to display about 1000 of these... 

I've decided to recently switch to pixiJs to deal with performance issues I had with a regular html/css approach.
So this is a bit new to me :)

Everything works pretty smoothly on desktop, but I'm still having terrible performance on mobile (less than 10fps on an iOS 14 device).
I've tried to make texture smaller (1x15) but no luck...

I am loading textures as follow :
 

        this.thumbs.forEach((el, i) => {

            let texture = PIXI.Texture.from(this.loader.resources[el.finger.path].url)

            const finger = new PIXI.Graphics();
     		finger.beginTextureFill({texture: texture});
            finger.endFill();
          
            let fingerContainer = new PIXI.Container();
            fingerContainer.addChild(finger)

...

Here is a link to see where I'm at (you'll have to wait a bit before it display anything...)
https://mire.studio/mire-pixi/

I feel a bit stuck here...
Don't know if what I am doing is even possible ?

Any advices on how I could make this works smoothly on mobile too would be appreciate.

Many thanks 

Link to comment
Share on other sites

You need runtime atlas.

If your texture size is fixed, you can just use big RenderTexture and use regions from it, uploading those textures in the big one when its needed, however it wont work with beginTextureFill because it needs REPEAT in shader itself!

For general size I had solution in https://github.com/gameofbombs/pixi-super-atlas/ , but its for v4 and not updated to v6 yet.

I'm afraid your case have to be separated to several and actually assigned a bounty on https://github.com/pixijs/pixi.js/issues . This is hard stuff.

Link to comment
Share on other sites

Well I've just test it using an iphone with iOS 11 and another one with iOS 13 and everything runs very smoothly at 60 fps.
I've read that there is serious performance issues with webgl and iOS 14.

Could it be related to this too ? If so, is there any workaround yet ?

Edited by benoit_b
Link to comment
Share on other sites

Thanks Ivan, I've managed to make this work using RenderTexture.
I've had an issue with firefox as it's not allowing the creation of a very large webgl frame.
So I've decided to create a renderTexture for each rows as follow :
 

        let rowsLength = Math.floor(this.thumbs.length/this.thumbsPerRow)
        let remainder = this.thumbs.length%this.thumbsPerRow
        rowsLength = remainder > 0 ? rowsLength+1 : rowsLength

        let renderTextures = []
        
        for (i=0; i<rowsLength; i++){
            let start = i*this.thumbsPerRow
            let end = (i != rowsLength-1) ? (i+1)*this.thumbsPerRow - 1 : (i*this.thumbsPerRow + remainder-1) 
            
            //create render texture
            let renderTexture = PIXI.RenderTexture.create({ width: (end-start)*this.thumbWidth, height: 300 });
            let renderTextureContainer = new PIXI.Container();
            renderTextureContainer.x = 0
            renderTextureContainer.y = 0

          //add sprites to RenderTexture from loader 
           for (j=0; j<(end-start); j++){
                let sprite = new PIXI.Sprite.from(this.loader.resources[this.thumbs[j+start+1].finger.path].url);
                sprite.x = j * this.thumbWidth;
                sprite.y = 0;
                sprite.height= 300;
                sprite.width= this.thumbWidth;
                sprite.anchor.x = 0;
                sprite.anchor.y = 0;
                renderTextureContainer.addChild(sprite)
            }
            this.app.renderer.render(renderTextureContainer, renderTexture);
            renderTextures.push(renderTexture)
        }

 

Later I'm using my texture like this :

            let textureFromRT = new PIXI.Texture(renderTextures[row], new PIXI.Rectangle(offsetX,0,this.thumbWidth,300))

 

Thanks for your help !

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...