Pixijs Blend Modes

Set `container.blendMode` to composite display objects with GPU blend equations (standard modes) or filter-based advanced modes. Blend-mode transitions break render batches, so group like-mode siblings together.

## Quick Start

```ts
const light = new Sprite(await Assets.load("light.png"));
light.blendMode = "add";
app.stage.addChild(light);

const shadow = new Sprite(await Assets.load("shadow.png"));
shadow.blendMode = "multiply";
app.stage.addChild(shadow);

import "pixi.js/advanced-blend-modes";
const overlay = new Sprite(await Assets.load("overlay.png"));
overlay.blendMode = "color-burn";
app.stage.addChild(overlay);
```

**Related skills:** `pixijs-filters` (advanced modes use the filter pipeline), `pixijs-performance` (batching with blend modes), `pixijs-color` (color manipulation).

## Core Patterns

### Standard blend modes

Standard modes are built in and use GPU blend equations directly:

```ts
import { Sprite } from "pixi.js";

sprite.blendMode = "normal"; // standard alpha compositing (effective default at root)
sprite.blendMode = "add"; // additive (lighten, glow effects)
sprite.blendMode = "multiply"; // multiply (darken, shadow effects)
sprite.blendMode = "screen"; // screen (lighten, dodge effects)
sprite.blendMode = "erase"; // erase pixels from render target
sprite.blendMode = "none"; // no blending, overwrites destination
sprite.blendMode = "inherit"; // inherit from parent (this is the actual default value)
sprite.blendMode = "min"; // keeps minimum of source and destination (WebGL2+ only)
sprite.blendMode = "max"; // keeps maximum of source and destination (WebGL2+ only)
```

These are hardware-accelerated and cheap. They do not require filters.

### Advanced blend modes

Advanced modes require an explicit import to register the extensions. On the WebGL renderer they also require `useBackBuffer: true` at init time, or PixiJS logs a warning and the blend silently falls back:

```ts
import "pixi.js/advanced-blend-modes";
import { Application, Sprite, Assets } from "pixi.js";

const app = new Application();
await app.init({ useBackBuffer: true }); // required for advanced modes on WebGL

const texture = await Assets.load("overlay.png");
const overlay = new Sprite(texture);
overlay.blendMode = "color-burn";
```

Available advanced modes:

| Mode           | Effect                                          |
| -------------- | ----------------------------------------------- |
| `color-burn`   | Darkens by increasing contrast                  |
| `color-dodge`  | Brightens by decreasing contrast                |
| `darken`       | Keeps darker of two layers                      |
| `difference`   | Absolute difference                             |
| `divide`       | Divides bottom by top                           |
| `exclusion`    | Similar to difference, lower contrast           |
| `hard-light`   | Multiply or screen based on top layer           |
| `hard-mix`     | High contrast threshold blend                   |
| `lighten`      | Keeps lighter of two layers                     |
| `linear-burn`  | Adds and subtracts to darken                    |
| `linear-dodge` | Adds layers together                            |
| `linear-light` | Linear burn or dodge based on top layer         |
| `luminosity`   | Luminosity of top, hue/saturation of bottom     |
| `negation`     | Inverted difference                             |
| `overlay`      | Multiply or screen based on bottom layer        |
| `pin-light`    | Replaces based on lightness comparison          |
| `saturation