First frame of PostFX pipeline displays glitches

[moufmouf]

Version

• Phaser Version: 3.70

• Operating system: Ubuntu 23.10

• Browser: Mostly visible on Chrome.

Description

When applying an effect to a sprite, the very first frame of the game has glitches.
It seems to happen whatever the Postfx pipeline applied we use.

The glitch can be hard to spot because it happens only on the first frame.

Example Test Code

To make the issue easier to see, I wrote a program that adds a postfx pipeline on a sprite, then removes it, then adds it back, etc... On each frame, I'm switching the effect on and off.

https://codepen.io/moufmouf/pen/abXjYRV

(Note: test this in Chrome)

The program works flawlessly with Phaser 3.60, but has glitches in Phaser 3.70.

Additional Information

The issue was first spotted on the Rex pipelines and an issue is opened there: rexrainbow/phaser3-rex-notes#395
However, it seems more likely the issue is related to Phaser.
My guess is that it is linked to the fact the creation of the effect is now delayed until its boot method, but I have no proof of that.

// @rexrainbow @LaP0573 @tongliang999

Let me know if I can do anything to help.

[rexrainbow]

Might replace my outline-postfx effect by built-in postfx effect, like shadow effect , to discard affect from 3rd party plugin.

• Add built-in shadow effect : var effect = gameObject.postFX.addShadow(10, -10, 0.006, 1, 0xff0000, 10)
• Remove effect : gameObject.preFX.remove(effect)

BTW, I can't reproduce this render result in my environment :

• os : window 11
• browser : chrome, firedox

[moufmouf]

I rewrote the codepen to use the built in effect (addShadow) as suggested by @rexrainbow .
The codepen now only uses Phaser 3.70 and has no dependencies on Rex plugins

https://codepen.io/moufmouf/pen/abXjYRV

Here is what I see:

Capture.video.du.2023-11-28.10-40-13.webm

[ddanushkin]

I rewrote the codepen to use the built in effect (addShadow) as suggested by @rexrainbow . The codepen now only uses Phaser 3.70 and has no dependencies on Rex plugins

https://codepen.io/moufmouf/pen/abXjYRV

Here is what I see:

Capture.video.du.2023-11-28.10-40-13.webm

I experienced similar issues, but on mobile devices using rex's shader-hsladjust

btw video example of above codepen

video_2023-11-28_23-26-44.mp4

[rexrainbow]

@ddanushkin
It is because that I use built-in postfx pipeline as base class. You can try this workaround solution provided by @tongliang999

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[moufmouf]

Hey @photonstorm !

Thanks a lot for looking into this.
I just tested the master branch and I can confirm your fix works correctly.

As expected from the fix, the shader is not displayed on the next frame after being added, but from the second frame onwards, everything works like a charm. 👍