@remotion/effects 4.0.470 → 4.0.472
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/color-key.d.ts +47 -0
- package/dist/color-utils.d.ts +4 -1
- package/dist/dot-grid.d.ts +2 -0
- package/dist/duotone.d.ts +1 -0
- package/dist/esm/barrel-distortion.mjs +9 -5
- package/dist/esm/blur.mjs +2 -1
- package/dist/esm/brightness.mjs +7 -4
- package/dist/esm/chromatic-aberration.mjs +10 -6
- package/dist/esm/color-key.mjs +419 -0
- package/dist/esm/contrast.mjs +7 -4
- package/dist/esm/dot-grid.mjs +11 -6
- package/dist/esm/drop-shadow.mjs +15 -8
- package/dist/esm/duotone.mjs +9 -5
- package/dist/esm/evolve.mjs +11 -6
- package/dist/esm/fisheye.mjs +13 -7
- package/dist/esm/glow.mjs +13 -7
- package/dist/esm/grayscale.mjs +7 -4
- package/dist/esm/halftone-linear-gradient.mjs +13 -7
- package/dist/esm/halftone.mjs +16 -11
- package/dist/esm/hue.mjs +7 -4
- package/dist/esm/index.mjs +902 -0
- package/dist/esm/invert.mjs +7 -4
- package/dist/esm/linear-progressive-blur.mjs +530 -0
- package/dist/esm/lines.mjs +15 -11
- package/dist/esm/mirror.mjs +9 -5
- package/dist/esm/noise.mjs +11 -6
- package/dist/esm/pixel-dissolve.mjs +377 -0
- package/dist/esm/rings.mjs +467 -0
- package/dist/esm/saturation.mjs +7 -4
- package/dist/esm/scale.mjs +2 -1
- package/dist/esm/scanlines.mjs +15 -8
- package/dist/esm/shine.mjs +18 -12
- package/dist/esm/speckle.mjs +13 -7
- package/dist/esm/tint.mjs +9 -5
- package/dist/esm/translate.mjs +15 -8
- package/dist/esm/vignette.mjs +40 -12
- package/dist/esm/wave.mjs +6 -3
- package/dist/esm/waves.mjs +547 -0
- package/dist/esm/white-noise.mjs +11 -6
- package/dist/esm/zigzag.mjs +537 -0
- package/dist/evolve.d.ts +2 -0
- package/dist/halftone-linear-gradient.d.ts +3 -0
- package/dist/halftone.d.ts +5 -3
- package/dist/index.d.ts +2 -1
- package/dist/linear-progressive-blur/index.d.ts +28 -0
- package/dist/linear-progressive-blur/linear-progressive-blur-runtime.d.ts +32 -0
- package/dist/linear-progressive-blur/linear-progressive-blur-shaders.d.ts +2 -0
- package/dist/linear-progressive-blur.d.ts +1 -0
- package/dist/lines.d.ts +5 -4
- package/dist/pixel-dissolve.d.ts +10 -0
- package/dist/rings.d.ts +51 -0
- package/dist/tint.d.ts +1 -0
- package/dist/vignette.d.ts +13 -0
- package/dist/waves.d.ts +95 -0
- package/dist/zigzag.d.ts +84 -0
- package/package.json +51 -3
- package/dist/effect-internals.d.ts +0 -8
- package/dist/entrypoints/blur.d.ts +0 -6
|
@@ -0,0 +1,537 @@
|
|
|
1
|
+
// src/zigzag.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/zigzag.ts
|
|
102
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
103
|
+
var ZIGZAG_DIRECTIONS = ["horizontal", "vertical"];
|
|
104
|
+
var DEFAULT_COLORS = ["#dff4ff", "#7cc6ff"];
|
|
105
|
+
var DEFAULT_DIRECTION = "horizontal";
|
|
106
|
+
var DEFAULT_THICKNESS = 40;
|
|
107
|
+
var DEFAULT_GAP = 0;
|
|
108
|
+
var DEFAULT_ANGLE = 0;
|
|
109
|
+
var DEFAULT_OFFSET = 0;
|
|
110
|
+
var DEFAULT_AMPLITUDE = 40;
|
|
111
|
+
var DEFAULT_WAVELENGTH = 160;
|
|
112
|
+
var zigzagSchema = {
|
|
113
|
+
direction: {
|
|
114
|
+
type: "enum",
|
|
115
|
+
variants: {
|
|
116
|
+
horizontal: {},
|
|
117
|
+
vertical: {}
|
|
118
|
+
},
|
|
119
|
+
default: DEFAULT_DIRECTION,
|
|
120
|
+
description: "Direction"
|
|
121
|
+
},
|
|
122
|
+
thickness: {
|
|
123
|
+
type: "number",
|
|
124
|
+
min: 0.1,
|
|
125
|
+
max: 400,
|
|
126
|
+
step: 0.1,
|
|
127
|
+
default: DEFAULT_THICKNESS,
|
|
128
|
+
description: "Thickness",
|
|
129
|
+
hiddenFromList: false
|
|
130
|
+
},
|
|
131
|
+
gap: {
|
|
132
|
+
type: "number",
|
|
133
|
+
min: 0,
|
|
134
|
+
max: 400,
|
|
135
|
+
step: 0.1,
|
|
136
|
+
default: DEFAULT_GAP,
|
|
137
|
+
description: "Gap",
|
|
138
|
+
hiddenFromList: false
|
|
139
|
+
},
|
|
140
|
+
angle: {
|
|
141
|
+
type: "rotation-degrees",
|
|
142
|
+
step: 1,
|
|
143
|
+
default: DEFAULT_ANGLE,
|
|
144
|
+
description: "Angle"
|
|
145
|
+
},
|
|
146
|
+
offset: {
|
|
147
|
+
type: "number",
|
|
148
|
+
step: 0.1,
|
|
149
|
+
default: DEFAULT_OFFSET,
|
|
150
|
+
description: "Offset",
|
|
151
|
+
hiddenFromList: false
|
|
152
|
+
},
|
|
153
|
+
amplitude: {
|
|
154
|
+
type: "number",
|
|
155
|
+
min: 0,
|
|
156
|
+
max: 500,
|
|
157
|
+
step: 0.1,
|
|
158
|
+
default: DEFAULT_AMPLITUDE,
|
|
159
|
+
description: "Amplitude",
|
|
160
|
+
hiddenFromList: false
|
|
161
|
+
},
|
|
162
|
+
wavelength: {
|
|
163
|
+
type: "number",
|
|
164
|
+
min: 1,
|
|
165
|
+
max: 2000,
|
|
166
|
+
step: 1,
|
|
167
|
+
default: DEFAULT_WAVELENGTH,
|
|
168
|
+
description: "Wavelength",
|
|
169
|
+
hiddenFromList: false
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
var resolve = (p) => {
|
|
173
|
+
const thickness = p.thickness ?? DEFAULT_THICKNESS;
|
|
174
|
+
const gap = p.gap ?? DEFAULT_GAP;
|
|
175
|
+
return {
|
|
176
|
+
colors: p.colors ?? DEFAULT_COLORS,
|
|
177
|
+
direction: p.direction ?? DEFAULT_DIRECTION,
|
|
178
|
+
thickness,
|
|
179
|
+
spacing: thickness + gap,
|
|
180
|
+
angle: p.angle ?? DEFAULT_ANGLE,
|
|
181
|
+
offset: p.offset ?? DEFAULT_OFFSET,
|
|
182
|
+
amplitude: p.amplitude ?? DEFAULT_AMPLITUDE,
|
|
183
|
+
wavelength: p.wavelength ?? DEFAULT_WAVELENGTH
|
|
184
|
+
};
|
|
185
|
+
};
|
|
186
|
+
var formatEnum = (variants) => {
|
|
187
|
+
if (variants.length === 2) {
|
|
188
|
+
return `"${variants[0]}" or "${variants[1]}"`;
|
|
189
|
+
}
|
|
190
|
+
return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
|
|
191
|
+
};
|
|
192
|
+
var validatePositive = (value, name) => {
|
|
193
|
+
if (value <= 0) {
|
|
194
|
+
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
var validateNonNegative2 = (value, name) => {
|
|
198
|
+
if (value < 0) {
|
|
199
|
+
throw new TypeError(`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`);
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
var validateColors = (colors) => {
|
|
203
|
+
if (colors === undefined) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
if (!Array.isArray(colors) || colors.length < 2) {
|
|
207
|
+
throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
|
|
208
|
+
}
|
|
209
|
+
for (let i = 0;i < colors.length; i++) {
|
|
210
|
+
assertRequiredColor(colors[i], `colors[${i}]`);
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
var validateDirection = (direction) => {
|
|
214
|
+
if (direction === undefined) {
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
if (typeof direction !== "string" || !ZIGZAG_DIRECTIONS.includes(direction)) {
|
|
218
|
+
throw new TypeError(`"direction" must be ${formatEnum(ZIGZAG_DIRECTIONS)}, but got ${JSON.stringify(direction)}`);
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
var validateZigzagParams = (params) => {
|
|
222
|
+
assertEffectParamsObject(params, "Zigzag");
|
|
223
|
+
validateColors(params.colors);
|
|
224
|
+
validateDirection(params.direction);
|
|
225
|
+
assertOptionalFiniteNumber(params.thickness, "thickness");
|
|
226
|
+
assertOptionalFiniteNumber(params.gap, "gap");
|
|
227
|
+
assertOptionalFiniteNumber(params.angle, "angle");
|
|
228
|
+
assertOptionalFiniteNumber(params.offset, "offset");
|
|
229
|
+
assertOptionalFiniteNumber(params.amplitude, "amplitude");
|
|
230
|
+
assertOptionalFiniteNumber(params.wavelength, "wavelength");
|
|
231
|
+
const thickness = params.thickness ?? DEFAULT_THICKNESS;
|
|
232
|
+
const gap = params.gap ?? DEFAULT_GAP;
|
|
233
|
+
const amplitude = params.amplitude ?? DEFAULT_AMPLITUDE;
|
|
234
|
+
const wavelength = params.wavelength ?? DEFAULT_WAVELENGTH;
|
|
235
|
+
validatePositive(thickness, "thickness");
|
|
236
|
+
validateNonNegative2(gap, "gap");
|
|
237
|
+
validateNonNegative2(amplitude, "amplitude");
|
|
238
|
+
validatePositive(wavelength, "wavelength");
|
|
239
|
+
};
|
|
240
|
+
var ZIGZAG_VS = `#version 300 es
|
|
241
|
+
in vec2 aPos;
|
|
242
|
+
in vec2 aUv;
|
|
243
|
+
out vec2 vUv;
|
|
244
|
+
|
|
245
|
+
void main() {
|
|
246
|
+
vUv = aUv;
|
|
247
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
248
|
+
}
|
|
249
|
+
`;
|
|
250
|
+
var ZIGZAG_FS = `#version 300 es
|
|
251
|
+
precision highp float;
|
|
252
|
+
|
|
253
|
+
in vec2 vUv;
|
|
254
|
+
out vec4 fragColor;
|
|
255
|
+
|
|
256
|
+
uniform sampler2D uSource;
|
|
257
|
+
uniform sampler2D uPalette;
|
|
258
|
+
uniform vec2 uResolution;
|
|
259
|
+
uniform float uNumColors;
|
|
260
|
+
uniform int uDirection;
|
|
261
|
+
uniform float uThickness;
|
|
262
|
+
uniform float uSpacing;
|
|
263
|
+
uniform float uAngle;
|
|
264
|
+
uniform float uOffset;
|
|
265
|
+
uniform float uAmplitude;
|
|
266
|
+
uniform float uWavelength;
|
|
267
|
+
|
|
268
|
+
void main() {
|
|
269
|
+
vec4 texColor = texture(uSource, vUv);
|
|
270
|
+
float thickness = max(uThickness, 0.001);
|
|
271
|
+
float spacing = max(uSpacing, 0.001);
|
|
272
|
+
float cycle = spacing * uNumColors;
|
|
273
|
+
vec2 centered = vUv * uResolution - uResolution * 0.5;
|
|
274
|
+
float s = sin(uAngle);
|
|
275
|
+
float c = cos(uAngle);
|
|
276
|
+
vec2 rotated = vec2(
|
|
277
|
+
centered.x * c - centered.y * s,
|
|
278
|
+
centered.x * s + centered.y * c
|
|
279
|
+
);
|
|
280
|
+
float baseAxis = uDirection == 0 ? rotated.y : rotated.x;
|
|
281
|
+
float zigzagAxis = uDirection == 0 ? rotated.x : rotated.y;
|
|
282
|
+
float wavePhase = fract(zigzagAxis / max(uWavelength, 0.001));
|
|
283
|
+
float zigzagOffset = (1.0 - abs(wavePhase * 2.0 - 1.0) * 2.0) * uAmplitude;
|
|
284
|
+
float position = mod(baseAxis + zigzagOffset + uOffset, cycle);
|
|
285
|
+
if (position < 0.0) {
|
|
286
|
+
position += cycle;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
float colorIndex = floor(position / spacing);
|
|
290
|
+
float inStripe = mod(position, spacing);
|
|
291
|
+
if (inStripe > thickness) {
|
|
292
|
+
fragColor = texColor;
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
float texCoord = (colorIndex + 0.5) / uNumColors;
|
|
297
|
+
vec4 lineColor = texture(uPalette, vec2(texCoord, 0.5));
|
|
298
|
+
float lineAlpha = lineColor.a;
|
|
299
|
+
vec3 premultipliedLine = lineColor.rgb * lineAlpha;
|
|
300
|
+
|
|
301
|
+
fragColor = vec4(
|
|
302
|
+
premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
|
|
303
|
+
lineAlpha + texColor.a * (1.0 - lineAlpha)
|
|
304
|
+
);
|
|
305
|
+
}
|
|
306
|
+
`;
|
|
307
|
+
var compileShader = (gl, type, source) => {
|
|
308
|
+
const shader = gl.createShader(type);
|
|
309
|
+
if (!shader) {
|
|
310
|
+
throw new Error("Failed to create WebGL shader");
|
|
311
|
+
}
|
|
312
|
+
gl.shaderSource(shader, source);
|
|
313
|
+
gl.compileShader(shader);
|
|
314
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
315
|
+
const log = gl.getShaderInfoLog(shader);
|
|
316
|
+
gl.deleteShader(shader);
|
|
317
|
+
throw new Error(`Zigzag shader compile failed: ${log ?? "(no log)"}`);
|
|
318
|
+
}
|
|
319
|
+
return shader;
|
|
320
|
+
};
|
|
321
|
+
var linkProgram = (gl, vs, fs) => {
|
|
322
|
+
const program = gl.createProgram();
|
|
323
|
+
if (!program) {
|
|
324
|
+
throw new Error("Failed to create WebGL program");
|
|
325
|
+
}
|
|
326
|
+
gl.attachShader(program, vs);
|
|
327
|
+
gl.attachShader(program, fs);
|
|
328
|
+
gl.linkProgram(program);
|
|
329
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
330
|
+
const log = gl.getProgramInfoLog(program);
|
|
331
|
+
gl.deleteProgram(program);
|
|
332
|
+
throw new Error(`Zigzag program link failed: ${log ?? "(no log)"}`);
|
|
333
|
+
}
|
|
334
|
+
return program;
|
|
335
|
+
};
|
|
336
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
337
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
338
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
339
|
+
const program = linkProgram(gl, vs, fs);
|
|
340
|
+
gl.deleteShader(vs);
|
|
341
|
+
gl.deleteShader(fs);
|
|
342
|
+
return program;
|
|
343
|
+
};
|
|
344
|
+
var createTexture = (gl, filter) => {
|
|
345
|
+
const texture = gl.createTexture();
|
|
346
|
+
if (!texture) {
|
|
347
|
+
throw new Error("Failed to create WebGL texture");
|
|
348
|
+
}
|
|
349
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
350
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
351
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
352
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
353
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
354
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
355
|
+
return texture;
|
|
356
|
+
};
|
|
357
|
+
var setupZigzag = (target) => {
|
|
358
|
+
const gl = target.getContext("webgl2", {
|
|
359
|
+
premultipliedAlpha: true,
|
|
360
|
+
alpha: true,
|
|
361
|
+
preserveDrawingBuffer: true
|
|
362
|
+
});
|
|
363
|
+
if (!gl) {
|
|
364
|
+
throw createWebGL2ContextError("zigzag effect");
|
|
365
|
+
}
|
|
366
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
367
|
+
const program = createProgram(gl, ZIGZAG_VS, ZIGZAG_FS);
|
|
368
|
+
const vao = gl.createVertexArray();
|
|
369
|
+
if (!vao) {
|
|
370
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
371
|
+
}
|
|
372
|
+
gl.bindVertexArray(vao);
|
|
373
|
+
const data = new Float32Array([
|
|
374
|
+
-1,
|
|
375
|
+
-1,
|
|
376
|
+
0,
|
|
377
|
+
0,
|
|
378
|
+
1,
|
|
379
|
+
-1,
|
|
380
|
+
1,
|
|
381
|
+
0,
|
|
382
|
+
-1,
|
|
383
|
+
1,
|
|
384
|
+
0,
|
|
385
|
+
1,
|
|
386
|
+
1,
|
|
387
|
+
1,
|
|
388
|
+
1,
|
|
389
|
+
1
|
|
390
|
+
]);
|
|
391
|
+
const vbo = gl.createBuffer();
|
|
392
|
+
if (!vbo) {
|
|
393
|
+
throw new Error("Failed to create WebGL buffer");
|
|
394
|
+
}
|
|
395
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
396
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
397
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
398
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
399
|
+
gl.enableVertexAttribArray(aPos);
|
|
400
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
401
|
+
gl.enableVertexAttribArray(aUv);
|
|
402
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
403
|
+
gl.bindVertexArray(null);
|
|
404
|
+
const colorCanvas = document.createElement("canvas");
|
|
405
|
+
colorCanvas.width = 1;
|
|
406
|
+
colorCanvas.height = 1;
|
|
407
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
408
|
+
if (!colorCtx) {
|
|
409
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
410
|
+
}
|
|
411
|
+
return {
|
|
412
|
+
gl,
|
|
413
|
+
program,
|
|
414
|
+
vao,
|
|
415
|
+
vbo,
|
|
416
|
+
sourceTexture: createTexture(gl, gl.LINEAR),
|
|
417
|
+
paletteTexture: createTexture(gl, gl.NEAREST),
|
|
418
|
+
colorCtx,
|
|
419
|
+
uniforms: {
|
|
420
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
421
|
+
uPalette: gl.getUniformLocation(program, "uPalette"),
|
|
422
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
423
|
+
uNumColors: gl.getUniformLocation(program, "uNumColors"),
|
|
424
|
+
uDirection: gl.getUniformLocation(program, "uDirection"),
|
|
425
|
+
uThickness: gl.getUniformLocation(program, "uThickness"),
|
|
426
|
+
uSpacing: gl.getUniformLocation(program, "uSpacing"),
|
|
427
|
+
uAngle: gl.getUniformLocation(program, "uAngle"),
|
|
428
|
+
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
429
|
+
uAmplitude: gl.getUniformLocation(program, "uAmplitude"),
|
|
430
|
+
uWavelength: gl.getUniformLocation(program, "uWavelength")
|
|
431
|
+
},
|
|
432
|
+
cachedPaletteKey: "",
|
|
433
|
+
palettePixelData: new Uint8Array(0)
|
|
434
|
+
};
|
|
435
|
+
};
|
|
436
|
+
var updatePalette = (state, colors) => {
|
|
437
|
+
const paletteKey = colors.join("|");
|
|
438
|
+
const paletteDirty = state.cachedPaletteKey !== paletteKey;
|
|
439
|
+
if (!paletteDirty) {
|
|
440
|
+
return false;
|
|
441
|
+
}
|
|
442
|
+
state.cachedPaletteKey = paletteKey;
|
|
443
|
+
const len = colors.length * 4;
|
|
444
|
+
if (state.palettePixelData.length !== len) {
|
|
445
|
+
state.palettePixelData = new Uint8Array(len);
|
|
446
|
+
}
|
|
447
|
+
const { palettePixelData } = state;
|
|
448
|
+
for (let i = 0;i < colors.length; i++) {
|
|
449
|
+
const color = parseColorRgba(state.colorCtx, colors[i]);
|
|
450
|
+
palettePixelData[i * 4] = color[0];
|
|
451
|
+
palettePixelData[i * 4 + 1] = color[1];
|
|
452
|
+
palettePixelData[i * 4 + 2] = color[2];
|
|
453
|
+
palettePixelData[i * 4 + 3] = color[3];
|
|
454
|
+
}
|
|
455
|
+
return true;
|
|
456
|
+
};
|
|
457
|
+
var zigzag = createEffect({
|
|
458
|
+
type: "remotion/zigzag",
|
|
459
|
+
label: "zigzag()",
|
|
460
|
+
documentationLink: "https://www.remotion.dev/docs/effects/zigzag",
|
|
461
|
+
backend: "webgl2",
|
|
462
|
+
calculateKey: (params) => {
|
|
463
|
+
const r = resolve(params);
|
|
464
|
+
return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}`;
|
|
465
|
+
},
|
|
466
|
+
setup: (target) => setupZigzag(target),
|
|
467
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
468
|
+
const r = resolve(params);
|
|
469
|
+
const paletteDirty = updatePalette(state, r.colors);
|
|
470
|
+
const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
|
|
471
|
+
gl.viewport(0, 0, width, height);
|
|
472
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
473
|
+
gl.clearColor(0, 0, 0, 0);
|
|
474
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
475
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
476
|
+
gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
|
|
477
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
478
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
479
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
480
|
+
gl.activeTexture(gl.TEXTURE1);
|
|
481
|
+
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
482
|
+
if (paletteDirty) {
|
|
483
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
484
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
485
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
|
|
486
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
487
|
+
}
|
|
488
|
+
gl.useProgram(program);
|
|
489
|
+
if (uniforms.uSource)
|
|
490
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
491
|
+
if (uniforms.uPalette)
|
|
492
|
+
gl.uniform1i(uniforms.uPalette, 1);
|
|
493
|
+
if (uniforms.uResolution)
|
|
494
|
+
gl.uniform2f(uniforms.uResolution, width, height);
|
|
495
|
+
if (uniforms.uNumColors)
|
|
496
|
+
gl.uniform1f(uniforms.uNumColors, r.colors.length);
|
|
497
|
+
if (uniforms.uDirection)
|
|
498
|
+
gl.uniform1i(uniforms.uDirection, r.direction === "horizontal" ? 0 : 1);
|
|
499
|
+
if (uniforms.uThickness)
|
|
500
|
+
gl.uniform1f(uniforms.uThickness, r.thickness);
|
|
501
|
+
if (uniforms.uSpacing)
|
|
502
|
+
gl.uniform1f(uniforms.uSpacing, r.spacing);
|
|
503
|
+
if (uniforms.uAngle)
|
|
504
|
+
gl.uniform1f(uniforms.uAngle, r.angle * Math.PI / 180);
|
|
505
|
+
if (uniforms.uOffset)
|
|
506
|
+
gl.uniform1f(uniforms.uOffset, r.offset);
|
|
507
|
+
if (uniforms.uAmplitude)
|
|
508
|
+
gl.uniform1f(uniforms.uAmplitude, r.amplitude);
|
|
509
|
+
if (uniforms.uWavelength)
|
|
510
|
+
gl.uniform1f(uniforms.uWavelength, r.wavelength);
|
|
511
|
+
gl.bindVertexArray(vao);
|
|
512
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
513
|
+
gl.bindVertexArray(null);
|
|
514
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
515
|
+
gl.useProgram(null);
|
|
516
|
+
},
|
|
517
|
+
cleanup: ({
|
|
518
|
+
gl,
|
|
519
|
+
program,
|
|
520
|
+
vao,
|
|
521
|
+
vbo,
|
|
522
|
+
sourceTexture,
|
|
523
|
+
paletteTexture
|
|
524
|
+
}) => {
|
|
525
|
+
gl.deleteTexture(sourceTexture);
|
|
526
|
+
gl.deleteTexture(paletteTexture);
|
|
527
|
+
gl.deleteBuffer(vbo);
|
|
528
|
+
gl.deleteProgram(program);
|
|
529
|
+
gl.deleteVertexArray(vao);
|
|
530
|
+
},
|
|
531
|
+
schema: zigzagSchema,
|
|
532
|
+
validateParams: validateZigzagParams
|
|
533
|
+
});
|
|
534
|
+
export {
|
|
535
|
+
zigzagSchema,
|
|
536
|
+
zigzag
|
|
537
|
+
};
|
package/dist/evolve.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export declare const evolveSchema: {
|
|
|
8
8
|
readonly step: 0.01;
|
|
9
9
|
readonly default: 0.5;
|
|
10
10
|
readonly description: "Progress";
|
|
11
|
+
readonly hiddenFromList: false;
|
|
11
12
|
};
|
|
12
13
|
readonly direction: {
|
|
13
14
|
readonly type: "enum";
|
|
@@ -27,6 +28,7 @@ export declare const evolveSchema: {
|
|
|
27
28
|
readonly step: 0.01;
|
|
28
29
|
readonly default: 0.1;
|
|
29
30
|
readonly description: "Feather";
|
|
31
|
+
readonly hiddenFromList: false;
|
|
30
32
|
};
|
|
31
33
|
};
|
|
32
34
|
export type EvolveParams = {
|
|
@@ -7,6 +7,7 @@ export declare const halftoneLinearGradientSchema: {
|
|
|
7
7
|
readonly step: 1;
|
|
8
8
|
readonly default: 0;
|
|
9
9
|
readonly description: "First stop dot size";
|
|
10
|
+
readonly hiddenFromList: false;
|
|
10
11
|
};
|
|
11
12
|
readonly secondStopDotSize: {
|
|
12
13
|
readonly type: "number";
|
|
@@ -15,6 +16,7 @@ export declare const halftoneLinearGradientSchema: {
|
|
|
15
16
|
readonly step: 1;
|
|
16
17
|
readonly default: 40;
|
|
17
18
|
readonly description: "Second stop dot size";
|
|
19
|
+
readonly hiddenFromList: false;
|
|
18
20
|
};
|
|
19
21
|
readonly firstStopPosition: {
|
|
20
22
|
readonly type: "uv-coordinate";
|
|
@@ -39,6 +41,7 @@ export declare const halftoneLinearGradientSchema: {
|
|
|
39
41
|
readonly step: 1;
|
|
40
42
|
readonly default: 24;
|
|
41
43
|
readonly description: "Grid size";
|
|
44
|
+
readonly hiddenFromList: false;
|
|
42
45
|
};
|
|
43
46
|
readonly colorMode: {
|
|
44
47
|
readonly type: "enum";
|
package/dist/halftone.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare const halftoneSchema: {
|
|
|
9
9
|
readonly step: 1;
|
|
10
10
|
readonly default: 20;
|
|
11
11
|
readonly description: "Dot size";
|
|
12
|
+
readonly hiddenFromList: false;
|
|
12
13
|
};
|
|
13
14
|
readonly dotSpacing: {
|
|
14
15
|
readonly type: "number";
|
|
@@ -17,11 +18,10 @@ export declare const halftoneSchema: {
|
|
|
17
18
|
readonly step: 1;
|
|
18
19
|
readonly default: 20;
|
|
19
20
|
readonly description: "Dot spacing";
|
|
21
|
+
readonly hiddenFromList: false;
|
|
20
22
|
};
|
|
21
23
|
readonly rotation: {
|
|
22
|
-
readonly type: "
|
|
23
|
-
readonly min: -180;
|
|
24
|
-
readonly max: 180;
|
|
24
|
+
readonly type: "rotation-degrees";
|
|
25
25
|
readonly step: 1;
|
|
26
26
|
readonly default: 0;
|
|
27
27
|
readonly description: "Rotation";
|
|
@@ -31,12 +31,14 @@ export declare const halftoneSchema: {
|
|
|
31
31
|
readonly step: 1;
|
|
32
32
|
readonly default: 0;
|
|
33
33
|
readonly description: "Offset X";
|
|
34
|
+
readonly hiddenFromList: false;
|
|
34
35
|
};
|
|
35
36
|
readonly offsetY: {
|
|
36
37
|
readonly type: "number";
|
|
37
38
|
readonly step: 1;
|
|
38
39
|
readonly default: 0;
|
|
39
40
|
readonly description: "Offset Y";
|
|
41
|
+
readonly hiddenFromList: false;
|
|
40
42
|
};
|
|
41
43
|
readonly shape: {
|
|
42
44
|
readonly type: "enum";
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export { rings, type RingsCenter, type RingsParams } from './rings.js';
|
|
2
|
+
export { zigzag, type ZigzagDirection, type ZigzagParams } from './zigzag.js';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type LinearProgressiveBlurUvCoordinate = readonly [number, number];
|
|
2
|
+
export type LinearProgressiveBlurParams = {
|
|
3
|
+
/**
|
|
4
|
+
* UV coordinate where `startBlur` is reached. Defaults to `[0, 0.5]`.
|
|
5
|
+
*/
|
|
6
|
+
readonly start?: LinearProgressiveBlurUvCoordinate;
|
|
7
|
+
/**
|
|
8
|
+
* UV coordinate where `endBlur` is reached. Defaults to `[1, 0.5]`.
|
|
9
|
+
*/
|
|
10
|
+
readonly end?: LinearProgressiveBlurUvCoordinate;
|
|
11
|
+
/**
|
|
12
|
+
* Blur radius in pixels at `start`. Defaults to `0`.
|
|
13
|
+
*/
|
|
14
|
+
readonly startBlur?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Blur radius in pixels at `end`. Defaults to `50`.
|
|
17
|
+
*/
|
|
18
|
+
readonly endBlur?: number;
|
|
19
|
+
};
|
|
20
|
+
export type LinearProgressiveBlurResolved = {
|
|
21
|
+
readonly start: LinearProgressiveBlurUvCoordinate;
|
|
22
|
+
readonly end: LinearProgressiveBlurUvCoordinate;
|
|
23
|
+
readonly startBlur: number;
|
|
24
|
+
readonly endBlur: number;
|
|
25
|
+
};
|
|
26
|
+
export declare const linearProgressiveBlur: (params?: (LinearProgressiveBlurParams & {
|
|
27
|
+
readonly disabled?: boolean | undefined;
|
|
28
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { LinearProgressiveBlurResolved } from './index.js';
|
|
2
|
+
type LinearProgressiveBlurUniforms = {
|
|
3
|
+
readonly uSource: WebGLUniformLocation | null;
|
|
4
|
+
readonly uTexelSize: WebGLUniformLocation | null;
|
|
5
|
+
readonly uStart: WebGLUniformLocation | null;
|
|
6
|
+
readonly uEnd: WebGLUniformLocation | null;
|
|
7
|
+
readonly uStartBlur: WebGLUniformLocation | null;
|
|
8
|
+
readonly uEndBlur: WebGLUniformLocation | null;
|
|
9
|
+
};
|
|
10
|
+
export type LinearProgressiveBlurState = {
|
|
11
|
+
readonly gl: WebGL2RenderingContext;
|
|
12
|
+
readonly programHorizontal: WebGLProgram;
|
|
13
|
+
readonly programVertical: WebGLProgram;
|
|
14
|
+
readonly vao: WebGLVertexArrayObject;
|
|
15
|
+
readonly vbo: WebGLBuffer;
|
|
16
|
+
readonly textureSource: WebGLTexture;
|
|
17
|
+
readonly textureIntermediate: WebGLTexture;
|
|
18
|
+
readonly framebuffer: WebGLFramebuffer;
|
|
19
|
+
readonly horizontal: LinearProgressiveBlurUniforms;
|
|
20
|
+
readonly vertical: LinearProgressiveBlurUniforms;
|
|
21
|
+
};
|
|
22
|
+
export declare const setupLinearProgressiveBlur: (target: HTMLCanvasElement) => LinearProgressiveBlurState;
|
|
23
|
+
export declare const cleanupLinearProgressiveBlur: (state: LinearProgressiveBlurState) => void;
|
|
24
|
+
export declare const applyLinearProgressiveBlur: ({ state, source, width, height, params, flipSourceY, }: {
|
|
25
|
+
readonly state: LinearProgressiveBlurState;
|
|
26
|
+
readonly source: CanvasImageSource;
|
|
27
|
+
readonly width: number;
|
|
28
|
+
readonly height: number;
|
|
29
|
+
readonly params: LinearProgressiveBlurResolved;
|
|
30
|
+
readonly flipSourceY: boolean;
|
|
31
|
+
}) => void;
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const LINEAR_PROGRESSIVE_BLUR_VS = "#version 300 es\nlayout(location = 0) in vec2 aPos;\nlayout(location = 1) in vec2 aUv;\nout vec2 vUv;\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
|
|
2
|
+
export declare const buildLinearProgressiveBlurFs: (direction: "horizontal" | "vertical") => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { linearProgressiveBlur, type LinearProgressiveBlurParams, type LinearProgressiveBlurUvCoordinate, } from './linear-progressive-blur/index.js';
|