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?

[BenjaminDRichards]

I'm happy to report that Phaser v4 replaces this whole section of the render system. In general, the new renderer is more robust and prevents this kind of issue (that was one of the main design goals, as Phaser v3 didn't have strong standards around the GL state, allowing different pieces of code to do incompatible things). In this case, the Text and Rectangle don't even use the same shader any more, so the problem cannot even begin to occur. (Rectangle descends from Shape and Graphics, which uses a "FLAT" shader that no longer uses a white texture to apply tints.)