Jump to content

Extract large images that exceed the per-texture memory


Recommended Posts


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;

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



Link to comment
Share on other sites

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.

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