pixijs-blend-modes

This skill covers compositing display objects with blend modes in PixiJS v8 by setting the blendMode property on a container or display object. It distinguishes two categories: standard modes that use GPU blend equations directly, and advanced modes implemented through the filter pipeline. Because blend-mode transitions break render batches, a recurring theme is grouping like-mode siblings together to minimize draw calls. It triggers on terms such as blendMode, additive, multiply, screen, overlay, color-burn, color-dodge, advanced-blend-modes, glow, and erase.

Standard modes are built in, hardware-accelerated, and cheap, requiring no filters. They include normal, add (additive/glow), multiply (darken/shadow), screen (lighten/dodge), erase, none, inherit (the actual default value), and min/max which keep the minimum or maximum of source and destination and are WebGL2+ only. Advanced modes such as color-burn, color-dodge, overlay, hard-light, soft-light, difference, luminosity, and roughly twenty others require an explicit import 'pixi.js/advanced-blend-modes' to register the extensions. On the WebGL renderer they additionally require useBackBuffer: true at init time, since they read from the back buffer; without it the blend silently falls back to normal and PixiJS logs a warning. WebGPU enables the back buffer unconditionally. Advanced modes use filters internally and therefore cost more than standard modes.

The skill documents several common mistakes. Using a v7-style BLEND_MODES enum (for example BLEND_MODES.ADD) causes a runtime error because in v8 BLEND_MODES is a TypeScript type only with no runtime export; the string form must be used. Forgetting the advanced-blend-modes import, or omitting useBackBuffer, causes advanced modes to silently fall back. Mixing blend modes across adjacent objects breaks batching, so children should be sorted so same-mode objects are adjacent (screen/screen/normal/normal yields two draw calls versus four for alternating order). Finally, because advanced modes are filter-based and use Filter.defaultOptions with a default resolution of 1, they can look clipped or scaled on high-DPI render targets; setting Filter.defaultOptions.resolution = 'inherit' before creating affected objects fixes fidelity at the cost of more memory and runtime. API reference links cover Container.blendMode and the individual blend filter classes.