@remotion/effects 4.0.464 → 4.0.466
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/README.md +13 -2
- package/dist/barrel-distortion/barrel-distortion-runtime.d.ts +21 -0
- package/dist/barrel-distortion/barrel-distortion-shaders.d.ts +2 -0
- package/dist/barrel-distortion/index.d.ts +7 -0
- package/dist/barrel-distortion.d.ts +1 -0
- package/dist/blur/blur-runtime.d.ts +4 -1
- package/dist/blur/index.d.ts +4 -0
- package/dist/blur.d.ts +1 -0
- package/dist/brightness.d.ts +7 -0
- package/dist/color-utils.d.ts +37 -0
- package/dist/effect-internals.d.ts +8 -0
- package/dist/esm/barrel-distortion.mjs +329 -0
- package/dist/esm/blur.mjs +107 -44
- package/dist/esm/brightness.mjs +138 -0
- package/dist/esm/grayscale.mjs +128 -0
- package/dist/esm/halftone.mjs +150 -20
- package/dist/esm/hue.mjs +126 -0
- package/dist/esm/index.mjs +0 -1
- package/dist/esm/invert.mjs +128 -0
- package/dist/esm/mirror.mjs +358 -0
- package/dist/esm/saturation.mjs +128 -0
- package/dist/esm/scale.mjs +103 -0
- package/dist/esm/tint.mjs +72 -14
- package/dist/esm/wave.mjs +289 -55
- package/dist/grayscale.d.ts +7 -0
- package/dist/halftone.d.ts +19 -7
- package/dist/hue.d.ts +7 -0
- package/dist/invert.d.ts +7 -0
- package/dist/mirror/index.d.ts +13 -0
- package/dist/mirror/mirror-runtime.d.ts +26 -0
- package/dist/mirror/mirror-shaders.d.ts +2 -0
- package/dist/mirror.d.ts +1 -0
- package/dist/saturation.d.ts +7 -0
- package/dist/scale/index.d.ts +11 -0
- package/dist/scale.d.ts +1 -0
- package/dist/wave/index.d.ts +12 -0
- package/dist/wave/wave-runtime.d.ts +29 -0
- package/dist/wave/wave-shaders.d.ts +2 -0
- package/dist/wave.d.ts +1 -46
- package/package.json +77 -12
package/dist/esm/tint.mjs
CHANGED
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __export = (target, all) => {
|
|
3
|
-
for (var name in all)
|
|
4
|
-
__defProp(target, name, {
|
|
5
|
-
get: all[name],
|
|
6
|
-
enumerable: true,
|
|
7
|
-
configurable: true,
|
|
8
|
-
set: (newValue) => all[name] = () => newValue
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
|
|
12
1
|
// src/tint.ts
|
|
13
2
|
import { Internals } from "remotion";
|
|
14
3
|
|
|
@@ -29,9 +18,73 @@ var assertRequiredColor = (value, name) => {
|
|
|
29
18
|
}
|
|
30
19
|
};
|
|
31
20
|
|
|
21
|
+
// src/color-utils.ts
|
|
22
|
+
var DEFAULT_AMOUNT = 1;
|
|
23
|
+
var DEFAULT_BRIGHTNESS_AMOUNT = 0;
|
|
24
|
+
var DEFAULT_HUE_DEGREES = 0;
|
|
25
|
+
var colorAmountSchema = {
|
|
26
|
+
type: "number",
|
|
27
|
+
min: 0,
|
|
28
|
+
max: 1,
|
|
29
|
+
step: 0.01,
|
|
30
|
+
default: DEFAULT_AMOUNT,
|
|
31
|
+
description: "Amount"
|
|
32
|
+
};
|
|
33
|
+
var colorMultiplierSchema = {
|
|
34
|
+
type: "number",
|
|
35
|
+
min: 0,
|
|
36
|
+
step: 0.01,
|
|
37
|
+
default: DEFAULT_AMOUNT,
|
|
38
|
+
description: "Amount"
|
|
39
|
+
};
|
|
40
|
+
var brightnessAmountSchema = {
|
|
41
|
+
type: "number",
|
|
42
|
+
min: -1,
|
|
43
|
+
max: 1,
|
|
44
|
+
step: 0.01,
|
|
45
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
46
|
+
description: "Amount"
|
|
47
|
+
};
|
|
48
|
+
var hueDegreesSchema = {
|
|
49
|
+
type: "number",
|
|
50
|
+
step: 1,
|
|
51
|
+
default: DEFAULT_HUE_DEGREES,
|
|
52
|
+
description: "Degrees"
|
|
53
|
+
};
|
|
54
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
55
|
+
if (value === undefined) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
assertRequiredFiniteNumber(value, name);
|
|
59
|
+
};
|
|
60
|
+
var validateUnitInterval = (value, name) => {
|
|
61
|
+
if (value < 0) {
|
|
62
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
63
|
+
}
|
|
64
|
+
if (value > 1) {
|
|
65
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
var validateNonNegative = (value, name) => {
|
|
69
|
+
if (value < 0) {
|
|
70
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
74
|
+
if (value < -1) {
|
|
75
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
76
|
+
}
|
|
77
|
+
if (value > 1) {
|
|
78
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
var clampColorChannel = (value) => {
|
|
82
|
+
return Math.max(0, Math.min(255, value));
|
|
83
|
+
};
|
|
84
|
+
|
|
32
85
|
// src/tint.ts
|
|
33
86
|
var { createEffect } = Internals;
|
|
34
|
-
var
|
|
87
|
+
var DEFAULT_AMOUNT2 = 0.5;
|
|
35
88
|
var tintSchema = {
|
|
36
89
|
color: {
|
|
37
90
|
type: "color",
|
|
@@ -43,21 +96,26 @@ var tintSchema = {
|
|
|
43
96
|
min: 0,
|
|
44
97
|
max: 1,
|
|
45
98
|
step: 0.01,
|
|
46
|
-
default:
|
|
99
|
+
default: DEFAULT_AMOUNT2,
|
|
47
100
|
description: "Amount"
|
|
48
101
|
}
|
|
49
102
|
};
|
|
50
103
|
var resolve = (p) => ({
|
|
51
104
|
color: p.color,
|
|
52
|
-
amount: p.amount ??
|
|
105
|
+
amount: p.amount ?? DEFAULT_AMOUNT2
|
|
53
106
|
});
|
|
54
107
|
var validateTintParams = (params) => {
|
|
55
108
|
assertEffectParamsObject(params, "Tint");
|
|
56
109
|
assertRequiredColor(params.color, "color");
|
|
110
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
111
|
+
if (params.amount !== undefined) {
|
|
112
|
+
validateUnitInterval(params.amount, "amount");
|
|
113
|
+
}
|
|
57
114
|
};
|
|
58
115
|
var tint = createEffect({
|
|
59
116
|
type: "remotion/tint",
|
|
60
117
|
label: "Tint",
|
|
118
|
+
documentationLink: "https://www.remotion.dev/docs/effects/tint",
|
|
61
119
|
backend: "2d",
|
|
62
120
|
calculateKey: (params) => {
|
|
63
121
|
const r = resolve(params);
|
package/dist/esm/wave.mjs
CHANGED
|
@@ -1,18 +1,254 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
// src/wave/index.ts
|
|
2
|
+
import { Internals as Internals2 } 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
|
+
}
|
|
10
19
|
};
|
|
11
20
|
|
|
12
|
-
// src/wave.ts
|
|
21
|
+
// src/wave/wave-runtime.ts
|
|
13
22
|
import { Internals } from "remotion";
|
|
14
|
-
|
|
23
|
+
|
|
24
|
+
// src/wave/wave-shaders.ts
|
|
25
|
+
var WAVE_VS = `#version 300 es
|
|
26
|
+
layout(location = 0) in vec2 aPos;
|
|
27
|
+
layout(location = 1) in vec2 aUv;
|
|
28
|
+
out vec2 vUv;
|
|
29
|
+
void main() {
|
|
30
|
+
vUv = aUv;
|
|
31
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
var WAVE_FS = `#version 300 es
|
|
35
|
+
precision highp float;
|
|
36
|
+
in vec2 vUv;
|
|
37
|
+
out vec4 fragColor;
|
|
38
|
+
|
|
39
|
+
uniform sampler2D uSource;
|
|
40
|
+
uniform vec2 uResolution;
|
|
41
|
+
uniform float uAmplitude;
|
|
42
|
+
uniform float uWavelength;
|
|
43
|
+
uniform float uPhase;
|
|
44
|
+
uniform int uDirection;
|
|
45
|
+
|
|
46
|
+
const float TWO_PI = 6.28318530718;
|
|
47
|
+
|
|
48
|
+
void main() {
|
|
49
|
+
float wavelength = max(uWavelength, 0.001);
|
|
50
|
+
vec2 srcUv = vUv;
|
|
51
|
+
|
|
52
|
+
if (uDirection == 0) {
|
|
53
|
+
float coordPx = vUv.x * uResolution.x;
|
|
54
|
+
float offsetPx =
|
|
55
|
+
sin((coordPx / wavelength) * TWO_PI + uPhase) * uAmplitude;
|
|
56
|
+
srcUv.y -= offsetPx / uResolution.y;
|
|
57
|
+
} else {
|
|
58
|
+
float coordPx = vUv.y * uResolution.y;
|
|
59
|
+
float offsetPx =
|
|
60
|
+
sin((coordPx / wavelength) * TWO_PI + uPhase) * uAmplitude;
|
|
61
|
+
srcUv.x -= offsetPx / uResolution.x;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
fragColor = texture(uSource, srcUv);
|
|
65
|
+
}
|
|
66
|
+
`;
|
|
67
|
+
|
|
68
|
+
// src/wave/wave-runtime.ts
|
|
69
|
+
var { createWebGL2ContextError } = Internals;
|
|
70
|
+
var compileShader = (gl, type, source) => {
|
|
71
|
+
const shader = gl.createShader(type);
|
|
72
|
+
if (!shader) {
|
|
73
|
+
throw new Error("Failed to create WebGL shader");
|
|
74
|
+
}
|
|
75
|
+
gl.shaderSource(shader, source);
|
|
76
|
+
gl.compileShader(shader);
|
|
77
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
78
|
+
const log = gl.getShaderInfoLog(shader);
|
|
79
|
+
gl.deleteShader(shader);
|
|
80
|
+
throw new Error(`Shader compile failed: ${log ?? "(no log)"}`);
|
|
81
|
+
}
|
|
82
|
+
return shader;
|
|
83
|
+
};
|
|
84
|
+
var linkProgram = (gl, vs, fs) => {
|
|
85
|
+
const program = gl.createProgram();
|
|
86
|
+
if (!program) {
|
|
87
|
+
throw new Error("Failed to create WebGL program");
|
|
88
|
+
}
|
|
89
|
+
gl.attachShader(program, vs);
|
|
90
|
+
gl.attachShader(program, fs);
|
|
91
|
+
gl.linkProgram(program);
|
|
92
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
93
|
+
const log = gl.getProgramInfoLog(program);
|
|
94
|
+
gl.deleteProgram(program);
|
|
95
|
+
throw new Error(`Program link failed: ${log ?? "(no log)"}`);
|
|
96
|
+
}
|
|
97
|
+
return program;
|
|
98
|
+
};
|
|
99
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
100
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
101
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
102
|
+
const program = linkProgram(gl, vs, fs);
|
|
103
|
+
gl.deleteShader(vs);
|
|
104
|
+
gl.deleteShader(fs);
|
|
105
|
+
return program;
|
|
106
|
+
};
|
|
107
|
+
var getWaveUniforms = (gl, program) => ({
|
|
108
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
109
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
110
|
+
uAmplitude: gl.getUniformLocation(program, "uAmplitude"),
|
|
111
|
+
uWavelength: gl.getUniformLocation(program, "uWavelength"),
|
|
112
|
+
uPhase: gl.getUniformLocation(program, "uPhase"),
|
|
113
|
+
uDirection: gl.getUniformLocation(program, "uDirection")
|
|
114
|
+
});
|
|
115
|
+
var createRgbaTexture = (gl) => {
|
|
116
|
+
const texture = gl.createTexture();
|
|
117
|
+
if (!texture) {
|
|
118
|
+
throw new Error("Failed to create WebGL texture");
|
|
119
|
+
}
|
|
120
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
121
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
122
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
123
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
124
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
125
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
126
|
+
return texture;
|
|
127
|
+
};
|
|
128
|
+
var setupWave = (target) => {
|
|
129
|
+
const gl = target.getContext("webgl2", {
|
|
130
|
+
premultipliedAlpha: true,
|
|
131
|
+
alpha: true,
|
|
132
|
+
preserveDrawingBuffer: true
|
|
133
|
+
});
|
|
134
|
+
if (!gl) {
|
|
135
|
+
throw createWebGL2ContextError("wave effect");
|
|
136
|
+
}
|
|
137
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
138
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
139
|
+
const program = createProgram(gl, WAVE_VS, WAVE_FS);
|
|
140
|
+
const vao = gl.createVertexArray();
|
|
141
|
+
if (!vao) {
|
|
142
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
143
|
+
}
|
|
144
|
+
gl.bindVertexArray(vao);
|
|
145
|
+
const data = new Float32Array([
|
|
146
|
+
-1,
|
|
147
|
+
-1,
|
|
148
|
+
0,
|
|
149
|
+
0,
|
|
150
|
+
1,
|
|
151
|
+
-1,
|
|
152
|
+
1,
|
|
153
|
+
0,
|
|
154
|
+
-1,
|
|
155
|
+
1,
|
|
156
|
+
0,
|
|
157
|
+
1,
|
|
158
|
+
1,
|
|
159
|
+
1,
|
|
160
|
+
1,
|
|
161
|
+
1
|
|
162
|
+
]);
|
|
163
|
+
const vbo = gl.createBuffer();
|
|
164
|
+
if (!vbo) {
|
|
165
|
+
throw new Error("Failed to create WebGL buffer");
|
|
166
|
+
}
|
|
167
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
168
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
169
|
+
gl.enableVertexAttribArray(0);
|
|
170
|
+
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
|
|
171
|
+
gl.enableVertexAttribArray(1);
|
|
172
|
+
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
|
|
173
|
+
gl.bindVertexArray(null);
|
|
174
|
+
const textureSource = createRgbaTexture(gl);
|
|
175
|
+
return {
|
|
176
|
+
gl,
|
|
177
|
+
program,
|
|
178
|
+
vao,
|
|
179
|
+
vbo,
|
|
180
|
+
textureSource,
|
|
181
|
+
uniforms: getWaveUniforms(gl, program)
|
|
182
|
+
};
|
|
183
|
+
};
|
|
184
|
+
var cleanupWave = (state) => {
|
|
185
|
+
const { gl, program, vao, vbo, textureSource } = state;
|
|
186
|
+
gl.deleteTexture(textureSource);
|
|
187
|
+
gl.deleteBuffer(vbo);
|
|
188
|
+
gl.deleteProgram(program);
|
|
189
|
+
gl.deleteVertexArray(vao);
|
|
190
|
+
};
|
|
191
|
+
var drawFullscreenQuad = (state) => {
|
|
192
|
+
const { gl, vao } = state;
|
|
193
|
+
gl.bindVertexArray(vao);
|
|
194
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
195
|
+
gl.bindVertexArray(null);
|
|
196
|
+
};
|
|
197
|
+
var applyWave = ({
|
|
198
|
+
state,
|
|
199
|
+
source,
|
|
200
|
+
width,
|
|
201
|
+
height,
|
|
202
|
+
amplitude,
|
|
203
|
+
wavelength,
|
|
204
|
+
phase,
|
|
205
|
+
direction
|
|
206
|
+
}) => {
|
|
207
|
+
const { gl, program, textureSource, uniforms } = state;
|
|
208
|
+
gl.viewport(0, 0, width, height);
|
|
209
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
210
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
211
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
212
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
213
|
+
gl.clearColor(0, 0, 0, 0);
|
|
214
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
215
|
+
gl.useProgram(program);
|
|
216
|
+
if (uniforms.uSource)
|
|
217
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
218
|
+
if (uniforms.uResolution)
|
|
219
|
+
gl.uniform2f(uniforms.uResolution, width, height);
|
|
220
|
+
if (uniforms.uAmplitude)
|
|
221
|
+
gl.uniform1f(uniforms.uAmplitude, amplitude);
|
|
222
|
+
if (uniforms.uWavelength)
|
|
223
|
+
gl.uniform1f(uniforms.uWavelength, wavelength);
|
|
224
|
+
if (uniforms.uPhase)
|
|
225
|
+
gl.uniform1f(uniforms.uPhase, phase);
|
|
226
|
+
if (uniforms.uDirection)
|
|
227
|
+
gl.uniform1i(uniforms.uDirection, direction === "horizontal" ? 0 : 1);
|
|
228
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
229
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
230
|
+
drawFullscreenQuad(state);
|
|
231
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
232
|
+
gl.useProgram(null);
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
// src/wave/index.ts
|
|
236
|
+
var { createEffect } = Internals2;
|
|
15
237
|
var waveSchema = {
|
|
238
|
+
phase: {
|
|
239
|
+
type: "number",
|
|
240
|
+
default: 0,
|
|
241
|
+
description: "Phase"
|
|
242
|
+
},
|
|
243
|
+
direction: {
|
|
244
|
+
type: "enum",
|
|
245
|
+
variants: {
|
|
246
|
+
horizontal: {},
|
|
247
|
+
vertical: {}
|
|
248
|
+
},
|
|
249
|
+
default: "horizontal",
|
|
250
|
+
description: "Direction"
|
|
251
|
+
},
|
|
16
252
|
amplitude: {
|
|
17
253
|
type: "number",
|
|
18
254
|
min: 0,
|
|
@@ -28,65 +264,63 @@ var waveSchema = {
|
|
|
28
264
|
step: 1,
|
|
29
265
|
default: 240,
|
|
30
266
|
description: "Wavelength"
|
|
31
|
-
},
|
|
32
|
-
evolution: {
|
|
33
|
-
type: "number",
|
|
34
|
-
default: 0,
|
|
35
|
-
description: "Evolution"
|
|
36
|
-
},
|
|
37
|
-
sliceWidth: {
|
|
38
|
-
type: "number",
|
|
39
|
-
min: 1,
|
|
40
|
-
max: 100,
|
|
41
|
-
step: 1,
|
|
42
|
-
default: 4,
|
|
43
|
-
description: "Slice width"
|
|
44
|
-
},
|
|
45
|
-
background: {
|
|
46
|
-
type: "color",
|
|
47
|
-
default: "transparent",
|
|
48
|
-
description: "Background"
|
|
49
267
|
}
|
|
50
268
|
};
|
|
51
269
|
var resolve = (p) => ({
|
|
270
|
+
phase: p.phase ?? 0,
|
|
271
|
+
direction: p.direction ?? "horizontal",
|
|
52
272
|
amplitude: p.amplitude ?? 60,
|
|
53
|
-
wavelength: p.wavelength ?? 240
|
|
54
|
-
evolution: p.evolution ?? 0,
|
|
55
|
-
sliceWidth: p.sliceWidth ?? 4,
|
|
56
|
-
background: p.background ?? "transparent"
|
|
273
|
+
wavelength: p.wavelength ?? 240
|
|
57
274
|
});
|
|
275
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
276
|
+
if (value === undefined) {
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
assertRequiredFiniteNumber(value, name);
|
|
280
|
+
};
|
|
281
|
+
var validateWaveParams = (params) => {
|
|
282
|
+
assertEffectParamsObject(params, "Wave");
|
|
283
|
+
assertOptionalFiniteNumber(params.phase, "phase");
|
|
284
|
+
assertOptionalFiniteNumber(params.amplitude, "amplitude");
|
|
285
|
+
assertOptionalFiniteNumber(params.wavelength, "wavelength");
|
|
286
|
+
if (params.direction !== undefined && params.direction !== "horizontal" && params.direction !== "vertical") {
|
|
287
|
+
throw new TypeError(`"direction" must be "horizontal" or "vertical", but got ${JSON.stringify(params.direction)}`);
|
|
288
|
+
}
|
|
289
|
+
const resolved = resolve(params);
|
|
290
|
+
if (resolved.amplitude < 0) {
|
|
291
|
+
throw new TypeError(`"amplitude" must be >= 0, but got ${JSON.stringify(resolved.amplitude)}`);
|
|
292
|
+
}
|
|
293
|
+
if (resolved.wavelength <= 0) {
|
|
294
|
+
throw new TypeError(`"wavelength" must be > 0, but got ${JSON.stringify(resolved.wavelength)}`);
|
|
295
|
+
}
|
|
296
|
+
};
|
|
58
297
|
var wave = createEffect({
|
|
59
298
|
type: "remotion/wave",
|
|
60
299
|
label: "Wave",
|
|
61
|
-
|
|
300
|
+
documentationLink: "https://www.remotion.dev/docs/effects/wave",
|
|
301
|
+
backend: "webgl2",
|
|
62
302
|
calculateKey: (params) => {
|
|
63
303
|
const r = resolve(params);
|
|
64
|
-
return `wave-${r.
|
|
304
|
+
return `wave-${r.phase}-${r.direction}-${r.amplitude}-${r.wavelength}`;
|
|
65
305
|
},
|
|
66
|
-
setup: () =>
|
|
67
|
-
apply: ({ source,
|
|
68
|
-
const ctx = target.getContext("2d");
|
|
69
|
-
if (!ctx) {
|
|
70
|
-
throw new Error("Failed to acquire 2D context for wave effect. The canvas may have been assigned a different context type.");
|
|
71
|
-
}
|
|
306
|
+
setup: (target) => setupWave(target),
|
|
307
|
+
apply: ({ source, width, height, params, state }) => {
|
|
72
308
|
const r = resolve(params);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
cleanup: () => {
|
|
84
|
-
return;
|
|
309
|
+
applyWave({
|
|
310
|
+
state,
|
|
311
|
+
source,
|
|
312
|
+
width,
|
|
313
|
+
height,
|
|
314
|
+
amplitude: r.amplitude,
|
|
315
|
+
wavelength: r.wavelength,
|
|
316
|
+
phase: r.phase,
|
|
317
|
+
direction: r.direction
|
|
318
|
+
});
|
|
85
319
|
},
|
|
320
|
+
cleanup: (state) => cleanupWave(state),
|
|
86
321
|
schema: waveSchema,
|
|
87
|
-
validateParams:
|
|
322
|
+
validateParams: validateWaveParams
|
|
88
323
|
});
|
|
89
324
|
export {
|
|
90
|
-
waveSchema,
|
|
91
325
|
wave
|
|
92
326
|
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type GrayscaleParams = {
|
|
2
|
+
/** Mix between original color and grayscale. Defaults to `1`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const grayscale: (params?: (GrayscaleParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
package/dist/halftone.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
declare const HALFTONE_SHAPES: readonly ["circle", "square", "line"];
|
|
2
|
+
declare const HALFTONE_SAMPLING: readonly ["bilinear", "nearest"];
|
|
1
3
|
export declare const halftoneSchema: {
|
|
2
4
|
readonly dotSize: {
|
|
3
5
|
readonly type: "number";
|
|
@@ -45,9 +47,19 @@ export declare const halftoneSchema: {
|
|
|
45
47
|
readonly default: "circle";
|
|
46
48
|
readonly description: "Shape";
|
|
47
49
|
};
|
|
50
|
+
readonly invert: {
|
|
51
|
+
readonly type: "boolean";
|
|
52
|
+
readonly default: false;
|
|
53
|
+
readonly description: "Invert";
|
|
54
|
+
};
|
|
55
|
+
readonly color: {
|
|
56
|
+
readonly type: "color";
|
|
57
|
+
readonly default: "black";
|
|
58
|
+
readonly description: "Color";
|
|
59
|
+
};
|
|
48
60
|
};
|
|
49
|
-
export type HalftoneShape =
|
|
50
|
-
export type HalftoneSampling =
|
|
61
|
+
export type HalftoneShape = (typeof HALFTONE_SHAPES)[number];
|
|
62
|
+
export type HalftoneSampling = (typeof HALFTONE_SAMPLING)[number];
|
|
51
63
|
export type HalftoneParams = {
|
|
52
64
|
readonly shape?: HalftoneShape;
|
|
53
65
|
readonly dotSize?: number;
|
|
@@ -63,13 +75,13 @@ export type HalftoneParams = {
|
|
|
63
75
|
/** Dot color. Defaults to black. */
|
|
64
76
|
readonly color?: string;
|
|
65
77
|
/**
|
|
66
|
-
* When false (default),
|
|
67
|
-
*
|
|
68
|
-
* and
|
|
69
|
-
* leaving the opaque shape mostly free of those dots.
|
|
78
|
+
* When false (default), dark areas produce larger dots.
|
|
79
|
+
* When true, the pattern is inverted:
|
|
80
|
+
* bright and transparent areas produce larger dots instead.
|
|
70
81
|
*/
|
|
71
|
-
readonly
|
|
82
|
+
readonly invert?: boolean;
|
|
72
83
|
};
|
|
73
84
|
export declare const halftone: (params?: (HalftoneParams & {
|
|
74
85
|
readonly disabled?: boolean | undefined;
|
|
75
86
|
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
87
|
+
export {};
|
package/dist/hue.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type HueParams = {
|
|
2
|
+
/** Hue rotation in degrees. Defaults to `0`. */
|
|
3
|
+
readonly degrees?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const hue: (params?: (HueParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
package/dist/invert.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type InvertParams = {
|
|
2
|
+
/** Mix between original color and inverted color. Defaults to `1`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const invert: (params?: (InvertParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type MirrorDirection } from './mirror-runtime.js';
|
|
2
|
+
export type { MirrorDirection };
|
|
3
|
+
export type MirrorParams = {
|
|
4
|
+
/** Mirror direction. Defaults to `horizontal`. */
|
|
5
|
+
readonly direction?: MirrorDirection;
|
|
6
|
+
/** Mirror position in UV coordinates. Defaults to `0.5`. */
|
|
7
|
+
readonly position?: number;
|
|
8
|
+
/** Mirror the other side of the image. Defaults to `false`. */
|
|
9
|
+
readonly invert?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare const mirror: (params?: (MirrorParams & {
|
|
12
|
+
readonly disabled?: boolean | undefined;
|
|
13
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export type MirrorDirection = 'horizontal' | 'vertical';
|
|
2
|
+
export type MirrorState = {
|
|
3
|
+
gl: WebGL2RenderingContext;
|
|
4
|
+
program: WebGLProgram;
|
|
5
|
+
vao: WebGLVertexArrayObject;
|
|
6
|
+
vbo: WebGLBuffer;
|
|
7
|
+
textureSource: WebGLTexture;
|
|
8
|
+
uniforms: {
|
|
9
|
+
uSource: WebGLUniformLocation | null;
|
|
10
|
+
uPosition: WebGLUniformLocation | null;
|
|
11
|
+
uDirection: WebGLUniformLocation | null;
|
|
12
|
+
uInvert: WebGLUniformLocation | null;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare const setupMirror: (target: HTMLCanvasElement) => MirrorState;
|
|
16
|
+
export declare const cleanupMirror: (state: MirrorState) => void;
|
|
17
|
+
export declare const applyMirror: ({ state, source, width, height, position, direction, invert, flipSourceY, }: {
|
|
18
|
+
readonly state: MirrorState;
|
|
19
|
+
readonly source: CanvasImageSource;
|
|
20
|
+
readonly width: number;
|
|
21
|
+
readonly height: number;
|
|
22
|
+
readonly position: number;
|
|
23
|
+
readonly direction: MirrorDirection;
|
|
24
|
+
readonly invert: boolean;
|
|
25
|
+
readonly flipSourceY: boolean;
|
|
26
|
+
}) => void;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const MIRROR_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 MIRROR_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform float uPosition;\nuniform int uDirection;\nuniform bool uInvert;\n\nvoid main() {\n\tvec2 srcUv = vUv;\n\tfloat coord = uDirection == 0 ? vUv.x : vUv.y;\n\tbool shouldMirror = uInvert ? coord < uPosition : coord > uPosition;\n\n\tif (shouldMirror) {\n\t\tfloat mirrored = 2.0 * uPosition - coord;\n\t\tif (uDirection == 0) {\n\t\t\tsrcUv.x = mirrored;\n\t\t} else {\n\t\t\tsrcUv.y = mirrored;\n\t\t}\n\t}\n\n\tfragColor = texture(uSource, clamp(srcUv, vec2(0.0), vec2(1.0)));\n}\n";
|
package/dist/mirror.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { mirror, type MirrorDirection, type MirrorParams, } from './mirror/index.js';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type SaturationParams = {
|
|
2
|
+
/** Saturation multiplier. `1` leaves colors unchanged, `0` makes them grayscale. Defaults to `1`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const saturation: (params?: (SaturationParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type ScaleParams = {
|
|
2
|
+
/** Scale factor. Defaults to `1`. Must be greater than 0. */
|
|
3
|
+
readonly scale: number;
|
|
4
|
+
/** Whether to apply horizontal scaling. Defaults to `true`. */
|
|
5
|
+
readonly horizontal?: boolean;
|
|
6
|
+
/** Whether to apply vertical scaling. Defaults to `true`. */
|
|
7
|
+
readonly vertical?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const scale: (params: ScaleParams & {
|
|
10
|
+
readonly disabled?: boolean | undefined;
|
|
11
|
+
}) => import("remotion").EffectDescriptor<unknown>;
|
package/dist/scale.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { scale, type ScaleParams } from './scale/index.js';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type WaveDirection = 'horizontal' | 'vertical';
|
|
2
|
+
export type WaveParams = {
|
|
3
|
+
/** Phase offset in radians. */
|
|
4
|
+
readonly phase?: number;
|
|
5
|
+
/** Wave propagation axis. Defaults to `horizontal`. */
|
|
6
|
+
readonly direction?: WaveDirection;
|
|
7
|
+
readonly amplitude?: number;
|
|
8
|
+
readonly wavelength?: number;
|
|
9
|
+
};
|
|
10
|
+
export declare const wave: (params?: (WaveParams & {
|
|
11
|
+
readonly disabled?: boolean | undefined;
|
|
12
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export type WaveState = {
|
|
2
|
+
gl: WebGL2RenderingContext;
|
|
3
|
+
program: WebGLProgram;
|
|
4
|
+
vao: WebGLVertexArrayObject;
|
|
5
|
+
vbo: WebGLBuffer;
|
|
6
|
+
textureSource: WebGLTexture;
|
|
7
|
+
uniforms: {
|
|
8
|
+
uSource: WebGLUniformLocation | null;
|
|
9
|
+
uResolution: WebGLUniformLocation | null;
|
|
10
|
+
uAmplitude: WebGLUniformLocation | null;
|
|
11
|
+
uWavelength: WebGLUniformLocation | null;
|
|
12
|
+
uPhase: WebGLUniformLocation | null;
|
|
13
|
+
uDirection: WebGLUniformLocation | null;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare const setupWave: (target: HTMLCanvasElement) => WaveState;
|
|
17
|
+
export declare const cleanupWave: (state: WaveState) => void;
|
|
18
|
+
type ApplyWaveParams = {
|
|
19
|
+
readonly state: WaveState;
|
|
20
|
+
readonly source: CanvasImageSource;
|
|
21
|
+
readonly width: number;
|
|
22
|
+
readonly height: number;
|
|
23
|
+
readonly amplitude: number;
|
|
24
|
+
readonly wavelength: number;
|
|
25
|
+
readonly phase: number;
|
|
26
|
+
readonly direction: 'horizontal' | 'vertical';
|
|
27
|
+
};
|
|
28
|
+
export declare const applyWave: ({ state, source, width, height, amplitude, wavelength, phase, direction, }: ApplyWaveParams) => void;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const WAVE_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 WAVE_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uResolution;\nuniform float uAmplitude;\nuniform float uWavelength;\nuniform float uPhase;\nuniform int uDirection;\n\nconst float TWO_PI = 6.28318530718;\n\nvoid main() {\n\tfloat wavelength = max(uWavelength, 0.001);\n\tvec2 srcUv = vUv;\n\n\tif (uDirection == 0) {\n\t\tfloat coordPx = vUv.x * uResolution.x;\n\t\tfloat offsetPx =\n\t\t\tsin((coordPx / wavelength) * TWO_PI + uPhase) * uAmplitude;\n\t\tsrcUv.y -= offsetPx / uResolution.y;\n\t} else {\n\t\tfloat coordPx = vUv.y * uResolution.y;\n\t\tfloat offsetPx =\n\t\t\tsin((coordPx / wavelength) * TWO_PI + uPhase) * uAmplitude;\n\t\tsrcUv.x -= offsetPx / uResolution.x;\n\t}\n\n\tfragColor = texture(uSource, srcUv);\n}\n";
|