@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.
Files changed (56) hide show
  1. package/dist/color-key.d.ts +47 -0
  2. package/dist/color-utils.d.ts +4 -1
  3. package/dist/dot-grid.d.ts +2 -0
  4. package/dist/duotone.d.ts +1 -0
  5. package/dist/esm/barrel-distortion.mjs +9 -5
  6. package/dist/esm/blur.mjs +2 -1
  7. package/dist/esm/brightness.mjs +7 -4
  8. package/dist/esm/chromatic-aberration.mjs +10 -6
  9. package/dist/esm/color-key.mjs +419 -0
  10. package/dist/esm/contrast.mjs +7 -4
  11. package/dist/esm/dot-grid.mjs +11 -6
  12. package/dist/esm/drop-shadow.mjs +15 -8
  13. package/dist/esm/duotone.mjs +9 -5
  14. package/dist/esm/evolve.mjs +11 -6
  15. package/dist/esm/fisheye.mjs +13 -7
  16. package/dist/esm/glow.mjs +14 -8
  17. package/dist/esm/grayscale.mjs +7 -4
  18. package/dist/esm/halftone-linear-gradient.mjs +15 -8
  19. package/dist/esm/halftone.mjs +16 -11
  20. package/dist/esm/hue.mjs +7 -4
  21. package/dist/esm/index.mjs +24 -15
  22. package/dist/esm/invert.mjs +7 -4
  23. package/dist/esm/linear-progressive-blur.mjs +531 -0
  24. package/dist/esm/lines.mjs +14 -10
  25. package/dist/esm/mirror.mjs +9 -5
  26. package/dist/esm/noise.mjs +11 -6
  27. package/dist/esm/pixel-dissolve.mjs +17 -9
  28. package/dist/esm/rings.mjs +13 -7
  29. package/dist/esm/saturation.mjs +7 -4
  30. package/dist/esm/scale.mjs +2 -1
  31. package/dist/esm/scanlines.mjs +15 -8
  32. package/dist/esm/shine.mjs +18 -12
  33. package/dist/esm/speckle.mjs +13 -7
  34. package/dist/esm/tint.mjs +9 -5
  35. package/dist/esm/translate.mjs +15 -8
  36. package/dist/esm/vignette.mjs +40 -12
  37. package/dist/esm/wave.mjs +6 -3
  38. package/dist/esm/waves.mjs +20 -13
  39. package/dist/esm/white-noise.mjs +11 -6
  40. package/dist/esm/zigzag.mjs +18 -12
  41. package/dist/evolve.d.ts +2 -0
  42. package/dist/halftone-linear-gradient.d.ts +4 -0
  43. package/dist/halftone.d.ts +5 -3
  44. package/dist/linear-progressive-blur/index.d.ts +28 -0
  45. package/dist/linear-progressive-blur/linear-progressive-blur-runtime.d.ts +32 -0
  46. package/dist/linear-progressive-blur/linear-progressive-blur-shaders.d.ts +2 -0
  47. package/dist/linear-progressive-blur.d.ts +1 -0
  48. package/dist/lines.d.ts +4 -3
  49. package/dist/rings.d.ts +3 -0
  50. package/dist/tint.d.ts +1 -0
  51. package/dist/vignette.d.ts +13 -0
  52. package/dist/waves.d.ts +7 -3
  53. package/dist/zigzag.d.ts +6 -3
  54. package/package.json +19 -3
  55. package/dist/effect-internals.d.ts +0 -8
  56. 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>;
@@ -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: "number";
31
+ readonly type: "rotation-degrees";
29
32
  readonly step: 1;
30
33
  readonly default: 0;
31
34
  readonly description: "Degrees";
@@ -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
@@ -16,6 +16,7 @@ export declare const duotoneSchema: {
16
16
  readonly step: 0.01;
17
17
  readonly default: 0.5;
18
18
  readonly description: "Luminance threshold";
19
+ readonly hiddenFromList: false;
19
20
  };
20
21
  };
21
22
  export type DuotoneParams = {
@@ -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: "number",
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
@@ -391,7 +391,8 @@ var blurSchema = {
391
391
  max: 100,
392
392
  step: 1,
393
393
  default: undefined,
394
- description: "Radius"
394
+ description: "Radius",
395
+ hiddenFromList: false
395
396
  },
396
397
  horizontal: {
397
398
  type: "boolean",
@@ -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: "number",
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: "number",
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: "number",
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
+ };
@@ -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: "number",
58
+ type: "rotation-degrees",
56
59
  step: 1,
57
60
  default: DEFAULT_HUE_DEGREES,
58
61
  description: "Degrees"