PixiJS Projection & Filter System conflict demonstration

This demo shows how adding a filter to any object will prevent it from being projected onto a texture.

by ShukantPal

HTML

<script src="https://pixijs.download/v5.2.1/pixi.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>PixiJS Projection and Filter System conflict demonstration</title>
  </head>

  <body>
    <canvas id="app-canvas"></canvas>
  </body>

</html>

JavaScript

const renderer = new PIXI.autoDetectRenderer({
  view: document.getElementById('app-canvas'),
  width: 512,
  height: 512,
  backgroundColor: 0xff
});

const sheetTexture = new PIXI.RenderTexture.create({
  width: 512,
  height: 512
});

const sheetSprite = new PIXI.Sprite(sheetTexture);

const filteredObject = new PIXI.Graphics();

filteredObject.beginFill(0xff00);
filteredObject.drawRect(0, 0, 128, 128);
filteredObject.endFill();

/**
 * So, this is the whole problem. The object @(0, 0) is supposed
 * to be rendered @(256, 256). However, due to the filter system,
 * it is not projected at that location on the texture.
 */
filteredObject.filters = [new PIXI.filters.NoiseFilter()];

renderer.renderTexture.clear();
renderer.renderTexture.bind(
	sheetTexture,
  new PIXI.Rectangle(0, 0, 128, 128), // sourceFrame: frame we want to render
  new PIXI.Rectangle(256, 256, 128, 128) // destinationFrame: where that frame should go on texture
);
filteredObject.render(renderer);
renderer.batch.flush();

renderer.renderTexture.bind(null);
sheetSprite.render(renderer);
renderer.batch.flush();