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.