Bug: Setting an empty array to the filters will cause the position to shift(v8) about pixijs

[zjkmxy]

Thank you for bringing this out. This bug troubled me a lot.
To provide more information, the code I'm using looks like follows:

import * as PIXI from "pixi.js";

(async () => {
  const app = new PIXI.Application();
  await app.init({ background: "#1099bb", resizeTo: window });

  document.body.appendChild(app.canvas);

  // create a new Sprite from an image path
  const texture = await PIXI.Assets.load("https://pixijs.com/assets/bunny.png");
  const bunny = PIXI.Sprite.from(texture);

  // center the sprite's anchor point
  bunny.anchor.set(0.5);
  // move the sprite to the center of the screen
  bunny.x = app.screen.width / 2;
  bunny.y = app.screen.height / 2;

  const stage = new PIXI.Container();
  stage.filters = [];  // L1
  app.stage.addChild(stage);

  const container = new PIXI.Container();
  container.addChild(bunny);
  const filter = new PIXI.ColorMatrixFilter();
  container.filters = [filter];  // L2

  const wrapper = new PIXI.Container();
  wrapper.filters = [];
  const useWrapper = false;  // L3
  if(useWrapper) {
    wrapper.addChild(container);
    stage.addChild(wrapper);
  } else {
    stage.addChild(container);
  }

  const graphic = new PIXI.Graphics();
  stage.addChild(graphic);  // L4
  graphic.rect(-4000, -4000, 8000, 8000).fill({color: 0xffffff, alpha: 0});  // L5
})();

Observations:

• In the original code, the sprite is not shown at all.
• If we comment out L1, the sprite shows and the position is correct. Everything is normal.
  • This is the normal case when no empty array is used.
• If we change L2 to container.filters = [];, the sprite shows and the position is correct. Everything is normal.
  • This means if all filters are empty arrays, rendering is good.
• If we change L3 to const useWrapper = true;, the sprite shows but the position becomes (0,0);
  • This means a wrapper with an empty array can fix the visibility issue, but the position is still wrong.
• If we comment out L4, the sprite shows but the position becomes (0,0).
• If we change L5 to graphic.rect(-200, -200, 8000, 8000).fill({color: 0xffffff, alpha: 0});, the sprite shows but in the right, bottom corner, rather than the middle of screen.

[GoodBoyDigital]

thanks for sharing! looking into this now 💯

[zjkmxy]

I have played more and found that the issue is related to skip:

pixijs/src/filters/FilterSystem.ts

Lines 141 to 146 in 071a616

	if (filters.length === 0)
	{
	filterData.skip = true;
	return;
	}

A filter array with filters all disabled will gave the same result as an empty array.

The reason I think could be that there is an offset applied to the global transform. When skip is true, FilterSystem does not directly modify globalUniforms. However, based on my observation, the coordinate origin is aligned with the last element drawn before popFilter. I suspect the reason is the following code:

pixijs/src/filters/FilterSystem.ts

Lines 458 to 466 in 071a616

	// get previous bounds..
	if (this._filterStackIndex > 0)
	{
	offset.x = this._filterStack[this._filterStackIndex - 1].bounds.minX;
	offset.y = this._filterStack[this._filterStackIndex - 1].bounds.minY;
	}
	outputFrame[0] = bounds.minX - offset.x;
	outputFrame[1] = bounds.minY - offset.y;

When a second filter is applied, it does not know the previous filter is skipped and still tries to apply the offset.

A quick fix could be to copy the input to the output when filters is empty instead of skipping the rendering.

[Zyie]

This should be fixed in the latest rc.2