@remotion/effects 4.0.478 → 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/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 +1 -1
- 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 +3 -3
- 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 -1
- package/dist/esm/pixel-dissolve.mjs +1 -1
- 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/package.json +35 -3
package/dist/burlap.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type BurlapParams = {
|
|
2
|
+
/** Strength of the woven texture from `0` to `1`. Defaults to `0.55`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
/** Distance between weave strands in pixels. Defaults to `5`. */
|
|
5
|
+
readonly size?: number;
|
|
6
|
+
/** Irregularity of the fibers from `0` to `1`. Defaults to `0.7`. */
|
|
7
|
+
readonly roughness?: number;
|
|
8
|
+
/** Seed for the procedural fiber pattern. Defaults to `0`. */
|
|
9
|
+
readonly seed?: number;
|
|
10
|
+
/** Color of the darker weave fibers. Defaults to black. */
|
|
11
|
+
readonly color?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const burlap: (params?: (BurlapParams & {
|
|
14
|
+
readonly disabled?: boolean | undefined;
|
|
15
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -325,7 +325,7 @@ var validateBarrelDistortionParams = (params) => {
|
|
|
325
325
|
validateUnitInterval(resolved.amount, "amount");
|
|
326
326
|
};
|
|
327
327
|
var barrelDistortion = createEffect({
|
|
328
|
-
type: "remotion
|
|
328
|
+
type: "dev.remotion.effects.barrelDistortion",
|
|
329
329
|
label: "barrelDistortion()",
|
|
330
330
|
documentationLink: "https://www.remotion.dev/docs/effects/barrel-distortion",
|
|
331
331
|
backend: "webgl2",
|
package/dist/esm/blur.mjs
CHANGED
|
@@ -418,7 +418,7 @@ var validateBlurParams = (params) => {
|
|
|
418
418
|
assertRequiredFiniteNumber(params.radius, "radius");
|
|
419
419
|
};
|
|
420
420
|
var blur = createEffect({
|
|
421
|
-
type: "remotion
|
|
421
|
+
type: "dev.remotion.effects.blur",
|
|
422
422
|
label: "blur()",
|
|
423
423
|
documentationLink: "https://www.remotion.dev/docs/effects/blur",
|
|
424
424
|
backend: "webgl2",
|
package/dist/esm/brightness.mjs
CHANGED
|
@@ -121,7 +121,7 @@ var validateBrightnessParams = (params) => {
|
|
|
121
121
|
validateSignedUnitInterval(amount, "amount");
|
|
122
122
|
};
|
|
123
123
|
var brightness = createEffect({
|
|
124
|
-
type: "remotion
|
|
124
|
+
type: "dev.remotion.effects.brightness",
|
|
125
125
|
label: "brightness()",
|
|
126
126
|
documentationLink: "https://www.remotion.dev/docs/effects/brightness",
|
|
127
127
|
backend: "2d",
|
|
@@ -0,0 +1,454 @@
|
|
|
1
|
+
// src/burlap.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/burlap.ts
|
|
110
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
+
var DEFAULT_AMOUNT2 = 0.55;
|
|
112
|
+
var DEFAULT_SIZE = 5;
|
|
113
|
+
var DEFAULT_ROUGHNESS = 0.7;
|
|
114
|
+
var DEFAULT_SEED = 0;
|
|
115
|
+
var DEFAULT_COLOR = "#000000";
|
|
116
|
+
var burlapSchema = {
|
|
117
|
+
amount: {
|
|
118
|
+
type: "number",
|
|
119
|
+
min: 0,
|
|
120
|
+
max: 1,
|
|
121
|
+
step: 0.01,
|
|
122
|
+
default: DEFAULT_AMOUNT2,
|
|
123
|
+
description: "Amount",
|
|
124
|
+
hiddenFromList: false
|
|
125
|
+
},
|
|
126
|
+
size: {
|
|
127
|
+
type: "number",
|
|
128
|
+
min: 0.1,
|
|
129
|
+
max: 80,
|
|
130
|
+
step: 0.1,
|
|
131
|
+
default: DEFAULT_SIZE,
|
|
132
|
+
description: "Size",
|
|
133
|
+
hiddenFromList: false
|
|
134
|
+
},
|
|
135
|
+
roughness: {
|
|
136
|
+
type: "number",
|
|
137
|
+
min: 0,
|
|
138
|
+
max: 1,
|
|
139
|
+
step: 0.01,
|
|
140
|
+
default: DEFAULT_ROUGHNESS,
|
|
141
|
+
description: "Roughness",
|
|
142
|
+
hiddenFromList: false
|
|
143
|
+
},
|
|
144
|
+
seed: {
|
|
145
|
+
type: "number",
|
|
146
|
+
step: 1,
|
|
147
|
+
default: DEFAULT_SEED,
|
|
148
|
+
description: "Seed",
|
|
149
|
+
hiddenFromList: false
|
|
150
|
+
},
|
|
151
|
+
color: {
|
|
152
|
+
type: "color",
|
|
153
|
+
default: DEFAULT_COLOR,
|
|
154
|
+
description: "Color"
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
var resolve = (p) => ({
|
|
158
|
+
amount: p.amount ?? DEFAULT_AMOUNT2,
|
|
159
|
+
size: p.size ?? DEFAULT_SIZE,
|
|
160
|
+
roughness: p.roughness ?? DEFAULT_ROUGHNESS,
|
|
161
|
+
seed: p.seed ?? DEFAULT_SEED,
|
|
162
|
+
color: p.color ?? DEFAULT_COLOR
|
|
163
|
+
});
|
|
164
|
+
var validatePositive = (value, name) => {
|
|
165
|
+
if (value <= 0) {
|
|
166
|
+
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
var validateBurlapParams = (params) => {
|
|
170
|
+
assertEffectParamsObject(params, "Burlap");
|
|
171
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
172
|
+
assertOptionalFiniteNumber(params.size, "size");
|
|
173
|
+
assertOptionalFiniteNumber(params.roughness, "roughness");
|
|
174
|
+
assertOptionalFiniteNumber(params.seed, "seed");
|
|
175
|
+
assertOptionalColor(params.color, "color");
|
|
176
|
+
const r = resolve(params);
|
|
177
|
+
validateUnitInterval(r.amount, "amount");
|
|
178
|
+
validatePositive(r.size, "size");
|
|
179
|
+
validateUnitInterval(r.roughness, "roughness");
|
|
180
|
+
};
|
|
181
|
+
var BURLAP_VS = `#version 300 es
|
|
182
|
+
in vec2 aPos;
|
|
183
|
+
in vec2 aUv;
|
|
184
|
+
out vec2 vUv;
|
|
185
|
+
|
|
186
|
+
void main() {
|
|
187
|
+
vUv = aUv;
|
|
188
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
189
|
+
}
|
|
190
|
+
`;
|
|
191
|
+
var BURLAP_FS = `#version 300 es
|
|
192
|
+
precision highp float;
|
|
193
|
+
|
|
194
|
+
in vec2 vUv;
|
|
195
|
+
out vec4 fragColor;
|
|
196
|
+
|
|
197
|
+
uniform sampler2D uSource;
|
|
198
|
+
uniform vec2 uResolution;
|
|
199
|
+
uniform float uAmount;
|
|
200
|
+
uniform float uSize;
|
|
201
|
+
uniform float uRoughness;
|
|
202
|
+
uniform float uSeed;
|
|
203
|
+
uniform vec4 uColor;
|
|
204
|
+
|
|
205
|
+
float hash21(vec2 p) {
|
|
206
|
+
vec3 p3 = fract(vec3(p.xyx) * vec3(443.8975, 397.2973, 491.1871));
|
|
207
|
+
p3 += dot(p3, p3.yzx + 19.19 + uSeed * 0.137);
|
|
208
|
+
return fract((p3.x + p3.y) * p3.z);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
float valueNoise(vec2 p) {
|
|
212
|
+
vec2 i = floor(p);
|
|
213
|
+
vec2 f = fract(p);
|
|
214
|
+
f = f * f * (3.0 - 2.0 * f);
|
|
215
|
+
|
|
216
|
+
float a = hash21(i);
|
|
217
|
+
float b = hash21(i + vec2(1.0, 0.0));
|
|
218
|
+
float c = hash21(i + vec2(0.0, 1.0));
|
|
219
|
+
float d = hash21(i + vec2(1.0, 1.0));
|
|
220
|
+
|
|
221
|
+
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
float strand(float value) {
|
|
225
|
+
float centered = abs(fract(value) - 0.5);
|
|
226
|
+
return 1.0 - smoothstep(0.2, 0.5, centered);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
void main() {
|
|
230
|
+
vec4 texColor = texture(uSource, vUv);
|
|
231
|
+
float alpha = texColor.a;
|
|
232
|
+
|
|
233
|
+
if (alpha <= 0.001) {
|
|
234
|
+
fragColor = vec4(0.0);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
if (uAmount <= 0.0) {
|
|
239
|
+
fragColor = texColor;
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
vec2 fragPos = vUv * uResolution;
|
|
244
|
+
float strandSize = max(uSize, 0.001);
|
|
245
|
+
vec2 weave = fragPos / strandSize;
|
|
246
|
+
|
|
247
|
+
float rowJitter = (hash21(vec2(floor(weave.y), 13.17)) - 0.5) * uRoughness * 0.28;
|
|
248
|
+
float columnJitter = (hash21(vec2(71.43, floor(weave.x))) - 0.5) * uRoughness * 0.28;
|
|
249
|
+
float vertical = strand(weave.x + rowJitter);
|
|
250
|
+
float horizontal = strand(weave.y + columnJitter);
|
|
251
|
+
|
|
252
|
+
float cellParity = mod(floor(weave.x) + floor(weave.y), 2.0);
|
|
253
|
+
float overUnder = mix(vertical, horizontal, cellParity);
|
|
254
|
+
float ridge = max(max(vertical, horizontal) * 0.45, overUnder * 0.75);
|
|
255
|
+
float gaps = (1.0 - vertical) * (1.0 - horizontal);
|
|
256
|
+
|
|
257
|
+
float coarse = valueNoise(fragPos / (strandSize * 7.0) + vec2(uSeed * 1.7, uSeed * 0.6));
|
|
258
|
+
float fine = valueNoise(fragPos / max(strandSize * 0.55, 0.5) + vec2(uSeed * 3.1, 4.7));
|
|
259
|
+
float dashH = smoothstep(0.64, 0.98, hash21(floor(vec2(weave.x * 2.0, weave.y)) + 23.9)) * horizontal;
|
|
260
|
+
float dashV = smoothstep(0.64, 0.98, hash21(floor(vec2(weave.x, weave.y * 2.0)) + 91.4)) * vertical;
|
|
261
|
+
|
|
262
|
+
float texture = 0.0;
|
|
263
|
+
texture += (ridge - 0.42) * 0.22;
|
|
264
|
+
texture -= gaps * 0.18;
|
|
265
|
+
texture += (coarse - 0.5) * 0.18 * uRoughness;
|
|
266
|
+
texture += (fine - 0.5) * 0.16 * uRoughness;
|
|
267
|
+
texture -= (dashH + dashV) * 0.08 * uRoughness;
|
|
268
|
+
|
|
269
|
+
vec3 rgb = texColor.rgb / alpha;
|
|
270
|
+
float darkFiber = clamp(-texture * 3.2 + gaps * 0.12 + (dashH + dashV) * 0.18, 0.0, 1.0);
|
|
271
|
+
vec3 shaded = mix(rgb, uColor.rgb, darkFiber * uColor.a);
|
|
272
|
+
vec3 textured = clamp(shaded * (1.0 + max(texture, 0.0) * 0.45), 0.0, 1.0);
|
|
273
|
+
rgb = mix(rgb, textured, uAmount);
|
|
274
|
+
|
|
275
|
+
fragColor = vec4(rgb * alpha, alpha);
|
|
276
|
+
}
|
|
277
|
+
`;
|
|
278
|
+
var compileShader = (gl, type, source) => {
|
|
279
|
+
const shader = gl.createShader(type);
|
|
280
|
+
if (!shader) {
|
|
281
|
+
throw new Error("Failed to create WebGL shader");
|
|
282
|
+
}
|
|
283
|
+
gl.shaderSource(shader, source);
|
|
284
|
+
gl.compileShader(shader);
|
|
285
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
286
|
+
const log = gl.getShaderInfoLog(shader);
|
|
287
|
+
gl.deleteShader(shader);
|
|
288
|
+
throw new Error(`Burlap shader compile failed: ${log ?? "(no log)"}`);
|
|
289
|
+
}
|
|
290
|
+
return shader;
|
|
291
|
+
};
|
|
292
|
+
var linkProgram = (gl, vs, fs) => {
|
|
293
|
+
const program = gl.createProgram();
|
|
294
|
+
if (!program) {
|
|
295
|
+
throw new Error("Failed to create WebGL program");
|
|
296
|
+
}
|
|
297
|
+
gl.attachShader(program, vs);
|
|
298
|
+
gl.attachShader(program, fs);
|
|
299
|
+
gl.linkProgram(program);
|
|
300
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
301
|
+
const log = gl.getProgramInfoLog(program);
|
|
302
|
+
gl.deleteProgram(program);
|
|
303
|
+
throw new Error(`Burlap program link failed: ${log ?? "(no log)"}`);
|
|
304
|
+
}
|
|
305
|
+
return program;
|
|
306
|
+
};
|
|
307
|
+
var setupBurlap = (target) => {
|
|
308
|
+
const gl = target.getContext("webgl2", {
|
|
309
|
+
premultipliedAlpha: true,
|
|
310
|
+
alpha: true,
|
|
311
|
+
preserveDrawingBuffer: true
|
|
312
|
+
});
|
|
313
|
+
if (!gl) {
|
|
314
|
+
throw createWebGL2ContextError("burlap effect");
|
|
315
|
+
}
|
|
316
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
317
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, BURLAP_VS);
|
|
318
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, BURLAP_FS);
|
|
319
|
+
const program = linkProgram(gl, vs, fs);
|
|
320
|
+
gl.deleteShader(vs);
|
|
321
|
+
gl.deleteShader(fs);
|
|
322
|
+
const vao = gl.createVertexArray();
|
|
323
|
+
if (!vao) {
|
|
324
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
325
|
+
}
|
|
326
|
+
gl.bindVertexArray(vao);
|
|
327
|
+
const data = new Float32Array([
|
|
328
|
+
-1,
|
|
329
|
+
-1,
|
|
330
|
+
0,
|
|
331
|
+
0,
|
|
332
|
+
1,
|
|
333
|
+
-1,
|
|
334
|
+
1,
|
|
335
|
+
0,
|
|
336
|
+
-1,
|
|
337
|
+
1,
|
|
338
|
+
0,
|
|
339
|
+
1,
|
|
340
|
+
1,
|
|
341
|
+
1,
|
|
342
|
+
1,
|
|
343
|
+
1
|
|
344
|
+
]);
|
|
345
|
+
const vbo = gl.createBuffer();
|
|
346
|
+
if (!vbo) {
|
|
347
|
+
throw new Error("Failed to create WebGL buffer");
|
|
348
|
+
}
|
|
349
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
350
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
351
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
352
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
353
|
+
gl.enableVertexAttribArray(aPos);
|
|
354
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
355
|
+
gl.enableVertexAttribArray(aUv);
|
|
356
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
357
|
+
gl.bindVertexArray(null);
|
|
358
|
+
const texture = gl.createTexture();
|
|
359
|
+
if (!texture) {
|
|
360
|
+
throw new Error("Failed to create WebGL texture");
|
|
361
|
+
}
|
|
362
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
363
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
364
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
365
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
366
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
367
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
368
|
+
const colorCanvas = document.createElement("canvas");
|
|
369
|
+
colorCanvas.width = 1;
|
|
370
|
+
colorCanvas.height = 1;
|
|
371
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
372
|
+
if (!colorCtx) {
|
|
373
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
374
|
+
}
|
|
375
|
+
return {
|
|
376
|
+
gl,
|
|
377
|
+
program,
|
|
378
|
+
vao,
|
|
379
|
+
vbo,
|
|
380
|
+
texture,
|
|
381
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
382
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
383
|
+
uAmount: gl.getUniformLocation(program, "uAmount"),
|
|
384
|
+
uSize: gl.getUniformLocation(program, "uSize"),
|
|
385
|
+
uRoughness: gl.getUniformLocation(program, "uRoughness"),
|
|
386
|
+
uSeed: gl.getUniformLocation(program, "uSeed"),
|
|
387
|
+
uColor: gl.getUniformLocation(program, "uColor"),
|
|
388
|
+
colorCtx,
|
|
389
|
+
cachedColor: "",
|
|
390
|
+
cachedColorRgba: [0, 0, 0, 255]
|
|
391
|
+
};
|
|
392
|
+
};
|
|
393
|
+
var normalizedRgba = (color) => {
|
|
394
|
+
return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
|
|
395
|
+
};
|
|
396
|
+
var burlap = createEffect({
|
|
397
|
+
type: "dev.remotion.effects.burlap",
|
|
398
|
+
label: "burlap()",
|
|
399
|
+
documentationLink: "https://www.remotion.dev/docs/effects/burlap",
|
|
400
|
+
backend: "webgl2",
|
|
401
|
+
calculateKey: (params) => {
|
|
402
|
+
const r = resolve(params);
|
|
403
|
+
return `burlap-${r.amount}-${r.size}-${r.roughness}-${r.seed}-${r.color}`;
|
|
404
|
+
},
|
|
405
|
+
setup: (target) => setupBurlap(target),
|
|
406
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
407
|
+
const r = resolve(params);
|
|
408
|
+
const { gl, program, vao, texture } = state;
|
|
409
|
+
if (state.cachedColor !== r.color) {
|
|
410
|
+
state.cachedColor = r.color;
|
|
411
|
+
state.cachedColorRgba = parseColorRgba(state.colorCtx, r.color);
|
|
412
|
+
}
|
|
413
|
+
const [red, green, blue, alpha] = normalizedRgba(state.cachedColorRgba);
|
|
414
|
+
gl.viewport(0, 0, width, height);
|
|
415
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
416
|
+
gl.clearColor(0, 0, 0, 0);
|
|
417
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
418
|
+
gl.useProgram(program);
|
|
419
|
+
gl.bindVertexArray(vao);
|
|
420
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
421
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
422
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
423
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
424
|
+
if (state.uSource)
|
|
425
|
+
gl.uniform1i(state.uSource, 0);
|
|
426
|
+
if (state.uResolution)
|
|
427
|
+
gl.uniform2f(state.uResolution, width, height);
|
|
428
|
+
if (state.uAmount)
|
|
429
|
+
gl.uniform1f(state.uAmount, r.amount);
|
|
430
|
+
if (state.uSize)
|
|
431
|
+
gl.uniform1f(state.uSize, r.size);
|
|
432
|
+
if (state.uRoughness)
|
|
433
|
+
gl.uniform1f(state.uRoughness, r.roughness);
|
|
434
|
+
if (state.uSeed)
|
|
435
|
+
gl.uniform1f(state.uSeed, r.seed);
|
|
436
|
+
if (state.uColor)
|
|
437
|
+
gl.uniform4f(state.uColor, red, green, blue, alpha);
|
|
438
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
439
|
+
gl.bindVertexArray(null);
|
|
440
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
441
|
+
gl.useProgram(null);
|
|
442
|
+
},
|
|
443
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
444
|
+
gl.deleteTexture(texture);
|
|
445
|
+
gl.deleteBuffer(vbo);
|
|
446
|
+
gl.deleteProgram(program);
|
|
447
|
+
gl.deleteVertexArray(vao);
|
|
448
|
+
},
|
|
449
|
+
schema: burlapSchema,
|
|
450
|
+
validateParams: validateBurlapParams
|
|
451
|
+
});
|
|
452
|
+
export {
|
|
453
|
+
burlap
|
|
454
|
+
};
|
|
@@ -325,7 +325,7 @@ var validateChromaticAberrationParams = (params) => {
|
|
|
325
325
|
validateNonNegative(resolved.amount, "amount");
|
|
326
326
|
};
|
|
327
327
|
var chromaticAberration = createEffect({
|
|
328
|
-
type: "remotion
|
|
328
|
+
type: "dev.remotion.effects.chromaticAberration",
|
|
329
329
|
label: "chromaticAberration()",
|
|
330
330
|
documentationLink: "https://www.remotion.dev/docs/effects/chromatic-aberration",
|
|
331
331
|
backend: "webgl2",
|
package/dist/esm/color-key.mjs
CHANGED
|
@@ -374,7 +374,7 @@ var parseKeyColor = (state, color) => {
|
|
|
374
374
|
];
|
|
375
375
|
};
|
|
376
376
|
var colorKey = createEffect({
|
|
377
|
-
type: "remotion
|
|
377
|
+
type: "dev.remotion.effects.colorKey",
|
|
378
378
|
label: "colorKey()",
|
|
379
379
|
documentationLink: "https://www.remotion.dev/docs/effects/color-key",
|
|
380
380
|
backend: "webgl2",
|
|
@@ -493,7 +493,7 @@ var setupContourLines = (target) => {
|
|
|
493
493
|
};
|
|
494
494
|
};
|
|
495
495
|
var contourLines = createEffect({
|
|
496
|
-
type: "remotion
|
|
496
|
+
type: "dev.remotion.effects.contourLines",
|
|
497
497
|
label: "contourLines()",
|
|
498
498
|
documentationLink: "https://www.remotion.dev/docs/effects/contour-lines",
|
|
499
499
|
backend: "webgl2",
|
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",
|