@remotion/effects 4.0.466 → 4.0.468
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/chromatic-aberration/chromatic-aberration-runtime.d.ts +22 -0
- package/dist/chromatic-aberration/chromatic-aberration-shaders.d.ts +2 -0
- package/dist/chromatic-aberration/index.d.ts +9 -0
- package/dist/chromatic-aberration.d.ts +1 -0
- package/dist/color-utils.d.ts +2 -0
- package/dist/contrast.d.ts +7 -0
- package/dist/duotone.d.ts +31 -0
- package/dist/esm/barrel-distortion.mjs +14 -1
- package/dist/esm/blur.mjs +7 -1
- package/dist/esm/brightness.mjs +14 -1
- package/dist/esm/chromatic-aberration.mjs +343 -0
- package/dist/esm/contrast.mjs +151 -0
- package/dist/esm/duotone.mjs +365 -0
- package/dist/esm/glow.mjs +585 -0
- package/dist/esm/grayscale.mjs +14 -1
- package/dist/esm/halftone.mjs +51 -29
- package/dist/esm/hue.mjs +14 -1
- package/dist/esm/invert.mjs +14 -1
- package/dist/esm/mirror.mjs +14 -1
- package/dist/esm/saturation.mjs +14 -1
- package/dist/esm/scale.mjs +7 -1
- package/dist/esm/shine.mjs +389 -0
- package/dist/esm/tint.mjs +14 -1
- package/dist/esm/translate.mjs +218 -0
- package/dist/esm/vignette.mjs +439 -0
- package/dist/esm/wave.mjs +7 -1
- package/dist/glow/glow-runtime.d.ts +52 -0
- package/dist/glow/glow-shaders.d.ts +5 -0
- package/dist/glow/index.d.ts +13 -0
- package/dist/glow.d.ts +1 -0
- package/dist/halftone.d.ts +24 -7
- package/dist/shine.d.ts +17 -0
- package/dist/translate/index.d.ts +18 -0
- package/dist/translate.d.ts +1 -0
- package/dist/validate-effect-param.d.ts +1 -0
- package/dist/vignette.d.ts +68 -0
- package/package.json +59 -3
|
@@ -0,0 +1,439 @@
|
|
|
1
|
+
// src/vignette.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/vignette.ts
|
|
99
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
100
|
+
var VIGNETTE_MODES = ["color", "alpha"];
|
|
101
|
+
var DEFAULT_AMOUNT2 = 0.5;
|
|
102
|
+
var DEFAULT_RADIUS = 0.65;
|
|
103
|
+
var DEFAULT_FEATHER = 0.35;
|
|
104
|
+
var DEFAULT_ROUNDNESS = 1;
|
|
105
|
+
var DEFAULT_COLOR = "#000000";
|
|
106
|
+
var DEFAULT_MODE = "color";
|
|
107
|
+
var vignetteSchema = {
|
|
108
|
+
amount: {
|
|
109
|
+
type: "number",
|
|
110
|
+
min: 0,
|
|
111
|
+
max: 1,
|
|
112
|
+
step: 0.01,
|
|
113
|
+
default: DEFAULT_AMOUNT2,
|
|
114
|
+
description: "Amount"
|
|
115
|
+
},
|
|
116
|
+
radius: {
|
|
117
|
+
type: "number",
|
|
118
|
+
min: 0,
|
|
119
|
+
max: 1,
|
|
120
|
+
step: 0.01,
|
|
121
|
+
default: DEFAULT_RADIUS,
|
|
122
|
+
description: "Radius"
|
|
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
|
+
roundness: {
|
|
133
|
+
type: "number",
|
|
134
|
+
min: 0,
|
|
135
|
+
max: 1,
|
|
136
|
+
step: 0.01,
|
|
137
|
+
default: DEFAULT_ROUNDNESS,
|
|
138
|
+
description: "Roundness"
|
|
139
|
+
},
|
|
140
|
+
color: {
|
|
141
|
+
type: "color",
|
|
142
|
+
default: DEFAULT_COLOR,
|
|
143
|
+
description: "Color"
|
|
144
|
+
},
|
|
145
|
+
mode: {
|
|
146
|
+
type: "enum",
|
|
147
|
+
default: DEFAULT_MODE,
|
|
148
|
+
description: "Mode",
|
|
149
|
+
variants: {
|
|
150
|
+
color: {},
|
|
151
|
+
alpha: {}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
var formatEnum = (variants) => {
|
|
156
|
+
if (variants.length === 2) {
|
|
157
|
+
return `"${variants[0]}" or "${variants[1]}"`;
|
|
158
|
+
}
|
|
159
|
+
return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
|
|
160
|
+
};
|
|
161
|
+
var assertOptionalEnum = (value, name, variants) => {
|
|
162
|
+
if (value === undefined) {
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
if (!variants.includes(value)) {
|
|
166
|
+
throw new TypeError(`"${name}" must be ${formatEnum(variants)}, but got ${JSON.stringify(value)}`);
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
var resolve = (p) => ({
|
|
170
|
+
amount: p.amount ?? DEFAULT_AMOUNT2,
|
|
171
|
+
radius: p.radius ?? DEFAULT_RADIUS,
|
|
172
|
+
feather: p.feather ?? DEFAULT_FEATHER,
|
|
173
|
+
roundness: p.roundness ?? DEFAULT_ROUNDNESS,
|
|
174
|
+
color: p.color ?? DEFAULT_COLOR,
|
|
175
|
+
mode: p.mode ?? DEFAULT_MODE
|
|
176
|
+
});
|
|
177
|
+
var validateVignetteParams = (params) => {
|
|
178
|
+
assertEffectParamsObject(params, "Vignette");
|
|
179
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
180
|
+
assertOptionalFiniteNumber(params.radius, "radius");
|
|
181
|
+
assertOptionalFiniteNumber(params.feather, "feather");
|
|
182
|
+
assertOptionalFiniteNumber(params.roundness, "roundness");
|
|
183
|
+
assertOptionalColor(params.color, "color");
|
|
184
|
+
assertOptionalEnum(params.mode, "mode", VIGNETTE_MODES);
|
|
185
|
+
const r = resolve(params);
|
|
186
|
+
validateUnitInterval(r.amount, "amount");
|
|
187
|
+
validateUnitInterval(r.radius, "radius");
|
|
188
|
+
validateUnitInterval(r.feather, "feather");
|
|
189
|
+
validateUnitInterval(r.roundness, "roundness");
|
|
190
|
+
};
|
|
191
|
+
var VIGNETTE_VS = `#version 300 es
|
|
192
|
+
in vec2 aPos;
|
|
193
|
+
in vec2 aUv;
|
|
194
|
+
out vec2 vUv;
|
|
195
|
+
|
|
196
|
+
void main() {
|
|
197
|
+
vUv = aUv;
|
|
198
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
199
|
+
}
|
|
200
|
+
`;
|
|
201
|
+
var VIGNETTE_FS = `#version 300 es
|
|
202
|
+
precision highp float;
|
|
203
|
+
|
|
204
|
+
in vec2 vUv;
|
|
205
|
+
out vec4 fragColor;
|
|
206
|
+
|
|
207
|
+
uniform sampler2D uSource;
|
|
208
|
+
uniform float uAmount;
|
|
209
|
+
uniform float uRadius;
|
|
210
|
+
uniform float uFeather;
|
|
211
|
+
uniform float uRoundness;
|
|
212
|
+
uniform vec4 uColor;
|
|
213
|
+
uniform int uMode;
|
|
214
|
+
|
|
215
|
+
float vignetteMask() {
|
|
216
|
+
vec2 centered = abs(vUv * 2.0 - 1.0);
|
|
217
|
+
float rectangleDistance = max(centered.x, centered.y);
|
|
218
|
+
float ellipseDistance = length(centered);
|
|
219
|
+
float distanceFromCenter = mix(rectangleDistance, ellipseDistance, uRoundness);
|
|
220
|
+
|
|
221
|
+
if (uFeather <= 0.0001) {
|
|
222
|
+
return distanceFromCenter >= uRadius ? uAmount : 0.0;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
return smoothstep(uRadius, uRadius + uFeather, distanceFromCenter) * uAmount;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
void main() {
|
|
229
|
+
vec4 texColor = texture(uSource, vUv);
|
|
230
|
+
float alpha = texColor.a;
|
|
231
|
+
|
|
232
|
+
if (alpha <= 0.001) {
|
|
233
|
+
fragColor = vec4(0.0);
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
float mask = vignetteMask();
|
|
238
|
+
vec3 rgb = texColor.rgb / alpha;
|
|
239
|
+
|
|
240
|
+
if (uMode == 1) {
|
|
241
|
+
float outputAlpha = alpha * (1.0 - mask);
|
|
242
|
+
fragColor = vec4(rgb * outputAlpha, outputAlpha);
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
vec3 outputRgb = mix(rgb, uColor.rgb, mask * uColor.a);
|
|
247
|
+
fragColor = vec4(outputRgb * alpha, alpha);
|
|
248
|
+
}
|
|
249
|
+
`;
|
|
250
|
+
var compileShader = (gl, type, source) => {
|
|
251
|
+
const shader = gl.createShader(type);
|
|
252
|
+
if (!shader) {
|
|
253
|
+
throw new Error("Failed to create WebGL shader");
|
|
254
|
+
}
|
|
255
|
+
gl.shaderSource(shader, source);
|
|
256
|
+
gl.compileShader(shader);
|
|
257
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
258
|
+
const log = gl.getShaderInfoLog(shader);
|
|
259
|
+
gl.deleteShader(shader);
|
|
260
|
+
throw new Error(`Vignette shader compile failed: ${log ?? "(no log)"}`);
|
|
261
|
+
}
|
|
262
|
+
return shader;
|
|
263
|
+
};
|
|
264
|
+
var linkProgram = (gl, vs, fs) => {
|
|
265
|
+
const program = gl.createProgram();
|
|
266
|
+
if (!program) {
|
|
267
|
+
throw new Error("Failed to create WebGL program");
|
|
268
|
+
}
|
|
269
|
+
gl.attachShader(program, vs);
|
|
270
|
+
gl.attachShader(program, fs);
|
|
271
|
+
gl.linkProgram(program);
|
|
272
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
273
|
+
const log = gl.getProgramInfoLog(program);
|
|
274
|
+
gl.deleteProgram(program);
|
|
275
|
+
throw new Error(`Vignette program link failed: ${log ?? "(no log)"}`);
|
|
276
|
+
}
|
|
277
|
+
return program;
|
|
278
|
+
};
|
|
279
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
280
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
281
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
282
|
+
const program = linkProgram(gl, vs, fs);
|
|
283
|
+
gl.deleteShader(vs);
|
|
284
|
+
gl.deleteShader(fs);
|
|
285
|
+
return program;
|
|
286
|
+
};
|
|
287
|
+
var createRgbaTexture = (gl) => {
|
|
288
|
+
const texture = gl.createTexture();
|
|
289
|
+
if (!texture) {
|
|
290
|
+
throw new Error("Failed to create WebGL texture");
|
|
291
|
+
}
|
|
292
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
293
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
294
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
295
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
296
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
297
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
298
|
+
return texture;
|
|
299
|
+
};
|
|
300
|
+
var setupVignette = (target) => {
|
|
301
|
+
const gl = target.getContext("webgl2", {
|
|
302
|
+
premultipliedAlpha: true,
|
|
303
|
+
alpha: true,
|
|
304
|
+
preserveDrawingBuffer: true
|
|
305
|
+
});
|
|
306
|
+
if (!gl) {
|
|
307
|
+
throw createWebGL2ContextError("vignette effect");
|
|
308
|
+
}
|
|
309
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
310
|
+
const program = createProgram(gl, VIGNETTE_VS, VIGNETTE_FS);
|
|
311
|
+
const vao = gl.createVertexArray();
|
|
312
|
+
if (!vao) {
|
|
313
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
314
|
+
}
|
|
315
|
+
gl.bindVertexArray(vao);
|
|
316
|
+
const data = new Float32Array([
|
|
317
|
+
-1,
|
|
318
|
+
-1,
|
|
319
|
+
0,
|
|
320
|
+
0,
|
|
321
|
+
1,
|
|
322
|
+
-1,
|
|
323
|
+
1,
|
|
324
|
+
0,
|
|
325
|
+
-1,
|
|
326
|
+
1,
|
|
327
|
+
0,
|
|
328
|
+
1,
|
|
329
|
+
1,
|
|
330
|
+
1,
|
|
331
|
+
1,
|
|
332
|
+
1
|
|
333
|
+
]);
|
|
334
|
+
const vbo = gl.createBuffer();
|
|
335
|
+
if (!vbo) {
|
|
336
|
+
throw new Error("Failed to create WebGL buffer");
|
|
337
|
+
}
|
|
338
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
339
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
340
|
+
gl.enableVertexAttribArray(0);
|
|
341
|
+
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
|
|
342
|
+
gl.enableVertexAttribArray(1);
|
|
343
|
+
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
|
|
344
|
+
gl.bindVertexArray(null);
|
|
345
|
+
const textureSource = createRgbaTexture(gl);
|
|
346
|
+
const colorCanvas = document.createElement("canvas");
|
|
347
|
+
colorCanvas.width = 1;
|
|
348
|
+
colorCanvas.height = 1;
|
|
349
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
350
|
+
if (!colorCtx) {
|
|
351
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
352
|
+
}
|
|
353
|
+
return {
|
|
354
|
+
gl,
|
|
355
|
+
program,
|
|
356
|
+
vao,
|
|
357
|
+
vbo,
|
|
358
|
+
textureSource,
|
|
359
|
+
uniforms: {
|
|
360
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
361
|
+
uAmount: gl.getUniformLocation(program, "uAmount"),
|
|
362
|
+
uRadius: gl.getUniformLocation(program, "uRadius"),
|
|
363
|
+
uFeather: gl.getUniformLocation(program, "uFeather"),
|
|
364
|
+
uRoundness: gl.getUniformLocation(program, "uRoundness"),
|
|
365
|
+
uColor: gl.getUniformLocation(program, "uColor"),
|
|
366
|
+
uMode: gl.getUniformLocation(program, "uMode")
|
|
367
|
+
},
|
|
368
|
+
colorCtx,
|
|
369
|
+
cachedColor: "",
|
|
370
|
+
cachedColorRgba: [0, 0, 0, 255]
|
|
371
|
+
};
|
|
372
|
+
};
|
|
373
|
+
var getParsedColor = (state, resolved) => {
|
|
374
|
+
if (state.cachedColor !== resolved.color) {
|
|
375
|
+
state.cachedColor = resolved.color;
|
|
376
|
+
state.cachedColorRgba = parseColorRgba(state.colorCtx, resolved.color);
|
|
377
|
+
}
|
|
378
|
+
return state.cachedColorRgba;
|
|
379
|
+
};
|
|
380
|
+
var normalizedRgba = (color) => {
|
|
381
|
+
return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
|
|
382
|
+
};
|
|
383
|
+
var vignette = createEffect({
|
|
384
|
+
type: "remotion/vignette",
|
|
385
|
+
label: "vignette()",
|
|
386
|
+
documentationLink: "https://www.remotion.dev/docs/effects/vignette",
|
|
387
|
+
backend: "webgl2",
|
|
388
|
+
calculateKey: (params) => {
|
|
389
|
+
const r = resolve(params);
|
|
390
|
+
return `vignette-${r.amount}-${r.radius}-${r.feather}-${r.roundness}-${r.color}-${r.mode}`;
|
|
391
|
+
},
|
|
392
|
+
setup: (target) => setupVignette(target),
|
|
393
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
394
|
+
const r = resolve(params);
|
|
395
|
+
const color = getParsedColor(state, r);
|
|
396
|
+
const [red, green, blue, alpha] = normalizedRgba(color);
|
|
397
|
+
const { gl, program, textureSource, uniforms, vao } = state;
|
|
398
|
+
gl.viewport(0, 0, width, height);
|
|
399
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
400
|
+
gl.clearColor(0, 0, 0, 0);
|
|
401
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
402
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
403
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
404
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
405
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
406
|
+
gl.useProgram(program);
|
|
407
|
+
if (uniforms.uSource)
|
|
408
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
409
|
+
if (uniforms.uAmount)
|
|
410
|
+
gl.uniform1f(uniforms.uAmount, r.amount);
|
|
411
|
+
if (uniforms.uRadius)
|
|
412
|
+
gl.uniform1f(uniforms.uRadius, r.radius);
|
|
413
|
+
if (uniforms.uFeather)
|
|
414
|
+
gl.uniform1f(uniforms.uFeather, r.feather);
|
|
415
|
+
if (uniforms.uRoundness)
|
|
416
|
+
gl.uniform1f(uniforms.uRoundness, r.roundness);
|
|
417
|
+
if (uniforms.uColor)
|
|
418
|
+
gl.uniform4f(uniforms.uColor, red, green, blue, alpha);
|
|
419
|
+
if (uniforms.uMode)
|
|
420
|
+
gl.uniform1i(uniforms.uMode, r.mode === "alpha" ? 1 : 0);
|
|
421
|
+
gl.bindVertexArray(vao);
|
|
422
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
423
|
+
gl.bindVertexArray(null);
|
|
424
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
425
|
+
gl.useProgram(null);
|
|
426
|
+
},
|
|
427
|
+
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
428
|
+
gl.deleteTexture(textureSource);
|
|
429
|
+
gl.deleteBuffer(vbo);
|
|
430
|
+
gl.deleteProgram(program);
|
|
431
|
+
gl.deleteVertexArray(vao);
|
|
432
|
+
},
|
|
433
|
+
schema: vignetteSchema,
|
|
434
|
+
validateParams: validateVignetteParams
|
|
435
|
+
});
|
|
436
|
+
export {
|
|
437
|
+
vignetteSchema,
|
|
438
|
+
vignette
|
|
439
|
+
};
|
package/dist/esm/wave.mjs
CHANGED
|
@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
|
|
|
17
17
|
throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
+
var assertOptionalColor = (value, name) => {
|
|
21
|
+
if (value === undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
assertRequiredColor(value, name);
|
|
25
|
+
};
|
|
20
26
|
|
|
21
27
|
// src/wave/wave-runtime.ts
|
|
22
28
|
import { Internals } from "remotion";
|
|
@@ -296,7 +302,7 @@ var validateWaveParams = (params) => {
|
|
|
296
302
|
};
|
|
297
303
|
var wave = createEffect({
|
|
298
304
|
type: "remotion/wave",
|
|
299
|
-
label: "
|
|
305
|
+
label: "wave()",
|
|
300
306
|
documentationLink: "https://www.remotion.dev/docs/effects/wave",
|
|
301
307
|
backend: "webgl2",
|
|
302
308
|
calculateKey: (params) => {
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import type { ParsedColorRgba } from '../color-utils.js';
|
|
2
|
+
export type GlowState = {
|
|
3
|
+
readonly gl: WebGL2RenderingContext;
|
|
4
|
+
readonly programExtract: WebGLProgram;
|
|
5
|
+
readonly programHorizontal: WebGLProgram;
|
|
6
|
+
readonly programVertical: WebGLProgram;
|
|
7
|
+
readonly programComposite: WebGLProgram;
|
|
8
|
+
readonly vao: WebGLVertexArrayObject;
|
|
9
|
+
readonly vbo: WebGLBuffer;
|
|
10
|
+
readonly textureSource: WebGLTexture;
|
|
11
|
+
readonly textureGlowA: WebGLTexture;
|
|
12
|
+
readonly textureGlowB: WebGLTexture;
|
|
13
|
+
readonly framebuffer: WebGLFramebuffer;
|
|
14
|
+
readonly extract: {
|
|
15
|
+
readonly uSource: WebGLUniformLocation | null;
|
|
16
|
+
readonly uColor: WebGLUniformLocation | null;
|
|
17
|
+
readonly uThreshold: WebGLUniformLocation | null;
|
|
18
|
+
};
|
|
19
|
+
readonly horizontal: {
|
|
20
|
+
readonly uRadius: WebGLUniformLocation | null;
|
|
21
|
+
readonly uTexelSize: WebGLUniformLocation | null;
|
|
22
|
+
readonly uSource: WebGLUniformLocation | null;
|
|
23
|
+
};
|
|
24
|
+
readonly vertical: {
|
|
25
|
+
readonly uRadius: WebGLUniformLocation | null;
|
|
26
|
+
readonly uTexelSize: WebGLUniformLocation | null;
|
|
27
|
+
readonly uSource: WebGLUniformLocation | null;
|
|
28
|
+
};
|
|
29
|
+
readonly composite: {
|
|
30
|
+
readonly uSource: WebGLUniformLocation | null;
|
|
31
|
+
readonly uGlow: WebGLUniformLocation | null;
|
|
32
|
+
readonly uIntensity: WebGLUniformLocation | null;
|
|
33
|
+
};
|
|
34
|
+
readonly colorCtx: CanvasRenderingContext2D;
|
|
35
|
+
cachedColorStr: string;
|
|
36
|
+
cachedColorRgba: ParsedColorRgba;
|
|
37
|
+
};
|
|
38
|
+
export declare const setupGlow: (target: HTMLCanvasElement) => GlowState;
|
|
39
|
+
export declare const cleanupGlow: ({ gl, programExtract, programHorizontal, programVertical, programComposite, vao, vbo, textureSource, textureGlowA, textureGlowB, framebuffer, }: GlowState) => void;
|
|
40
|
+
type ApplyGlowParams = {
|
|
41
|
+
readonly state: GlowState;
|
|
42
|
+
readonly source: CanvasImageSource;
|
|
43
|
+
readonly width: number;
|
|
44
|
+
readonly height: number;
|
|
45
|
+
readonly radius: number;
|
|
46
|
+
readonly intensity: number;
|
|
47
|
+
readonly threshold: number;
|
|
48
|
+
readonly color: ParsedColorRgba;
|
|
49
|
+
readonly flipSourceY: boolean;
|
|
50
|
+
};
|
|
51
|
+
export declare const applyGlow: ({ state, source, width, height, radius, intensity, threshold, color, flipSourceY, }: ApplyGlowParams) => void;
|
|
52
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const GLOW_VS = "#version 300 es\nlayout(location = 0) in vec2 aPos;\nlayout(location = 1) in vec2 aUv;\nout vec2 vUv;\n\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
|
|
2
|
+
export declare const GLOW_EXTRACT_FS = "#version 300 es\nprecision highp float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec4 uColor;\nuniform float uThreshold;\n\nvoid main() {\n\tvec4 source = texture(uSource, vUv);\n\tfloat alpha = source.a;\n\n\tif (alpha <= 0.001) {\n\t\tfragColor = vec4(0.0);\n\t\treturn;\n\t}\n\n\tvec3 rgb = source.rgb / alpha;\n\tfloat luminance = dot(rgb, vec3(0.299, 0.587, 0.114));\n\tfloat threshold = clamp(uThreshold, 0.0, 1.0);\n\tfloat contribution = threshold >= 1.0\n\t\t? step(1.0, luminance)\n\t\t: clamp((luminance - threshold) / max(1.0 - threshold, 0.0001), 0.0, 1.0);\n\tfloat glowAlpha = alpha * contribution * uColor.a;\n\n\tfragColor = vec4(uColor.rgb * glowAlpha, glowAlpha);\n}\n";
|
|
3
|
+
export declare const GLOW_BLUR_FS_HORIZONTAL: string;
|
|
4
|
+
export declare const GLOW_BLUR_FS_VERTICAL: string;
|
|
5
|
+
export declare const GLOW_COMPOSITE_FS = "#version 300 es\nprecision highp float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform sampler2D uGlow;\nuniform float uIntensity;\n\nvoid main() {\n\tvec4 source = texture(uSource, vUv);\n\tvec4 glow = texture(uGlow, vUv) * max(uIntensity, 0.0);\n\tvec4 outColor = source + glow;\n\n\tfragColor = vec4(min(outColor.rgb, vec3(1.0)), min(outColor.a, 1.0));\n}\n";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type GlowParams = {
|
|
2
|
+
/** Blur radius of the glow in pixels. Defaults to `20`. */
|
|
3
|
+
readonly radius?: number;
|
|
4
|
+
/** Brightness multiplier for the glow. Defaults to `1`. */
|
|
5
|
+
readonly intensity?: number;
|
|
6
|
+
/** Luminance threshold from `0` to `1`. Defaults to `0`. */
|
|
7
|
+
readonly threshold?: number;
|
|
8
|
+
/** Color of the glow. Defaults to white. */
|
|
9
|
+
readonly color?: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const glow: (params?: (GlowParams & {
|
|
12
|
+
readonly disabled?: boolean | undefined;
|
|
13
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
package/dist/glow.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { glow, type GlowParams } from './glow/index.js';
|
package/dist/halftone.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
declare const HALFTONE_SHAPES: readonly ["circle", "square", "line"];
|
|
2
2
|
declare const HALFTONE_SAMPLING: readonly ["bilinear", "nearest"];
|
|
3
|
+
declare const HALFTONE_COLOR_MODES: readonly ["solid", "source"];
|
|
3
4
|
export declare const halftoneSchema: {
|
|
4
5
|
readonly dotSize: {
|
|
5
6
|
readonly type: "number";
|
|
@@ -52,15 +53,26 @@ export declare const halftoneSchema: {
|
|
|
52
53
|
readonly default: false;
|
|
53
54
|
readonly description: "Invert";
|
|
54
55
|
};
|
|
55
|
-
readonly
|
|
56
|
-
readonly type: "
|
|
57
|
-
readonly default: "
|
|
58
|
-
readonly description: "Color";
|
|
56
|
+
readonly colorMode: {
|
|
57
|
+
readonly type: "enum";
|
|
58
|
+
readonly default: "solid";
|
|
59
|
+
readonly description: "Color mode";
|
|
60
|
+
readonly variants: {
|
|
61
|
+
readonly solid: {
|
|
62
|
+
readonly dotColor: {
|
|
63
|
+
readonly type: "color";
|
|
64
|
+
readonly default: "red";
|
|
65
|
+
readonly description: "Dot color";
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
readonly source: {};
|
|
69
|
+
};
|
|
59
70
|
};
|
|
60
71
|
};
|
|
61
72
|
export type HalftoneShape = (typeof HALFTONE_SHAPES)[number];
|
|
62
73
|
export type HalftoneSampling = (typeof HALFTONE_SAMPLING)[number];
|
|
63
|
-
export type
|
|
74
|
+
export type HalftoneColorMode = (typeof HALFTONE_COLOR_MODES)[number];
|
|
75
|
+
type HalftoneCommonParams = {
|
|
64
76
|
readonly shape?: HalftoneShape;
|
|
65
77
|
readonly dotSize?: number;
|
|
66
78
|
/**
|
|
@@ -72,8 +84,6 @@ export type HalftoneParams = {
|
|
|
72
84
|
readonly offsetX?: number;
|
|
73
85
|
readonly offsetY?: number;
|
|
74
86
|
readonly sampling?: HalftoneSampling;
|
|
75
|
-
/** Dot color. Defaults to black. */
|
|
76
|
-
readonly color?: string;
|
|
77
87
|
/**
|
|
78
88
|
* When false (default), dark areas produce larger dots.
|
|
79
89
|
* When true, the pattern is inverted:
|
|
@@ -81,6 +91,13 @@ export type HalftoneParams = {
|
|
|
81
91
|
*/
|
|
82
92
|
readonly invert?: boolean;
|
|
83
93
|
};
|
|
94
|
+
export type HalftoneParams = HalftoneCommonParams & ({
|
|
95
|
+
readonly colorMode?: 'solid';
|
|
96
|
+
/** Dot color. Defaults to red. */
|
|
97
|
+
readonly dotColor?: string;
|
|
98
|
+
} | {
|
|
99
|
+
readonly colorMode: 'source';
|
|
100
|
+
});
|
|
84
101
|
export declare const halftone: (params?: (HalftoneParams & {
|
|
85
102
|
readonly disabled?: boolean | undefined;
|
|
86
103
|
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
package/dist/shine.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export type ShineParams = {
|
|
2
|
+
/** Position of the shine sweep from `0` to `1`. Defaults to `0.5`. */
|
|
3
|
+
readonly progress?: number;
|
|
4
|
+
/** Sweep direction in degrees. Defaults to `30`. */
|
|
5
|
+
readonly angle?: number;
|
|
6
|
+
/** Soft outer halo width in pixels. Defaults to `200`. */
|
|
7
|
+
readonly haloSigma?: number;
|
|
8
|
+
/** Bright core width in pixels. Defaults to `65`. */
|
|
9
|
+
readonly coreSigma?: number;
|
|
10
|
+
/** Peak halo brightness from `0` to `1`. Defaults to `0.3`. */
|
|
11
|
+
readonly haloIntensity?: number;
|
|
12
|
+
/** Peak core brightness from `0` to `1`. Defaults to `0.4`. */
|
|
13
|
+
readonly coreIntensity?: number;
|
|
14
|
+
};
|
|
15
|
+
export declare const shine: (params?: (ShineParams & {
|
|
16
|
+
readonly disabled?: boolean | undefined;
|
|
17
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export type XyTranslateParams = {
|
|
2
|
+
/** Horizontal offset in pixels. Defaults to `0`. */
|
|
3
|
+
readonly x?: number;
|
|
4
|
+
/** Vertical offset in pixels. Defaults to `0`. */
|
|
5
|
+
readonly y?: number;
|
|
6
|
+
};
|
|
7
|
+
export type UvTranslateParams = {
|
|
8
|
+
/** Horizontal offset in UV coordinates. `1` equals the full canvas width. Defaults to `0`. */
|
|
9
|
+
readonly u?: number;
|
|
10
|
+
/** Vertical offset in UV coordinates. `1` equals the full canvas height. Defaults to `0`. */
|
|
11
|
+
readonly v?: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const xyTranslate: (params?: (XyTranslateParams & {
|
|
14
|
+
readonly disabled?: boolean | undefined;
|
|
15
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
16
|
+
export declare const uvTranslate: (params?: (UvTranslateParams & {
|
|
17
|
+
readonly disabled?: boolean | undefined;
|
|
18
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { uvTranslate, xyTranslate, type UvTranslateParams, type XyTranslateParams, } from './translate/index.js';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare const assertEffectParamsObject: (params: unknown, effectLabel: string) => void;
|
|
2
2
|
export declare const assertRequiredFiniteNumber: (value: unknown, name: string) => void;
|
|
3
3
|
export declare const assertRequiredColor: (value: unknown, name: string) => void;
|
|
4
|
+
export declare const assertOptionalColor: (value: unknown, name: string) => void;
|