PIXI Extract

[pongstylin]

I'm having a surprising amount of difficulty using the extract plugin to render a container object.  Does it support filters?  Anytime I apply a filter to the top-level container or any nested containers, it results in shifting the position of the contents down and right (resulting image getting truncated as well) and the desired color effect appears to be missing.  I'm using PIXI v5.2.1

Edited July 2, 2020 by pongstylin

[ivan.popelyshev]

Extract and things like "generateTexture" often have new bugs. 
when it happens, its better do the following:

1. Move your container into another container that has no filters. If you generate texture of something that has parent - sorry, no guarantees, debug it yourself.

2. take bounds of the container with "container.getBounds()".

3. pass those bounds to "renderer.generateTexture(myContainer, bounds)". Maybe move container that way its left-top corner is in (0,0)

4. use extract plugin on resulting texture

5. destroy the texture.

Forum and pixijs github issues have many copies of the issue and every time we helped , posted extra examples. You can search for those threads.

I'm sorry you encountered that problem after we fixed it like hundred times. Maybe if you update to 5.3.0 it will just work.

Yes, you have to look inside extract and do all those things on your own, because currently i dont have time to help people with such issues.

Edited July 2, 2020 by ivan.popelyshev

[pongstylin]

Actually, you did have the time to help me with my issue.  I was already trying to position the top-level container using bounds with poor results.  But placing the top-level filtered and positioned container inside another vanilla container worked like a charm.  (I wish I thought of that before posting).  And the filters are indeed applying the correct coloring, so I must've missed something before.  I didn't end up using your advice on generateTexture, though.  I'm just using extract directly.  Perhaps your advice is the equivalent of positioning my filtered container using bounds.

[ivan.popelyshev]

Good!

ok, then the problem lies somewhere in positioning part, not the texture generation. I nkow that guys broke another thing that uses generateTexture - cacheAsBitmap in 5.3.0. The saga continues

[lauro]

Hello,
I am having similar issues and I cannot make it work even on a simple example. I am trying to extract image with filter applied and I always get an empty image as a result.
I tried different approaches, extracting the sprite, generating texture of the sprite and extracting it, putting it into some vanilla container and extracting, and also extracting the whole stage, but always the same result.  Everything works fine without the filter applied.  Is there something that I am doing wrong?

Below is the simple example code that did not work on Pixi Playground, the rendering works fine, it is just the extracting that is not working.

/**
* This is the default playground.
* You should see a bunny spinning in the right preview pane.
* Feel free to use this as a starting point for you own playground!
*/

// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

// Load the bunny texture
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png')
    .load(startup);

function startup()
{
    var bunny = new PIXI.Sprite(app.loader.resources.bunny.texture);

    // Center the sprite's anchor point
    bunny.anchor.set(0.5);
    bunny.filters=[new PIXI.filters.BlurFilter()]

    // Move the sprite to the center of the screen
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    const photoContainer = new PIXI.Container();

    photoContainer.addChild(bunny);

    app.stage.addChild(photoContainer)


    const texture = app.renderer.generateTexture(photoContainer, photoContainer.getBounds())

    console.log(app.renderer.extract.base64(texture));

    console.log(app.renderer.extract.base64(photoContainer));

    console.log(app.renderer.extract.base64(bunny));
    
    console.log(app.renderer.extract.base64(app.stage))
}