Search the Community

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!