Jump to content

Scene being mirrored in extract canvas after renderer resize


Recommended Posts

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?

Link to comment
Share on other sites

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.


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