@remotion/effects 4.0.478 → 4.0.481
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/checkerboard.d.ts +75 -0
- package/dist/emboss.d.ts +76 -0
- package/dist/esm/barrel-distortion.mjs +1 -1
- package/dist/esm/blur.mjs +2 -2
- package/dist/esm/brightness.mjs +1 -1
- package/dist/esm/burlap.mjs +454 -0
- package/dist/esm/checkerboard.mjs +516 -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/emboss.mjs +477 -0
- 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/gridlines.mjs +577 -0
- 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 +1061 -186
- 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 +6 -11
- 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/esm/zoom-blur.mjs +419 -0
- package/dist/gridlines.d.ts +113 -0
- package/dist/index.d.ts +2 -0
- 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 +4 -2
- package/dist/zoom-blur/index.d.ts +12 -0
- package/dist/zoom-blur/zoom-blur-runtime.d.ts +26 -0
- package/dist/zoom-blur/zoom-blur-shaders.d.ts +2 -0
- package/dist/zoom-blur.d.ts +1 -0
- package/package.json +67 -3
|
@@ -0,0 +1,606 @@
|
|
|
1
|
+
// src/shrinkwrap.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/shrinkwrap.ts
|
|
110
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
+
var DEFAULT_AMOUNT2 = 1;
|
|
112
|
+
var DEFAULT_DISPLACEMENT = 5;
|
|
113
|
+
var DEFAULT_HIGHLIGHT_INTENSITY = 0.75;
|
|
114
|
+
var DEFAULT_WRINKLE_DENSITY = 0.42;
|
|
115
|
+
var DEFAULT_EDGE_TENSION = 0.45;
|
|
116
|
+
var DEFAULT_PHASE = 0;
|
|
117
|
+
var DEFAULT_SEED = 0;
|
|
118
|
+
var shrinkwrapSchema = {
|
|
119
|
+
amount: {
|
|
120
|
+
type: "number",
|
|
121
|
+
min: 0,
|
|
122
|
+
max: 1,
|
|
123
|
+
step: 0.01,
|
|
124
|
+
default: DEFAULT_AMOUNT2,
|
|
125
|
+
description: "Amount",
|
|
126
|
+
hiddenFromList: false
|
|
127
|
+
},
|
|
128
|
+
displacement: {
|
|
129
|
+
type: "number",
|
|
130
|
+
min: 0,
|
|
131
|
+
max: 30,
|
|
132
|
+
step: 0.1,
|
|
133
|
+
default: DEFAULT_DISPLACEMENT,
|
|
134
|
+
description: "Displacement",
|
|
135
|
+
hiddenFromList: false
|
|
136
|
+
},
|
|
137
|
+
highlightIntensity: {
|
|
138
|
+
type: "number",
|
|
139
|
+
min: 0,
|
|
140
|
+
max: 2,
|
|
141
|
+
step: 0.01,
|
|
142
|
+
default: DEFAULT_HIGHLIGHT_INTENSITY,
|
|
143
|
+
description: "Highlight intensity",
|
|
144
|
+
hiddenFromList: false
|
|
145
|
+
},
|
|
146
|
+
wrinkleDensity: {
|
|
147
|
+
type: "number",
|
|
148
|
+
min: 0,
|
|
149
|
+
max: 1,
|
|
150
|
+
step: 0.01,
|
|
151
|
+
default: DEFAULT_WRINKLE_DENSITY,
|
|
152
|
+
description: "Wrinkle density",
|
|
153
|
+
hiddenFromList: false
|
|
154
|
+
},
|
|
155
|
+
edgeTension: {
|
|
156
|
+
type: "number",
|
|
157
|
+
min: 0,
|
|
158
|
+
max: 1,
|
|
159
|
+
step: 0.01,
|
|
160
|
+
default: DEFAULT_EDGE_TENSION,
|
|
161
|
+
description: "Edge tension",
|
|
162
|
+
hiddenFromList: false
|
|
163
|
+
},
|
|
164
|
+
phase: {
|
|
165
|
+
type: "number",
|
|
166
|
+
step: 0.01,
|
|
167
|
+
default: DEFAULT_PHASE,
|
|
168
|
+
description: "Phase",
|
|
169
|
+
hiddenFromList: false
|
|
170
|
+
},
|
|
171
|
+
seed: {
|
|
172
|
+
type: "number",
|
|
173
|
+
step: 1,
|
|
174
|
+
default: DEFAULT_SEED,
|
|
175
|
+
description: "Seed",
|
|
176
|
+
hiddenFromList: false
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
var resolve = (p) => ({
|
|
180
|
+
amount: p.amount ?? DEFAULT_AMOUNT2,
|
|
181
|
+
displacement: p.displacement ?? DEFAULT_DISPLACEMENT,
|
|
182
|
+
highlightIntensity: p.highlightIntensity ?? DEFAULT_HIGHLIGHT_INTENSITY,
|
|
183
|
+
wrinkleDensity: p.wrinkleDensity ?? DEFAULT_WRINKLE_DENSITY,
|
|
184
|
+
edgeTension: p.edgeTension ?? DEFAULT_EDGE_TENSION,
|
|
185
|
+
phase: p.phase ?? DEFAULT_PHASE,
|
|
186
|
+
seed: p.seed ?? DEFAULT_SEED
|
|
187
|
+
});
|
|
188
|
+
var validateShrinkwrapParams = (params) => {
|
|
189
|
+
assertEffectParamsObject(params, "Shrinkwrap");
|
|
190
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
191
|
+
assertOptionalFiniteNumber(params.displacement, "displacement");
|
|
192
|
+
assertOptionalFiniteNumber(params.highlightIntensity, "highlightIntensity");
|
|
193
|
+
assertOptionalFiniteNumber(params.wrinkleDensity, "wrinkleDensity");
|
|
194
|
+
assertOptionalFiniteNumber(params.edgeTension, "edgeTension");
|
|
195
|
+
assertOptionalFiniteNumber(params.phase, "phase");
|
|
196
|
+
assertOptionalFiniteNumber(params.seed, "seed");
|
|
197
|
+
const r = resolve(params);
|
|
198
|
+
validateUnitInterval(r.amount, "amount");
|
|
199
|
+
validateNonNegative(r.displacement, "displacement");
|
|
200
|
+
validateNonNegative(r.highlightIntensity, "highlightIntensity");
|
|
201
|
+
validateUnitInterval(r.wrinkleDensity, "wrinkleDensity");
|
|
202
|
+
validateUnitInterval(r.edgeTension, "edgeTension");
|
|
203
|
+
};
|
|
204
|
+
var SHRINKWRAP_VS = `#version 300 es
|
|
205
|
+
in vec2 aPos;
|
|
206
|
+
in vec2 aUv;
|
|
207
|
+
out vec2 vUv;
|
|
208
|
+
|
|
209
|
+
void main() {
|
|
210
|
+
vUv = aUv;
|
|
211
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
212
|
+
}
|
|
213
|
+
`;
|
|
214
|
+
var SHRINKWRAP_FS = `#version 300 es
|
|
215
|
+
precision highp float;
|
|
216
|
+
|
|
217
|
+
in vec2 vUv;
|
|
218
|
+
out vec4 fragColor;
|
|
219
|
+
|
|
220
|
+
uniform sampler2D uSource;
|
|
221
|
+
uniform vec2 uResolution;
|
|
222
|
+
uniform float uAmount;
|
|
223
|
+
uniform float uDisplacement;
|
|
224
|
+
uniform float uHighlightIntensity;
|
|
225
|
+
uniform float uWrinkleDensity;
|
|
226
|
+
uniform float uEdgeTension;
|
|
227
|
+
uniform float uPhase;
|
|
228
|
+
uniform float uSeed;
|
|
229
|
+
|
|
230
|
+
float hash21(vec2 p) {
|
|
231
|
+
vec3 p3 = fract(vec3(p.xyx) * vec3(443.8975, 397.2973, 491.1871));
|
|
232
|
+
p3 += dot(p3, p3.yzx + 19.19 + uSeed * 0.131);
|
|
233
|
+
return fract((p3.x + p3.y) * p3.z);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
float valueNoise(vec2 p) {
|
|
237
|
+
vec2 i = floor(p);
|
|
238
|
+
vec2 f = fract(p);
|
|
239
|
+
f = f * f * (3.0 - 2.0 * f);
|
|
240
|
+
|
|
241
|
+
float a = hash21(i);
|
|
242
|
+
float b = hash21(i + vec2(1.0, 0.0));
|
|
243
|
+
float c = hash21(i + vec2(0.0, 1.0));
|
|
244
|
+
float d = hash21(i + vec2(1.0, 1.0));
|
|
245
|
+
|
|
246
|
+
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
float fbm(vec2 p) {
|
|
250
|
+
float value = 0.0;
|
|
251
|
+
float amplitude = 0.5;
|
|
252
|
+
|
|
253
|
+
for (int i = 0; i < 4; i++) {
|
|
254
|
+
value += valueNoise(p) * amplitude;
|
|
255
|
+
p = p * 2.03 + vec2(17.1, 31.7);
|
|
256
|
+
amplitude *= 0.5;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
return value;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
mat2 rotate2d(float angle) {
|
|
263
|
+
float c = cos(angle);
|
|
264
|
+
float s = sin(angle);
|
|
265
|
+
return mat2(c, -s, s, c);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
vec2 phaseVec(float xFactor, float yFactor) {
|
|
269
|
+
return vec2(uPhase * xFactor, uPhase * yFactor);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
vec2 warpVec(vec2 p, float scale, float amount, float seedOffset) {
|
|
273
|
+
return vec2(
|
|
274
|
+
fbm(p / scale + phaseVec(0.21, 0.13) + vec2(seedOffset, 1.7)) - 0.5,
|
|
275
|
+
fbm(p / scale + phaseVec(-0.17, 0.29) + vec2(seedOffset + 9.1, 6.4))
|
|
276
|
+
- 0.5
|
|
277
|
+
) * amount;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
float bandField(float coord, float spacing, float width) {
|
|
281
|
+
float centered = abs(fract(coord / spacing) - 0.5) * spacing;
|
|
282
|
+
return 1.0 - smoothstep(width, width * 3.8, centered);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
float curvedFoldField(
|
|
286
|
+
vec2 px,
|
|
287
|
+
float baseAngle,
|
|
288
|
+
float spacing,
|
|
289
|
+
float width,
|
|
290
|
+
float seedOffset
|
|
291
|
+
) {
|
|
292
|
+
float angleNoise =
|
|
293
|
+
(fbm(px / (spacing * 5.8) + phaseVec(0.08, -0.11) + vec2(seedOffset, 3.1))
|
|
294
|
+
- 0.5) * 1.35;
|
|
295
|
+
vec2 warped = px + warpVec(
|
|
296
|
+
px + vec2(seedOffset * 13.0, seedOffset * 7.0),
|
|
297
|
+
spacing * 5.4,
|
|
298
|
+
spacing * 0.95,
|
|
299
|
+
seedOffset
|
|
300
|
+
);
|
|
301
|
+
vec2 q = rotate2d(baseAngle + angleNoise) * warped;
|
|
302
|
+
float phase =
|
|
303
|
+
(fbm(q / (spacing * 3.4) + phaseVec(-0.14, 0.19) + vec2(seedOffset, 8.6))
|
|
304
|
+
- 0.5) * spacing * 1.3;
|
|
305
|
+
float band = bandField(q.y + phase, spacing, width);
|
|
306
|
+
float breakup = smoothstep(
|
|
307
|
+
0.24,
|
|
308
|
+
0.88,
|
|
309
|
+
fbm(
|
|
310
|
+
vec2(q.x / (spacing * 2.6), q.y / (spacing * 7.5)) +
|
|
311
|
+
phaseVec(0.12, 0.07) +
|
|
312
|
+
vec2(seedOffset)
|
|
313
|
+
)
|
|
314
|
+
);
|
|
315
|
+
float softness =
|
|
316
|
+
0.65 +
|
|
317
|
+
fbm(q / (spacing * 8.2) + phaseVec(-0.05, 0.16) + vec2(seedOffset, 2.3)) *
|
|
318
|
+
0.35;
|
|
319
|
+
|
|
320
|
+
return band * breakup * softness;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
float edgeMask(vec2 uv) {
|
|
324
|
+
vec2 pxFromEdge = min(uv, 1.0 - uv) * uResolution;
|
|
325
|
+
float minSide = min(uResolution.x, uResolution.y);
|
|
326
|
+
float side = 1.0 - smoothstep(0.0, minSide * 0.16, min(pxFromEdge.x, pxFromEdge.y));
|
|
327
|
+
float corner = 1.0 - smoothstep(
|
|
328
|
+
0.0,
|
|
329
|
+
minSide * 0.23,
|
|
330
|
+
length(pxFromEdge)
|
|
331
|
+
);
|
|
332
|
+
|
|
333
|
+
return clamp(side * 0.55 + corner * 0.85, 0.0, 1.0);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
float heightMap(vec2 uv) {
|
|
337
|
+
vec2 px = uv * uResolution;
|
|
338
|
+
float minSide = min(uResolution.x, uResolution.y);
|
|
339
|
+
float density = clamp(uWrinkleDensity, 0.0, 1.0);
|
|
340
|
+
float spacing = mix(minSide * 0.31, minSide * 0.13, density);
|
|
341
|
+
float width = mix(minSide * 0.03, minSide * 0.013, density);
|
|
342
|
+
|
|
343
|
+
vec2 broadWarp = warpVec(px, minSide * 0.42, minSide * 0.06, uSeed + 1.0);
|
|
344
|
+
vec2 detailWarp = warpVec(px, minSide * 0.17, minSide * 0.018, uSeed + 6.0);
|
|
345
|
+
vec2 warpedPx = px + broadWarp + detailWarp;
|
|
346
|
+
|
|
347
|
+
float h =
|
|
348
|
+
(fbm(warpedPx / (minSide * 0.26) + phaseVec(0.11, -0.09) + vec2(uSeed * 0.17))
|
|
349
|
+
- 0.5) * 0.08;
|
|
350
|
+
float broadFold = curvedFoldField(warpedPx, -0.74, spacing * 1.0, width, 3.1);
|
|
351
|
+
float crossFold = curvedFoldField(
|
|
352
|
+
warpedPx + broadWarp * 0.7,
|
|
353
|
+
0.31,
|
|
354
|
+
spacing * 1.9,
|
|
355
|
+
width * 1.55,
|
|
356
|
+
9.7
|
|
357
|
+
);
|
|
358
|
+
float microFold = curvedFoldField(
|
|
359
|
+
warpedPx - detailWarp * 0.6,
|
|
360
|
+
1.04,
|
|
361
|
+
spacing * 0.66,
|
|
362
|
+
width * 0.62,
|
|
363
|
+
15.3
|
|
364
|
+
);
|
|
365
|
+
h += broadFold * 0.22;
|
|
366
|
+
h += crossFold * 0.11;
|
|
367
|
+
h += microFold * 0.045;
|
|
368
|
+
h +=
|
|
369
|
+
(1.0 -
|
|
370
|
+
abs(
|
|
371
|
+
fbm(
|
|
372
|
+
warpedPx / (minSide * 0.11) +
|
|
373
|
+
phaseVec(-0.23, 0.27) +
|
|
374
|
+
vec2(uSeed * 0.3)
|
|
375
|
+
) *
|
|
376
|
+
2.0 -
|
|
377
|
+
1.0
|
|
378
|
+
)) * 0.018;
|
|
379
|
+
|
|
380
|
+
float edge = edgeMask(uv) * clamp(uEdgeTension, 0.0, 1.0);
|
|
381
|
+
float edgeNoise =
|
|
382
|
+
fbm(warpedPx / (minSide * 0.18) + phaseVec(0.18, 0.21) + vec2(uSeed * 0.41, 8.0));
|
|
383
|
+
h += edge * (0.16 + edgeNoise * 0.11);
|
|
384
|
+
|
|
385
|
+
return h;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
void main() {
|
|
389
|
+
if (uAmount <= 0.0) {
|
|
390
|
+
fragColor = texture(uSource, vUv);
|
|
391
|
+
return;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
vec2 texel = 1.0 / uResolution;
|
|
395
|
+
float left = heightMap(vUv - vec2(texel.x, 0.0));
|
|
396
|
+
float right = heightMap(vUv + vec2(texel.x, 0.0));
|
|
397
|
+
float down = heightMap(vUv - vec2(0.0, texel.y));
|
|
398
|
+
float up = heightMap(vUv + vec2(0.0, texel.y));
|
|
399
|
+
vec2 gradient = vec2(right - left, up - down);
|
|
400
|
+
float reliefScale = mix(42.0, 115.0, uWrinkleDensity);
|
|
401
|
+
float warpStrength = reliefScale * 0.32;
|
|
402
|
+
|
|
403
|
+
vec2 sampleOffset = gradient * warpStrength * uDisplacement * uAmount;
|
|
404
|
+
vec2 sampleUv = clamp(vUv - sampleOffset * texel, vec2(0.0), vec2(1.0));
|
|
405
|
+
vec4 source = texture(uSource, sampleUv);
|
|
406
|
+
|
|
407
|
+
float alpha = source.a;
|
|
408
|
+
if (alpha <= 0.001) {
|
|
409
|
+
fragColor = vec4(0.0);
|
|
410
|
+
return;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
vec3 rgb = source.rgb / alpha;
|
|
414
|
+
vec3 normal = normalize(vec3(-gradient * reliefScale, 1.0));
|
|
415
|
+
vec3 light = normalize(vec3(-0.42, 0.58, 0.72));
|
|
416
|
+
vec3 halfVector = normalize(light + vec3(0.0, 0.0, 1.0));
|
|
417
|
+
float specular = pow(max(dot(normal, halfVector), 0.0), 24.0);
|
|
418
|
+
float directional = dot(gradient, normalize(vec2(-0.45, 0.72)));
|
|
419
|
+
float creaseHighlight = smoothstep(0.02, 0.07, directional);
|
|
420
|
+
float creaseShadow = smoothstep(0.02, 0.07, -directional);
|
|
421
|
+
float edge = edgeMask(vUv) * uEdgeTension;
|
|
422
|
+
float edgeGlint = edge * smoothstep(
|
|
423
|
+
0.35,
|
|
424
|
+
0.95,
|
|
425
|
+
fbm(vUv * uResolution / 90.0 + phaseVec(0.31, -0.24) + vec2(uSeed))
|
|
426
|
+
);
|
|
427
|
+
|
|
428
|
+
float highlight = clamp(
|
|
429
|
+
(specular * 0.55 + creaseHighlight * 0.4 + edgeGlint * 0.18)
|
|
430
|
+
* uHighlightIntensity
|
|
431
|
+
* uAmount,
|
|
432
|
+
0.0,
|
|
433
|
+
1.15
|
|
434
|
+
);
|
|
435
|
+
float shadow = clamp((creaseShadow * 0.1 + edge * 0.06) * uAmount, 0.0, 0.25);
|
|
436
|
+
|
|
437
|
+
rgb *= 1.0 - shadow;
|
|
438
|
+
rgb += (1.0 - rgb) * min(highlight, 1.0);
|
|
439
|
+
rgb += vec3(max(highlight - 1.0, 0.0)) * 0.35;
|
|
440
|
+
|
|
441
|
+
fragColor = vec4(clamp(rgb, 0.0, 1.0) * alpha, alpha);
|
|
442
|
+
}
|
|
443
|
+
`;
|
|
444
|
+
var compileShader = (gl, type, source) => {
|
|
445
|
+
const shader = gl.createShader(type);
|
|
446
|
+
if (!shader) {
|
|
447
|
+
throw new Error("Failed to create WebGL shader");
|
|
448
|
+
}
|
|
449
|
+
gl.shaderSource(shader, source);
|
|
450
|
+
gl.compileShader(shader);
|
|
451
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
452
|
+
const log = gl.getShaderInfoLog(shader);
|
|
453
|
+
gl.deleteShader(shader);
|
|
454
|
+
throw new Error(`Shrinkwrap shader compile failed: ${log ?? "(no log)"}`);
|
|
455
|
+
}
|
|
456
|
+
return shader;
|
|
457
|
+
};
|
|
458
|
+
var linkProgram = (gl, vs, fs) => {
|
|
459
|
+
const program = gl.createProgram();
|
|
460
|
+
if (!program) {
|
|
461
|
+
throw new Error("Failed to create WebGL program");
|
|
462
|
+
}
|
|
463
|
+
gl.attachShader(program, vs);
|
|
464
|
+
gl.attachShader(program, fs);
|
|
465
|
+
gl.linkProgram(program);
|
|
466
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
467
|
+
const log = gl.getProgramInfoLog(program);
|
|
468
|
+
gl.deleteProgram(program);
|
|
469
|
+
throw new Error(`Shrinkwrap program link failed: ${log ?? "(no log)"}`);
|
|
470
|
+
}
|
|
471
|
+
return program;
|
|
472
|
+
};
|
|
473
|
+
var shrinkwrap = createEffect({
|
|
474
|
+
type: "dev.remotion.effects.shrinkwrap",
|
|
475
|
+
label: "shrinkwrap()",
|
|
476
|
+
documentationLink: "https://www.remotion.dev/docs/effects/shrinkwrap",
|
|
477
|
+
backend: "webgl2",
|
|
478
|
+
calculateKey: (params) => {
|
|
479
|
+
const r = resolve(params);
|
|
480
|
+
return `shrinkwrap-${r.amount}-${r.displacement}-${r.highlightIntensity}-${r.wrinkleDensity}-${r.edgeTension}-${r.phase}-${r.seed}`;
|
|
481
|
+
},
|
|
482
|
+
setup: (target) => {
|
|
483
|
+
const gl = target.getContext("webgl2", {
|
|
484
|
+
premultipliedAlpha: true,
|
|
485
|
+
alpha: true,
|
|
486
|
+
preserveDrawingBuffer: true
|
|
487
|
+
});
|
|
488
|
+
if (!gl) {
|
|
489
|
+
throw createWebGL2ContextError("shrinkwrap effect");
|
|
490
|
+
}
|
|
491
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
492
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, SHRINKWRAP_VS);
|
|
493
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, SHRINKWRAP_FS);
|
|
494
|
+
const program = linkProgram(gl, vs, fs);
|
|
495
|
+
gl.deleteShader(vs);
|
|
496
|
+
gl.deleteShader(fs);
|
|
497
|
+
const vao = gl.createVertexArray();
|
|
498
|
+
if (!vao) {
|
|
499
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
500
|
+
}
|
|
501
|
+
gl.bindVertexArray(vao);
|
|
502
|
+
const data = new Float32Array([
|
|
503
|
+
-1,
|
|
504
|
+
-1,
|
|
505
|
+
0,
|
|
506
|
+
0,
|
|
507
|
+
1,
|
|
508
|
+
-1,
|
|
509
|
+
1,
|
|
510
|
+
0,
|
|
511
|
+
-1,
|
|
512
|
+
1,
|
|
513
|
+
0,
|
|
514
|
+
1,
|
|
515
|
+
1,
|
|
516
|
+
1,
|
|
517
|
+
1,
|
|
518
|
+
1
|
|
519
|
+
]);
|
|
520
|
+
const vbo = gl.createBuffer();
|
|
521
|
+
if (!vbo) {
|
|
522
|
+
throw new Error("Failed to create WebGL buffer");
|
|
523
|
+
}
|
|
524
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
525
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
526
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
527
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
528
|
+
gl.enableVertexAttribArray(aPos);
|
|
529
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
530
|
+
gl.enableVertexAttribArray(aUv);
|
|
531
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
532
|
+
gl.bindVertexArray(null);
|
|
533
|
+
const texture = gl.createTexture();
|
|
534
|
+
if (!texture) {
|
|
535
|
+
throw new Error("Failed to create WebGL texture");
|
|
536
|
+
}
|
|
537
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
538
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
539
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
540
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
541
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
542
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
543
|
+
return {
|
|
544
|
+
gl,
|
|
545
|
+
program,
|
|
546
|
+
vao,
|
|
547
|
+
vbo,
|
|
548
|
+
texture,
|
|
549
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
550
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
551
|
+
uAmount: gl.getUniformLocation(program, "uAmount"),
|
|
552
|
+
uDisplacement: gl.getUniformLocation(program, "uDisplacement"),
|
|
553
|
+
uHighlightIntensity: gl.getUniformLocation(program, "uHighlightIntensity"),
|
|
554
|
+
uWrinkleDensity: gl.getUniformLocation(program, "uWrinkleDensity"),
|
|
555
|
+
uEdgeTension: gl.getUniformLocation(program, "uEdgeTension"),
|
|
556
|
+
uPhase: gl.getUniformLocation(program, "uPhase"),
|
|
557
|
+
uSeed: gl.getUniformLocation(program, "uSeed")
|
|
558
|
+
};
|
|
559
|
+
},
|
|
560
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
561
|
+
const r = resolve(params);
|
|
562
|
+
const { gl, program, vao, texture } = state;
|
|
563
|
+
gl.viewport(0, 0, width, height);
|
|
564
|
+
gl.clearColor(0, 0, 0, 0);
|
|
565
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
566
|
+
gl.useProgram(program);
|
|
567
|
+
gl.bindVertexArray(vao);
|
|
568
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
569
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
570
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
571
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
572
|
+
if (state.uSource)
|
|
573
|
+
gl.uniform1i(state.uSource, 0);
|
|
574
|
+
if (state.uResolution)
|
|
575
|
+
gl.uniform2f(state.uResolution, width, height);
|
|
576
|
+
if (state.uAmount)
|
|
577
|
+
gl.uniform1f(state.uAmount, r.amount);
|
|
578
|
+
if (state.uDisplacement)
|
|
579
|
+
gl.uniform1f(state.uDisplacement, r.displacement);
|
|
580
|
+
if (state.uHighlightIntensity)
|
|
581
|
+
gl.uniform1f(state.uHighlightIntensity, r.highlightIntensity);
|
|
582
|
+
if (state.uWrinkleDensity)
|
|
583
|
+
gl.uniform1f(state.uWrinkleDensity, r.wrinkleDensity);
|
|
584
|
+
if (state.uEdgeTension)
|
|
585
|
+
gl.uniform1f(state.uEdgeTension, r.edgeTension);
|
|
586
|
+
if (state.uPhase)
|
|
587
|
+
gl.uniform1f(state.uPhase, r.phase);
|
|
588
|
+
if (state.uSeed)
|
|
589
|
+
gl.uniform1f(state.uSeed, r.seed);
|
|
590
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
591
|
+
gl.bindVertexArray(null);
|
|
592
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
593
|
+
gl.useProgram(null);
|
|
594
|
+
},
|
|
595
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
596
|
+
gl.deleteBuffer(vbo);
|
|
597
|
+
gl.deleteProgram(program);
|
|
598
|
+
gl.deleteVertexArray(vao);
|
|
599
|
+
gl.deleteTexture(texture);
|
|
600
|
+
},
|
|
601
|
+
schema: shrinkwrapSchema,
|
|
602
|
+
validateParams: validateShrinkwrapParams
|
|
603
|
+
});
|
|
604
|
+
export {
|
|
605
|
+
shrinkwrap
|
|
606
|
+
};
|
package/dist/esm/speckle.mjs
CHANGED
|
@@ -250,7 +250,7 @@ var linkProgram = (gl, vs, fs) => {
|
|
|
250
250
|
return program;
|
|
251
251
|
};
|
|
252
252
|
var speckle = createEffect({
|
|
253
|
-
type: "remotion
|
|
253
|
+
type: "dev.remotion.effects.speckle",
|
|
254
254
|
label: "speckle()",
|
|
255
255
|
documentationLink: "https://www.remotion.dev/docs/effects/speckle",
|
|
256
256
|
backend: "webgl2",
|