Growing RenderTexture

[visgotti]

I'm trying to have a RenderTexture grow as I dynamically load images

What I do is load the image as a texture, create a sprite, then I want to render that sprite to the render texture. But every time I render a new sprite to the render texture it seems to delete everything else on the render texture.

   public addSprite (id, sprite: PIXI.Sprite, deleteSprite=false) : PIXI.Texture {
        if(this.mappedTextures.has(id)) {
            if(deleteSprite) {
                sprite.destroy({children: true, texture: true, baseTexture: true});
            }
            return this.mappedTextures.get(id);
        }

        const { atlasIndex, rect } = this.addRect(id, sprite.width, sprite.height);

        if(!(atlasIndex in this.atlasRenderTextures)) {
            this.atlasRenderTextures[atlasIndex] = PIXI.RenderTexture.create(this.maxAtlasWidth, this.maxAtlasHeight);
        }

        const renderTexture = this.atlasRenderTextures[atlasIndex];

        // assign sprite position to the open rect
        sprite.position.x = rect.x;
        sprite.position.y = rect.y;

        // render sprite to render texture
        this.renderer.render(sprite, renderTexture);

        // make a reference to the new texture using render texture as base.
        const texture = new PIXI.Texture(
            renderTexture.baseTexture,
            new PIXI.Rectangle(rect.x, rect.y, rect.width, rect.height),
        );

        this.mappedTextures.set(id, texture);

        if(deleteSprite) {
            sprite.destroy({children: true, texture: true, baseTexture: true});
        }

        return texture;
    }

I'm trying to write a lib https://github.com/visgotti/DynamicTextureAtlas that allows a growing packed texture atlas and right now I'm implementing a class that uses the algorithm to map the atlas to a RenderTexture with sprites, the packing algorithm isn't good but i plan on optimizing it. But the big thing I wanted to make sure is that everytime a new image is packed the items in the atlas don't get repositioned so it would be quick to update a  RenderTexture since all we need to draw is the new image added instead of the whole packed sheet. Is there something fundamentally wrong with my approach?

[visgotti]

Here's a visual of what I'm trying to accomplish- as I add rects it gets added to the texture without changing the positions of anything else. This is meant to be ran during the game loop so the algorithm for finding an open spot is super fast but super shitty, I plan on making it better but I just wanted to create a proof of concept first. As you can see rects get added without changing the rest of the "texture" but I'm trying to figure out how to do this as a pixi texture without having to re render the whole "texture" each time I add a rect/sprite

I think I'm making the wrong assumption on how a RenderTexture works.. Would it only work if I kept a PIXI.Container with all the elements and then I would have to re-render that PIXI.Container to a RenderTexture each time I add a new image? This would probably be too slow to dynamically add new images when it starts reaching the max texture size and then my shitty packing algorithm becomes even shittier since I have to redraw the texture each time anyway.. and then I'd have to recreate all the textures that use the RenderTexture as the base texture everytime it updates? Yea I feel like I'm going down a rabbit hole of bad design decisions. Is there any efficient way to just add another image to a texture when the majority of the texture is exactly the same besides one small rect area so I can keep all the past textures I've created as well as not re render a whole new RenderTexture

 

I have a feeling I'm just fundamentally wrong with my assumptions on how my library could have worked. 

[visgotti]

<deleted because it was so wrong>

[ivan.popelyshev]

Sounds like something that I did before, I'll look at it later. 

From what did i see in your code reading bby diagonally, you have to use "renderer.render(container, renderTexture, false);" where container have all new sprites as a children. "false" means "dont clear, leave the background as it was".

This implementation is the best, there might be some steps to improvement but it depends on your use-case, I need to know more

[visgotti]

30 minutes ago, ivan.popelyshev said:

Sounds like something that I did before, I'll look at it later. 

From what did i see in your code reading bby diagonally, you have to use "renderer.render(container, renderTexture, false);" where container have all new sprites as a children. "false" means "dont clear, leave the background as it was".

This implementation is the best, there might be some steps to improvement but it depends on your use-case, I need to know more

lol crap... seems like my second implementation was all for naught 

thanks though going to try this now. 

 

edit: 

yep so sure enough my original function would have worked with just adding the false flag to renderer.render

Thanks @ivan.popelyshev

It seems to be working awesome now, I can start focusing on optimizing my packing algorithm. 

[ivan.popelyshev]

Here's what I did: https://github.com/gameofbombs/pixi-super-atlas This is a public version of something that works in commercial production project. Its for v4 and it uses great hacks that emulate v5 TextureResource. I didnt move it to v5 yet. There's not much docs, but you can understand whats in the functions.

https://github.com/gameofbombs/pixi-super-atlas/tree/master/src/core

Here look in "Add" and "repack" : https://github.com/gameofbombs/pixi-super-atlas/tree/master/src/core

Its the known algorithm, its used by all packers (with modifications of course) . Your algo looks like some modification of bucket algo, it is fine for certain cases but it will be better if you also know what other packers do, as a reference.