glsl – Drawback recreating shader on Phaser 3

I am making an attempt to recreate the next shader from shadertoy utilizing Phaser 3:
https://www.shadertoy.com/view/wdG3Rz

I managed to repair the errors I used to be getting but it surely simply masses an empty black sq. when making an attempt to load it on my scene. Here is a pattern code:

const fragmentShader = `
#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 decision;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
uniform sampler2D iChannel2;

various vec2 fragCoord;

float avg(vec4 coloration) {
    return (coloration.r + coloration.g + coloration.b)/3.0;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Stream Velocity, enhance to make the water circulation sooner.
    float pace = 1.0;
    
    // Water Scale, scales the water, not the background.
    float scale = 0.8;
    
    // Water opacity, greater opacity means the water displays extra gentle.
    float opacity = 0.5;
 
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = (fragCoord/decision.xy);
    vec2 scaledUv = uv*scale;

    // Water layers, layered on prime of eachother to provide the reflective impact
    // Add 0.1 to each uv vectors to keep away from the layers stacking completely and creating an enormous unnatural spotlight
    vec4 water1 = texture2D(iChannel0, scaledUv + time*0.02*pace - 0.1);
    vec4 water2 = texture2D(iChannel0, scaledUv.xy + time*pace*vec2(-0.02, -0.02) + 0.1);
    
    // Water highlights
    vec4 highlights1 = texture2D(iChannel2, scaledUv.xy + time*pace / vec2(-10, 100));
    vec4 highlights2 = texture2D(iChannel2, scaledUv.xy + time*pace / vec2(10, 100));
    
    // Background picture
    vec4 background = texture2D(iChannel1, vec2(uv) + avg(water1) * 0.05);
    
    // Common the colours of the water layers (convert from 1 channel to 4 channel
    water1.rgb = vec3(avg(water1));
    water2.rgb = vec3(avg(water2));
    
    // Common and easy the colours of the spotlight layers
    highlights1.rgb = vec3(avg(highlights1)/1.5);
    highlights2.rgb = vec3(avg(highlights2)/1.5);
    
    float alpha = opacity;
    
    if(avg(water1 + water2) > 0.3) {
        alpha = 0.0;
    }
    
    if(avg(water1 + water2 + highlights1 + highlights2) > 0.75) {
        alpha = 5.0 * opacity;
    }

    // Output to display
    fragColor = (water1 + water2) * alpha + background;
}

void principal(void)
{
    mainImage(gl_FragColor, fragCoord.xy);
    gl_FragColor.a = 1.0;
}
`;

class Instance extends Phaser.Scene {
  constructor() {
    tremendous("Instance");
  }

  preload() {
    this.load.picture("noise", "https://i.imgur.com/pZfKeRP.png");
    this.load.picture("pic", "https://i.imgur.com/NQFMq6r.jpg");
    this.load.picture("rocks", "https://i.imgur.com/fvHGrrU.png");
  }

  create() {
    const baseShader = new Phaser.Show.BaseShader(
      "BufferShader",
      fragmentShader
    );
    this.add
      .shader(baseShader, 0, 0, 800, 600, ["noise", "pic", "rocks"])
      .setOrigin(0, 0);
  }
}

const config = {
  kind: Phaser.WEBGL,
  mum or dad: "phaser-example",
  width: 800,
  peak: 600,
  scene: Instance
};

const sport = new Phaser.Recreation(config);

Is there something I am doing unsuitable? Here is the identical pattern codepen so you possibly can see the issue.
https://codepen.io/javiervd/pen/ExMmeYY?editors=1011

Thanks.