PixiJS Performance

import { Application, Assets, Sprite } from "pixi.js";

const app = new Application();
await app.init({ width: 800, height: 600, antialias: false });

// Load a single texture atlas — all frames share one base texture
const sheet = await Assets.load("/sprites/characters.json");

for (let i = 0; i < 1000; i++) {
  const sprite = new Sprite(sheet.textures["hero_idle_01.png"]);
  // Same base texture -> all 1 000 sprites stay in ONE batch
  sprite.x = Math.random() * 800;
  sprite.y = Math.random() * 600;
  app.stage.addChild(sprite);
}

// BAD: mixing textures mid-scene breaks the batch
// const logo = new Sprite(await Assets.load("/logo.png")); // new base texture -> flush!

import { Container, Sprite, RenderLayer } from "pixi.js";

// --- Per-sprite culling ---
const sprite = new Sprite(texture);
sprite.cullable = true;          // renderer skips this sprite when off-screen
// Optionally provide a tighter cull rectangle (avoids AABB recompute each frame)
sprite.cullArea = new PIXI.Rectangle(0, 0, 64, 64);

// --- RenderGroup: cache a static subtree as a single texture ---
const staticMap = new Container();
staticMap.isRenderGroup = true;  // rendered to an off-screen texture once
// children can still be read by the scene graph but the GPU sees one quad
app.stage.addChild(staticMap);

// Add 10 000 static tiles — only re-renders when staticMap.cacheAsDirty = true
for (let i = 0; i < 10_000; i++) {
  const tile = new Sprite(tileTexture);
  tile.cullable = true;
  staticMap.addChild(tile);
}

import { ParticleContainer, Sprite, Texture } from "pixi.js";

const particles = new ParticleContainer(50_000, {
  position: true,   // upload x/y each frame
  rotation: true,   // upload rotation
  scale: false,     // skip if uniform scale
  alpha: true,      // upload alpha
  tint: false,      // skip if no tinting
});
app.stage.addChild(particles);

const texture = Texture.from("spark.png");

for (let i = 0; i < 50_000; i++) {
  const spark = new Sprite(texture);
  spark.x = Math.random() * app.screen.width;
  spark.y = Math.random() * app.screen.height;
  particles.addChild(spark);
}

// Animate inside ticker — ParticleContainer skips the full scene-graph walk
app.ticker.add(() => {
  for (const child of particles.children) {
    (child as Sprite).y += 1;
    if ((child as Sprite).y > app.screen.height) (child as Sprite).y = 0;
  }
});

// Destroying a container and its children (keep shared textures alive)
container.destroy({ children: true, texture: false, baseTexture: false });

// Full unload when a level is complete
await Assets.unload("/levels/level1-atlas.json");

// Remove ticker listener to prevent ghost updates after scene teardown
app.ticker.remove(updateFn);

// Destroy a RenderTexture created at runtime
renderTexture.destroy(true); // true = also destroy base texture

// Avoid: holding a reference to a destroyed sprite
let hero: Sprite | null = new Sprite(texture);
hero.destroy();
hero = null; // release JS reference too