Scene being mirrored in extract canvas after renderer resize

[Asgard]

I'm having the strangest issue and I was hoping someone might be able to offer guidance.

I have a separate renderer running in the background that is using the trick to do pixel perfect click detection with object colors.
If I render that separate scene to the screen, everything is fine. But when I use extract (as below) the mirror is somehow mirrored.

I'm guessing this is some kind of bug within Pixi.js because it only occurs after you've called resize on the renderer (or application has done it for you).

 

    selectColorLogic(mouse: Point): number {
        const pixels = this.logicRenderer.extract.canvas(undefined);
        const rawPixels = pixels.getContext("2d").getImageData(mouse.x, mouse.y, 1, 1);

        const [r, g, b, a] = rawPixels.data;
        if(a === 255) {
            return ColorUtils.rgb2hex({r, g, b});
        }

        return -1;
    }

The red and green objects in the below image so it best, but the other 2 are mirrored as well (should be about half height).

Does anyone have any idea what might be going on?

[ivan.popelyshev]

Welcome to the forums!

Unfortunately, I cant help with fixing your demo even if you post it, because Im taking rest from pixiJS, you have to wait someone else.

However, I can point out which things can happen with extract: 1. Y axis reversal. 2. premultiplied alpha 3. all pixels are zero.

It depends on whether you take pixels from the main buffer or temporary renderTexture, It also  depends on device and "antialias" setting of renderer context.

In your case I dont understand why do you ever need canvas() getImageData, if there's pixels() method that returns array. To know EXACTLY what is going on there, you have to read extract source code: https://github.com/pixijs/pixi.js/blob/dev/packages/extract/src/Extract.ts#L183

PixiJS uses "readPixels" method of WebGL. Yes, there were many bugs in that method already. Maybe you are using old version of pixijs.

What can you do : 0. check pixijs version 1. report to pixijs github issues 2. try modify that method from outside or write your own method that takes pixel based on "readPixels". 

The best practive is:

1. take pixel from screen just after it was rendered, in app render() method. Yes, override it, make your own app: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

2. you can render it in temporary renderTexture instead, Extract plugin has a few lines of code about that - you can even make it 1x1 pixel and . In taht case you can do it anytime.

If you want more iunformation, please search in this subforum for "Extract" or in pixijs issues.

 

[ivan.popelyshev]

Actually, it can also be a browser bug. Please post a demo.

[Asgard]

Thanks for your replies.

I opened a GitHub issue with info and demo: https://github.com/pixijs/pixi.js/issues/6424

See the demo at: https://www.pixiplayground.com/#/edit/jogREV4Vj-gqrZTLI_Hoh 

[ivan.popelyshev]

Oh, im so stupid, @eXponeta already answered you  The demo is awesome, it'll be a pleasure to dig into the problem