@remotion/effects 4.0.468 → 4.0.470
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/dot-grid.d.ts +31 -0
- package/dist/drop-shadow/drop-shadow-runtime.d.ts +54 -0
- package/dist/drop-shadow/drop-shadow-shaders.d.ts +5 -0
- package/dist/drop-shadow/index.d.ts +15 -0
- package/dist/drop-shadow.d.ts +1 -0
- package/dist/esm/blur.mjs +31 -16
- package/dist/esm/dot-grid.mjs +349 -0
- package/dist/esm/drop-shadow.mjs +610 -0
- package/dist/esm/evolve.mjs +398 -0
- package/dist/esm/fisheye.mjs +430 -0
- package/dist/esm/glow.mjs +56 -42
- package/dist/esm/halftone-linear-gradient.mjs +480 -0
- package/dist/esm/lines.mjs +487 -0
- package/dist/esm/noise.mjs +341 -0
- package/dist/esm/scanlines.mjs +381 -0
- package/dist/esm/speckle.mjs +360 -0
- package/dist/esm/white-noise.mjs +279 -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/gaussian-blur-shader.d.ts +1 -0
- package/dist/halftone-linear-gradient.d.ts +93 -0
- package/dist/lines.d.ts +61 -0
- package/dist/noise.d.ts +11 -0
- package/dist/scanlines.d.ts +15 -0
- package/dist/speckle.d.ts +11 -0
- package/dist/visual-test/effects-visual.test.d.ts +1 -0
- package/dist/visual-test/visual-utils.d.ts +13 -0
- package/dist/white-noise.d.ts +9 -0
- package/package.json +87 -3
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
// src/speckle.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/speckle.ts
|
|
99
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
100
|
+
var DEFAULT_DENSITY = 0.08;
|
|
101
|
+
var DEFAULT_SIZE = 4;
|
|
102
|
+
var DEFAULT_RANDOMNESS = 1;
|
|
103
|
+
var speckleSchema = {
|
|
104
|
+
density: {
|
|
105
|
+
type: "number",
|
|
106
|
+
min: 0,
|
|
107
|
+
max: 1,
|
|
108
|
+
step: 0.01,
|
|
109
|
+
default: DEFAULT_DENSITY,
|
|
110
|
+
description: "Density"
|
|
111
|
+
},
|
|
112
|
+
size: {
|
|
113
|
+
type: "number",
|
|
114
|
+
min: 0,
|
|
115
|
+
max: 50,
|
|
116
|
+
step: 0.1,
|
|
117
|
+
default: DEFAULT_SIZE,
|
|
118
|
+
description: "Size"
|
|
119
|
+
},
|
|
120
|
+
randomness: {
|
|
121
|
+
type: "number",
|
|
122
|
+
min: 0,
|
|
123
|
+
max: 1,
|
|
124
|
+
step: 0.01,
|
|
125
|
+
default: DEFAULT_RANDOMNESS,
|
|
126
|
+
description: "Randomness"
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
var resolve = (p) => ({
|
|
130
|
+
density: p.density ?? DEFAULT_DENSITY,
|
|
131
|
+
size: p.size ?? DEFAULT_SIZE,
|
|
132
|
+
randomness: p.randomness ?? DEFAULT_RANDOMNESS
|
|
133
|
+
});
|
|
134
|
+
var validateSpeckleParams = (params) => {
|
|
135
|
+
assertEffectParamsObject(params, "Speckle");
|
|
136
|
+
assertOptionalFiniteNumber(params.density, "density");
|
|
137
|
+
assertOptionalFiniteNumber(params.size, "size");
|
|
138
|
+
assertOptionalFiniteNumber(params.randomness, "randomness");
|
|
139
|
+
const r = resolve(params);
|
|
140
|
+
validateUnitInterval(r.density, "density");
|
|
141
|
+
validateNonNegative(r.size, "size");
|
|
142
|
+
validateUnitInterval(r.randomness, "randomness");
|
|
143
|
+
};
|
|
144
|
+
var SPECKLE_VS = `#version 300 es
|
|
145
|
+
in vec2 aPos;
|
|
146
|
+
in vec2 aUv;
|
|
147
|
+
out vec2 vUv;
|
|
148
|
+
|
|
149
|
+
void main() {
|
|
150
|
+
vUv = aUv;
|
|
151
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
152
|
+
}
|
|
153
|
+
`;
|
|
154
|
+
var SPECKLE_FS = `#version 300 es
|
|
155
|
+
precision highp float;
|
|
156
|
+
|
|
157
|
+
in vec2 vUv;
|
|
158
|
+
out vec4 fragColor;
|
|
159
|
+
|
|
160
|
+
uniform sampler2D uSource;
|
|
161
|
+
uniform vec2 uResolution;
|
|
162
|
+
uniform float uDensity;
|
|
163
|
+
uniform float uSize;
|
|
164
|
+
uniform float uRandomness;
|
|
165
|
+
|
|
166
|
+
float hash21(vec2 p) {
|
|
167
|
+
vec3 p3 = fract(vec3(p.xyx) * vec3(443.8975, 397.2973, 491.1871));
|
|
168
|
+
p3 += dot(p3, p3.yzx + 19.19);
|
|
169
|
+
return fract((p3.x + p3.y) * p3.z);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
vec2 hash22(vec2 p) {
|
|
173
|
+
return vec2(hash21(p + 17.13), hash21(p + 83.71));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
void main() {
|
|
177
|
+
vec4 color = texture(uSource, vUv);
|
|
178
|
+
|
|
179
|
+
if (uDensity <= 0.0 || uSize <= 0.0) {
|
|
180
|
+
fragColor = color;
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
vec2 fragPos = vUv * uResolution;
|
|
185
|
+
float cellSize = max(uSize * 2.5, 1.0);
|
|
186
|
+
vec2 baseCell = floor(fragPos / cellSize);
|
|
187
|
+
float hole = 0.0;
|
|
188
|
+
|
|
189
|
+
for (int y = -1; y <= 1; y++) {
|
|
190
|
+
for (int x = -1; x <= 1; x++) {
|
|
191
|
+
vec2 cell = baseCell + vec2(float(x), float(y));
|
|
192
|
+
float chance = hash21(cell);
|
|
193
|
+
|
|
194
|
+
if (chance <= uDensity) {
|
|
195
|
+
vec2 randomOffset = (hash22(cell + 11.7) - 0.5) * uRandomness;
|
|
196
|
+
vec2 center = (cell + 0.5 + randomOffset) * cellSize;
|
|
197
|
+
float sizeVariation = mix(1.0, 0.35 + hash21(cell + 29.43) * 0.65, uRandomness);
|
|
198
|
+
float radius = uSize * 0.5 * sizeVariation;
|
|
199
|
+
float edge = min(1.0, max(radius * 0.5, 0.35));
|
|
200
|
+
float coverage = 1.0 - smoothstep(radius - edge, radius + edge, length(fragPos - center));
|
|
201
|
+
hole = max(hole, coverage);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
fragColor = color * (1.0 - clamp(hole, 0.0, 1.0));
|
|
207
|
+
}
|
|
208
|
+
`;
|
|
209
|
+
var compileShader = (gl, type, source) => {
|
|
210
|
+
const shader = gl.createShader(type);
|
|
211
|
+
if (!shader) {
|
|
212
|
+
throw new Error("Failed to create WebGL shader");
|
|
213
|
+
}
|
|
214
|
+
gl.shaderSource(shader, source);
|
|
215
|
+
gl.compileShader(shader);
|
|
216
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
217
|
+
const log = gl.getShaderInfoLog(shader);
|
|
218
|
+
gl.deleteShader(shader);
|
|
219
|
+
throw new Error(`Speckle shader compile failed: ${log ?? "(no log)"}`);
|
|
220
|
+
}
|
|
221
|
+
return shader;
|
|
222
|
+
};
|
|
223
|
+
var linkProgram = (gl, vs, fs) => {
|
|
224
|
+
const program = gl.createProgram();
|
|
225
|
+
if (!program) {
|
|
226
|
+
throw new Error("Failed to create WebGL program");
|
|
227
|
+
}
|
|
228
|
+
gl.attachShader(program, vs);
|
|
229
|
+
gl.attachShader(program, fs);
|
|
230
|
+
gl.linkProgram(program);
|
|
231
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
232
|
+
const log = gl.getProgramInfoLog(program);
|
|
233
|
+
gl.deleteProgram(program);
|
|
234
|
+
throw new Error(`Speckle program link failed: ${log ?? "(no log)"}`);
|
|
235
|
+
}
|
|
236
|
+
return program;
|
|
237
|
+
};
|
|
238
|
+
var speckle = createEffect({
|
|
239
|
+
type: "remotion/speckle",
|
|
240
|
+
label: "speckle()",
|
|
241
|
+
documentationLink: "https://www.remotion.dev/docs/effects/speckle",
|
|
242
|
+
backend: "webgl2",
|
|
243
|
+
calculateKey: (params) => {
|
|
244
|
+
const r = resolve(params);
|
|
245
|
+
return `speckle-${r.density}-${r.size}-${r.randomness}`;
|
|
246
|
+
},
|
|
247
|
+
setup: (target) => {
|
|
248
|
+
const gl = target.getContext("webgl2", {
|
|
249
|
+
premultipliedAlpha: true,
|
|
250
|
+
alpha: true,
|
|
251
|
+
preserveDrawingBuffer: true
|
|
252
|
+
});
|
|
253
|
+
if (!gl) {
|
|
254
|
+
throw createWebGL2ContextError("speckle effect");
|
|
255
|
+
}
|
|
256
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
257
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, SPECKLE_VS);
|
|
258
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, SPECKLE_FS);
|
|
259
|
+
const program = linkProgram(gl, vs, fs);
|
|
260
|
+
gl.deleteShader(vs);
|
|
261
|
+
gl.deleteShader(fs);
|
|
262
|
+
const vao = gl.createVertexArray();
|
|
263
|
+
if (!vao) {
|
|
264
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
265
|
+
}
|
|
266
|
+
gl.bindVertexArray(vao);
|
|
267
|
+
const data = new Float32Array([
|
|
268
|
+
-1,
|
|
269
|
+
-1,
|
|
270
|
+
0,
|
|
271
|
+
0,
|
|
272
|
+
1,
|
|
273
|
+
-1,
|
|
274
|
+
1,
|
|
275
|
+
0,
|
|
276
|
+
-1,
|
|
277
|
+
1,
|
|
278
|
+
0,
|
|
279
|
+
1,
|
|
280
|
+
1,
|
|
281
|
+
1,
|
|
282
|
+
1,
|
|
283
|
+
1
|
|
284
|
+
]);
|
|
285
|
+
const vbo = gl.createBuffer();
|
|
286
|
+
if (!vbo) {
|
|
287
|
+
throw new Error("Failed to create WebGL buffer");
|
|
288
|
+
}
|
|
289
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
290
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
291
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
292
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
293
|
+
gl.enableVertexAttribArray(aPos);
|
|
294
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
295
|
+
gl.enableVertexAttribArray(aUv);
|
|
296
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
297
|
+
gl.bindVertexArray(null);
|
|
298
|
+
const texture = gl.createTexture();
|
|
299
|
+
if (!texture) {
|
|
300
|
+
throw new Error("Failed to create WebGL texture");
|
|
301
|
+
}
|
|
302
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
303
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
304
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
305
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
306
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
307
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
308
|
+
return {
|
|
309
|
+
gl,
|
|
310
|
+
program,
|
|
311
|
+
vao,
|
|
312
|
+
vbo,
|
|
313
|
+
texture,
|
|
314
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
315
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
316
|
+
uDensity: gl.getUniformLocation(program, "uDensity"),
|
|
317
|
+
uSize: gl.getUniformLocation(program, "uSize"),
|
|
318
|
+
uRandomness: gl.getUniformLocation(program, "uRandomness")
|
|
319
|
+
};
|
|
320
|
+
},
|
|
321
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
322
|
+
const r = resolve(params);
|
|
323
|
+
const { gl, program, vao, texture } = state;
|
|
324
|
+
gl.viewport(0, 0, width, height);
|
|
325
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
326
|
+
gl.clearColor(0, 0, 0, 0);
|
|
327
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
328
|
+
gl.useProgram(program);
|
|
329
|
+
gl.bindVertexArray(vao);
|
|
330
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
331
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
332
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
333
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
334
|
+
if (state.uSource)
|
|
335
|
+
gl.uniform1i(state.uSource, 0);
|
|
336
|
+
if (state.uResolution)
|
|
337
|
+
gl.uniform2f(state.uResolution, width, height);
|
|
338
|
+
if (state.uDensity)
|
|
339
|
+
gl.uniform1f(state.uDensity, r.density);
|
|
340
|
+
if (state.uSize)
|
|
341
|
+
gl.uniform1f(state.uSize, r.size);
|
|
342
|
+
if (state.uRandomness)
|
|
343
|
+
gl.uniform1f(state.uRandomness, r.randomness);
|
|
344
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
345
|
+
gl.bindVertexArray(null);
|
|
346
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
347
|
+
gl.useProgram(null);
|
|
348
|
+
},
|
|
349
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
350
|
+
gl.deleteBuffer(vbo);
|
|
351
|
+
gl.deleteProgram(program);
|
|
352
|
+
gl.deleteVertexArray(vao);
|
|
353
|
+
gl.deleteTexture(texture);
|
|
354
|
+
},
|
|
355
|
+
schema: speckleSchema,
|
|
356
|
+
validateParams: validateSpeckleParams
|
|
357
|
+
});
|
|
358
|
+
export {
|
|
359
|
+
speckle
|
|
360
|
+
};
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
// src/white-noise.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/white-noise.ts
|
|
99
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
100
|
+
var DEFAULT_AMOUNT2 = 1;
|
|
101
|
+
var DEFAULT_SEED = 0;
|
|
102
|
+
var whiteNoiseSchema = {
|
|
103
|
+
amount: {
|
|
104
|
+
type: "number",
|
|
105
|
+
min: 0,
|
|
106
|
+
max: 1,
|
|
107
|
+
step: 0.01,
|
|
108
|
+
default: DEFAULT_AMOUNT2,
|
|
109
|
+
description: "Amount"
|
|
110
|
+
},
|
|
111
|
+
seed: {
|
|
112
|
+
type: "number",
|
|
113
|
+
step: 1,
|
|
114
|
+
default: DEFAULT_SEED,
|
|
115
|
+
description: "Seed"
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
var resolve = (params) => ({
|
|
119
|
+
amount: params.amount ?? DEFAULT_AMOUNT2,
|
|
120
|
+
seed: params.seed ?? DEFAULT_SEED
|
|
121
|
+
});
|
|
122
|
+
var validateWhiteNoiseParams = (params) => {
|
|
123
|
+
assertEffectParamsObject(params, "White noise");
|
|
124
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
125
|
+
assertOptionalFiniteNumber(params.seed, "seed");
|
|
126
|
+
validateUnitInterval(params.amount ?? DEFAULT_AMOUNT2, "amount");
|
|
127
|
+
};
|
|
128
|
+
var VERTEX_SHADER = `#version 300 es
|
|
129
|
+
in vec2 aPos;
|
|
130
|
+
in vec2 aUv;
|
|
131
|
+
out vec2 vUv;
|
|
132
|
+
|
|
133
|
+
void main() {
|
|
134
|
+
vUv = aUv;
|
|
135
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
136
|
+
}
|
|
137
|
+
`;
|
|
138
|
+
var FRAGMENT_SHADER = `#version 300 es
|
|
139
|
+
precision highp float;
|
|
140
|
+
|
|
141
|
+
in vec2 vUv;
|
|
142
|
+
out vec4 fragColor;
|
|
143
|
+
|
|
144
|
+
uniform sampler2D uSource;
|
|
145
|
+
uniform float uAmount;
|
|
146
|
+
uniform float uSeed;
|
|
147
|
+
|
|
148
|
+
float random(vec2 co) {
|
|
149
|
+
return fract(sin(dot(co, vec2(12.9898, 78.233)) + uSeed * 37.719) * 43758.5453);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
void main() {
|
|
153
|
+
vec4 color = texture(uSource, vUv);
|
|
154
|
+
float noise = random(gl_FragCoord.xy);
|
|
155
|
+
vec3 unpremultiplied = color.a == 0.0 ? vec3(0.0) : color.rgb / color.a;
|
|
156
|
+
vec3 mixed = mix(unpremultiplied, vec3(noise), uAmount);
|
|
157
|
+
fragColor = vec4(mixed * color.a, color.a);
|
|
158
|
+
}
|
|
159
|
+
`;
|
|
160
|
+
var compileShader = (gl, type, source) => {
|
|
161
|
+
const shader = gl.createShader(type);
|
|
162
|
+
if (!shader) {
|
|
163
|
+
throw new Error("Failed to create shader");
|
|
164
|
+
}
|
|
165
|
+
gl.shaderSource(shader, source);
|
|
166
|
+
gl.compileShader(shader);
|
|
167
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
168
|
+
const info = gl.getShaderInfoLog(shader) ?? "Unknown shader compile error";
|
|
169
|
+
gl.deleteShader(shader);
|
|
170
|
+
throw new Error(info);
|
|
171
|
+
}
|
|
172
|
+
return shader;
|
|
173
|
+
};
|
|
174
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
175
|
+
const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
176
|
+
const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
177
|
+
const program = gl.createProgram();
|
|
178
|
+
if (!program) {
|
|
179
|
+
throw new Error("Failed to create program");
|
|
180
|
+
}
|
|
181
|
+
gl.attachShader(program, vertex);
|
|
182
|
+
gl.attachShader(program, fragment);
|
|
183
|
+
gl.linkProgram(program);
|
|
184
|
+
gl.deleteShader(vertex);
|
|
185
|
+
gl.deleteShader(fragment);
|
|
186
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
187
|
+
const info = gl.getProgramInfoLog(program) ?? "Unknown program link error";
|
|
188
|
+
gl.deleteProgram(program);
|
|
189
|
+
throw new Error(info);
|
|
190
|
+
}
|
|
191
|
+
return program;
|
|
192
|
+
};
|
|
193
|
+
var createWhiteNoiseState = (gl, vertexSource, fragmentSource) => {
|
|
194
|
+
const program = createProgram(gl, vertexSource, fragmentSource);
|
|
195
|
+
const vao = gl.createVertexArray();
|
|
196
|
+
const vbo = gl.createBuffer();
|
|
197
|
+
const texture = gl.createTexture();
|
|
198
|
+
if (!vao || !vbo || !texture) {
|
|
199
|
+
throw new Error("Failed to create WebGL resources");
|
|
200
|
+
}
|
|
201
|
+
gl.bindVertexArray(vao);
|
|
202
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
203
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
|
|
204
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
205
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
206
|
+
gl.enableVertexAttribArray(aPos);
|
|
207
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
208
|
+
gl.enableVertexAttribArray(aUv);
|
|
209
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
210
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
211
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
212
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
213
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
214
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
215
|
+
return {
|
|
216
|
+
gl,
|
|
217
|
+
program,
|
|
218
|
+
vao,
|
|
219
|
+
vbo,
|
|
220
|
+
texture,
|
|
221
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
222
|
+
uAmount: gl.getUniformLocation(program, "uAmount"),
|
|
223
|
+
uSeed: gl.getUniformLocation(program, "uSeed")
|
|
224
|
+
};
|
|
225
|
+
};
|
|
226
|
+
var whiteNoise = createEffect({
|
|
227
|
+
type: "remotion/white-noise",
|
|
228
|
+
label: "whiteNoise()",
|
|
229
|
+
documentationLink: "https://www.remotion.dev/docs/effects/white-noise",
|
|
230
|
+
backend: "webgl2",
|
|
231
|
+
calculateKey: (params) => {
|
|
232
|
+
const resolved = resolve(params);
|
|
233
|
+
return `white-noise-${resolved.amount}-${resolved.seed}`;
|
|
234
|
+
},
|
|
235
|
+
setup: (target) => {
|
|
236
|
+
const gl = target.getContext("webgl2", {
|
|
237
|
+
premultipliedAlpha: true,
|
|
238
|
+
alpha: true,
|
|
239
|
+
preserveDrawingBuffer: true
|
|
240
|
+
});
|
|
241
|
+
if (!gl) {
|
|
242
|
+
throw createWebGL2ContextError("white noise effect");
|
|
243
|
+
}
|
|
244
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
245
|
+
return createWhiteNoiseState(gl, VERTEX_SHADER, FRAGMENT_SHADER);
|
|
246
|
+
},
|
|
247
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
248
|
+
const resolved = resolve(params);
|
|
249
|
+
state.gl.viewport(0, 0, width, height);
|
|
250
|
+
state.gl.bindFramebuffer(state.gl.FRAMEBUFFER, null);
|
|
251
|
+
state.gl.activeTexture(state.gl.TEXTURE0);
|
|
252
|
+
state.gl.bindTexture(state.gl.TEXTURE_2D, state.texture);
|
|
253
|
+
state.gl.pixelStorei(state.gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
254
|
+
state.gl.texImage2D(state.gl.TEXTURE_2D, 0, state.gl.RGBA, state.gl.RGBA, state.gl.UNSIGNED_BYTE, source);
|
|
255
|
+
state.gl.useProgram(state.program);
|
|
256
|
+
if (state.uSource) {
|
|
257
|
+
state.gl.uniform1i(state.uSource, 0);
|
|
258
|
+
}
|
|
259
|
+
if (state.uAmount) {
|
|
260
|
+
state.gl.uniform1f(state.uAmount, resolved.amount);
|
|
261
|
+
}
|
|
262
|
+
if (state.uSeed) {
|
|
263
|
+
state.gl.uniform1f(state.uSeed, resolved.seed);
|
|
264
|
+
}
|
|
265
|
+
state.gl.bindVertexArray(state.vao);
|
|
266
|
+
state.gl.drawArrays(state.gl.TRIANGLE_STRIP, 0, 4);
|
|
267
|
+
},
|
|
268
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
269
|
+
gl.deleteTexture(texture);
|
|
270
|
+
gl.deleteBuffer(vbo);
|
|
271
|
+
gl.deleteProgram(program);
|
|
272
|
+
gl.deleteVertexArray(vao);
|
|
273
|
+
},
|
|
274
|
+
schema: whiteNoiseSchema,
|
|
275
|
+
validateParams: validateWhiteNoiseParams
|
|
276
|
+
});
|
|
277
|
+
export {
|
|
278
|
+
whiteNoise
|
|
279
|
+
};
|
package/dist/evolve.d.ts
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
declare const EVOLVE_DIRECTIONS: readonly ["left", "right", "top", "bottom"];
|
|
2
|
+
export type EvolveDirection = (typeof EVOLVE_DIRECTIONS)[number];
|
|
3
|
+
export declare const evolveSchema: {
|
|
4
|
+
readonly progress: {
|
|
5
|
+
readonly type: "number";
|
|
6
|
+
readonly min: 0;
|
|
7
|
+
readonly max: 1;
|
|
8
|
+
readonly step: 0.01;
|
|
9
|
+
readonly default: 0.5;
|
|
10
|
+
readonly description: "Progress";
|
|
11
|
+
};
|
|
12
|
+
readonly direction: {
|
|
13
|
+
readonly type: "enum";
|
|
14
|
+
readonly variants: {
|
|
15
|
+
readonly left: {};
|
|
16
|
+
readonly right: {};
|
|
17
|
+
readonly top: {};
|
|
18
|
+
readonly bottom: {};
|
|
19
|
+
};
|
|
20
|
+
readonly default: "left";
|
|
21
|
+
readonly description: "Direction";
|
|
22
|
+
};
|
|
23
|
+
readonly feather: {
|
|
24
|
+
readonly type: "number";
|
|
25
|
+
readonly min: 0;
|
|
26
|
+
readonly max: 1;
|
|
27
|
+
readonly step: 0.01;
|
|
28
|
+
readonly default: 0.1;
|
|
29
|
+
readonly description: "Feather";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export type EvolveParams = {
|
|
33
|
+
/** Reveal progress from `0` (hidden) to `1` (fully revealed). Defaults to `0.5`. */
|
|
34
|
+
readonly progress?: number;
|
|
35
|
+
/** Reveal direction. Defaults to `left`. */
|
|
36
|
+
readonly direction?: EvolveDirection;
|
|
37
|
+
/** Softness of the evolving edge from `0` (sharp) to `1` (fully feathered). Defaults to `0.1`. */
|
|
38
|
+
readonly feather?: number;
|
|
39
|
+
};
|
|
40
|
+
export declare const evolve: (params?: (EvolveParams & {
|
|
41
|
+
readonly disabled?: boolean | undefined;
|
|
42
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
43
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type FisheyeState = {
|
|
2
|
+
gl: WebGL2RenderingContext;
|
|
3
|
+
program: WebGLProgram;
|
|
4
|
+
vao: WebGLVertexArrayObject;
|
|
5
|
+
vbo: WebGLBuffer;
|
|
6
|
+
textureSource: WebGLTexture;
|
|
7
|
+
uniforms: {
|
|
8
|
+
uSource: WebGLUniformLocation | null;
|
|
9
|
+
uCenter: WebGLUniformLocation | null;
|
|
10
|
+
uFieldOfView: WebGLUniformLocation | null;
|
|
11
|
+
uRadius: WebGLUniformLocation | null;
|
|
12
|
+
uZoom: WebGLUniformLocation | null;
|
|
13
|
+
uAspect: WebGLUniformLocation | null;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare const setupFisheye: (target: HTMLCanvasElement) => FisheyeState;
|
|
17
|
+
export declare const cleanupFisheye: (state: FisheyeState) => void;
|
|
18
|
+
export declare const applyFisheye: ({ state, source, width, height, center, fieldOfView, radius, zoom, flipSourceY, }: {
|
|
19
|
+
readonly state: FisheyeState;
|
|
20
|
+
readonly source: CanvasImageSource;
|
|
21
|
+
readonly width: number;
|
|
22
|
+
readonly height: number;
|
|
23
|
+
readonly center: readonly [number, number];
|
|
24
|
+
readonly fieldOfView: number;
|
|
25
|
+
readonly radius: number;
|
|
26
|
+
readonly zoom: number;
|
|
27
|
+
readonly flipSourceY: boolean;
|
|
28
|
+
}) => void;
|