Bug: Sprite alpha masks broken in chrome & edge

[HughEdwards1]

Current Behavior

I'm creating some alpha masks using sprites from a gradient fill (using a render texture to use the graphics object as a texture... is there another way to do this on current pixi?).
I'm applying it to rect objects, and in this example I create them all identically, except the heights of the objects when masks are applied vary unexpectedly.

Expected Behavior

All rects have the same height.

Steps to Reproduce

Code duplicated from playground example here:

    const render = (container, texture) => {
        app.renderer.render({
            target: texture,
            container
        });
    }

    const fillGradient = new PIXI.FillGradient(0, 0, 400, 0);

    fillGradient.addColorStop(0, 0xFFFFFF);
    fillGradient.addColorStop(1, 0x000000);

    const gradientFill = new PIXI.Graphics()
        .rect(0, 0, 400, 50)
        .fill(fillGradient)

    const gradientTexture = PIXI.RenderTexture.create({
        width: 400,
        height: 50
    });

    render(gradientFill, gradientTexture);

    const createMaskedRect = (applyMask) => {
        const rectContainer = new PIXI.Container();

        const rect = new PIXI.Graphics()
            .rect(0, 0, 400, 50)
            .fill({ color: 0xFF0000 });

        const mask = new PIXI.Sprite({
            width: 400,
            height: 50,
            texture: gradientTexture
        });

        if (applyMask) {
            rectContainer.mask = mask;
        }
        rectContainer.addChild(rect, mask);

        return rectContainer;
    }

    for (let i = 1; i < 5; ++i) {
        const rect = createMaskedRect(true);

        rect.position.set(0, 100 * i);
        app.stage.addChild(rect);
    }

    for (let i = 5; i < 9; ++i) {
        const rect = createMaskedRect(true);

        rect.position.set(0, 100 * (i + 1));
        app.stage.addChild(rect);
    }

    app.stage.addChild(gradientFill)

Environment

• pixi.js version: 8.0.4
• Browser & Version: Chrome 123.0
• OS & Version: M2 OSX 12.4
• Running Example: https://www.pixiplayground.com/#/edit/W5wKexEIjQooixhA29DgK

Possible Solution

No response

Additional Information

No response

[GoodBoyDigital]

heya, i set up this playground to apply the masks

https://www.pixiplayground.com/#/edit/EwmDuvFCs8id9JvOC4Y5b

it seems to be working ok for me in chrome? @HughEdwards1 could you verify pls? Cheers man!

[HughEdwards1]

Hey @GoodBoyDigital

Thanks so much for having a look.
I can confirm that the playground you've made there also has the issue for me.

However I've since made a horrific discovery.
I'm hosting the initial project I encountered this issue with on the first machine, and accessing it over a local network on another mac - with similar specs. It's an OSX 11.6.4 M1... and it's rendering perfectly fine. On the same chrome version.

I'm not really sure what this says for me. Hardware issue? OS gl issue?
I'm going to restart this machine and hope that when it opens back up everything works again.

[HughEdwards1]

...Restart unsurprisingly did not help.
Not sure where that puts this ticket.

Pain in the ass to replicate I imagine.
I'm going to update my OS on the initial machine (OSX 12.4) and see if that brings and joy.

Edit: No love after software update, still busted

[GoodBoyDigital]

hey, could you try using 8.1.0? or setting the renderer to WebGL pls? I think it maaaaay be a WebGPU issue

[HughEdwards1]

WebGL sorts the issue. At the cost of a lot of lovely performance which I've come to expect : (

[GoodBoyDigital]

You know, i think there is a legit WebGPU bug somewhere in here - similar issue here #10406
Connection affecting GPU textures...

Can i ask - whats the performance difference for you? WebGL should be similar speeds? Thanks!

[HughEdwards1]

You know, i think there is a legit WebGPU bug somewhere in here - similar issue here #10406 Connection affecting GPU textures...

Can i ask - whats the performance difference for you? WebGL should be similar speeds? Thanks!

I measured it (my actual full scale project) in a few different test cases:
Resolution 2x (webgl & webgpu) which is how it was initially set.
Then again with 1x resolution.

Then again for both resolutions after removing the alpha masks (welcome back to the original pain) because I noticed even a single large sprite was having a significant performance hit (app is 4K reso.. so at 2x reso I think the textures were just pushing some boundaries)

In almost every case the webgpu version was about twice as fast to render a frame

Edit: Within all of this - I've tried on a few different machines, on the mac though things aren't as sharp on 1x.. possibly to do with retina screens? Maybe something else for me to explore