MaskFilter with BlurFilter: Uncaught TypeError: Cannot read properties of null (reading 'width')

[Reece Como]

Hey 👋 I'm getting an unexpected error when applying the basic MaskFilter example from the linked blogpost:

// Gaussian blur filter
import { BlurFilter, Graphics } from 'pixi.js';
 
// Masking filter
import { MaskFilter } from '@pixi/picture';
 
const mask = new PIXI.Graphics()
  .beginFill(0xffffff, 1)
  .drawRect(0, 0, 100, 100);
 
mask.filters = [
  new MaskFilter(new BlurFilter()),
];

BlurFilterPass.mjs:19 Uncaught TypeError: Cannot read properties of null (reading 'width')
    at BlurFilterPass.apply (BlurFilterPass.mjs:19:1)
    at BlurFilter.apply (BlurFilter.mjs:20:1)
    at _MaskFilter.apply (MaskFilter.mjs:68:1)
    at FilterSystem.pop (FilterSystemMixin.mjs:170:1)
    at _Graphics.renderAdvanced (Container.mjs:302:1)
    at _Graphics.render (Container.mjs:253:1)
    at _Container.render (Container.mjs:259:1)
    at _Container.render (Container.mjs:259:1)
    at ObjectRendererSystem.render (ObjectRendererSystem.mjs:39:1)
    at _Renderer.render (Renderer.mjs:74:1)

Screenshot

For posterity:

Tech specs:

• pixi.js v7.2.4
• @pixi/picture v4.0.1

Is this a known issue?

[Reece Como]

It looks like uBackdrop inside _MaskFilter.apply(...) is null?

// BlurFilterPass.apply(...):

class BlurFilterPass extends Filter {

  apply(filterManager, input, output, clearMode) {
    if (output) {
      if (this.horizontal) {
        this.uniforms.strength = 1 / output.width * (output.width / input.width);
                                                                    ^

// BlurFilter.apply(...):

class BlurFilter extends Filter {
  
  apply(filterManager, input, output, clearMode) {
    const xStrength = Math.abs(this.blurXFilter.strength);
    const yStrength = Math.abs(this.blurYFilter.strength);
    if (xStrength && yStrength) {
      const renderTarget = filterManager.getFilterTexture();
      this.blurXFilter.apply(filterManager, input, renderTarget, CLEAR_MODES.CLEAR);
                                            ^

// _MaskFilter.apply(...):

const _MaskFilter = class extends BlendFilter {

  apply(filterManager, input, output, clearMode) {
    const target = filterManager.getFilterTexture(input);
    if (this.config.maskBefore) {
      const { blendMode } = this.state;
      this.state.blendMode = BLEND_MODES.NONE;
      filterManager.applyFilter(this, input, target, CLEAR_MODES.YES);
      this.baseFilter.blendMode = blendMode;
      this.baseFilter.apply(filterManager, target, output, clearMode);
      this.state.blendMode = blendMode;
    } else {
      const { uBackdrop, uBackdrop_flipY } = this.uniforms;
              ^
      if (uBackdrop_flipY[1] > 0 || this.safeFlipY) {
        this.baseFilter.apply(filterManager, uBackdrop, target, CLEAR_MODES.YES);
                                             ^

[Reece Como]

Needed this:

const app = new Application({
  //...
  backgroundAlpha: 0
});

For some reason only the first warning line was actually coming displaying in the debugger, so I missed the well-documented solution 🤦‍♀️