pixi Graphics rectangle filter shader conversion from v7 to v8 not working

[Deoxyz]

I recently upgrade my shader code from pixi v7 to pixi v8 and after some issues with shader not compiling I manged to get it where there are no errors thrown. But I don't see it working either. My code should create a black screen with alpha 0.8 and somewhere on that rect I should see a cut out circle with faded edges:

But instead I don't get anything, not even an error. But I see my uniforms filled in correctly (I think):

 

v7 code:
tutorialShaderFrag.txt

shaders.ts.txt

In my view I do following (uses pixi default vertex shader):

private filterShader: TutorialFilter = new TutorialFilter();

//... Apply
this.backgroundGraphic = new Pixi.Graphics();
this.backgroundGraphic.pivot.set(0.5, 0.5);
this.backgroundGraphic.beginFill(0xffffff);
this.backgroundGraphic.drawRect(-2000, -2000, 5000, 5000);
this.backgroundGraphic.endFill();
this.backgroundGraphic.filters = [this.filterShader];

// ... Update
this.filterShader.uniforms.uResolution = [appResolution.w, appResolution.h];
const rNormalized = transform.r / actualGameResolution.w;
this.filterShader.uniforms.uCirclePosition = [xNormalized, yNormalized];
this.filterShader.uniforms.uCircleRadius = rNormalized;
this.filterShader.uniforms.uSquashFactorY = transform.sy;

 

v8 code:

shaders.mts.txt

private filterShader: TutorialFilter = new TutorialFilter();

//... Apply
this.backgroundGraphic = new Pixi.Graphics();
this.backgroundGraphic.rect(-2000, -2000, 5000, 5000);
this.backgroundGraphic.fill({ color: 0xffffff });
this.backgroundGraphic.filters = [this.filterShader];

// ... Update
this.filterShader?.update({
    resolution: new Float32Array([appResolution.w, appResolution.h]),
    circlePosition: new Float32Array([xNormalized, yNormalized]),
    circleRadius: rNormalized,
    squashFactorY: transform.sy ?? 1.0,
    alpha: 0.8,
});

We also upgraded the project to ESM, but I don't think that is the issue. WebGL only, no WebGPU (yet).
The pixi version we use at the moment is v8.7.2.

I don't have a clue what I might have missed.

Thanks in advance!

[Deoxyz]

It seems that I got a bit further now. There were 2 issues. 
1st was that webpack imported my .frag & .vert shader as an url instead of the content of the file as string. 2nd was that my vertex shader had to be updated in order to make it work. Now I see a black rectangle, but not in the correct place yet.

Hopfully I have the full fix soon. 😄 

[Deoxyz]

I got it working by tweaking my vertex shader that the created rect was bottom left of the screen as following:

precision mediump float;
attribute vec2 aPosition;

void main() {
    // Map aPosition from [0, 1] range to clip space [-1, 1]
    vec2 clipSpace = aPosition * 2.0 - 1.0;
    // Invert Y for screen space (WebGL's Y is flipped)
    clipSpace.y = -clipSpace.y;
    gl_Position = vec4(clipSpace, 0.0, 1.0);
}