PostFXPipeline blur effect gives black screen

Phaser 3
1

Hi. I try to use simple blur postfx effect on main camera.

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 float uResolution;
uniform float radius;
uniform vec2 dir;

void main()
{
  //this will be our RGBA sum
  vec4 sum = vec4(0.0);

  //our original texcoord for this fragment
  vec2 tc = outTexCoord;

  //the amount to blur, i.e. how far off center to sample from
  //1.0 -> blur by one pixel
  //2.0 -> blur by two pixels, etc.
  float blur = radius/uResolution;

  //the direction of our blur
  //(1.0, 0.0) -> x-axis blur
  //(0.0, 1.0) -> y-axis blur
  float hstep = dir.x;
  float vstep = dir.y;

  //apply blurring, using a 9-tap filter with predefined gaussian weights",

  sum += texture2D(uMainSampler, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
  sum += texture2D(uMainSampler, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
  sum += texture2D(uMainSampler, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
  sum += texture2D(uMainSampler, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;

  sum += texture2D(uMainSampler, vec2(tc.x, tc.y)) * 0.2270270270;

  sum += texture2D(uMainSampler, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
  sum += texture2D(uMainSampler, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
  sum += texture2D(uMainSampler, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
  sum += texture2D(uMainSampler, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;

  //discard alpha for our simple demo,return
  gl_FragColor =  vec4(sum.rgb, 1.0);

}
`;

class BlurPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline
{
  constructor (game)
  {
    super({
      game,
      renderTarget: true,
      fragShader
    });
  }

  onPreRender () 
  {
    const r = Math.abs(2 * Math.sin(this.game.loop.time * 10))
    this.set1f('uResolution', this.renderer.width);
    this.set1f('radius', r);
    this.set2f('dir', 1.0, 1.0);
  }
}

And turn it on in create func of main scene as in the example:

this.cameras.main.setPostPipeline(BlurPostFX);

In game config:

pipeline: { BlurPostFX }

but get only black screen. Can someone suggest me why it happens?

Console messages:

WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
Phaser version: 3.90.0
WebGL Version: WebGL 1.0
WebGL 2.0 supported: false
WebGL warning: generateMipmap: Tex image TEXTURE_2D level 0 is incurring lazy initialization. 15
WebGL warning: uniform setter: Uniform’s type requires uniform setter of type FLOAT/0/0.

2

Phaser’s uResolution is a 2-dimensional vector (width, height).

@@ -8,7 +8,7 @@
 
 //declare uniforms
 uniform sampler2D uMainSampler;
-uniform float uResolution;
+uniform vec2 uResolution;
 uniform float radius;
 uniform vec2 dir;
 
@@ -23,7 +23,7 @@
   //the amount to blur, i.e. how far off center to sample from
   //1.0 -> blur by one pixel
   //2.0 -> blur by two pixels, etc.
-  float blur = radius/uResolution;
+  float blur = radius/uResolution.x;
 
   //the direction of our blur
   //(1.0, 0.0) -> x-axis blur
@@ -62,7 +62,6 @@
 
   onPreRender() {
     const r = Math.abs(2 * Math.sin(this.game.loop.time * 10))
-    this.set1f('uResolution', this.renderer.width);
     this.set1f('radius', r);
     this.set2f('dir', 1.0, 1.0);
   }
3

uResolution was declared as a float so why Phaser consider it was a vec2 ? I assume that the uniform types are hard-coded somewhere inside of Phaser? Could you provide a link to the documentation on Phaser’s uniform types and is there a guide somewhere on how to adapt shaders to Phaser?

And thanx a lot !

4