pixijs-blend-modes

Name: pixijs-blend-modes
Author: pixijs

2.8kinstalls15forks

How to install pixijs-blend-modes?

pixijs/pixijs-skills/pixijs-blend-modes

$npx -y skills add pixijs/pixijs-skills --skill pixijs-blend-modes

Installs into the current project.

Summary

Use this skill when compositing display objects with blend modes in PixiJS v8. Covers standard modes (normal, add, multiply, screen, erase, min, max), advanced modes via pixi.js/advanced-blend-modes (color-burn, overlay, hard-light, etc.), batch-friendly ordering. Triggers on: bl

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const light = new Sprite(await Assets.load("light.png"));
7	light.blendMode = "add";
8	app.stage.addChild(light);
9
10	const shadow = new Sprite(await Assets.load("shadow.png"));
11	shadow.blendMode = "multiply";
12	app.stage.addChild(shadow);
13
14	import "pixi.js/advanced-blend-modes";
15	const overlay = new Sprite(await Assets.load("overlay.png"));
16	overlay.blendMode = "color-burn";
17	app.stage.addChild(overlay);
18	```
19
20	Related skills: `pixijs-filters` (advanced modes use the filter pipeline), `pixijs-performance` (batching with blend modes), `pixijs-color` (color manipulation).
21
22	## Core Patterns
23
24	### Standard blend modes
25
26	Standard modes are built in and use GPU blend equations directly:
27
28	```ts
29	import { Sprite } from "pixi.js";
30
31	sprite.blendMode = "normal"; // standard alpha compositing (effective default at root)
32	sprite.blendMode = "add"; // additive (lighten, glow effects)
33	sprite.blendMode = "multiply"; // multiply (darken, shadow effects)
34	sprite.blendMode = "screen"; // screen (lighten, dodge effects)
35	sprite.blendMode = "erase"; // erase pixels from render target
36	sprite.blendMode = "none"; // no blending, overwrites destination
37	sprite.blendMode = "inherit"; // inherit from parent (this is the actual default value)
38	sprite.blendMode = "min"; // keeps minimum of source and destination (WebGL2+ only)
39	sprite.blendMode = "max"; // keeps maximum of source and destination (WebGL2+ only)
40	```
41
42	These are hardware-accelerated and cheap. They do not require filters.
43
44	### Advanced blend modes
45
46	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:
47
48	```ts
49	import "pixi.js/advanced-blend-modes";
50	import { Application, Sprite, Assets } from "pixi.js";
51
52	const app = new Application();
53	await app.init({ useBackBuffer: true }); // required for advanced modes on WebGL
54
55	const texture = await Assets.load("overlay.png");
56	const overlay = new Sprite(texture);
57	overlay.blendMode = "color-burn";
58	```
59
60	Available advanced modes:
61
62	\| Mode \| Effect \|
63	\| -------------- \| ----------------------------------------------- \|
64	\| `color-burn` \| Darkens by increasing contrast \|
65	\| `color-dodge` \| Brightens by decreasing contrast \|
66	\| `darken` \| Keeps darker of two layers \|
67	\| `difference` \| Absolute difference \|
68	\| `divide` \| Divides bottom by top \|
69	\| `exclusion` \| Similar to difference, lower contrast \|
70	\| `hard-light` \| Multiply or screen based on top layer \|
71	\| `hard-mix` \| High contrast threshold blend \|
72	\| `lighten` \| Keeps lighter of two layers \|
73	\| `linear-burn` \| Adds and subtracts to darken \|
74	\| `linear-dodge` \| Adds layers together \|
75	\| `linear-light` \| Linear burn or dodge based on top layer \|
76	\| `luminosity` \| Luminosity of top, hue/saturation of bottom \|
77	\| `negation` \| Inverted difference \|
78	\| `overlay` \| Multiply or screen based on bottom layer \|
79	\| `pin-light` \| Replaces based on lightness comparison \|
80	\| `saturation` \| Saturation of top, hue/luminosity of bottom \|
81	\| `soft-light` \| Gentle overlay effect \|
82	\| `subtract` \| Subtracts top from bottom \|
83	\| `vivid-light` \| Color burn or dodge based on top layer \|
84	\| `color` \| Hue and saturation of top, luminosity of bottom \|
85
86	You set advanced blend modes the same way as standard ones, via the `blendMode` property. They use filters internally, so they cost more than standard modes.
87
88	### Batch-friendly ordering
89
90	Different blend modes break the rendering batch. Order objects to minimize transitions:
91
92	```ts
93	import { Container, Sprite } from "pixi.js";
94
95	const scene = new Container();
96	scene.addChild(screenSprite1); // 'screen'
97	scene.addChild(screenSprite2); // 'screen'
98	scene.addChild(normalSprite1); // 'normal'
99	scene.addChild(normalSprite2); // 'normal'
100	```
101
102	2 draw calls. Alternating order (`screen, normal, screen, normal`) would produce 4.
103
104	## Common Mistakes
105
106	### [HIGH] Not importing

People who liked this also viewed

6 picks

Type

pixijs-blend-modes

2.8kinstalls15forks

View on GitHub

How to install pixijs-blend-modes?

pixijs/pixijs-skills/pixijs-blend-modes

$npx -y skills add pixijs/pixijs-skills --skill pixijs-blend-modes

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const light = new Sprite(await Assets.load("light.png"));
7	light.blendMode = "add";
8	app.stage.addChild(light);
9
10	const shadow = new Sprite(await Assets.load("shadow.png"));
11	shadow.blendMode = "multiply";
12	app.stage.addChild(shadow);
13
14	import "pixi.js/advanced-blend-modes";
15	const overlay = new Sprite(await Assets.load("overlay.png"));
16	overlay.blendMode = "color-burn";
17	app.stage.addChild(overlay);
18	```
19
20	Related skills: `pixijs-filters` (advanced modes use the filter pipeline), `pixijs-performance` (batching with blend modes), `pixijs-color` (color manipulation).
21
22	## Core Patterns
23
24	### Standard blend modes
25
26	Standard modes are built in and use GPU blend equations directly:
27
28	```ts
29	import { Sprite } from "pixi.js";
30
31	sprite.blendMode = "normal"; // standard alpha compositing (effective default at root)
32	sprite.blendMode = "add"; // additive (lighten, glow effects)
33	sprite.blendMode = "multiply"; // multiply (darken, shadow effects)
34	sprite.blendMode = "screen"; // screen (lighten, dodge effects)
35	sprite.blendMode = "erase"; // erase pixels from render target
36	sprite.blendMode = "none"; // no blending, overwrites destination
37	sprite.blendMode = "inherit"; // inherit from parent (this is the actual default value)
38	sprite.blendMode = "min"; // keeps minimum of source and destination (WebGL2+ only)
39	sprite.blendMode = "max"; // keeps maximum of source and destination (WebGL2+ only)
40	```
41
42	These are hardware-accelerated and cheap. They do not require filters.
43
44	### Advanced blend modes
45
46	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:
47
48	```ts
49	import "pixi.js/advanced-blend-modes";
50	import { Application, Sprite, Assets } from "pixi.js";
51
52	const app = new Application();
53	await app.init({ useBackBuffer: true }); // required for advanced modes on WebGL
54
55	const texture = await Assets.load("overlay.png");
56	const overlay = new Sprite(texture);
57	overlay.blendMode = "color-burn";
58	```
59
60	Available advanced modes:
61
62	\| Mode \| Effect \|
63	\| -------------- \| ----------------------------------------------- \|
64	\| `color-burn` \| Darkens by increasing contrast \|
65	\| `color-dodge` \| Brightens by decreasing contrast \|
66	\| `darken` \| Keeps darker of two layers \|
67	\| `difference` \| Absolute difference \|
68	\| `divide` \| Divides bottom by top \|
69	\| `exclusion` \| Similar to difference, lower contrast \|
70	\| `hard-light` \| Multiply or screen based on top layer \|
71	\| `hard-mix` \| High contrast threshold blend \|
72	\| `lighten` \| Keeps lighter of two layers \|
73	\| `linear-burn` \| Adds and subtracts to darken \|
74	\| `linear-dodge` \| Adds layers together \|
75	\| `linear-light` \| Linear burn or dodge based on top layer \|
76	\| `luminosity` \| Luminosity of top, hue/saturation of bottom \|
77	\| `negation` \| Inverted difference \|
78	\| `overlay` \| Multiply or screen based on bottom layer \|
79	\| `pin-light` \| Replaces based on lightness comparison \|
80	\| `saturation` \| Saturation of top, hue/luminosity of bottom \|
81	\| `soft-light` \| Gentle overlay effect \|
82	\| `subtract` \| Subtracts top from bottom \|
83	\| `vivid-light` \| Color burn or dodge based on top layer \|
84	\| `color` \| Hue and saturation of top, luminosity of bottom \|
85
86	You set advanced blend modes the same way as standard ones, via the `blendMode` property. They use filters internally, so they cost more than standard modes.
87
88	### Batch-friendly ordering
89
90	Different blend modes break the rendering batch. Order objects to minimize transitions:
91
92	```ts
93	import { Container, Sprite } from "pixi.js";
94
95	const scene = new Container();
96	scene.addChild(screenSprite1); // 'screen'
97	scene.addChild(screenSprite2); // 'screen'
98	scene.addChild(normalSprite1); // 'normal'
99	scene.addChild(normalSprite2); // 'normal'
100	```
101
102	2 draw calls. Alternating order (`screen, normal, screen, normal`) would produce 4.
103
104	## Common Mistakes
105
106	### [HIGH] Not importing

People who liked this also viewed

6 picks

Type