@remotion/effects 4.0.477 → 4.0.479
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/burlap.d.ts +15 -0
- package/dist/contour-lines.d.ts +114 -0
- package/dist/esm/barrel-distortion.mjs +1 -1
- package/dist/esm/blur.mjs +1 -1
- package/dist/esm/brightness.mjs +1 -1
- package/dist/esm/burlap.mjs +454 -0
- package/dist/esm/chromatic-aberration.mjs +1 -1
- package/dist/esm/color-key.mjs +1 -1
- package/dist/esm/contour-lines.mjs +567 -0
- package/dist/esm/contrast.mjs +1 -1
- package/dist/esm/dot-grid.mjs +1 -1
- package/dist/esm/drop-shadow.mjs +1 -1
- package/dist/esm/duotone.mjs +1 -1
- package/dist/esm/evolve.mjs +1 -1
- package/dist/esm/fisheye.mjs +1 -1
- package/dist/esm/glow.mjs +1 -1
- package/dist/esm/grayscale.mjs +1 -1
- package/dist/esm/halftone-linear-gradient.mjs +1 -1
- package/dist/esm/halftone.mjs +20 -1
- package/dist/esm/hue.mjs +1 -1
- package/dist/esm/index.mjs +8 -15
- package/dist/esm/invert.mjs +1 -1
- package/dist/esm/linear-progressive-blur.mjs +1 -1
- package/dist/esm/lines.mjs +1 -1
- package/dist/esm/mirror.mjs +1 -1
- package/dist/esm/noise-displacement.mjs +1 -1
- package/dist/esm/noise.mjs +1 -1
- package/dist/esm/pattern.mjs +1 -8
- package/dist/esm/pixel-dissolve.mjs +7 -6
- package/dist/esm/pixelate.mjs +306 -0
- package/dist/esm/rings.mjs +1 -1
- package/dist/esm/saturation.mjs +1 -1
- package/dist/esm/scale.mjs +1 -1
- package/dist/esm/scanlines.mjs +1 -1
- package/dist/esm/shine.mjs +1 -1
- package/dist/esm/shrinkwrap.mjs +606 -0
- package/dist/esm/speckle.mjs +1 -1
- package/dist/esm/thermal-vision.mjs +404 -0
- package/dist/esm/tint.mjs +1 -1
- package/dist/esm/translate.mjs +2 -2
- package/dist/esm/tv-signal-off.mjs +1 -1
- package/dist/esm/vignette.mjs +1 -1
- package/dist/esm/wave.mjs +1 -1
- package/dist/esm/waves.mjs +1 -1
- package/dist/esm/white-noise.mjs +1 -1
- package/dist/esm/zigzag.mjs +1 -1
- package/dist/pixelate.d.ts +6 -0
- package/dist/shrinkwrap.d.ts +19 -0
- package/dist/thermal-vision.d.ts +31 -0
- package/dist/visual-test/visual-utils.d.ts +5 -0
- package/package.json +43 -3
- package/dist/effect-internals.d.ts +0 -8
- package/dist/entrypoints/blur.d.ts +0 -6
|
@@ -0,0 +1,567 @@
|
|
|
1
|
+
// src/contour-lines.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
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
// src/color-utils.ts
|
|
36
|
+
var DEFAULT_AMOUNT = 1;
|
|
37
|
+
var DEFAULT_BRIGHTNESS_AMOUNT = 0;
|
|
38
|
+
var DEFAULT_HUE_DEGREES = 0;
|
|
39
|
+
var colorAmountSchema = {
|
|
40
|
+
type: "number",
|
|
41
|
+
min: 0,
|
|
42
|
+
max: 1,
|
|
43
|
+
step: 0.01,
|
|
44
|
+
default: DEFAULT_AMOUNT,
|
|
45
|
+
description: "Amount",
|
|
46
|
+
hiddenFromList: false
|
|
47
|
+
};
|
|
48
|
+
var colorMultiplierSchema = {
|
|
49
|
+
type: "number",
|
|
50
|
+
min: 0,
|
|
51
|
+
step: 0.01,
|
|
52
|
+
default: DEFAULT_AMOUNT,
|
|
53
|
+
description: "Amount",
|
|
54
|
+
hiddenFromList: false
|
|
55
|
+
};
|
|
56
|
+
var brightnessAmountSchema = {
|
|
57
|
+
type: "number",
|
|
58
|
+
min: -1,
|
|
59
|
+
max: 1,
|
|
60
|
+
step: 0.01,
|
|
61
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
62
|
+
description: "Amount",
|
|
63
|
+
hiddenFromList: false
|
|
64
|
+
};
|
|
65
|
+
var hueDegreesSchema = {
|
|
66
|
+
type: "rotation-degrees",
|
|
67
|
+
step: 1,
|
|
68
|
+
default: DEFAULT_HUE_DEGREES,
|
|
69
|
+
description: "Degrees"
|
|
70
|
+
};
|
|
71
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
72
|
+
if (value === undefined) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
assertRequiredFiniteNumber(value, name);
|
|
76
|
+
};
|
|
77
|
+
var validateUnitInterval = (value, name) => {
|
|
78
|
+
if (value < 0) {
|
|
79
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
80
|
+
}
|
|
81
|
+
if (value > 1) {
|
|
82
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var validateNonNegative = (value, name) => {
|
|
86
|
+
if (value < 0) {
|
|
87
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
91
|
+
if (value < -1) {
|
|
92
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
93
|
+
}
|
|
94
|
+
if (value > 1) {
|
|
95
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
var clampColorChannel = (value) => {
|
|
99
|
+
return Math.max(0, Math.min(255, value));
|
|
100
|
+
};
|
|
101
|
+
var parseColorRgba = (ctx, color) => {
|
|
102
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
103
|
+
ctx.fillStyle = color;
|
|
104
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
105
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
106
|
+
return [data[0], data[1], data[2], data[3]];
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
// src/contour-lines.ts
|
|
110
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
+
var DEFAULT_LINE_COLOR = "#ffffff";
|
|
112
|
+
var DEFAULT_LINE_WIDTH = 1.5;
|
|
113
|
+
var DEFAULT_SPACING = 36;
|
|
114
|
+
var DEFAULT_SCALE = 220;
|
|
115
|
+
var DEFAULT_COMPLEXITY = 0.65;
|
|
116
|
+
var DEFAULT_SMOOTHNESS = 0.55;
|
|
117
|
+
var DEFAULT_SEED = 0;
|
|
118
|
+
var DEFAULT_OFFSET_X = 0;
|
|
119
|
+
var DEFAULT_OFFSET_Y = 0;
|
|
120
|
+
var DEFAULT_OPACITY = 1;
|
|
121
|
+
var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
|
|
122
|
+
var contourLinesSchema = {
|
|
123
|
+
lineColor: {
|
|
124
|
+
type: "color",
|
|
125
|
+
default: DEFAULT_LINE_COLOR,
|
|
126
|
+
description: "Line color"
|
|
127
|
+
},
|
|
128
|
+
lineWidth: {
|
|
129
|
+
type: "number",
|
|
130
|
+
min: 0.1,
|
|
131
|
+
max: 20,
|
|
132
|
+
step: 0.1,
|
|
133
|
+
default: DEFAULT_LINE_WIDTH,
|
|
134
|
+
description: "Line width",
|
|
135
|
+
hiddenFromList: false
|
|
136
|
+
},
|
|
137
|
+
spacing: {
|
|
138
|
+
type: "number",
|
|
139
|
+
min: 1,
|
|
140
|
+
max: 200,
|
|
141
|
+
step: 1,
|
|
142
|
+
default: DEFAULT_SPACING,
|
|
143
|
+
description: "Spacing",
|
|
144
|
+
hiddenFromList: false
|
|
145
|
+
},
|
|
146
|
+
scale: {
|
|
147
|
+
type: "number",
|
|
148
|
+
min: 20,
|
|
149
|
+
max: 1000,
|
|
150
|
+
step: 1,
|
|
151
|
+
default: DEFAULT_SCALE,
|
|
152
|
+
description: "Scale",
|
|
153
|
+
hiddenFromList: false
|
|
154
|
+
},
|
|
155
|
+
complexity: {
|
|
156
|
+
type: "number",
|
|
157
|
+
min: 0,
|
|
158
|
+
max: 1,
|
|
159
|
+
step: 0.01,
|
|
160
|
+
default: DEFAULT_COMPLEXITY,
|
|
161
|
+
description: "Complexity",
|
|
162
|
+
hiddenFromList: false
|
|
163
|
+
},
|
|
164
|
+
smoothness: {
|
|
165
|
+
type: "number",
|
|
166
|
+
min: 0,
|
|
167
|
+
max: 1,
|
|
168
|
+
step: 0.01,
|
|
169
|
+
default: DEFAULT_SMOOTHNESS,
|
|
170
|
+
description: "Smoothness",
|
|
171
|
+
hiddenFromList: false
|
|
172
|
+
},
|
|
173
|
+
seed: {
|
|
174
|
+
type: "number",
|
|
175
|
+
step: 1,
|
|
176
|
+
default: DEFAULT_SEED,
|
|
177
|
+
description: "Seed",
|
|
178
|
+
hiddenFromList: false
|
|
179
|
+
},
|
|
180
|
+
offsetX: {
|
|
181
|
+
type: "number",
|
|
182
|
+
step: 0.1,
|
|
183
|
+
default: DEFAULT_OFFSET_X,
|
|
184
|
+
description: "Offset X",
|
|
185
|
+
hiddenFromList: false
|
|
186
|
+
},
|
|
187
|
+
offsetY: {
|
|
188
|
+
type: "number",
|
|
189
|
+
step: 0.1,
|
|
190
|
+
default: DEFAULT_OFFSET_Y,
|
|
191
|
+
description: "Offset Y",
|
|
192
|
+
hiddenFromList: false
|
|
193
|
+
},
|
|
194
|
+
opacity: {
|
|
195
|
+
type: "number",
|
|
196
|
+
min: 0,
|
|
197
|
+
max: 1,
|
|
198
|
+
step: 0.01,
|
|
199
|
+
default: DEFAULT_OPACITY,
|
|
200
|
+
description: "Opacity",
|
|
201
|
+
hiddenFromList: false
|
|
202
|
+
},
|
|
203
|
+
maskToSourceAlpha: {
|
|
204
|
+
type: "boolean",
|
|
205
|
+
default: DEFAULT_MASK_TO_SOURCE_ALPHA,
|
|
206
|
+
description: "Mask to source alpha"
|
|
207
|
+
}
|
|
208
|
+
};
|
|
209
|
+
var resolve = (p) => ({
|
|
210
|
+
lineColor: p.lineColor ?? DEFAULT_LINE_COLOR,
|
|
211
|
+
lineWidth: p.lineWidth ?? DEFAULT_LINE_WIDTH,
|
|
212
|
+
spacing: p.spacing ?? DEFAULT_SPACING,
|
|
213
|
+
scale: p.scale ?? DEFAULT_SCALE,
|
|
214
|
+
complexity: p.complexity ?? DEFAULT_COMPLEXITY,
|
|
215
|
+
smoothness: p.smoothness ?? DEFAULT_SMOOTHNESS,
|
|
216
|
+
seed: p.seed ?? DEFAULT_SEED,
|
|
217
|
+
offsetX: p.offsetX ?? DEFAULT_OFFSET_X,
|
|
218
|
+
offsetY: p.offsetY ?? DEFAULT_OFFSET_Y,
|
|
219
|
+
opacity: p.opacity ?? DEFAULT_OPACITY,
|
|
220
|
+
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
|
|
221
|
+
});
|
|
222
|
+
var validatePositive = (value, name) => {
|
|
223
|
+
if (value <= 0) {
|
|
224
|
+
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
var validateContourLinesParams = (params) => {
|
|
228
|
+
assertEffectParamsObject(params, "Contour lines");
|
|
229
|
+
assertOptionalColor(params.lineColor, "lineColor");
|
|
230
|
+
assertOptionalFiniteNumber(params.lineWidth, "lineWidth");
|
|
231
|
+
assertOptionalFiniteNumber(params.spacing, "spacing");
|
|
232
|
+
assertOptionalFiniteNumber(params.scale, "scale");
|
|
233
|
+
assertOptionalFiniteNumber(params.complexity, "complexity");
|
|
234
|
+
assertOptionalFiniteNumber(params.smoothness, "smoothness");
|
|
235
|
+
assertOptionalFiniteNumber(params.seed, "seed");
|
|
236
|
+
assertOptionalFiniteNumber(params.offsetX, "offsetX");
|
|
237
|
+
assertOptionalFiniteNumber(params.offsetY, "offsetY");
|
|
238
|
+
assertOptionalFiniteNumber(params.opacity, "opacity");
|
|
239
|
+
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
240
|
+
const r = resolve(params);
|
|
241
|
+
validatePositive(r.lineWidth, "lineWidth");
|
|
242
|
+
validatePositive(r.spacing, "spacing");
|
|
243
|
+
validatePositive(r.scale, "scale");
|
|
244
|
+
validateUnitInterval(r.complexity, "complexity");
|
|
245
|
+
validateUnitInterval(r.smoothness, "smoothness");
|
|
246
|
+
validateUnitInterval(r.opacity, "opacity");
|
|
247
|
+
};
|
|
248
|
+
var CONTOUR_LINES_VS = `#version 300 es
|
|
249
|
+
in vec2 aPos;
|
|
250
|
+
in vec2 aUv;
|
|
251
|
+
out vec2 vUv;
|
|
252
|
+
|
|
253
|
+
void main() {
|
|
254
|
+
vUv = aUv;
|
|
255
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
256
|
+
}
|
|
257
|
+
`;
|
|
258
|
+
var CONTOUR_LINES_FS = `#version 300 es
|
|
259
|
+
precision highp float;
|
|
260
|
+
|
|
261
|
+
in vec2 vUv;
|
|
262
|
+
out vec4 fragColor;
|
|
263
|
+
|
|
264
|
+
uniform sampler2D uSource;
|
|
265
|
+
uniform vec2 uResolution;
|
|
266
|
+
uniform vec4 uLineColor;
|
|
267
|
+
uniform float uLineWidth;
|
|
268
|
+
uniform float uSpacing;
|
|
269
|
+
uniform float uScale;
|
|
270
|
+
uniform float uComplexity;
|
|
271
|
+
uniform float uSmoothness;
|
|
272
|
+
uniform float uSeed;
|
|
273
|
+
uniform vec2 uOffset;
|
|
274
|
+
uniform float uOpacity;
|
|
275
|
+
uniform bool uMaskToSourceAlpha;
|
|
276
|
+
|
|
277
|
+
float hash(vec2 p) {
|
|
278
|
+
vec3 p3 = fract(vec3(p.xyx) * 0.1031);
|
|
279
|
+
p3 += dot(p3, p3.yzx + 33.33 + uSeed * 0.013);
|
|
280
|
+
return fract((p3.x + p3.y) * p3.z);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
float valueNoise(vec2 p) {
|
|
284
|
+
vec2 i = floor(p);
|
|
285
|
+
vec2 f = fract(p);
|
|
286
|
+
vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
|
|
287
|
+
|
|
288
|
+
float a = hash(i);
|
|
289
|
+
float b = hash(i + vec2(1.0, 0.0));
|
|
290
|
+
float c = hash(i + vec2(0.0, 1.0));
|
|
291
|
+
float d = hash(i + vec2(1.0, 1.0));
|
|
292
|
+
|
|
293
|
+
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
float fbm(vec2 p) {
|
|
297
|
+
float value = 0.0;
|
|
298
|
+
float amplitude = 0.5;
|
|
299
|
+
float totalAmplitude = 0.0;
|
|
300
|
+
float persistence = mix(0.18, 0.58, clamp(uComplexity, 0.0, 1.0));
|
|
301
|
+
float smoothness = clamp(uSmoothness, 0.0, 1.0);
|
|
302
|
+
mat2 rotate = mat2(0.80, 0.60, -0.60, 0.80);
|
|
303
|
+
|
|
304
|
+
for (int i = 0; i < 5; i++) {
|
|
305
|
+
float octave = float(i) / 4.0;
|
|
306
|
+
float detailWeight = mix(
|
|
307
|
+
1.0,
|
|
308
|
+
1.0 - smoothstep(0.15, 1.0, octave),
|
|
309
|
+
smoothness
|
|
310
|
+
);
|
|
311
|
+
value += amplitude * detailWeight * valueNoise(p);
|
|
312
|
+
totalAmplitude += amplitude * detailWeight;
|
|
313
|
+
p = rotate * p * 2.04 + vec2(13.17, 7.31);
|
|
314
|
+
amplitude *= persistence;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
return value / totalAmplitude;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
void main() {
|
|
321
|
+
vec4 texColor = texture(uSource, vUv);
|
|
322
|
+
vec2 pixelPosition = vUv * uResolution + uOffset;
|
|
323
|
+
float scale = max(uScale, 0.001);
|
|
324
|
+
vec2 p = pixelPosition / scale + vec2(uSeed * 0.137, uSeed * 0.193);
|
|
325
|
+
|
|
326
|
+
float complexity = clamp(uComplexity, 0.0, 1.0);
|
|
327
|
+
float smoothness = clamp(uSmoothness, 0.0, 1.0);
|
|
328
|
+
vec2 warp = vec2(
|
|
329
|
+
fbm(p + vec2(5.2, 1.3)),
|
|
330
|
+
fbm(p + vec2(1.7, 9.2))
|
|
331
|
+
) - 0.5;
|
|
332
|
+
float terrain = fbm(p + warp * complexity * mix(2.8, 1.2, smoothness));
|
|
333
|
+
|
|
334
|
+
float levels = max(
|
|
335
|
+
max(uResolution.x, uResolution.y) / (max(uSpacing, 0.001) * 2.0),
|
|
336
|
+
1.0
|
|
337
|
+
);
|
|
338
|
+
float contourPosition = terrain * levels;
|
|
339
|
+
float contourFraction = fract(contourPosition);
|
|
340
|
+
float distanceToContour = min(contourFraction, 1.0 - contourFraction);
|
|
341
|
+
float derivative = max(fwidth(contourPosition), 0.0001);
|
|
342
|
+
float halfLineWidth = max(uLineWidth, 0.001) * 0.5 * derivative;
|
|
343
|
+
float coverage = 1.0 - smoothstep(
|
|
344
|
+
halfLineWidth,
|
|
345
|
+
halfLineWidth + derivative,
|
|
346
|
+
distanceToContour
|
|
347
|
+
);
|
|
348
|
+
|
|
349
|
+
float lineAlpha = uLineColor.a * uOpacity * coverage;
|
|
350
|
+
vec3 premultipliedLine = uLineColor.rgb * lineAlpha;
|
|
351
|
+
|
|
352
|
+
if (uMaskToSourceAlpha) {
|
|
353
|
+
fragColor = vec4(
|
|
354
|
+
premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
|
|
355
|
+
texColor.a
|
|
356
|
+
);
|
|
357
|
+
return;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
fragColor = vec4(
|
|
361
|
+
premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
|
|
362
|
+
lineAlpha + texColor.a * (1.0 - lineAlpha)
|
|
363
|
+
);
|
|
364
|
+
}
|
|
365
|
+
`;
|
|
366
|
+
var compileShader = (gl, type, source) => {
|
|
367
|
+
const shader = gl.createShader(type);
|
|
368
|
+
if (!shader) {
|
|
369
|
+
throw new Error("Failed to create WebGL shader");
|
|
370
|
+
}
|
|
371
|
+
gl.shaderSource(shader, source);
|
|
372
|
+
gl.compileShader(shader);
|
|
373
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
374
|
+
const log = gl.getShaderInfoLog(shader);
|
|
375
|
+
gl.deleteShader(shader);
|
|
376
|
+
throw new Error(`Contour lines shader compile failed: ${log ?? "(no log)"}`);
|
|
377
|
+
}
|
|
378
|
+
return shader;
|
|
379
|
+
};
|
|
380
|
+
var linkProgram = (gl, vs, fs) => {
|
|
381
|
+
const program = gl.createProgram();
|
|
382
|
+
if (!program) {
|
|
383
|
+
throw new Error("Failed to create WebGL program");
|
|
384
|
+
}
|
|
385
|
+
gl.attachShader(program, vs);
|
|
386
|
+
gl.attachShader(program, fs);
|
|
387
|
+
gl.linkProgram(program);
|
|
388
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
389
|
+
const log = gl.getProgramInfoLog(program);
|
|
390
|
+
gl.deleteProgram(program);
|
|
391
|
+
throw new Error(`Contour lines program link failed: ${log ?? "(no log)"}`);
|
|
392
|
+
}
|
|
393
|
+
return program;
|
|
394
|
+
};
|
|
395
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
396
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
397
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
398
|
+
const program = linkProgram(gl, vs, fs);
|
|
399
|
+
gl.deleteShader(vs);
|
|
400
|
+
gl.deleteShader(fs);
|
|
401
|
+
return program;
|
|
402
|
+
};
|
|
403
|
+
var createTexture = (gl) => {
|
|
404
|
+
const texture = gl.createTexture();
|
|
405
|
+
if (!texture) {
|
|
406
|
+
throw new Error("Failed to create WebGL texture");
|
|
407
|
+
}
|
|
408
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
409
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
410
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
411
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
412
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
413
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
414
|
+
return texture;
|
|
415
|
+
};
|
|
416
|
+
var setupContourLines = (target) => {
|
|
417
|
+
const gl = target.getContext("webgl2", {
|
|
418
|
+
premultipliedAlpha: true,
|
|
419
|
+
alpha: true,
|
|
420
|
+
preserveDrawingBuffer: true
|
|
421
|
+
});
|
|
422
|
+
if (!gl) {
|
|
423
|
+
throw createWebGL2ContextError("contour lines effect");
|
|
424
|
+
}
|
|
425
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
426
|
+
const program = createProgram(gl, CONTOUR_LINES_VS, CONTOUR_LINES_FS);
|
|
427
|
+
const vao = gl.createVertexArray();
|
|
428
|
+
if (!vao) {
|
|
429
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
430
|
+
}
|
|
431
|
+
gl.bindVertexArray(vao);
|
|
432
|
+
const data = new Float32Array([
|
|
433
|
+
-1,
|
|
434
|
+
-1,
|
|
435
|
+
0,
|
|
436
|
+
0,
|
|
437
|
+
1,
|
|
438
|
+
-1,
|
|
439
|
+
1,
|
|
440
|
+
0,
|
|
441
|
+
-1,
|
|
442
|
+
1,
|
|
443
|
+
0,
|
|
444
|
+
1,
|
|
445
|
+
1,
|
|
446
|
+
1,
|
|
447
|
+
1,
|
|
448
|
+
1
|
|
449
|
+
]);
|
|
450
|
+
const vbo = gl.createBuffer();
|
|
451
|
+
if (!vbo) {
|
|
452
|
+
throw new Error("Failed to create WebGL buffer");
|
|
453
|
+
}
|
|
454
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
455
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
456
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
457
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
458
|
+
gl.enableVertexAttribArray(aPos);
|
|
459
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
460
|
+
gl.enableVertexAttribArray(aUv);
|
|
461
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
462
|
+
gl.bindVertexArray(null);
|
|
463
|
+
const colorCanvas = document.createElement("canvas");
|
|
464
|
+
colorCanvas.width = 1;
|
|
465
|
+
colorCanvas.height = 1;
|
|
466
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
467
|
+
if (!colorCtx) {
|
|
468
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
469
|
+
}
|
|
470
|
+
return {
|
|
471
|
+
gl,
|
|
472
|
+
program,
|
|
473
|
+
vao,
|
|
474
|
+
vbo,
|
|
475
|
+
sourceTexture: createTexture(gl),
|
|
476
|
+
colorCtx,
|
|
477
|
+
uniforms: {
|
|
478
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
479
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
480
|
+
uLineColor: gl.getUniformLocation(program, "uLineColor"),
|
|
481
|
+
uLineWidth: gl.getUniformLocation(program, "uLineWidth"),
|
|
482
|
+
uSpacing: gl.getUniformLocation(program, "uSpacing"),
|
|
483
|
+
uScale: gl.getUniformLocation(program, "uScale"),
|
|
484
|
+
uComplexity: gl.getUniformLocation(program, "uComplexity"),
|
|
485
|
+
uSmoothness: gl.getUniformLocation(program, "uSmoothness"),
|
|
486
|
+
uSeed: gl.getUniformLocation(program, "uSeed"),
|
|
487
|
+
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
488
|
+
uOpacity: gl.getUniformLocation(program, "uOpacity"),
|
|
489
|
+
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
490
|
+
},
|
|
491
|
+
cachedLineColor: "",
|
|
492
|
+
cachedLineColorRgba: [255, 255, 255, 255]
|
|
493
|
+
};
|
|
494
|
+
};
|
|
495
|
+
var contourLines = createEffect({
|
|
496
|
+
type: "dev.remotion.effects.contourLines",
|
|
497
|
+
label: "contourLines()",
|
|
498
|
+
documentationLink: "https://www.remotion.dev/docs/effects/contour-lines",
|
|
499
|
+
backend: "webgl2",
|
|
500
|
+
calculateKey: (params) => {
|
|
501
|
+
const r = resolve(params);
|
|
502
|
+
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
503
|
+
return `contour-lines-${r.lineColor}-${r.lineWidth}-${r.spacing}-${r.scale}-${r.complexity}-${r.smoothness}-${r.seed}-${r.offsetX}-${r.offsetY}-${r.opacity}${maskSuffix}`;
|
|
504
|
+
},
|
|
505
|
+
setup: (target) => setupContourLines(target),
|
|
506
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
507
|
+
const r = resolve(params);
|
|
508
|
+
const { gl, program, sourceTexture, uniforms, vao } = state;
|
|
509
|
+
if (state.cachedLineColor !== r.lineColor) {
|
|
510
|
+
state.cachedLineColor = r.lineColor;
|
|
511
|
+
state.cachedLineColorRgba = parseColorRgba(state.colorCtx, r.lineColor);
|
|
512
|
+
}
|
|
513
|
+
const [cr, cg, cb, ca] = state.cachedLineColorRgba;
|
|
514
|
+
gl.viewport(0, 0, width, height);
|
|
515
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
516
|
+
gl.clearColor(0, 0, 0, 0);
|
|
517
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
518
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
519
|
+
gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
|
|
520
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
521
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
522
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
523
|
+
gl.useProgram(program);
|
|
524
|
+
if (uniforms.uSource)
|
|
525
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
526
|
+
if (uniforms.uResolution)
|
|
527
|
+
gl.uniform2f(uniforms.uResolution, width, height);
|
|
528
|
+
if (uniforms.uLineColor) {
|
|
529
|
+
gl.uniform4f(uniforms.uLineColor, cr / 255, cg / 255, cb / 255, ca / 255);
|
|
530
|
+
}
|
|
531
|
+
if (uniforms.uLineWidth)
|
|
532
|
+
gl.uniform1f(uniforms.uLineWidth, r.lineWidth);
|
|
533
|
+
if (uniforms.uSpacing)
|
|
534
|
+
gl.uniform1f(uniforms.uSpacing, r.spacing);
|
|
535
|
+
if (uniforms.uScale)
|
|
536
|
+
gl.uniform1f(uniforms.uScale, r.scale);
|
|
537
|
+
if (uniforms.uComplexity)
|
|
538
|
+
gl.uniform1f(uniforms.uComplexity, r.complexity);
|
|
539
|
+
if (uniforms.uSmoothness)
|
|
540
|
+
gl.uniform1f(uniforms.uSmoothness, r.smoothness);
|
|
541
|
+
if (uniforms.uSeed)
|
|
542
|
+
gl.uniform1f(uniforms.uSeed, r.seed);
|
|
543
|
+
if (uniforms.uOffset)
|
|
544
|
+
gl.uniform2f(uniforms.uOffset, r.offsetX, r.offsetY);
|
|
545
|
+
if (uniforms.uOpacity)
|
|
546
|
+
gl.uniform1f(uniforms.uOpacity, r.opacity);
|
|
547
|
+
if (uniforms.uMaskToSourceAlpha)
|
|
548
|
+
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
549
|
+
gl.bindVertexArray(vao);
|
|
550
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
551
|
+
gl.bindVertexArray(null);
|
|
552
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
553
|
+
gl.useProgram(null);
|
|
554
|
+
},
|
|
555
|
+
cleanup: ({ gl, program, vao, vbo, sourceTexture }) => {
|
|
556
|
+
gl.deleteTexture(sourceTexture);
|
|
557
|
+
gl.deleteBuffer(vbo);
|
|
558
|
+
gl.deleteProgram(program);
|
|
559
|
+
gl.deleteVertexArray(vao);
|
|
560
|
+
},
|
|
561
|
+
schema: contourLinesSchema,
|
|
562
|
+
validateParams: validateContourLinesParams
|
|
563
|
+
});
|
|
564
|
+
export {
|
|
565
|
+
contourLinesSchema,
|
|
566
|
+
contourLines
|
|
567
|
+
};
|
package/dist/esm/contrast.mjs
CHANGED
|
@@ -121,7 +121,7 @@ var validateContrastParams = (params) => {
|
|
|
121
121
|
validateNonNegative(amount, "amount");
|
|
122
122
|
};
|
|
123
123
|
var contrast = createEffect({
|
|
124
|
-
type: "remotion
|
|
124
|
+
type: "dev.remotion.effects.contrast",
|
|
125
125
|
label: "contrast()",
|
|
126
126
|
documentationLink: "https://www.remotion.dev/docs/effects/contrast",
|
|
127
127
|
backend: "2d",
|
package/dist/esm/dot-grid.mjs
CHANGED
|
@@ -238,7 +238,7 @@ var linkProgram = (gl, vs, fs) => {
|
|
|
238
238
|
return program;
|
|
239
239
|
};
|
|
240
240
|
var dotGrid = createEffect({
|
|
241
|
-
type: "remotion
|
|
241
|
+
type: "dev.remotion.effects.dotGrid",
|
|
242
242
|
label: "dotGrid()",
|
|
243
243
|
documentationLink: "https://www.remotion.dev/docs/effects/dot-grid",
|
|
244
244
|
backend: "webgl2",
|
package/dist/esm/drop-shadow.mjs
CHANGED
|
@@ -588,7 +588,7 @@ var validateDropShadowParams = (params) => {
|
|
|
588
588
|
validateUnitInterval(r.opacity, "opacity");
|
|
589
589
|
};
|
|
590
590
|
var dropShadow = createEffect({
|
|
591
|
-
type: "remotion
|
|
591
|
+
type: "dev.remotion.effects.dropShadow",
|
|
592
592
|
label: "dropShadow()",
|
|
593
593
|
documentationLink: "https://www.remotion.dev/docs/effects/drop-shadow",
|
|
594
594
|
backend: "webgl2",
|
package/dist/esm/duotone.mjs
CHANGED
|
@@ -324,7 +324,7 @@ var getParsedColors = (state, resolved) => {
|
|
|
324
324
|
};
|
|
325
325
|
};
|
|
326
326
|
var duotone = createEffect({
|
|
327
|
-
type: "remotion
|
|
327
|
+
type: "dev.remotion.effects.duotone",
|
|
328
328
|
label: "duotone()",
|
|
329
329
|
documentationLink: "https://www.remotion.dev/docs/effects/duotone",
|
|
330
330
|
backend: "webgl2",
|
package/dist/esm/evolve.mjs
CHANGED
|
@@ -361,7 +361,7 @@ var directionToInt = (direction) => {
|
|
|
361
361
|
}
|
|
362
362
|
};
|
|
363
363
|
var evolve = createEffect({
|
|
364
|
-
type: "remotion
|
|
364
|
+
type: "dev.remotion.effects.evolve",
|
|
365
365
|
label: "evolve()",
|
|
366
366
|
documentationLink: "https://www.remotion.dev/docs/effects/evolve",
|
|
367
367
|
backend: "webgl2",
|
package/dist/esm/fisheye.mjs
CHANGED
|
@@ -419,7 +419,7 @@ var validateFisheyeParams = (params) => {
|
|
|
419
419
|
validatePositive(resolved.zoom, "zoom");
|
|
420
420
|
};
|
|
421
421
|
var fisheye = createEffect({
|
|
422
|
-
type: "remotion
|
|
422
|
+
type: "dev.remotion.effects.fisheye",
|
|
423
423
|
label: "fisheye()",
|
|
424
424
|
documentationLink: "https://www.remotion.dev/docs/effects/fisheye",
|
|
425
425
|
backend: "webgl2",
|
package/dist/esm/glow.mjs
CHANGED
|
@@ -577,7 +577,7 @@ var validateGlowParams = (params) => {
|
|
|
577
577
|
validateUnitInterval(r.threshold, "threshold");
|
|
578
578
|
};
|
|
579
579
|
var glow = createEffect({
|
|
580
|
-
type: "remotion
|
|
580
|
+
type: "dev.remotion.effects.glow",
|
|
581
581
|
label: "glow()",
|
|
582
582
|
documentationLink: "https://www.remotion.dev/docs/effects/glow",
|
|
583
583
|
backend: "webgl2",
|
package/dist/esm/grayscale.mjs
CHANGED
|
@@ -121,7 +121,7 @@ var validateGrayscaleParams = (params) => {
|
|
|
121
121
|
validateUnitInterval(amount, "amount");
|
|
122
122
|
};
|
|
123
123
|
var grayscale = createEffect({
|
|
124
|
-
type: "remotion
|
|
124
|
+
type: "dev.remotion.effects.grayscale",
|
|
125
125
|
label: "grayscale()",
|
|
126
126
|
documentationLink: "https://www.remotion.dev/docs/effects/grayscale",
|
|
127
127
|
backend: "2d",
|
|
@@ -363,7 +363,7 @@ var linkProgram = (gl, vs, fs) => {
|
|
|
363
363
|
return program;
|
|
364
364
|
};
|
|
365
365
|
var halftoneLinearGradient = createEffect({
|
|
366
|
-
type: "remotion
|
|
366
|
+
type: "dev.remotion.effects.halftoneLinearGradient",
|
|
367
367
|
label: "halftoneLinearGradient()",
|
|
368
368
|
documentationLink: "https://www.remotion.dev/docs/effects/halftone-linear-gradient",
|
|
369
369
|
backend: "webgl2",
|
package/dist/esm/halftone.mjs
CHANGED
|
@@ -310,7 +310,26 @@ void main() {
|
|
|
310
310
|
coverage = (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.x)))
|
|
311
311
|
* (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.y)));
|
|
312
312
|
} else {
|
|
313
|
+
vec4 localTexColor = texture(uSource, vUv);
|
|
314
|
+
float localAlpha = localTexColor.a;
|
|
315
|
+
vec3 localRgb = localAlpha > 0.001 ? localTexColor.rgb / localAlpha : vec3(0.0);
|
|
316
|
+
float localLum = dot(localRgb, vec3(0.299, 0.587, 0.114));
|
|
317
|
+
float localLumDefault = localLum * localAlpha + (1.0 - localAlpha);
|
|
318
|
+
float localDotScale = uShadeOutside
|
|
319
|
+
? localLumDefault
|
|
320
|
+
: 1.0 - localLumDefault;
|
|
321
|
+
|
|
322
|
+
if (localDotScale <= 0.12) {
|
|
323
|
+
fragColor = vec4(0.0);
|
|
324
|
+
return;
|
|
325
|
+
}
|
|
326
|
+
|
|
313
327
|
float lineHalf = uDotSize * dotScale * 0.5;
|
|
328
|
+
if (lineHalf <= 1.0) {
|
|
329
|
+
fragColor = vec4(0.0);
|
|
330
|
+
return;
|
|
331
|
+
}
|
|
332
|
+
|
|
314
333
|
coverage = (1.0 - smoothstep(halfSize - 0.5, halfSize + 0.5, abs(diff.x)))
|
|
315
334
|
* (1.0 - smoothstep(lineHalf - 0.5, lineHalf + 0.5, abs(diff.y)));
|
|
316
335
|
}
|
|
@@ -353,7 +372,7 @@ var linkProgram = (gl, vs, fs) => {
|
|
|
353
372
|
return program;
|
|
354
373
|
};
|
|
355
374
|
var halftone = createEffect({
|
|
356
|
-
type: "remotion
|
|
375
|
+
type: "dev.remotion.effects.halftone",
|
|
357
376
|
label: "halftone()",
|
|
358
377
|
documentationLink: "https://www.remotion.dev/docs/effects/halftone",
|
|
359
378
|
backend: "webgl2",
|
package/dist/esm/hue.mjs
CHANGED
|
@@ -119,7 +119,7 @@ var validateHueParams = (params) => {
|
|
|
119
119
|
assertOptionalFiniteNumber(params.degrees, "degrees");
|
|
120
120
|
};
|
|
121
121
|
var hue = createEffect({
|
|
122
|
-
type: "remotion
|
|
122
|
+
type: "dev.remotion.effects.hue",
|
|
123
123
|
label: "hue()",
|
|
124
124
|
documentationLink: "https://www.remotion.dev/docs/effects/hue",
|
|
125
125
|
backend: "2d",
|