@remotion/effects 4.0.471 → 4.0.473
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/color-key.d.ts +47 -0
- package/dist/color-utils.d.ts +4 -1
- package/dist/dot-grid.d.ts +2 -0
- package/dist/duotone.d.ts +1 -0
- package/dist/esm/barrel-distortion.mjs +9 -5
- package/dist/esm/blur.mjs +2 -1
- package/dist/esm/brightness.mjs +7 -4
- package/dist/esm/chromatic-aberration.mjs +10 -6
- package/dist/esm/color-key.mjs +419 -0
- package/dist/esm/contrast.mjs +7 -4
- package/dist/esm/dot-grid.mjs +11 -6
- package/dist/esm/drop-shadow.mjs +15 -8
- package/dist/esm/duotone.mjs +9 -5
- package/dist/esm/evolve.mjs +11 -6
- package/dist/esm/fisheye.mjs +13 -7
- package/dist/esm/glow.mjs +14 -8
- package/dist/esm/grayscale.mjs +7 -4
- package/dist/esm/halftone-linear-gradient.mjs +15 -8
- package/dist/esm/halftone.mjs +16 -11
- package/dist/esm/hue.mjs +7 -4
- package/dist/esm/index.mjs +24 -15
- package/dist/esm/invert.mjs +7 -4
- package/dist/esm/linear-progressive-blur.mjs +531 -0
- package/dist/esm/lines.mjs +14 -10
- package/dist/esm/mirror.mjs +9 -5
- package/dist/esm/noise.mjs +11 -6
- package/dist/esm/pixel-dissolve.mjs +17 -9
- package/dist/esm/rings.mjs +13 -7
- package/dist/esm/saturation.mjs +7 -4
- package/dist/esm/scale.mjs +2 -1
- package/dist/esm/scanlines.mjs +15 -8
- package/dist/esm/shine.mjs +18 -12
- package/dist/esm/speckle.mjs +13 -7
- package/dist/esm/tint.mjs +9 -5
- package/dist/esm/translate.mjs +15 -8
- package/dist/esm/vignette.mjs +40 -12
- package/dist/esm/wave.mjs +6 -3
- package/dist/esm/waves.mjs +20 -13
- package/dist/esm/white-noise.mjs +11 -6
- package/dist/esm/zigzag.mjs +18 -12
- package/dist/evolve.d.ts +2 -0
- package/dist/halftone-linear-gradient.d.ts +4 -0
- package/dist/halftone.d.ts +5 -3
- package/dist/linear-progressive-blur/index.d.ts +28 -0
- package/dist/linear-progressive-blur/linear-progressive-blur-runtime.d.ts +32 -0
- package/dist/linear-progressive-blur/linear-progressive-blur-shaders.d.ts +2 -0
- package/dist/linear-progressive-blur.d.ts +1 -0
- package/dist/lines.d.ts +4 -3
- package/dist/rings.d.ts +3 -0
- package/dist/tint.d.ts +1 -0
- package/dist/vignette.d.ts +13 -0
- package/dist/waves.d.ts +7 -3
- package/dist/zigzag.d.ts +6 -3
- package/package.json +19 -3
- package/dist/effect-internals.d.ts +0 -8
- package/dist/entrypoints/blur.d.ts +0 -6
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
export declare const colorKeySchema: {
|
|
2
|
+
readonly keyColor: {
|
|
3
|
+
readonly type: "color";
|
|
4
|
+
readonly default: "#00ff00";
|
|
5
|
+
readonly description: "Key color";
|
|
6
|
+
};
|
|
7
|
+
readonly similarity: {
|
|
8
|
+
readonly type: "number";
|
|
9
|
+
readonly min: 0;
|
|
10
|
+
readonly max: 1;
|
|
11
|
+
readonly step: 0.01;
|
|
12
|
+
readonly default: 0.18;
|
|
13
|
+
readonly description: "Similarity";
|
|
14
|
+
readonly hiddenFromList: false;
|
|
15
|
+
};
|
|
16
|
+
readonly smoothness: {
|
|
17
|
+
readonly type: "number";
|
|
18
|
+
readonly min: 0;
|
|
19
|
+
readonly max: 1;
|
|
20
|
+
readonly step: 0.01;
|
|
21
|
+
readonly default: 0.08;
|
|
22
|
+
readonly description: "Smoothness";
|
|
23
|
+
readonly hiddenFromList: false;
|
|
24
|
+
};
|
|
25
|
+
readonly spillSuppression: {
|
|
26
|
+
readonly type: "number";
|
|
27
|
+
readonly min: 0;
|
|
28
|
+
readonly max: 1;
|
|
29
|
+
readonly step: 0.01;
|
|
30
|
+
readonly default: 0.25;
|
|
31
|
+
readonly description: "Spill suppression";
|
|
32
|
+
readonly hiddenFromList: false;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export type ColorKeyParams = {
|
|
36
|
+
/** Color to key out. Defaults to `'#00ff00'`. */
|
|
37
|
+
readonly keyColor?: string;
|
|
38
|
+
/** How close a pixel has to be to the key color to become transparent (0-1). Defaults to `0.18`. */
|
|
39
|
+
readonly similarity?: number;
|
|
40
|
+
/** Softness of key edges (0-1). Defaults to `0.08`. */
|
|
41
|
+
readonly smoothness?: number;
|
|
42
|
+
/** Strength of key-color spill suppression on remaining pixels (0-1). Defaults to `0.25`. */
|
|
43
|
+
readonly spillSuppression?: number;
|
|
44
|
+
};
|
|
45
|
+
export declare const colorKey: (params?: (ColorKeyParams & {
|
|
46
|
+
readonly disabled?: boolean | undefined;
|
|
47
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
package/dist/color-utils.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export declare const colorAmountSchema: {
|
|
|
8
8
|
readonly step: 0.01;
|
|
9
9
|
readonly default: 1;
|
|
10
10
|
readonly description: "Amount";
|
|
11
|
+
readonly hiddenFromList: false;
|
|
11
12
|
};
|
|
12
13
|
export declare const colorMultiplierSchema: {
|
|
13
14
|
readonly type: "number";
|
|
@@ -15,6 +16,7 @@ export declare const colorMultiplierSchema: {
|
|
|
15
16
|
readonly step: 0.01;
|
|
16
17
|
readonly default: 1;
|
|
17
18
|
readonly description: "Amount";
|
|
19
|
+
readonly hiddenFromList: false;
|
|
18
20
|
};
|
|
19
21
|
export declare const brightnessAmountSchema: {
|
|
20
22
|
readonly type: "number";
|
|
@@ -23,9 +25,10 @@ export declare const brightnessAmountSchema: {
|
|
|
23
25
|
readonly step: 0.01;
|
|
24
26
|
readonly default: 0;
|
|
25
27
|
readonly description: "Amount";
|
|
28
|
+
readonly hiddenFromList: false;
|
|
26
29
|
};
|
|
27
30
|
export declare const hueDegreesSchema: {
|
|
28
|
-
readonly type: "
|
|
31
|
+
readonly type: "rotation-degrees";
|
|
29
32
|
readonly step: 1;
|
|
30
33
|
readonly default: 0;
|
|
31
34
|
readonly description: "Degrees";
|
package/dist/dot-grid.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export declare const dotGridSchema: {
|
|
|
6
6
|
readonly step: 1;
|
|
7
7
|
readonly default: 16;
|
|
8
8
|
readonly description: "Dot size";
|
|
9
|
+
readonly hiddenFromList: false;
|
|
9
10
|
};
|
|
10
11
|
readonly gridSize: {
|
|
11
12
|
readonly type: "number";
|
|
@@ -14,6 +15,7 @@ export declare const dotGridSchema: {
|
|
|
14
15
|
readonly step: 1;
|
|
15
16
|
readonly default: 20;
|
|
16
17
|
readonly description: "Grid size";
|
|
18
|
+
readonly hiddenFromList: false;
|
|
17
19
|
};
|
|
18
20
|
readonly invert: {
|
|
19
21
|
readonly type: "boolean";
|
package/dist/duotone.d.ts
CHANGED
|
@@ -34,14 +34,16 @@ var colorAmountSchema = {
|
|
|
34
34
|
max: 1,
|
|
35
35
|
step: 0.01,
|
|
36
36
|
default: DEFAULT_AMOUNT,
|
|
37
|
-
description: "Amount"
|
|
37
|
+
description: "Amount",
|
|
38
|
+
hiddenFromList: false
|
|
38
39
|
};
|
|
39
40
|
var colorMultiplierSchema = {
|
|
40
41
|
type: "number",
|
|
41
42
|
min: 0,
|
|
42
43
|
step: 0.01,
|
|
43
44
|
default: DEFAULT_AMOUNT,
|
|
44
|
-
description: "Amount"
|
|
45
|
+
description: "Amount",
|
|
46
|
+
hiddenFromList: false
|
|
45
47
|
};
|
|
46
48
|
var brightnessAmountSchema = {
|
|
47
49
|
type: "number",
|
|
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
|
|
|
49
51
|
max: 1,
|
|
50
52
|
step: 0.01,
|
|
51
53
|
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
-
description: "Amount"
|
|
54
|
+
description: "Amount",
|
|
55
|
+
hiddenFromList: false
|
|
53
56
|
};
|
|
54
57
|
var hueDegreesSchema = {
|
|
55
|
-
type: "
|
|
58
|
+
type: "rotation-degrees",
|
|
56
59
|
step: 1,
|
|
57
60
|
default: DEFAULT_HUE_DEGREES,
|
|
58
61
|
description: "Degrees"
|
|
@@ -300,7 +303,8 @@ var barrelDistortionSchema = {
|
|
|
300
303
|
max: 1,
|
|
301
304
|
step: 0.01,
|
|
302
305
|
default: DEFAULT_BARREL_DISTORTION_AMOUNT,
|
|
303
|
-
description: "Amount"
|
|
306
|
+
description: "Amount",
|
|
307
|
+
hiddenFromList: false
|
|
304
308
|
}
|
|
305
309
|
};
|
|
306
310
|
var resolve = (p) => ({
|
package/dist/esm/blur.mjs
CHANGED
package/dist/esm/brightness.mjs
CHANGED
|
@@ -34,14 +34,16 @@ var colorAmountSchema = {
|
|
|
34
34
|
max: 1,
|
|
35
35
|
step: 0.01,
|
|
36
36
|
default: DEFAULT_AMOUNT,
|
|
37
|
-
description: "Amount"
|
|
37
|
+
description: "Amount",
|
|
38
|
+
hiddenFromList: false
|
|
38
39
|
};
|
|
39
40
|
var colorMultiplierSchema = {
|
|
40
41
|
type: "number",
|
|
41
42
|
min: 0,
|
|
42
43
|
step: 0.01,
|
|
43
44
|
default: DEFAULT_AMOUNT,
|
|
44
|
-
description: "Amount"
|
|
45
|
+
description: "Amount",
|
|
46
|
+
hiddenFromList: false
|
|
45
47
|
};
|
|
46
48
|
var brightnessAmountSchema = {
|
|
47
49
|
type: "number",
|
|
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
|
|
|
49
51
|
max: 1,
|
|
50
52
|
step: 0.01,
|
|
51
53
|
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
-
description: "Amount"
|
|
54
|
+
description: "Amount",
|
|
55
|
+
hiddenFromList: false
|
|
53
56
|
};
|
|
54
57
|
var hueDegreesSchema = {
|
|
55
|
-
type: "
|
|
58
|
+
type: "rotation-degrees",
|
|
56
59
|
step: 1,
|
|
57
60
|
default: DEFAULT_HUE_DEGREES,
|
|
58
61
|
description: "Degrees"
|
|
@@ -34,14 +34,16 @@ var colorAmountSchema = {
|
|
|
34
34
|
max: 1,
|
|
35
35
|
step: 0.01,
|
|
36
36
|
default: DEFAULT_AMOUNT,
|
|
37
|
-
description: "Amount"
|
|
37
|
+
description: "Amount",
|
|
38
|
+
hiddenFromList: false
|
|
38
39
|
};
|
|
39
40
|
var colorMultiplierSchema = {
|
|
40
41
|
type: "number",
|
|
41
42
|
min: 0,
|
|
42
43
|
step: 0.01,
|
|
43
44
|
default: DEFAULT_AMOUNT,
|
|
44
|
-
description: "Amount"
|
|
45
|
+
description: "Amount",
|
|
46
|
+
hiddenFromList: false
|
|
45
47
|
};
|
|
46
48
|
var brightnessAmountSchema = {
|
|
47
49
|
type: "number",
|
|
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
|
|
|
49
51
|
max: 1,
|
|
50
52
|
step: 0.01,
|
|
51
53
|
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
-
description: "Amount"
|
|
54
|
+
description: "Amount",
|
|
55
|
+
hiddenFromList: false
|
|
53
56
|
};
|
|
54
57
|
var hueDegreesSchema = {
|
|
55
|
-
type: "
|
|
58
|
+
type: "rotation-degrees",
|
|
56
59
|
step: 1,
|
|
57
60
|
default: DEFAULT_HUE_DEGREES,
|
|
58
61
|
description: "Degrees"
|
|
@@ -292,10 +295,11 @@ var chromaticAberrationSchema = {
|
|
|
292
295
|
max: 100,
|
|
293
296
|
step: 1,
|
|
294
297
|
default: DEFAULT_CHROMATIC_ABERRATION_AMOUNT,
|
|
295
|
-
description: "Amount"
|
|
298
|
+
description: "Amount",
|
|
299
|
+
hiddenFromList: false
|
|
296
300
|
},
|
|
297
301
|
angle: {
|
|
298
|
-
type: "
|
|
302
|
+
type: "rotation-degrees",
|
|
299
303
|
step: 1,
|
|
300
304
|
default: DEFAULT_CHROMATIC_ABERRATION_ANGLE,
|
|
301
305
|
description: "Angle"
|
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
// src/color-key.ts
|
|
2
|
+
import { Internals } from "remotion";
|
|
3
|
+
|
|
4
|
+
// src/validate-effect-param.ts
|
|
5
|
+
var assertEffectParamsObject = (params, effectLabel) => {
|
|
6
|
+
if (params === null || typeof params !== "object") {
|
|
7
|
+
throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var assertRequiredFiniteNumber = (value, name) => {
|
|
11
|
+
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
12
|
+
throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
var assertRequiredColor = (value, name) => {
|
|
16
|
+
if (typeof value !== "string" || value.length === 0) {
|
|
17
|
+
throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var assertOptionalColor = (value, name) => {
|
|
21
|
+
if (value === undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
assertRequiredColor(value, name);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// src/color-utils.ts
|
|
28
|
+
var DEFAULT_AMOUNT = 1;
|
|
29
|
+
var DEFAULT_BRIGHTNESS_AMOUNT = 0;
|
|
30
|
+
var DEFAULT_HUE_DEGREES = 0;
|
|
31
|
+
var colorAmountSchema = {
|
|
32
|
+
type: "number",
|
|
33
|
+
min: 0,
|
|
34
|
+
max: 1,
|
|
35
|
+
step: 0.01,
|
|
36
|
+
default: DEFAULT_AMOUNT,
|
|
37
|
+
description: "Amount",
|
|
38
|
+
hiddenFromList: false
|
|
39
|
+
};
|
|
40
|
+
var colorMultiplierSchema = {
|
|
41
|
+
type: "number",
|
|
42
|
+
min: 0,
|
|
43
|
+
step: 0.01,
|
|
44
|
+
default: DEFAULT_AMOUNT,
|
|
45
|
+
description: "Amount",
|
|
46
|
+
hiddenFromList: false
|
|
47
|
+
};
|
|
48
|
+
var brightnessAmountSchema = {
|
|
49
|
+
type: "number",
|
|
50
|
+
min: -1,
|
|
51
|
+
max: 1,
|
|
52
|
+
step: 0.01,
|
|
53
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
54
|
+
description: "Amount",
|
|
55
|
+
hiddenFromList: false
|
|
56
|
+
};
|
|
57
|
+
var hueDegreesSchema = {
|
|
58
|
+
type: "rotation-degrees",
|
|
59
|
+
step: 1,
|
|
60
|
+
default: DEFAULT_HUE_DEGREES,
|
|
61
|
+
description: "Degrees"
|
|
62
|
+
};
|
|
63
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
64
|
+
if (value === undefined) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
assertRequiredFiniteNumber(value, name);
|
|
68
|
+
};
|
|
69
|
+
var validateUnitInterval = (value, name) => {
|
|
70
|
+
if (value < 0) {
|
|
71
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
72
|
+
}
|
|
73
|
+
if (value > 1) {
|
|
74
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
var validateNonNegative = (value, name) => {
|
|
78
|
+
if (value < 0) {
|
|
79
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
83
|
+
if (value < -1) {
|
|
84
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
85
|
+
}
|
|
86
|
+
if (value > 1) {
|
|
87
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
var clampColorChannel = (value) => {
|
|
91
|
+
return Math.max(0, Math.min(255, value));
|
|
92
|
+
};
|
|
93
|
+
var parseColorRgba = (ctx, color) => {
|
|
94
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
95
|
+
ctx.fillStyle = color;
|
|
96
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
97
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
98
|
+
return [data[0], data[1], data[2], data[3]];
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
// src/color-key.ts
|
|
102
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
103
|
+
var DEFAULT_KEY_COLOR = "#00ff00";
|
|
104
|
+
var DEFAULT_SIMILARITY = 0.18;
|
|
105
|
+
var DEFAULT_SMOOTHNESS = 0.08;
|
|
106
|
+
var DEFAULT_SPILL_SUPPRESSION = 0.25;
|
|
107
|
+
var colorKeySchema = {
|
|
108
|
+
keyColor: {
|
|
109
|
+
type: "color",
|
|
110
|
+
default: DEFAULT_KEY_COLOR,
|
|
111
|
+
description: "Key color"
|
|
112
|
+
},
|
|
113
|
+
similarity: {
|
|
114
|
+
type: "number",
|
|
115
|
+
min: 0,
|
|
116
|
+
max: 1,
|
|
117
|
+
step: 0.01,
|
|
118
|
+
default: DEFAULT_SIMILARITY,
|
|
119
|
+
description: "Similarity",
|
|
120
|
+
hiddenFromList: false
|
|
121
|
+
},
|
|
122
|
+
smoothness: {
|
|
123
|
+
type: "number",
|
|
124
|
+
min: 0,
|
|
125
|
+
max: 1,
|
|
126
|
+
step: 0.01,
|
|
127
|
+
default: DEFAULT_SMOOTHNESS,
|
|
128
|
+
description: "Smoothness",
|
|
129
|
+
hiddenFromList: false
|
|
130
|
+
},
|
|
131
|
+
spillSuppression: {
|
|
132
|
+
type: "number",
|
|
133
|
+
min: 0,
|
|
134
|
+
max: 1,
|
|
135
|
+
step: 0.01,
|
|
136
|
+
default: DEFAULT_SPILL_SUPPRESSION,
|
|
137
|
+
description: "Spill suppression",
|
|
138
|
+
hiddenFromList: false
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
var resolve = (p) => ({
|
|
142
|
+
keyColor: p.keyColor ?? DEFAULT_KEY_COLOR,
|
|
143
|
+
similarity: p.similarity ?? DEFAULT_SIMILARITY,
|
|
144
|
+
smoothness: p.smoothness ?? DEFAULT_SMOOTHNESS,
|
|
145
|
+
spillSuppression: p.spillSuppression ?? DEFAULT_SPILL_SUPPRESSION
|
|
146
|
+
});
|
|
147
|
+
var validateColorKeyParams = (params) => {
|
|
148
|
+
assertEffectParamsObject(params, "Color key");
|
|
149
|
+
assertOptionalColor(params.keyColor, "keyColor");
|
|
150
|
+
assertOptionalFiniteNumber(params.similarity, "similarity");
|
|
151
|
+
assertOptionalFiniteNumber(params.smoothness, "smoothness");
|
|
152
|
+
assertOptionalFiniteNumber(params.spillSuppression, "spillSuppression");
|
|
153
|
+
const r = resolve(params);
|
|
154
|
+
validateUnitInterval(r.similarity, "similarity");
|
|
155
|
+
validateUnitInterval(r.smoothness, "smoothness");
|
|
156
|
+
validateUnitInterval(r.spillSuppression, "spillSuppression");
|
|
157
|
+
};
|
|
158
|
+
var COLOR_KEY_VS = `#version 300 es
|
|
159
|
+
in vec2 aPos;
|
|
160
|
+
in vec2 aUv;
|
|
161
|
+
out vec2 vUv;
|
|
162
|
+
|
|
163
|
+
void main() {
|
|
164
|
+
vUv = aUv;
|
|
165
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
166
|
+
}
|
|
167
|
+
`;
|
|
168
|
+
var COLOR_KEY_FS = `#version 300 es
|
|
169
|
+
precision highp float;
|
|
170
|
+
|
|
171
|
+
in vec2 vUv;
|
|
172
|
+
out vec4 fragColor;
|
|
173
|
+
|
|
174
|
+
uniform sampler2D uSource;
|
|
175
|
+
uniform vec3 uKeyColor;
|
|
176
|
+
uniform float uSimilarity;
|
|
177
|
+
uniform float uSmoothness;
|
|
178
|
+
uniform float uSpillSuppression;
|
|
179
|
+
|
|
180
|
+
const float SQRT_3 = 1.7320508075688772;
|
|
181
|
+
|
|
182
|
+
vec3 suppressSpill(vec3 color, vec3 keyColor, float amount) {
|
|
183
|
+
if (keyColor.g > keyColor.r && keyColor.g > keyColor.b) {
|
|
184
|
+
float limit = (color.r + color.b) * 0.5;
|
|
185
|
+
color.g = mix(color.g, min(color.g, limit), amount);
|
|
186
|
+
} else if (keyColor.r > keyColor.g && keyColor.r > keyColor.b) {
|
|
187
|
+
float limit = (color.g + color.b) * 0.5;
|
|
188
|
+
color.r = mix(color.r, min(color.r, limit), amount);
|
|
189
|
+
} else if (keyColor.b > keyColor.r && keyColor.b > keyColor.g) {
|
|
190
|
+
float limit = (color.r + color.g) * 0.5;
|
|
191
|
+
color.b = mix(color.b, min(color.b, limit), amount);
|
|
192
|
+
}
|
|
193
|
+
return color;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
void main() {
|
|
197
|
+
vec4 texColor = texture(uSource, vUv);
|
|
198
|
+
float alpha = texColor.a;
|
|
199
|
+
|
|
200
|
+
if (alpha <= 0.001) {
|
|
201
|
+
fragColor = vec4(0.0);
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
vec3 rgb = texColor.rgb / alpha;
|
|
206
|
+
float distanceNormalized = distance(rgb, uKeyColor) / SQRT_3;
|
|
207
|
+
|
|
208
|
+
float keepMask;
|
|
209
|
+
if (uSmoothness <= 0.0001) {
|
|
210
|
+
keepMask = step(uSimilarity, distanceNormalized);
|
|
211
|
+
} else {
|
|
212
|
+
float edge0 = max(0.0, uSimilarity - uSmoothness);
|
|
213
|
+
float edge1 = min(1.0, uSimilarity + uSmoothness);
|
|
214
|
+
if (edge1 <= edge0 + 0.0001) {
|
|
215
|
+
keepMask = step(uSimilarity, distanceNormalized);
|
|
216
|
+
} else {
|
|
217
|
+
keepMask = smoothstep(edge0, edge1, distanceNormalized);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
vec3 cleanRgb = uSpillSuppression > 0.0
|
|
222
|
+
? suppressSpill(rgb, uKeyColor, uSpillSuppression)
|
|
223
|
+
: rgb;
|
|
224
|
+
|
|
225
|
+
float keyedAlpha = alpha * keepMask;
|
|
226
|
+
fragColor = vec4(cleanRgb * keyedAlpha, keyedAlpha);
|
|
227
|
+
}
|
|
228
|
+
`;
|
|
229
|
+
var compileShader = (gl, type, source) => {
|
|
230
|
+
const shader = gl.createShader(type);
|
|
231
|
+
if (!shader) {
|
|
232
|
+
throw new Error("Failed to create WebGL shader");
|
|
233
|
+
}
|
|
234
|
+
gl.shaderSource(shader, source);
|
|
235
|
+
gl.compileShader(shader);
|
|
236
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
237
|
+
const log = gl.getShaderInfoLog(shader);
|
|
238
|
+
gl.deleteShader(shader);
|
|
239
|
+
throw new Error(`Color key shader compile failed: ${log ?? "(no log)"}`);
|
|
240
|
+
}
|
|
241
|
+
return shader;
|
|
242
|
+
};
|
|
243
|
+
var linkProgram = (gl, vs, fs) => {
|
|
244
|
+
const program = gl.createProgram();
|
|
245
|
+
if (!program) {
|
|
246
|
+
throw new Error("Failed to create WebGL program");
|
|
247
|
+
}
|
|
248
|
+
gl.attachShader(program, vs);
|
|
249
|
+
gl.attachShader(program, fs);
|
|
250
|
+
gl.linkProgram(program);
|
|
251
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
252
|
+
const log = gl.getProgramInfoLog(program);
|
|
253
|
+
gl.deleteProgram(program);
|
|
254
|
+
throw new Error(`Color key program link failed: ${log ?? "(no log)"}`);
|
|
255
|
+
}
|
|
256
|
+
return program;
|
|
257
|
+
};
|
|
258
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
259
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
260
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
261
|
+
const program = linkProgram(gl, vs, fs);
|
|
262
|
+
gl.deleteShader(vs);
|
|
263
|
+
gl.deleteShader(fs);
|
|
264
|
+
return program;
|
|
265
|
+
};
|
|
266
|
+
var createRgbaTexture = (gl) => {
|
|
267
|
+
const texture = gl.createTexture();
|
|
268
|
+
if (!texture) {
|
|
269
|
+
throw new Error("Failed to create WebGL texture");
|
|
270
|
+
}
|
|
271
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
272
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
273
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
274
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
275
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
276
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
277
|
+
return texture;
|
|
278
|
+
};
|
|
279
|
+
var setupColorKey = (target) => {
|
|
280
|
+
const gl = target.getContext("webgl2", {
|
|
281
|
+
premultipliedAlpha: true,
|
|
282
|
+
alpha: true,
|
|
283
|
+
preserveDrawingBuffer: true
|
|
284
|
+
});
|
|
285
|
+
if (!gl) {
|
|
286
|
+
throw createWebGL2ContextError("color key effect");
|
|
287
|
+
}
|
|
288
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
289
|
+
const program = createProgram(gl, COLOR_KEY_VS, COLOR_KEY_FS);
|
|
290
|
+
const vao = gl.createVertexArray();
|
|
291
|
+
if (!vao) {
|
|
292
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
293
|
+
}
|
|
294
|
+
gl.bindVertexArray(vao);
|
|
295
|
+
const data = new Float32Array([
|
|
296
|
+
-1,
|
|
297
|
+
-1,
|
|
298
|
+
0,
|
|
299
|
+
0,
|
|
300
|
+
1,
|
|
301
|
+
-1,
|
|
302
|
+
1,
|
|
303
|
+
0,
|
|
304
|
+
-1,
|
|
305
|
+
1,
|
|
306
|
+
0,
|
|
307
|
+
1,
|
|
308
|
+
1,
|
|
309
|
+
1,
|
|
310
|
+
1,
|
|
311
|
+
1
|
|
312
|
+
]);
|
|
313
|
+
const vbo = gl.createBuffer();
|
|
314
|
+
if (!vbo) {
|
|
315
|
+
throw new Error("Failed to create WebGL buffer");
|
|
316
|
+
}
|
|
317
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
318
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
319
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
320
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
321
|
+
gl.enableVertexAttribArray(aPos);
|
|
322
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
323
|
+
gl.enableVertexAttribArray(aUv);
|
|
324
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
325
|
+
gl.bindVertexArray(null);
|
|
326
|
+
const textureSource = createRgbaTexture(gl);
|
|
327
|
+
const colorCanvas = document.createElement("canvas");
|
|
328
|
+
colorCanvas.width = 1;
|
|
329
|
+
colorCanvas.height = 1;
|
|
330
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
331
|
+
if (!colorCtx) {
|
|
332
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
333
|
+
}
|
|
334
|
+
return {
|
|
335
|
+
gl,
|
|
336
|
+
program,
|
|
337
|
+
vao,
|
|
338
|
+
vbo,
|
|
339
|
+
textureSource,
|
|
340
|
+
uniforms: {
|
|
341
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
342
|
+
uKeyColor: gl.getUniformLocation(program, "uKeyColor"),
|
|
343
|
+
uSimilarity: gl.getUniformLocation(program, "uSimilarity"),
|
|
344
|
+
uSmoothness: gl.getUniformLocation(program, "uSmoothness"),
|
|
345
|
+
uSpillSuppression: gl.getUniformLocation(program, "uSpillSuppression")
|
|
346
|
+
},
|
|
347
|
+
colorCtx,
|
|
348
|
+
cachedColor: "",
|
|
349
|
+
cachedColorRgba: [0, 255, 0, 255]
|
|
350
|
+
};
|
|
351
|
+
};
|
|
352
|
+
var parseKeyColor = (state, color) => {
|
|
353
|
+
if (state.cachedColor !== color) {
|
|
354
|
+
state.cachedColor = color;
|
|
355
|
+
state.cachedColorRgba = parseColorRgba(state.colorCtx, color);
|
|
356
|
+
}
|
|
357
|
+
const [r, g, b, a] = state.cachedColorRgba;
|
|
358
|
+
if (a <= 0) {
|
|
359
|
+
return [0, 0, 0];
|
|
360
|
+
}
|
|
361
|
+
const alpha = a / 255;
|
|
362
|
+
return [
|
|
363
|
+
Math.min(1, r / 255 / alpha),
|
|
364
|
+
Math.min(1, g / 255 / alpha),
|
|
365
|
+
Math.min(1, b / 255 / alpha)
|
|
366
|
+
];
|
|
367
|
+
};
|
|
368
|
+
var colorKey = createEffect({
|
|
369
|
+
type: "remotion/color-key",
|
|
370
|
+
label: "colorKey()",
|
|
371
|
+
documentationLink: "https://www.remotion.dev/docs/effects/color-key",
|
|
372
|
+
backend: "webgl2",
|
|
373
|
+
calculateKey: (params) => {
|
|
374
|
+
const r = resolve(params);
|
|
375
|
+
return `color-key-${r.keyColor}-${r.similarity}-${r.smoothness}-${r.spillSuppression}`;
|
|
376
|
+
},
|
|
377
|
+
setup: (target) => setupColorKey(target),
|
|
378
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
379
|
+
const r = resolve(params);
|
|
380
|
+
const keyColor = parseKeyColor(state, r.keyColor);
|
|
381
|
+
const { gl, program, textureSource, uniforms, vao } = state;
|
|
382
|
+
gl.viewport(0, 0, width, height);
|
|
383
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
384
|
+
gl.clearColor(0, 0, 0, 0);
|
|
385
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
386
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
387
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
388
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
389
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
390
|
+
gl.useProgram(program);
|
|
391
|
+
if (uniforms.uSource)
|
|
392
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
393
|
+
if (uniforms.uKeyColor)
|
|
394
|
+
gl.uniform3f(uniforms.uKeyColor, keyColor[0], keyColor[1], keyColor[2]);
|
|
395
|
+
if (uniforms.uSimilarity)
|
|
396
|
+
gl.uniform1f(uniforms.uSimilarity, r.similarity);
|
|
397
|
+
if (uniforms.uSmoothness)
|
|
398
|
+
gl.uniform1f(uniforms.uSmoothness, r.smoothness);
|
|
399
|
+
if (uniforms.uSpillSuppression)
|
|
400
|
+
gl.uniform1f(uniforms.uSpillSuppression, r.spillSuppression);
|
|
401
|
+
gl.bindVertexArray(vao);
|
|
402
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
403
|
+
gl.bindVertexArray(null);
|
|
404
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
405
|
+
gl.useProgram(null);
|
|
406
|
+
},
|
|
407
|
+
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
408
|
+
gl.deleteTexture(textureSource);
|
|
409
|
+
gl.deleteBuffer(vbo);
|
|
410
|
+
gl.deleteProgram(program);
|
|
411
|
+
gl.deleteVertexArray(vao);
|
|
412
|
+
},
|
|
413
|
+
schema: colorKeySchema,
|
|
414
|
+
validateParams: validateColorKeyParams
|
|
415
|
+
});
|
|
416
|
+
export {
|
|
417
|
+
colorKeySchema,
|
|
418
|
+
colorKey
|
|
419
|
+
};
|
package/dist/esm/contrast.mjs
CHANGED
|
@@ -34,14 +34,16 @@ var colorAmountSchema = {
|
|
|
34
34
|
max: 1,
|
|
35
35
|
step: 0.01,
|
|
36
36
|
default: DEFAULT_AMOUNT,
|
|
37
|
-
description: "Amount"
|
|
37
|
+
description: "Amount",
|
|
38
|
+
hiddenFromList: false
|
|
38
39
|
};
|
|
39
40
|
var colorMultiplierSchema = {
|
|
40
41
|
type: "number",
|
|
41
42
|
min: 0,
|
|
42
43
|
step: 0.01,
|
|
43
44
|
default: DEFAULT_AMOUNT,
|
|
44
|
-
description: "Amount"
|
|
45
|
+
description: "Amount",
|
|
46
|
+
hiddenFromList: false
|
|
45
47
|
};
|
|
46
48
|
var brightnessAmountSchema = {
|
|
47
49
|
type: "number",
|
|
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
|
|
|
49
51
|
max: 1,
|
|
50
52
|
step: 0.01,
|
|
51
53
|
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
-
description: "Amount"
|
|
54
|
+
description: "Amount",
|
|
55
|
+
hiddenFromList: false
|
|
53
56
|
};
|
|
54
57
|
var hueDegreesSchema = {
|
|
55
|
-
type: "
|
|
58
|
+
type: "rotation-degrees",
|
|
56
59
|
step: 1,
|
|
57
60
|
default: DEFAULT_HUE_DEGREES,
|
|
58
61
|
description: "Degrees"
|