Extract large images that exceed the per-texture memory

[Moppel]

Hello,

today I am trying to implement extracting images that certainly exceed the per-texture memory. So tiling is probably the only solution to this issue. I was thinking how to actually solve this and came up with asing the renderer to render tile-wise to texture. However, the code below doesnt really work. I am not sure how the texture vs. container transforms are intended to work

private _extractTiles(app: PIXI.Application, container: PIXI.DisplayObject, maxTileWidth: number, maxTileHeight: number) {
    const bounds = container.getBounds();
    const width = bounds.width;
    const height = bounds.height;
    console.warn('Bounds', width, height)
    const numRows = Math.ceil(width / maxTileWidth);
    const numCols = Math.ceil(height / maxTileHeight);
    console.log(numRows, numCols)

    for (let tileX = 0; tileX < numRows; tileX++) {
      for (let tileY = 0; tileY < numCols; tileY++) {
        // const tileWidth = Math.min(tile)
        const tileWidth = Math.min(maxTileWidth, width - tileX * maxTileWidth);
        const tileHeight = Math.min(maxTileHeight, height - tileY * maxTileHeight);
        console.warn('Before tilingTexture', tileWidth, tileHeight)
        const tileTexture = PIXI.RenderTexture.create({ width: tileWidth, height: tileHeight });
        const dX = tileX * maxTileWidth;
        const dY = tileY * maxTileHeight;

        const tf = container.transform.localTransform.clone();

        app.renderer.render(container, tileTexture, true, tf )

        // Debug Sprite :)
        const sprite = new PIXI.Sprite(tileTexture);
        sprite.x = 100;
        sprite.y = 100;
        app.stage.addChild(sprite)

        // Using the extract module later on...
        // TODO
      }
    }

  }

 

[ivan.popelyshev]

It should work. However, I cant give guaratees on fourth param of "render" method, we have too many bugs with it, there can always be more. Which version of pixi do you use? 

Also I tihnk that localTransform has to be inverted like here: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/AbstractRenderer.js#L261

What exactly doesn't work in your case? I think you are on the right path.

[Moppel]

Ah hmh it works,  I forgot to set   tf.tx = -dX  and tf.ty = -dY   and set both boolean flags in the render(.) function to false.

[ivan.popelyshev]

congrats!

wow, you are doing it for drawing app! Yes, I think I helped people with that task for drawing apps before.