preFX getting ruined by a rectangle in the same batch

[CrispMind]

Version

• Phaser Version: v3.87
• Operating system: Android 14
• Browser: Doesn't seem to be browser specific

Description

Having FX applied to .preFX of a sprite or a text game object while also having a filled rectangle game object in the scene results in the game object with the preFX applied having broken visuals:

This doesn't happen in Chrome on a Windows 10 PC but is a stable repro in Chrome on Samsung S23 for me, which might be specific to how the renderer batches output, please see ## Additional Information ## below.

Example Test Code

import { Scene } from "phaser";

export class Preloader extends Scene
{
    constructor()
    {
        super( 'Preloader' );
    }
    create()
    {
        let text = this.add.text( 512, 325, 'TEST TEXT', { fontFamily: 'Arial', fontSize: 48, color: '#808080' } );
        text.preFX?.addShine();

        this.add.rectangle( 512, 640, 800, 20, 0xffffff, 0.2 );
    }
}

Additional Information

My thinking is that the rectangle and the game objects having .preFX are somehow merged into the same batch and the rectangle rebinds the texture. That is, in FXShine-frag.js:

vec4 tex = texture2D(uMainSampler, outTexCoord)

The value of 'tex' matches whatever the color of the filled rectangle was.

Looking at MultiPipeline.js, batchFillRect() makes this call at the end:

this.batchQuad(null, quad[0], quad[1], quad[2], quad[3], quad[4], quad[5], quad[6], quad[7], 0, 0, 1, 1, tint.TL, tint.TR, tint.BL, tint.BR, 2);

and that specifies no texture, which setTexture2D() replaces with this.renderer.whiteTexture, hence the result?