@remotion/effects 4.0.515 → 4.0.517
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/esm/fisheye.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const FISHEYE_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 FISHEYE_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uCenter;\nuniform float uFieldOfView;\nuniform float uRadius;\nuniform float uZoom;\nuniform float uAspect;\n\nvoid main() {\n\tvec2 toCenter = vUv - uCenter;\n\tvec2 aspectCorrected = vec2(toCenter.x * uAspect, toCenter.y);\n\n\tfloat dist = length(aspectCorrected);\n\tfloat r = dist / max(uRadius, 0.0001);\n\n\tif (r > 1.0 || uFieldOfView <= 0.0001) {\n\t\tfragColor =
|
|
2
|
+
export declare const FISHEYE_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uCenter;\nuniform float uFieldOfView;\nuniform float uRadius;\nuniform float uZoom;\nuniform float uAspect;\n\nvoid main() {\n\tvec2 toCenter = vUv - uCenter;\n\tvec2 aspectCorrected = vec2(toCenter.x * uAspect, toCenter.y);\n\n\tfloat dist = length(aspectCorrected);\n\tfloat r = dist / max(uRadius, 0.0001);\n\n\tif (r > 1.0 || uFieldOfView <= 0.0001) {\n\t\tfragColor = texture(uSource, vUv);\n\t\treturn;\n\t}\n\n\tfloat halfFov = uFieldOfView * 0.5;\n\tfloat warped = tan(r * halfFov) / tan(halfFov);\n\n\tfloat scale = (dist > 0.00001) ? (warped * uRadius / dist) : 0.0;\n\tvec2 warpedAspect = aspectCorrected * scale;\n\tvec2 warpedOffset = vec2(warpedAspect.x / uAspect, warpedAspect.y);\n\twarpedOffset /= max(uZoom, 0.0001);\n\n\tvec2 srcUv = uCenter + warpedOffset;\n\n\tif (\n\t\tsrcUv.x < 0.0 ||\n\t\tsrcUv.x > 1.0 ||\n\t\tsrcUv.y < 0.0 ||\n\t\tsrcUv.y > 1.0\n\t) {\n\t\tfragColor = vec4(0.0);\n\t\treturn;\n\t}\n\n\tfragColor = texture(uSource, srcUv);\n}\n";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/effects",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.517",
|
|
4
4
|
"description": "Effects that can be applied to Remotion-based canvas components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"remotion": "4.0.
|
|
29
|
+
"remotion": "4.0.517"
|
|
30
30
|
},
|
|
31
31
|
"exports": {
|
|
32
32
|
".": {
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
},
|
|
611
611
|
"homepage": "https://www.remotion.dev/docs/effects/api",
|
|
612
612
|
"devDependencies": {
|
|
613
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
613
|
+
"@remotion/eslint-config-internal": "4.0.517",
|
|
614
614
|
"@vitest/browser-playwright": "4.0.9",
|
|
615
615
|
"eslint": "9.19.0",
|
|
616
616
|
"vitest": "4.0.9",
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const EffectInternals: {
|
|
2
|
-
readonly halftone: (params?: (import("./halftone.js").HalftoneParams & {
|
|
3
|
-
readonly disabled?: boolean | undefined;
|
|
4
|
-
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
5
|
-
readonly tint: (params: import("./tint.js").TintParams & {
|
|
6
|
-
readonly disabled?: boolean | undefined;
|
|
7
|
-
}) => import("remotion").EffectDescriptor<unknown>;
|
|
8
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as blurExports from '../blur/index.js';
|
|
2
|
-
export type { BlurParams } from '../blur/index.js';
|
|
3
|
-
declare const blur: (params: blurExports.BlurParams & {
|
|
4
|
-
readonly disabled?: boolean | undefined;
|
|
5
|
-
}) => import("remotion").EffectDescriptor<unknown>;
|
|
6
|
-
export { blur };
|
package/dist/esm/page-turn.mjs
DELETED
|
@@ -1,521 +0,0 @@
|
|
|
1
|
-
// src/page-turn.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/uv-coordinate.ts
|
|
110
|
-
var publicUvToShaderUv = (uv) => {
|
|
111
|
-
return [uv[0], 1 - uv[1]];
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
// src/page-turn.ts
|
|
115
|
-
var { createEffect, createWebGL2ContextError } = Internals;
|
|
116
|
-
var DEFAULT_PROGRESS = 0.5;
|
|
117
|
-
var DEFAULT_FOLD_POSITION = [1, 1];
|
|
118
|
-
var DEFAULT_ANGLE = 225;
|
|
119
|
-
var DEFAULT_FOLD_RADIUS = 0.18;
|
|
120
|
-
var DEFAULT_LIGHT_DIRECTION = 60;
|
|
121
|
-
var DEFAULT_SHADOW = 0.45;
|
|
122
|
-
var DEFAULT_BACK_OPACITY = 0.85;
|
|
123
|
-
var DEFAULT_PAPER_COLOR = "#fff8dc";
|
|
124
|
-
var pageTurnSchema = {
|
|
125
|
-
progress: {
|
|
126
|
-
type: "number",
|
|
127
|
-
min: 0,
|
|
128
|
-
max: 1,
|
|
129
|
-
step: 0.01,
|
|
130
|
-
default: DEFAULT_PROGRESS,
|
|
131
|
-
description: "Progress",
|
|
132
|
-
hiddenFromList: false
|
|
133
|
-
},
|
|
134
|
-
foldPosition: {
|
|
135
|
-
type: "uv-coordinate",
|
|
136
|
-
step: 0.01,
|
|
137
|
-
default: DEFAULT_FOLD_POSITION,
|
|
138
|
-
description: "Fold position"
|
|
139
|
-
},
|
|
140
|
-
angle: {
|
|
141
|
-
type: "rotation-degrees",
|
|
142
|
-
step: 1,
|
|
143
|
-
default: DEFAULT_ANGLE,
|
|
144
|
-
description: "Angle"
|
|
145
|
-
},
|
|
146
|
-
foldRadius: {
|
|
147
|
-
type: "number",
|
|
148
|
-
min: 0.02,
|
|
149
|
-
max: 0.5,
|
|
150
|
-
step: 0.01,
|
|
151
|
-
default: DEFAULT_FOLD_RADIUS,
|
|
152
|
-
description: "Fold radius",
|
|
153
|
-
hiddenFromList: false
|
|
154
|
-
},
|
|
155
|
-
lightDirection: {
|
|
156
|
-
type: "rotation-degrees",
|
|
157
|
-
step: 1,
|
|
158
|
-
default: DEFAULT_LIGHT_DIRECTION,
|
|
159
|
-
description: "Light direction"
|
|
160
|
-
},
|
|
161
|
-
shadow: {
|
|
162
|
-
type: "number",
|
|
163
|
-
min: 0,
|
|
164
|
-
max: 1,
|
|
165
|
-
step: 0.01,
|
|
166
|
-
default: DEFAULT_SHADOW,
|
|
167
|
-
description: "Shadow",
|
|
168
|
-
hiddenFromList: false
|
|
169
|
-
},
|
|
170
|
-
backOpacity: {
|
|
171
|
-
type: "number",
|
|
172
|
-
min: 0,
|
|
173
|
-
max: 1,
|
|
174
|
-
step: 0.01,
|
|
175
|
-
default: DEFAULT_BACK_OPACITY,
|
|
176
|
-
description: "Back opacity",
|
|
177
|
-
hiddenFromList: false
|
|
178
|
-
},
|
|
179
|
-
paperColor: {
|
|
180
|
-
type: "color",
|
|
181
|
-
default: DEFAULT_PAPER_COLOR,
|
|
182
|
-
description: "Paper color"
|
|
183
|
-
}
|
|
184
|
-
};
|
|
185
|
-
var resolve = (p) => ({
|
|
186
|
-
progress: p.progress ?? DEFAULT_PROGRESS,
|
|
187
|
-
foldPosition: [
|
|
188
|
-
...p.foldPosition ?? DEFAULT_FOLD_POSITION
|
|
189
|
-
],
|
|
190
|
-
angle: p.angle ?? DEFAULT_ANGLE,
|
|
191
|
-
foldRadius: p.foldRadius ?? DEFAULT_FOLD_RADIUS,
|
|
192
|
-
lightDirection: p.lightDirection ?? DEFAULT_LIGHT_DIRECTION,
|
|
193
|
-
shadow: p.shadow ?? DEFAULT_SHADOW,
|
|
194
|
-
backOpacity: p.backOpacity ?? DEFAULT_BACK_OPACITY,
|
|
195
|
-
paperColor: p.paperColor ?? DEFAULT_PAPER_COLOR
|
|
196
|
-
});
|
|
197
|
-
var assertOptionalUvCoordinate = (value, name) => {
|
|
198
|
-
if (value === undefined) {
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
201
|
-
if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
|
|
202
|
-
throw new TypeError(`"${name}" must be a [number, number] tuple`);
|
|
203
|
-
}
|
|
204
|
-
};
|
|
205
|
-
var validatePageTurnParams = (params) => {
|
|
206
|
-
assertEffectParamsObject(params, "Page turn");
|
|
207
|
-
assertOptionalFiniteNumber(params.progress, "progress");
|
|
208
|
-
assertOptionalUvCoordinate(params.foldPosition, "foldPosition");
|
|
209
|
-
assertOptionalFiniteNumber(params.angle, "angle");
|
|
210
|
-
assertOptionalFiniteNumber(params.foldRadius, "foldRadius");
|
|
211
|
-
assertOptionalFiniteNumber(params.lightDirection, "lightDirection");
|
|
212
|
-
assertOptionalFiniteNumber(params.shadow, "shadow");
|
|
213
|
-
assertOptionalFiniteNumber(params.backOpacity, "backOpacity");
|
|
214
|
-
assertOptionalColor(params.paperColor, "paperColor");
|
|
215
|
-
validateUnitInterval(params.progress ?? DEFAULT_PROGRESS, "progress");
|
|
216
|
-
validateUnitInterval(params.shadow ?? DEFAULT_SHADOW, "shadow");
|
|
217
|
-
validateUnitInterval(params.backOpacity ?? DEFAULT_BACK_OPACITY, "backOpacity");
|
|
218
|
-
const foldRadius = params.foldRadius ?? DEFAULT_FOLD_RADIUS;
|
|
219
|
-
if (foldRadius < 0.02) {
|
|
220
|
-
throw new TypeError(`"foldRadius" must be >= 0.02, but got ${JSON.stringify(foldRadius)}`);
|
|
221
|
-
}
|
|
222
|
-
if (foldRadius > 0.5) {
|
|
223
|
-
throw new TypeError(`"foldRadius" must be <= 0.5, but got ${JSON.stringify(foldRadius)}`);
|
|
224
|
-
}
|
|
225
|
-
};
|
|
226
|
-
var PAGE_TURN_VS = `#version 300 es
|
|
227
|
-
in vec2 aPos;
|
|
228
|
-
in vec2 aUv;
|
|
229
|
-
out vec2 vUv;
|
|
230
|
-
|
|
231
|
-
void main() {
|
|
232
|
-
vUv = aUv;
|
|
233
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
234
|
-
}
|
|
235
|
-
`;
|
|
236
|
-
var PAGE_TURN_FS = `#version 300 es
|
|
237
|
-
precision highp float;
|
|
238
|
-
|
|
239
|
-
in vec2 vUv;
|
|
240
|
-
out vec4 fragColor;
|
|
241
|
-
|
|
242
|
-
uniform sampler2D uSource;
|
|
243
|
-
uniform float uProgress;
|
|
244
|
-
uniform vec2 uFoldPosition;
|
|
245
|
-
uniform vec2 uDirectionVector;
|
|
246
|
-
uniform vec2 uLightVector;
|
|
247
|
-
uniform float uFoldRadius;
|
|
248
|
-
uniform float uShadow;
|
|
249
|
-
uniform float uBackOpacity;
|
|
250
|
-
uniform vec4 uPaperColor;
|
|
251
|
-
|
|
252
|
-
vec2 rangeFromPosition(vec2 origin, vec2 v) {
|
|
253
|
-
float a0 = dot(vec2(0.0, 0.0) - origin, v);
|
|
254
|
-
float a1 = dot(vec2(1.0, 0.0) - origin, v);
|
|
255
|
-
float a2 = dot(vec2(0.0, 1.0) - origin, v);
|
|
256
|
-
float a3 = dot(vec2(1.0, 1.0) - origin, v);
|
|
257
|
-
return vec2(
|
|
258
|
-
min(min(a0, a1), min(a2, a3)),
|
|
259
|
-
max(max(a0, a1), max(a2, a3))
|
|
260
|
-
);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
float toTurnAxis(vec2 uv) {
|
|
264
|
-
vec2 dir = normalize(uDirectionVector);
|
|
265
|
-
vec2 range = rangeFromPosition(uFoldPosition, dir);
|
|
266
|
-
float rawAxis = dot(uv - uFoldPosition, dir);
|
|
267
|
-
return rawAxis / max(range.y, 0.0001);
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
vec2 fromTurnAxis(float axis, float cross, vec2 dir, float axisSpan) {
|
|
271
|
-
vec2 perpendicular = vec2(-dir.y, dir.x);
|
|
272
|
-
return uFoldPosition + dir * (axis * axisSpan) + perpendicular * cross;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
float toCrossAxis(vec2 uv, vec2 dir) {
|
|
276
|
-
vec2 perpendicular = vec2(-dir.y, dir.x);
|
|
277
|
-
return dot(uv - uFoldPosition, perpendicular);
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
void main() {
|
|
281
|
-
vec2 dir = normalize(uDirectionVector);
|
|
282
|
-
vec2 perpendicular = vec2(-dir.y, dir.x);
|
|
283
|
-
vec2 axisRange = rangeFromPosition(uFoldPosition, dir);
|
|
284
|
-
vec2 crossRange = rangeFromPosition(uFoldPosition, perpendicular);
|
|
285
|
-
float axisSpan = max(axisRange.y, 0.0001);
|
|
286
|
-
float axis = toTurnAxis(vUv);
|
|
287
|
-
float cross = toCrossAxis(vUv, dir);
|
|
288
|
-
float progress = clamp(uProgress, 0.0, 1.0);
|
|
289
|
-
float radius = clamp(uFoldRadius, 0.02, 0.5);
|
|
290
|
-
float start = progress - radius;
|
|
291
|
-
float end = progress;
|
|
292
|
-
|
|
293
|
-
if (axis >= end) {
|
|
294
|
-
fragColor = texture(uSource, vUv);
|
|
295
|
-
return;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
if (axis <= start) {
|
|
299
|
-
fragColor = vec4(0.0);
|
|
300
|
-
return;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
float t = clamp((axis - start) / max(radius, 0.0001), 0.0, 1.0);
|
|
304
|
-
float crossNormalized = (cross - crossRange.x) / max(crossRange.y - crossRange.x, 0.0001);
|
|
305
|
-
float sourceAxis = mix(max(start, 0.0), end, t);
|
|
306
|
-
vec2 sampleUv = fromTurnAxis(sourceAxis, cross, dir, axisSpan);
|
|
307
|
-
|
|
308
|
-
if (
|
|
309
|
-
sampleUv.x < 0.0 || sampleUv.x > 1.0 ||
|
|
310
|
-
sampleUv.y < 0.0 || sampleUv.y > 1.0
|
|
311
|
-
) {
|
|
312
|
-
fragColor = vec4(0.0);
|
|
313
|
-
return;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
vec4 color = texture(uSource, sampleUv);
|
|
317
|
-
float crease = smoothstep(0.72, 1.0, t);
|
|
318
|
-
float freeEdge = 1.0 - smoothstep(0.0, 0.28, t);
|
|
319
|
-
float backMix = 1.0 - smoothstep(0.22, 0.95, t);
|
|
320
|
-
float lightAgainstFold = dot(normalize(uLightVector), normalize(dir + perpendicular * 0.24));
|
|
321
|
-
float diffuse = 0.88 + 0.12 * lightAgainstFold;
|
|
322
|
-
float shade = diffuse - uShadow * (0.36 * crease + 0.16 * freeEdge);
|
|
323
|
-
float sheen = pow(max(0.0, 1.0 - abs(t - 0.44) / 0.13), 2.0);
|
|
324
|
-
float glossyStreak = pow(max(0.0, 1.0 - abs(crossNormalized - (0.36 + t * 0.16)) / 0.09), 2.0);
|
|
325
|
-
float edgeFade = smoothstep(0.0, 0.08, t);
|
|
326
|
-
|
|
327
|
-
vec3 rgb = color.a > 0.001 ? color.rgb / color.a : vec3(0.0);
|
|
328
|
-
vec3 paperRgb = uPaperColor.rgb;
|
|
329
|
-
vec3 backRgb = mix(paperRgb, rgb, 0.08 + 0.06 * t);
|
|
330
|
-
vec3 shaded = mix(rgb, backRgb, backMix) * shade;
|
|
331
|
-
shaded += vec3(1.0) * sheen * glossyStreak * (0.18 + 0.18 * backMix);
|
|
332
|
-
shaded += paperRgb * crease * 0.08;
|
|
333
|
-
float alpha = color.a * mix(1.0, uBackOpacity, backMix) * edgeFade;
|
|
334
|
-
|
|
335
|
-
fragColor = vec4(shaded * alpha, alpha);
|
|
336
|
-
}
|
|
337
|
-
`;
|
|
338
|
-
var compileShader = (gl, type, source) => {
|
|
339
|
-
const shader = gl.createShader(type);
|
|
340
|
-
if (!shader) {
|
|
341
|
-
throw new Error("Failed to create WebGL shader");
|
|
342
|
-
}
|
|
343
|
-
gl.shaderSource(shader, source);
|
|
344
|
-
gl.compileShader(shader);
|
|
345
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
346
|
-
const log = gl.getShaderInfoLog(shader);
|
|
347
|
-
gl.deleteShader(shader);
|
|
348
|
-
throw new Error(`Page turn shader compile failed: ${log ?? "(no log)"}`);
|
|
349
|
-
}
|
|
350
|
-
return shader;
|
|
351
|
-
};
|
|
352
|
-
var linkProgram = (gl, vs, fs) => {
|
|
353
|
-
const program = gl.createProgram();
|
|
354
|
-
if (!program) {
|
|
355
|
-
throw new Error("Failed to create WebGL program");
|
|
356
|
-
}
|
|
357
|
-
gl.attachShader(program, vs);
|
|
358
|
-
gl.attachShader(program, fs);
|
|
359
|
-
gl.linkProgram(program);
|
|
360
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
361
|
-
const log = gl.getProgramInfoLog(program);
|
|
362
|
-
gl.deleteProgram(program);
|
|
363
|
-
throw new Error(`Page turn program link failed: ${log ?? "(no log)"}`);
|
|
364
|
-
}
|
|
365
|
-
return program;
|
|
366
|
-
};
|
|
367
|
-
var pageTurn = createEffect({
|
|
368
|
-
type: "remotion/page-turn",
|
|
369
|
-
label: "pageTurn()",
|
|
370
|
-
documentationLink: "https://www.remotion.dev/docs/effects/page-turn",
|
|
371
|
-
backend: "webgl2",
|
|
372
|
-
calculateKey: (params) => {
|
|
373
|
-
const r = resolve(params);
|
|
374
|
-
return `page-turn-${r.progress}-${r.foldPosition.join(":")}-${r.angle}-${r.foldRadius}-${r.lightDirection}-${r.shadow}-${r.backOpacity}-${r.paperColor}`;
|
|
375
|
-
},
|
|
376
|
-
setup: (target) => {
|
|
377
|
-
const gl = target.getContext("webgl2", {
|
|
378
|
-
premultipliedAlpha: true,
|
|
379
|
-
alpha: true,
|
|
380
|
-
preserveDrawingBuffer: true
|
|
381
|
-
});
|
|
382
|
-
if (!gl) {
|
|
383
|
-
throw createWebGL2ContextError("page turn effect");
|
|
384
|
-
}
|
|
385
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
386
|
-
const vs = compileShader(gl, gl.VERTEX_SHADER, PAGE_TURN_VS);
|
|
387
|
-
const fs = compileShader(gl, gl.FRAGMENT_SHADER, PAGE_TURN_FS);
|
|
388
|
-
const program = linkProgram(gl, vs, fs);
|
|
389
|
-
gl.deleteShader(vs);
|
|
390
|
-
gl.deleteShader(fs);
|
|
391
|
-
const vao = gl.createVertexArray();
|
|
392
|
-
if (!vao) {
|
|
393
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
394
|
-
}
|
|
395
|
-
gl.bindVertexArray(vao);
|
|
396
|
-
const data = new Float32Array([
|
|
397
|
-
-1,
|
|
398
|
-
-1,
|
|
399
|
-
0,
|
|
400
|
-
0,
|
|
401
|
-
1,
|
|
402
|
-
-1,
|
|
403
|
-
1,
|
|
404
|
-
0,
|
|
405
|
-
-1,
|
|
406
|
-
1,
|
|
407
|
-
0,
|
|
408
|
-
1,
|
|
409
|
-
1,
|
|
410
|
-
1,
|
|
411
|
-
1,
|
|
412
|
-
1
|
|
413
|
-
]);
|
|
414
|
-
const vbo = gl.createBuffer();
|
|
415
|
-
if (!vbo) {
|
|
416
|
-
throw new Error("Failed to create WebGL buffer");
|
|
417
|
-
}
|
|
418
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
419
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
420
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
421
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
422
|
-
gl.enableVertexAttribArray(aPos);
|
|
423
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
424
|
-
gl.enableVertexAttribArray(aUv);
|
|
425
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
426
|
-
gl.bindVertexArray(null);
|
|
427
|
-
const texture = gl.createTexture();
|
|
428
|
-
if (!texture) {
|
|
429
|
-
throw new Error("Failed to create WebGL texture");
|
|
430
|
-
}
|
|
431
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
432
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
433
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
434
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
435
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
436
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
437
|
-
const colorCanvas = document.createElement("canvas");
|
|
438
|
-
colorCanvas.width = 1;
|
|
439
|
-
colorCanvas.height = 1;
|
|
440
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
441
|
-
if (!colorCtx) {
|
|
442
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
443
|
-
}
|
|
444
|
-
return {
|
|
445
|
-
gl,
|
|
446
|
-
program,
|
|
447
|
-
vao,
|
|
448
|
-
vbo,
|
|
449
|
-
texture,
|
|
450
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
451
|
-
uProgress: gl.getUniformLocation(program, "uProgress"),
|
|
452
|
-
uFoldPosition: gl.getUniformLocation(program, "uFoldPosition"),
|
|
453
|
-
uDirectionVector: gl.getUniformLocation(program, "uDirectionVector"),
|
|
454
|
-
uLightVector: gl.getUniformLocation(program, "uLightVector"),
|
|
455
|
-
uFoldRadius: gl.getUniformLocation(program, "uFoldRadius"),
|
|
456
|
-
uShadow: gl.getUniformLocation(program, "uShadow"),
|
|
457
|
-
uBackOpacity: gl.getUniformLocation(program, "uBackOpacity"),
|
|
458
|
-
uPaperColor: gl.getUniformLocation(program, "uPaperColor"),
|
|
459
|
-
colorCtx,
|
|
460
|
-
cachedPaperColor: "",
|
|
461
|
-
cachedPaperColorRgba: [255, 248, 220, 255]
|
|
462
|
-
};
|
|
463
|
-
},
|
|
464
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
465
|
-
const r = resolve(params);
|
|
466
|
-
const { gl, program, texture, vao } = state;
|
|
467
|
-
if (state.cachedPaperColor !== r.paperColor) {
|
|
468
|
-
state.cachedPaperColor = r.paperColor;
|
|
469
|
-
state.cachedPaperColorRgba = parseColorRgba(state.colorCtx, r.paperColor);
|
|
470
|
-
}
|
|
471
|
-
const [paperR, paperG, paperB, paperA] = state.cachedPaperColorRgba;
|
|
472
|
-
const [foldX, foldY] = publicUvToShaderUv(r.foldPosition);
|
|
473
|
-
gl.viewport(0, 0, width, height);
|
|
474
|
-
gl.clearColor(0, 0, 0, 0);
|
|
475
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
476
|
-
gl.useProgram(program);
|
|
477
|
-
gl.bindVertexArray(vao);
|
|
478
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
479
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
480
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
481
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
482
|
-
if (state.uSource)
|
|
483
|
-
gl.uniform1i(state.uSource, 0);
|
|
484
|
-
if (state.uProgress)
|
|
485
|
-
gl.uniform1f(state.uProgress, r.progress);
|
|
486
|
-
if (state.uFoldPosition)
|
|
487
|
-
gl.uniform2f(state.uFoldPosition, foldX, foldY);
|
|
488
|
-
if (state.uDirectionVector) {
|
|
489
|
-
const radians = r.angle * Math.PI / 180;
|
|
490
|
-
gl.uniform2f(state.uDirectionVector, Math.cos(radians), -Math.sin(radians));
|
|
491
|
-
}
|
|
492
|
-
if (state.uLightVector) {
|
|
493
|
-
const radians = r.lightDirection * Math.PI / 180;
|
|
494
|
-
gl.uniform2f(state.uLightVector, Math.cos(radians), -Math.sin(radians));
|
|
495
|
-
}
|
|
496
|
-
if (state.uFoldRadius)
|
|
497
|
-
gl.uniform1f(state.uFoldRadius, r.foldRadius);
|
|
498
|
-
if (state.uShadow)
|
|
499
|
-
gl.uniform1f(state.uShadow, r.shadow);
|
|
500
|
-
if (state.uBackOpacity)
|
|
501
|
-
gl.uniform1f(state.uBackOpacity, r.backOpacity);
|
|
502
|
-
if (state.uPaperColor)
|
|
503
|
-
gl.uniform4f(state.uPaperColor, paperR / 255, paperG / 255, paperB / 255, paperA / 255);
|
|
504
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
505
|
-
gl.bindVertexArray(null);
|
|
506
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
507
|
-
gl.useProgram(null);
|
|
508
|
-
},
|
|
509
|
-
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
510
|
-
gl.deleteBuffer(vbo);
|
|
511
|
-
gl.deleteProgram(program);
|
|
512
|
-
gl.deleteVertexArray(vao);
|
|
513
|
-
gl.deleteTexture(texture);
|
|
514
|
-
},
|
|
515
|
-
schema: pageTurnSchema,
|
|
516
|
-
validateParams: validatePageTurnParams
|
|
517
|
-
});
|
|
518
|
-
export {
|
|
519
|
-
pageTurnSchema,
|
|
520
|
-
pageTurn
|
|
521
|
-
};
|
package/dist/page-turn.d.ts
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
export declare const pageTurnSchema: {
|
|
2
|
-
readonly progress: {
|
|
3
|
-
readonly type: "number";
|
|
4
|
-
readonly min: 0;
|
|
5
|
-
readonly max: 1;
|
|
6
|
-
readonly step: 0.01;
|
|
7
|
-
readonly default: 0.5;
|
|
8
|
-
readonly description: "Progress";
|
|
9
|
-
readonly hiddenFromList: false;
|
|
10
|
-
};
|
|
11
|
-
readonly foldPosition: {
|
|
12
|
-
readonly type: "uv-coordinate";
|
|
13
|
-
readonly step: 0.01;
|
|
14
|
-
readonly default: readonly [1, 1];
|
|
15
|
-
readonly description: "Fold position";
|
|
16
|
-
};
|
|
17
|
-
readonly angle: {
|
|
18
|
-
readonly type: "rotation-degrees";
|
|
19
|
-
readonly step: 1;
|
|
20
|
-
readonly default: 225;
|
|
21
|
-
readonly description: "Angle";
|
|
22
|
-
};
|
|
23
|
-
readonly foldRadius: {
|
|
24
|
-
readonly type: "number";
|
|
25
|
-
readonly min: 0.02;
|
|
26
|
-
readonly max: 0.5;
|
|
27
|
-
readonly step: 0.01;
|
|
28
|
-
readonly default: 0.18;
|
|
29
|
-
readonly description: "Fold radius";
|
|
30
|
-
readonly hiddenFromList: false;
|
|
31
|
-
};
|
|
32
|
-
readonly lightDirection: {
|
|
33
|
-
readonly type: "rotation-degrees";
|
|
34
|
-
readonly step: 1;
|
|
35
|
-
readonly default: 60;
|
|
36
|
-
readonly description: "Light direction";
|
|
37
|
-
};
|
|
38
|
-
readonly shadow: {
|
|
39
|
-
readonly type: "number";
|
|
40
|
-
readonly min: 0;
|
|
41
|
-
readonly max: 1;
|
|
42
|
-
readonly step: 0.01;
|
|
43
|
-
readonly default: 0.45;
|
|
44
|
-
readonly description: "Shadow";
|
|
45
|
-
readonly hiddenFromList: false;
|
|
46
|
-
};
|
|
47
|
-
readonly backOpacity: {
|
|
48
|
-
readonly type: "number";
|
|
49
|
-
readonly min: 0;
|
|
50
|
-
readonly max: 1;
|
|
51
|
-
readonly step: 0.01;
|
|
52
|
-
readonly default: 0.85;
|
|
53
|
-
readonly description: "Back opacity";
|
|
54
|
-
readonly hiddenFromList: false;
|
|
55
|
-
};
|
|
56
|
-
readonly paperColor: {
|
|
57
|
-
readonly type: "color";
|
|
58
|
-
readonly default: "#fff8dc";
|
|
59
|
-
readonly description: "Paper color";
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
export type PageTurnFoldPosition = readonly [number, number];
|
|
63
|
-
export type PageTurnParams = {
|
|
64
|
-
/**
|
|
65
|
-
* Turn amount from 0 (flat source) to 1 (fully turned away).
|
|
66
|
-
* Defaults to `0.5`.
|
|
67
|
-
*/
|
|
68
|
-
readonly progress?: number;
|
|
69
|
-
/**
|
|
70
|
-
* Point where the page starts folding, in UV coordinates.
|
|
71
|
-
* Defaults to `[1, 1]`.
|
|
72
|
-
*/
|
|
73
|
-
readonly foldPosition?: PageTurnFoldPosition;
|
|
74
|
-
/** Direction of the turn in degrees. Defaults to `225`. */
|
|
75
|
-
readonly angle?: number;
|
|
76
|
-
/**
|
|
77
|
-
* Width of the curled band as a fraction of the canvas. Defaults to `0.18`.
|
|
78
|
-
*/
|
|
79
|
-
readonly foldRadius?: number;
|
|
80
|
-
/** Direction of the light in degrees. Defaults to `60`. */
|
|
81
|
-
readonly lightDirection?: number;
|
|
82
|
-
/** Strength of the crease and back-face shading. Defaults to `0.45`. */
|
|
83
|
-
readonly shadow?: number;
|
|
84
|
-
/** Opacity of the dimmed back face of the page. Defaults to `0.85`. */
|
|
85
|
-
readonly backOpacity?: number;
|
|
86
|
-
/** Color of the paper back side. Defaults to `#fff8dc`. */
|
|
87
|
-
readonly paperColor?: string;
|
|
88
|
-
};
|
|
89
|
-
export declare const pageTurn: (params?: (PageTurnParams & {
|
|
90
|
-
readonly disabled?: boolean | undefined;
|
|
91
|
-
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|