Post FX Blur With Mask on Graphics Loses Position/Scale on Resize

[seansps]

Version

• Phaser Version: 3.80.1
• Operating system: Win 11/10, MacOS
• Browser: All

Description

I am creating a mask and applying it to a black overlay. The mask is created from a polygon created via Graphics.
I have the scale mode set to RESIZE. I am noticing that the graphics itself (from which the mask is created) moves/resizes as expected when the window resizes, but the blur effect is not, when the window is resized.

Example Test Code

I was able to recreate with the following: https://jsfiddle.net/942yz5d1/1/

You can see that when you resize the window it warps the polygon.

Additional Information

Please let me know if I am misunderstanding how to use the PostFX! But it does seem like this is a bug, as I would expect the blur on masks to be included in the resize as well? I have tried a number of workarounds such as clearing the postFX on resize, recreating it, etc., and haven’t found one yet. Turning off the blur, the polygon stays the same as expected.

[seansps]

I just attempted to write my own Blur PostFXPipeline and shader to try to hack around this and ended up with the same issue.
Is there a way in Phaser to completely re-instantiate/initialize shaders/pipelines on resize to work around this? It does seem to be a bug in the WebGL renderer, but I am having trouble tracking it down.

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/possible-bug-blur-post-fx-moves-on-resize/14198/4

[seansps]

Update:

I think I found the issue. I created my own postFX Blur pipeline and added this to it:

  resize(width, height) {
    this.set2f('uResolution', width, height);
  }

Now the issue is fixed, when I use my pipeline. I think something similar will need to be done in Phaser's blur postFX pipe.

[woshisheji]

Update:

I think I found the issue. I created my own postFX Blur pipeline and added this to it:

  resize(width, height) {
    this.set2f('uResolution', width, height);
  }

Now the issue is fixed, when I use my pipeline. I think something similar will need to be done in Phaser's blur postFX pipe.

"Friend, do you have a complete and correct code example using masks? There is a bug in the default 3.80.1 version, but not in 3.552. How did you solve it?"

[seansps]

Update:
I think I found the issue. I created my own postFX Blur pipeline and added this to it:

  resize(width, height) {
    this.set2f('uResolution', width, height);
  }

Now the issue is fixed, when I use my pipeline. I think something similar will need to be done in Phaser's blur postFX pipe.

"Friend, do you have a complete and correct code example using masks? There is a bug in the default 3.80.1 version, but not in 3.552. How did you solve it?"

I had to write my own BlurFXPostPipeline. I am not an expert on shaders and still very new, so it could be optimized better and more variables could be added. This is what I wrote:

const fragShader = `
#define SHADER_NAME BLUR_FS

precision mediump float;

// "in" attributes from our vertex shader
varying vec2 outTexCoord;

// Declare uniforms
uniform sampler2D uMainSampler;
uniform vec2 iResolution;

 // Simple Gaussian Blur
void main()
{
    // Get the current UV coordinates
    vec2 uv = outTexCoord;
    vec4 texCol = texture2D(uMainSampler, uv);

    const int radius = 10;
    const float pi = 3.1415926;
    const float sigma = 5.;
    
    vec4 gaussSum = vec4(0.);
    
    for(int x = -radius; x <= radius; x++){
      for(int y = -radius; y <= radius; y++){
        vec2 newUV = uv + vec2(x, y) / iResolution.xy;
        gaussSum += texture2D(uMainSampler, newUV) * (exp(-(pow(float(x), 2.) + pow(float(y), 2.)) / (2. * pow(sigma, 2.))) / (2. * pi * pow(sigma, 2.)));
      }   
    }
    
    gl_FragColor = vec4(gaussSum);
}
`;

export default class BlurPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
  constructor(game) {
    super({
      game,
      renderTarget: true,
      fragShader,
      uniforms: [
        'uMainSampler',
        'iResolution',
      ]
    });
  }

  onPreRender() {
    this.set2f('iResolution', this.renderer.width, this.renderer.height);
  }

  onBoot() {
    this.set2f('iResolution', this.renderer.width, this.renderer.height);
  }

  resize(width, height) {
    this.set2f('iResolution', width, height);
  }
}

You add it to your scene like so:

this.renderer.pipelines.addPostPipeline('BlurPostFX', BlurPostFX);

Finally I had to add this to my scene to ensure it updates properly on resize. Change this.sceneAsset to whatever you set the pipeline on.

    this.renderer.on('resize', () => {
      this.sceneAsset.postFX.clear();
      this.sceneAsset.setPostPipeline('BlurPostFX');
    });

[seansps]

Edit: Sorry, did not mean to close it. (Accidental click!)

[woshisheji]

更新：我想我发现了问题。我创建了自己的 postFX Blur 管道并将其添加到其中：

  resize(width, height) {
    this.set2f('uResolution', width, height);
  }

现在，当我使用我的管道时，问题已解决。我认为需要在 Phaser 的模糊 postFX 管道中做类似的事情。

“朋友，你有完整且正确的使用掩码的代码示例吗？默认的 3.80.1 版本存在错误，但 3.552 中没有。你是怎么解决的？

我不得不编写自己的 BlurFXPostPipeline。我不是着色器方面的专家，而且仍然很新，所以可以更好地优化它，并且可以添加更多变量。这是我写的：

const fragShader = `
#define SHADER_NAME BLUR_FS

precision mediump float;

// "in" attributes from our vertex shader
varying vec2 outTexCoord;

// Declare uniforms
uniform sampler2D uMainSampler;
uniform vec2 iResolution;

 // Simple Gaussian Blur
void main()
{
    // Get the current UV coordinates
    vec2 uv = outTexCoord;
    vec4 texCol = texture2D(uMainSampler, uv);

    const int radius = 10;
    const float pi = 3.1415926;
    const float sigma = 5.;
    
    vec4 gaussSum = vec4(0.);
    
    for(int x = -radius; x <= radius; x++){
      for(int y = -radius; y <= radius; y++){
        vec2 newUV = uv + vec2(x, y) / iResolution.xy;
        gaussSum += texture2D(uMainSampler, newUV) * (exp(-(pow(float(x), 2.) + pow(float(y), 2.)) / (2. * pow(sigma, 2.))) / (2. * pi * pow(sigma, 2.)));
      }   
    }
    
    gl_FragColor = vec4(gaussSum);
}
`;

export default class BlurPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
  constructor(game) {
    super({
      game,
      renderTarget: true,
      fragShader,
      uniforms: [
        'uMainSampler',
        'iResolution',
      ]
    });
  }

  onPreRender() {
    this.set2f('iResolution', this.renderer.width, this.renderer.height);
  }

  onBoot() {
    this.set2f('iResolution', this.renderer.width, this.renderer.height);
  }

  resize(width, height) {
    this.set2f('iResolution', width, height);
  }
}

您可以将其添加到场景中，如下所示：

this.renderer.pipelines.addPostPipeline('BlurPostFX', BlurPostFX);

最后，我必须将其添加到我的场景中，以确保它在调整大小时正确更新。更改为管道设置的任何内容。this.sceneAsset

    this.renderer.on('resize', () => {
      this.sceneAsset.postFX.clear();
      this.sceneAsset.setPostPipeline('BlurPostFX');
    });

That's great to hear! Even if you're not fully sure how to use it yet, it's always a good idea to give it a try yourself. After all, everyone starts as a beginner in new things.

[photonstorm]

Just to say this issue was fixed in v3.85 Beta 2.

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.