@remotion/effects 4.0.469 → 4.0.471
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/esm/evolve.mjs +398 -0
- package/dist/esm/fisheye.mjs +430 -0
- package/dist/esm/index.mjs +893 -0
- package/dist/esm/lines.mjs +487 -0
- package/dist/esm/pixel-dissolve.mjs +369 -0
- package/dist/esm/rings.mjs +461 -0
- package/dist/esm/scanlines.mjs +381 -0
- package/dist/esm/waves.mjs +540 -0
- package/dist/esm/white-noise.mjs +279 -0
- package/dist/esm/zigzag.mjs +531 -0
- package/dist/evolve.d.ts +43 -0
- package/dist/fisheye/fisheye-runtime.d.ts +28 -0
- package/dist/fisheye/fisheye-shaders.d.ts +2 -0
- package/dist/fisheye/index.d.ts +26 -0
- package/dist/fisheye.d.ts +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/lines.d.ts +61 -0
- package/dist/pixel-dissolve.d.ts +10 -0
- package/dist/rings.d.ts +48 -0
- package/dist/scanlines.d.ts +15 -0
- package/dist/visual-test/effects-visual.test.d.ts +1 -0
- package/dist/visual-test/visual-utils.d.ts +13 -0
- package/dist/waves.d.ts +91 -0
- package/dist/white-noise.d.ts +9 -0
- package/dist/zigzag.d.ts +81 -0
- package/package.json +79 -3
|
@@ -0,0 +1,398 @@
|
|
|
1
|
+
// src/evolve.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
|
+
};
|
|
39
|
+
var colorMultiplierSchema = {
|
|
40
|
+
type: "number",
|
|
41
|
+
min: 0,
|
|
42
|
+
step: 0.01,
|
|
43
|
+
default: DEFAULT_AMOUNT,
|
|
44
|
+
description: "Amount"
|
|
45
|
+
};
|
|
46
|
+
var brightnessAmountSchema = {
|
|
47
|
+
type: "number",
|
|
48
|
+
min: -1,
|
|
49
|
+
max: 1,
|
|
50
|
+
step: 0.01,
|
|
51
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
+
description: "Amount"
|
|
53
|
+
};
|
|
54
|
+
var hueDegreesSchema = {
|
|
55
|
+
type: "number",
|
|
56
|
+
step: 1,
|
|
57
|
+
default: DEFAULT_HUE_DEGREES,
|
|
58
|
+
description: "Degrees"
|
|
59
|
+
};
|
|
60
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
61
|
+
if (value === undefined) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
assertRequiredFiniteNumber(value, name);
|
|
65
|
+
};
|
|
66
|
+
var validateUnitInterval = (value, name) => {
|
|
67
|
+
if (value < 0) {
|
|
68
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
69
|
+
}
|
|
70
|
+
if (value > 1) {
|
|
71
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
var validateNonNegative = (value, name) => {
|
|
75
|
+
if (value < 0) {
|
|
76
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
80
|
+
if (value < -1) {
|
|
81
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
82
|
+
}
|
|
83
|
+
if (value > 1) {
|
|
84
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var clampColorChannel = (value) => {
|
|
88
|
+
return Math.max(0, Math.min(255, value));
|
|
89
|
+
};
|
|
90
|
+
var parseColorRgba = (ctx, color) => {
|
|
91
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
92
|
+
ctx.fillStyle = color;
|
|
93
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
94
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
95
|
+
return [data[0], data[1], data[2], data[3]];
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// src/evolve.ts
|
|
99
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
100
|
+
var EVOLVE_DIRECTIONS = ["left", "right", "top", "bottom"];
|
|
101
|
+
var DEFAULT_PROGRESS = 0.5;
|
|
102
|
+
var DEFAULT_FEATHER = 0.1;
|
|
103
|
+
var DEFAULT_DIRECTION = "left";
|
|
104
|
+
var evolveSchema = {
|
|
105
|
+
progress: {
|
|
106
|
+
type: "number",
|
|
107
|
+
min: 0,
|
|
108
|
+
max: 1,
|
|
109
|
+
step: 0.01,
|
|
110
|
+
default: DEFAULT_PROGRESS,
|
|
111
|
+
description: "Progress"
|
|
112
|
+
},
|
|
113
|
+
direction: {
|
|
114
|
+
type: "enum",
|
|
115
|
+
variants: {
|
|
116
|
+
left: {},
|
|
117
|
+
right: {},
|
|
118
|
+
top: {},
|
|
119
|
+
bottom: {}
|
|
120
|
+
},
|
|
121
|
+
default: DEFAULT_DIRECTION,
|
|
122
|
+
description: "Direction"
|
|
123
|
+
},
|
|
124
|
+
feather: {
|
|
125
|
+
type: "number",
|
|
126
|
+
min: 0,
|
|
127
|
+
max: 1,
|
|
128
|
+
step: 0.01,
|
|
129
|
+
default: DEFAULT_FEATHER,
|
|
130
|
+
description: "Feather"
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
var formatEnum = (variants) => {
|
|
134
|
+
if (variants.length === 2) {
|
|
135
|
+
return `"${variants[0]}" or "${variants[1]}"`;
|
|
136
|
+
}
|
|
137
|
+
return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
|
|
138
|
+
};
|
|
139
|
+
var assertOptionalEnum = (value, name, variants) => {
|
|
140
|
+
if (value === undefined) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
if (!variants.includes(value)) {
|
|
144
|
+
throw new TypeError(`"${name}" must be ${formatEnum(variants)}, but got ${JSON.stringify(value)}`);
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
var resolve = (p) => ({
|
|
148
|
+
progress: p.progress ?? DEFAULT_PROGRESS,
|
|
149
|
+
direction: p.direction ?? DEFAULT_DIRECTION,
|
|
150
|
+
feather: p.feather ?? DEFAULT_FEATHER
|
|
151
|
+
});
|
|
152
|
+
var validateEvolveParams = (params) => {
|
|
153
|
+
assertEffectParamsObject(params, "Evolve");
|
|
154
|
+
assertOptionalFiniteNumber(params.progress, "progress");
|
|
155
|
+
assertOptionalFiniteNumber(params.feather, "feather");
|
|
156
|
+
assertOptionalEnum(params.direction, "direction", EVOLVE_DIRECTIONS);
|
|
157
|
+
const r = resolve(params);
|
|
158
|
+
validateUnitInterval(r.progress, "progress");
|
|
159
|
+
validateUnitInterval(r.feather, "feather");
|
|
160
|
+
};
|
|
161
|
+
var EVOLVE_VS = `#version 300 es
|
|
162
|
+
in vec2 aPos;
|
|
163
|
+
in vec2 aUv;
|
|
164
|
+
out vec2 vUv;
|
|
165
|
+
|
|
166
|
+
void main() {
|
|
167
|
+
vUv = aUv;
|
|
168
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
169
|
+
}
|
|
170
|
+
`;
|
|
171
|
+
var EVOLVE_FS = `#version 300 es
|
|
172
|
+
precision highp float;
|
|
173
|
+
|
|
174
|
+
in vec2 vUv;
|
|
175
|
+
out vec4 fragColor;
|
|
176
|
+
|
|
177
|
+
uniform sampler2D uSource;
|
|
178
|
+
uniform float uProgress;
|
|
179
|
+
uniform float uFeather;
|
|
180
|
+
uniform int uDirection;
|
|
181
|
+
|
|
182
|
+
float getT(vec2 uv) {
|
|
183
|
+
// 0: left, 1: right, 2: top, 3: bottom
|
|
184
|
+
if (uDirection == 0) {
|
|
185
|
+
return uv.x;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
if (uDirection == 1) {
|
|
189
|
+
return 1.0 - uv.x;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
if (uDirection == 2) {
|
|
193
|
+
// vUv.y is bottom-to-top; top reveal starts at y=1
|
|
194
|
+
return 1.0 - uv.y;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
return uv.y;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
float maskValue(float t, float progress, float feather) {
|
|
201
|
+
float p = clamp(progress, 0.0, 1.0);
|
|
202
|
+
float f = max(feather, 0.0);
|
|
203
|
+
|
|
204
|
+
if (p <= 0.000001) {
|
|
205
|
+
return 0.0;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
if (p >= 0.999999) {
|
|
209
|
+
return 1.0;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
if (f <= 0.0001) {
|
|
213
|
+
return step(t, p);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
return 1.0 - smoothstep(p, min(p + f, 1.0), t);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
void main() {
|
|
220
|
+
vec4 source = texture(uSource, vUv);
|
|
221
|
+
float t = getT(vUv);
|
|
222
|
+
float mask = maskValue(t, uProgress, uFeather);
|
|
223
|
+
fragColor = vec4(source.rgb * mask, source.a * mask);
|
|
224
|
+
}
|
|
225
|
+
`;
|
|
226
|
+
var compileShader = (gl, type, source) => {
|
|
227
|
+
const shader = gl.createShader(type);
|
|
228
|
+
if (!shader) {
|
|
229
|
+
throw new Error("Failed to create WebGL shader");
|
|
230
|
+
}
|
|
231
|
+
gl.shaderSource(shader, source);
|
|
232
|
+
gl.compileShader(shader);
|
|
233
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
234
|
+
const log = gl.getShaderInfoLog(shader);
|
|
235
|
+
gl.deleteShader(shader);
|
|
236
|
+
throw new Error(`Evolve shader compile failed: ${log ?? "(no log)"}`);
|
|
237
|
+
}
|
|
238
|
+
return shader;
|
|
239
|
+
};
|
|
240
|
+
var linkProgram = (gl, vs, fs) => {
|
|
241
|
+
const program = gl.createProgram();
|
|
242
|
+
if (!program) {
|
|
243
|
+
throw new Error("Failed to create WebGL program");
|
|
244
|
+
}
|
|
245
|
+
gl.attachShader(program, vs);
|
|
246
|
+
gl.attachShader(program, fs);
|
|
247
|
+
gl.linkProgram(program);
|
|
248
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
249
|
+
const log = gl.getProgramInfoLog(program);
|
|
250
|
+
gl.deleteProgram(program);
|
|
251
|
+
throw new Error(`Evolve program link failed: ${log ?? "(no log)"}`);
|
|
252
|
+
}
|
|
253
|
+
return program;
|
|
254
|
+
};
|
|
255
|
+
var createRgbaTexture = (gl) => {
|
|
256
|
+
const texture = gl.createTexture();
|
|
257
|
+
if (!texture) {
|
|
258
|
+
throw new Error("Failed to create WebGL texture");
|
|
259
|
+
}
|
|
260
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
261
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
262
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
263
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
264
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
265
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
266
|
+
return texture;
|
|
267
|
+
};
|
|
268
|
+
var setupEvolve = (target) => {
|
|
269
|
+
const gl = target.getContext("webgl2", {
|
|
270
|
+
premultipliedAlpha: true,
|
|
271
|
+
alpha: true,
|
|
272
|
+
preserveDrawingBuffer: true
|
|
273
|
+
});
|
|
274
|
+
if (!gl) {
|
|
275
|
+
throw createWebGL2ContextError("evolve effect");
|
|
276
|
+
}
|
|
277
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
278
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, EVOLVE_VS);
|
|
279
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, EVOLVE_FS);
|
|
280
|
+
const program = linkProgram(gl, vs, fs);
|
|
281
|
+
gl.deleteShader(vs);
|
|
282
|
+
gl.deleteShader(fs);
|
|
283
|
+
const vao = gl.createVertexArray();
|
|
284
|
+
if (!vao) {
|
|
285
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
286
|
+
}
|
|
287
|
+
gl.bindVertexArray(vao);
|
|
288
|
+
const data = new Float32Array([
|
|
289
|
+
-1,
|
|
290
|
+
-1,
|
|
291
|
+
0,
|
|
292
|
+
0,
|
|
293
|
+
1,
|
|
294
|
+
-1,
|
|
295
|
+
1,
|
|
296
|
+
0,
|
|
297
|
+
-1,
|
|
298
|
+
1,
|
|
299
|
+
0,
|
|
300
|
+
1,
|
|
301
|
+
1,
|
|
302
|
+
1,
|
|
303
|
+
1,
|
|
304
|
+
1
|
|
305
|
+
]);
|
|
306
|
+
const vbo = gl.createBuffer();
|
|
307
|
+
if (!vbo) {
|
|
308
|
+
throw new Error("Failed to create WebGL buffer");
|
|
309
|
+
}
|
|
310
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
311
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
312
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
313
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
314
|
+
gl.enableVertexAttribArray(aPos);
|
|
315
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
316
|
+
gl.enableVertexAttribArray(aUv);
|
|
317
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
318
|
+
gl.bindVertexArray(null);
|
|
319
|
+
const textureSource = createRgbaTexture(gl);
|
|
320
|
+
return {
|
|
321
|
+
gl,
|
|
322
|
+
program,
|
|
323
|
+
vao,
|
|
324
|
+
vbo,
|
|
325
|
+
textureSource,
|
|
326
|
+
uniforms: {
|
|
327
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
328
|
+
uProgress: gl.getUniformLocation(program, "uProgress"),
|
|
329
|
+
uDirection: gl.getUniformLocation(program, "uDirection"),
|
|
330
|
+
uFeather: gl.getUniformLocation(program, "uFeather")
|
|
331
|
+
}
|
|
332
|
+
};
|
|
333
|
+
};
|
|
334
|
+
var directionToInt = (direction) => {
|
|
335
|
+
switch (direction) {
|
|
336
|
+
case "left":
|
|
337
|
+
return 0;
|
|
338
|
+
case "right":
|
|
339
|
+
return 1;
|
|
340
|
+
case "top":
|
|
341
|
+
return 2;
|
|
342
|
+
case "bottom":
|
|
343
|
+
return 3;
|
|
344
|
+
default: {
|
|
345
|
+
const exhaustiveCheck = direction;
|
|
346
|
+
return exhaustiveCheck;
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
};
|
|
350
|
+
var evolve = createEffect({
|
|
351
|
+
type: "remotion/evolve",
|
|
352
|
+
label: "evolve()",
|
|
353
|
+
documentationLink: "https://www.remotion.dev/docs/effects/evolve",
|
|
354
|
+
backend: "webgl2",
|
|
355
|
+
calculateKey: (params) => {
|
|
356
|
+
const r = resolve(params);
|
|
357
|
+
return `evolve-${r.progress}-${r.direction}-${r.feather}`;
|
|
358
|
+
},
|
|
359
|
+
setup: (target) => setupEvolve(target),
|
|
360
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
361
|
+
const r = resolve(params);
|
|
362
|
+
const { gl, program, textureSource, uniforms, vao } = state;
|
|
363
|
+
gl.viewport(0, 0, width, height);
|
|
364
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
365
|
+
gl.clearColor(0, 0, 0, 0);
|
|
366
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
367
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
368
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
369
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
370
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
371
|
+
gl.useProgram(program);
|
|
372
|
+
if (uniforms.uSource)
|
|
373
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
374
|
+
if (uniforms.uProgress)
|
|
375
|
+
gl.uniform1f(uniforms.uProgress, r.progress);
|
|
376
|
+
if (uniforms.uFeather)
|
|
377
|
+
gl.uniform1f(uniforms.uFeather, r.feather);
|
|
378
|
+
if (uniforms.uDirection)
|
|
379
|
+
gl.uniform1i(uniforms.uDirection, directionToInt(r.direction));
|
|
380
|
+
gl.bindVertexArray(vao);
|
|
381
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
382
|
+
gl.bindVertexArray(null);
|
|
383
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
384
|
+
gl.useProgram(null);
|
|
385
|
+
},
|
|
386
|
+
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
387
|
+
gl.deleteTexture(textureSource);
|
|
388
|
+
gl.deleteBuffer(vbo);
|
|
389
|
+
gl.deleteProgram(program);
|
|
390
|
+
gl.deleteVertexArray(vao);
|
|
391
|
+
},
|
|
392
|
+
schema: evolveSchema,
|
|
393
|
+
validateParams: validateEvolveParams
|
|
394
|
+
});
|
|
395
|
+
export {
|
|
396
|
+
evolveSchema,
|
|
397
|
+
evolve
|
|
398
|
+
};
|