@remotion/effects 4.0.466 → 4.0.468
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/chromatic-aberration/chromatic-aberration-runtime.d.ts +22 -0
- package/dist/chromatic-aberration/chromatic-aberration-shaders.d.ts +2 -0
- package/dist/chromatic-aberration/index.d.ts +9 -0
- package/dist/chromatic-aberration.d.ts +1 -0
- package/dist/color-utils.d.ts +2 -0
- package/dist/contrast.d.ts +7 -0
- package/dist/duotone.d.ts +31 -0
- package/dist/esm/barrel-distortion.mjs +14 -1
- package/dist/esm/blur.mjs +7 -1
- package/dist/esm/brightness.mjs +14 -1
- package/dist/esm/chromatic-aberration.mjs +343 -0
- package/dist/esm/contrast.mjs +151 -0
- package/dist/esm/duotone.mjs +365 -0
- package/dist/esm/glow.mjs +585 -0
- package/dist/esm/grayscale.mjs +14 -1
- package/dist/esm/halftone.mjs +51 -29
- package/dist/esm/hue.mjs +14 -1
- package/dist/esm/invert.mjs +14 -1
- package/dist/esm/mirror.mjs +14 -1
- package/dist/esm/saturation.mjs +14 -1
- package/dist/esm/scale.mjs +7 -1
- package/dist/esm/shine.mjs +389 -0
- package/dist/esm/tint.mjs +14 -1
- package/dist/esm/translate.mjs +218 -0
- package/dist/esm/vignette.mjs +439 -0
- package/dist/esm/wave.mjs +7 -1
- package/dist/glow/glow-runtime.d.ts +52 -0
- package/dist/glow/glow-shaders.d.ts +5 -0
- package/dist/glow/index.d.ts +13 -0
- package/dist/glow.d.ts +1 -0
- package/dist/halftone.d.ts +24 -7
- package/dist/shine.d.ts +17 -0
- package/dist/translate/index.d.ts +18 -0
- package/dist/translate.d.ts +1 -0
- package/dist/validate-effect-param.d.ts +1 -0
- package/dist/vignette.d.ts +68 -0
- package/package.json +59 -3
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export type ChromaticAberrationState = {
|
|
2
|
+
gl: WebGL2RenderingContext;
|
|
3
|
+
program: WebGLProgram;
|
|
4
|
+
vao: WebGLVertexArrayObject;
|
|
5
|
+
vbo: WebGLBuffer;
|
|
6
|
+
textureSource: WebGLTexture;
|
|
7
|
+
uniforms: {
|
|
8
|
+
uSource: WebGLUniformLocation | null;
|
|
9
|
+
uOffset: WebGLUniformLocation | null;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const setupChromaticAberration: (target: HTMLCanvasElement) => ChromaticAberrationState;
|
|
13
|
+
export declare const cleanupChromaticAberration: (state: ChromaticAberrationState) => void;
|
|
14
|
+
export declare const applyChromaticAberration: ({ state, source, width, height, amount, angle, flipSourceY, }: {
|
|
15
|
+
readonly state: ChromaticAberrationState;
|
|
16
|
+
readonly source: CanvasImageSource;
|
|
17
|
+
readonly width: number;
|
|
18
|
+
readonly height: number;
|
|
19
|
+
readonly amount: number;
|
|
20
|
+
readonly angle: number;
|
|
21
|
+
readonly flipSourceY: boolean;
|
|
22
|
+
}) => void;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const CHROMATIC_ABERRATION_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 CHROMATIC_ABERRATION_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uOffset;\n\nvoid main() {\n\tvec4 redSample = texture(uSource, vUv - uOffset);\n\tvec4 centerSample = texture(uSource, vUv);\n\tvec4 blueSample = texture(uSource, vUv + uOffset);\n\n\tfragColor = vec4(redSample.r, centerSample.g, blueSample.b, centerSample.a);\n}\n";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type ChromaticAberrationParams = {
|
|
2
|
+
/** RGB channel separation in pixels. Defaults to `8`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
/** Direction of the split in degrees. Defaults to `0`. */
|
|
5
|
+
readonly angle?: number;
|
|
6
|
+
};
|
|
7
|
+
export declare const chromaticAberration: (params?: (ChromaticAberrationParams & {
|
|
8
|
+
readonly disabled?: boolean | undefined;
|
|
9
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { chromaticAberration, type ChromaticAberrationParams, } from './chromatic-aberration/index.js';
|
package/dist/color-utils.d.ts
CHANGED
|
@@ -35,3 +35,5 @@ export declare const validateUnitInterval: (value: number, name: string) => void
|
|
|
35
35
|
export declare const validateNonNegative: (value: number, name: string) => void;
|
|
36
36
|
export declare const validateSignedUnitInterval: (value: number, name: string) => void;
|
|
37
37
|
export declare const clampColorChannel: (value: number) => number;
|
|
38
|
+
export type ParsedColorRgba = readonly [number, number, number, number];
|
|
39
|
+
export declare const parseColorRgba: (ctx: CanvasRenderingContext2D, color: string) => ParsedColorRgba;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type ContrastParams = {
|
|
2
|
+
/** Contrast multiplier. `1` leaves the image unchanged, `0` produces a flat gray, values above `1` increase contrast. Defaults to `1`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const contrast: (params?: (ContrastParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare const duotoneSchema: {
|
|
2
|
+
readonly darkColor: {
|
|
3
|
+
readonly type: "color";
|
|
4
|
+
readonly default: "#000000";
|
|
5
|
+
readonly description: "Dark color";
|
|
6
|
+
};
|
|
7
|
+
readonly lightColor: {
|
|
8
|
+
readonly type: "color";
|
|
9
|
+
readonly default: "#ffffff";
|
|
10
|
+
readonly description: "Light color";
|
|
11
|
+
};
|
|
12
|
+
readonly threshold: {
|
|
13
|
+
readonly type: "number";
|
|
14
|
+
readonly min: 0;
|
|
15
|
+
readonly max: 1;
|
|
16
|
+
readonly step: 0.01;
|
|
17
|
+
readonly default: 0.5;
|
|
18
|
+
readonly description: "Luminance threshold";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export type DuotoneParams = {
|
|
22
|
+
/** Color used for pixels below the luminance threshold. Defaults to black. */
|
|
23
|
+
readonly darkColor?: string;
|
|
24
|
+
/** Color used for pixels at or above the luminance threshold. Defaults to white. */
|
|
25
|
+
readonly lightColor?: string;
|
|
26
|
+
/** Luminance threshold from `0` to `1`. Defaults to `0.5`. */
|
|
27
|
+
readonly threshold?: number;
|
|
28
|
+
};
|
|
29
|
+
export declare const duotone: (params?: (DuotoneParams & {
|
|
30
|
+
readonly disabled?: boolean | undefined;
|
|
31
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
|
|
|
17
17
|
throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
+
var assertOptionalColor = (value, name) => {
|
|
21
|
+
if (value === undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
assertRequiredColor(value, name);
|
|
25
|
+
};
|
|
20
26
|
|
|
21
27
|
// src/color-utils.ts
|
|
22
28
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
|
|
|
81
87
|
var clampColorChannel = (value) => {
|
|
82
88
|
return Math.max(0, Math.min(255, value));
|
|
83
89
|
};
|
|
90
|
+
var parseColorRgba = (ctx, color) => {
|
|
91
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
92
|
+
ctx.fillStyle = color;
|
|
93
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
94
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
95
|
+
return [data[0], data[1], data[2], data[3]];
|
|
96
|
+
};
|
|
84
97
|
|
|
85
98
|
// src/barrel-distortion/barrel-distortion-runtime.ts
|
|
86
99
|
import { Internals } from "remotion";
|
|
@@ -301,7 +314,7 @@ var validateBarrelDistortionParams = (params) => {
|
|
|
301
314
|
};
|
|
302
315
|
var barrelDistortion = createEffect({
|
|
303
316
|
type: "remotion/barrel-distortion",
|
|
304
|
-
label: "
|
|
317
|
+
label: "barrelDistortion()",
|
|
305
318
|
documentationLink: "https://www.remotion.dev/docs/effects/barrel-distortion",
|
|
306
319
|
backend: "webgl2",
|
|
307
320
|
calculateKey: (params) => {
|
package/dist/esm/blur.mjs
CHANGED
|
@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
|
|
|
17
17
|
throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
+
var assertOptionalColor = (value, name) => {
|
|
21
|
+
if (value === undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
assertRequiredColor(value, name);
|
|
25
|
+
};
|
|
20
26
|
|
|
21
27
|
// src/blur/blur-runtime.ts
|
|
22
28
|
import { Internals } from "remotion";
|
|
@@ -389,7 +395,7 @@ var validateBlurParams = (params) => {
|
|
|
389
395
|
};
|
|
390
396
|
var blur = createEffect({
|
|
391
397
|
type: "remotion/blur",
|
|
392
|
-
label: "
|
|
398
|
+
label: "blur()",
|
|
393
399
|
documentationLink: "https://www.remotion.dev/docs/effects/blur",
|
|
394
400
|
backend: "webgl2",
|
|
395
401
|
calculateKey: (params) => {
|
package/dist/esm/brightness.mjs
CHANGED
|
@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
|
|
|
17
17
|
throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
+
var assertOptionalColor = (value, name) => {
|
|
21
|
+
if (value === undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
assertRequiredColor(value, name);
|
|
25
|
+
};
|
|
20
26
|
|
|
21
27
|
// src/color-utils.ts
|
|
22
28
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
|
|
|
81
87
|
var clampColorChannel = (value) => {
|
|
82
88
|
return Math.max(0, Math.min(255, value));
|
|
83
89
|
};
|
|
90
|
+
var parseColorRgba = (ctx, color) => {
|
|
91
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
92
|
+
ctx.fillStyle = color;
|
|
93
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
94
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
95
|
+
return [data[0], data[1], data[2], data[3]];
|
|
96
|
+
};
|
|
84
97
|
|
|
85
98
|
// src/brightness.ts
|
|
86
99
|
var { createEffect } = Internals;
|
|
@@ -98,7 +111,7 @@ var validateBrightnessParams = (params) => {
|
|
|
98
111
|
};
|
|
99
112
|
var brightness = createEffect({
|
|
100
113
|
type: "remotion/brightness",
|
|
101
|
-
label: "
|
|
114
|
+
label: "brightness()",
|
|
102
115
|
documentationLink: "https://www.remotion.dev/docs/effects/brightness",
|
|
103
116
|
backend: "2d",
|
|
104
117
|
calculateKey: (params) => {
|
|
@@ -0,0 +1,343 @@
|
|
|
1
|
+
// src/chromatic-aberration/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
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var assertOptionalColor = (value, name) => {
|
|
21
|
+
if (value === undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
assertRequiredColor(value, name);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// src/color-utils.ts
|
|
28
|
+
var DEFAULT_AMOUNT = 1;
|
|
29
|
+
var DEFAULT_BRIGHTNESS_AMOUNT = 0;
|
|
30
|
+
var DEFAULT_HUE_DEGREES = 0;
|
|
31
|
+
var colorAmountSchema = {
|
|
32
|
+
type: "number",
|
|
33
|
+
min: 0,
|
|
34
|
+
max: 1,
|
|
35
|
+
step: 0.01,
|
|
36
|
+
default: DEFAULT_AMOUNT,
|
|
37
|
+
description: "Amount"
|
|
38
|
+
};
|
|
39
|
+
var colorMultiplierSchema = {
|
|
40
|
+
type: "number",
|
|
41
|
+
min: 0,
|
|
42
|
+
step: 0.01,
|
|
43
|
+
default: DEFAULT_AMOUNT,
|
|
44
|
+
description: "Amount"
|
|
45
|
+
};
|
|
46
|
+
var brightnessAmountSchema = {
|
|
47
|
+
type: "number",
|
|
48
|
+
min: -1,
|
|
49
|
+
max: 1,
|
|
50
|
+
step: 0.01,
|
|
51
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
+
description: "Amount"
|
|
53
|
+
};
|
|
54
|
+
var hueDegreesSchema = {
|
|
55
|
+
type: "number",
|
|
56
|
+
step: 1,
|
|
57
|
+
default: DEFAULT_HUE_DEGREES,
|
|
58
|
+
description: "Degrees"
|
|
59
|
+
};
|
|
60
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
61
|
+
if (value === undefined) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
assertRequiredFiniteNumber(value, name);
|
|
65
|
+
};
|
|
66
|
+
var validateUnitInterval = (value, name) => {
|
|
67
|
+
if (value < 0) {
|
|
68
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
69
|
+
}
|
|
70
|
+
if (value > 1) {
|
|
71
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
var validateNonNegative = (value, name) => {
|
|
75
|
+
if (value < 0) {
|
|
76
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
80
|
+
if (value < -1) {
|
|
81
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
82
|
+
}
|
|
83
|
+
if (value > 1) {
|
|
84
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var clampColorChannel = (value) => {
|
|
88
|
+
return Math.max(0, Math.min(255, value));
|
|
89
|
+
};
|
|
90
|
+
var parseColorRgba = (ctx, color) => {
|
|
91
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
92
|
+
ctx.fillStyle = color;
|
|
93
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
94
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
95
|
+
return [data[0], data[1], data[2], data[3]];
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// src/chromatic-aberration/chromatic-aberration-runtime.ts
|
|
99
|
+
import { Internals } from "remotion";
|
|
100
|
+
|
|
101
|
+
// src/chromatic-aberration/chromatic-aberration-shaders.ts
|
|
102
|
+
var CHROMATIC_ABERRATION_VS = `#version 300 es
|
|
103
|
+
layout(location = 0) in vec2 aPos;
|
|
104
|
+
layout(location = 1) in vec2 aUv;
|
|
105
|
+
out vec2 vUv;
|
|
106
|
+
void main() {
|
|
107
|
+
vUv = aUv;
|
|
108
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
109
|
+
}
|
|
110
|
+
`;
|
|
111
|
+
var CHROMATIC_ABERRATION_FS = `#version 300 es
|
|
112
|
+
precision highp float;
|
|
113
|
+
in vec2 vUv;
|
|
114
|
+
out vec4 fragColor;
|
|
115
|
+
|
|
116
|
+
uniform sampler2D uSource;
|
|
117
|
+
uniform vec2 uOffset;
|
|
118
|
+
|
|
119
|
+
void main() {
|
|
120
|
+
vec4 redSample = texture(uSource, vUv - uOffset);
|
|
121
|
+
vec4 centerSample = texture(uSource, vUv);
|
|
122
|
+
vec4 blueSample = texture(uSource, vUv + uOffset);
|
|
123
|
+
|
|
124
|
+
fragColor = vec4(redSample.r, centerSample.g, blueSample.b, centerSample.a);
|
|
125
|
+
}
|
|
126
|
+
`;
|
|
127
|
+
|
|
128
|
+
// src/chromatic-aberration/chromatic-aberration-runtime.ts
|
|
129
|
+
var { createWebGL2ContextError } = Internals;
|
|
130
|
+
var compileShader = (gl, type, source) => {
|
|
131
|
+
const shader = gl.createShader(type);
|
|
132
|
+
if (!shader) {
|
|
133
|
+
throw new Error("Failed to create WebGL shader");
|
|
134
|
+
}
|
|
135
|
+
gl.shaderSource(shader, source);
|
|
136
|
+
gl.compileShader(shader);
|
|
137
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
138
|
+
const log = gl.getShaderInfoLog(shader);
|
|
139
|
+
gl.deleteShader(shader);
|
|
140
|
+
throw new Error(`Shader compile failed: ${log ?? "(no log)"}`);
|
|
141
|
+
}
|
|
142
|
+
return shader;
|
|
143
|
+
};
|
|
144
|
+
var linkProgram = (gl, vs, fs) => {
|
|
145
|
+
const program = gl.createProgram();
|
|
146
|
+
if (!program) {
|
|
147
|
+
throw new Error("Failed to create WebGL program");
|
|
148
|
+
}
|
|
149
|
+
gl.attachShader(program, vs);
|
|
150
|
+
gl.attachShader(program, fs);
|
|
151
|
+
gl.linkProgram(program);
|
|
152
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
153
|
+
const log = gl.getProgramInfoLog(program);
|
|
154
|
+
gl.deleteProgram(program);
|
|
155
|
+
throw new Error(`Program link failed: ${log ?? "(no log)"}`);
|
|
156
|
+
}
|
|
157
|
+
return program;
|
|
158
|
+
};
|
|
159
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
160
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
161
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
162
|
+
const program = linkProgram(gl, vs, fs);
|
|
163
|
+
gl.deleteShader(vs);
|
|
164
|
+
gl.deleteShader(fs);
|
|
165
|
+
return program;
|
|
166
|
+
};
|
|
167
|
+
var createRgbaTexture = (gl) => {
|
|
168
|
+
const texture = gl.createTexture();
|
|
169
|
+
if (!texture) {
|
|
170
|
+
throw new Error("Failed to create WebGL texture");
|
|
171
|
+
}
|
|
172
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
173
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
174
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
175
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
176
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
177
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
178
|
+
return texture;
|
|
179
|
+
};
|
|
180
|
+
var setupChromaticAberration = (target) => {
|
|
181
|
+
const gl = target.getContext("webgl2", {
|
|
182
|
+
premultipliedAlpha: true,
|
|
183
|
+
alpha: true,
|
|
184
|
+
preserveDrawingBuffer: true
|
|
185
|
+
});
|
|
186
|
+
if (!gl) {
|
|
187
|
+
throw createWebGL2ContextError("chromatic aberration effect");
|
|
188
|
+
}
|
|
189
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
190
|
+
const program = createProgram(gl, CHROMATIC_ABERRATION_VS, CHROMATIC_ABERRATION_FS);
|
|
191
|
+
const vao = gl.createVertexArray();
|
|
192
|
+
if (!vao) {
|
|
193
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
194
|
+
}
|
|
195
|
+
gl.bindVertexArray(vao);
|
|
196
|
+
const data = new Float32Array([
|
|
197
|
+
-1,
|
|
198
|
+
-1,
|
|
199
|
+
0,
|
|
200
|
+
0,
|
|
201
|
+
1,
|
|
202
|
+
-1,
|
|
203
|
+
1,
|
|
204
|
+
0,
|
|
205
|
+
-1,
|
|
206
|
+
1,
|
|
207
|
+
0,
|
|
208
|
+
1,
|
|
209
|
+
1,
|
|
210
|
+
1,
|
|
211
|
+
1,
|
|
212
|
+
1
|
|
213
|
+
]);
|
|
214
|
+
const vbo = gl.createBuffer();
|
|
215
|
+
if (!vbo) {
|
|
216
|
+
throw new Error("Failed to create WebGL buffer");
|
|
217
|
+
}
|
|
218
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
219
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
220
|
+
gl.enableVertexAttribArray(0);
|
|
221
|
+
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
|
|
222
|
+
gl.enableVertexAttribArray(1);
|
|
223
|
+
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
|
|
224
|
+
gl.bindVertexArray(null);
|
|
225
|
+
const textureSource = createRgbaTexture(gl);
|
|
226
|
+
return {
|
|
227
|
+
gl,
|
|
228
|
+
program,
|
|
229
|
+
vao,
|
|
230
|
+
vbo,
|
|
231
|
+
textureSource,
|
|
232
|
+
uniforms: {
|
|
233
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
234
|
+
uOffset: gl.getUniformLocation(program, "uOffset")
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
};
|
|
238
|
+
var cleanupChromaticAberration = (state) => {
|
|
239
|
+
const { gl, program, vao, vbo, textureSource } = state;
|
|
240
|
+
gl.deleteTexture(textureSource);
|
|
241
|
+
gl.deleteBuffer(vbo);
|
|
242
|
+
gl.deleteProgram(program);
|
|
243
|
+
gl.deleteVertexArray(vao);
|
|
244
|
+
};
|
|
245
|
+
var drawFullscreenQuad = (state) => {
|
|
246
|
+
const { gl, vao } = state;
|
|
247
|
+
gl.bindVertexArray(vao);
|
|
248
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
249
|
+
gl.bindVertexArray(null);
|
|
250
|
+
};
|
|
251
|
+
var applyChromaticAberration = ({
|
|
252
|
+
state,
|
|
253
|
+
source,
|
|
254
|
+
width,
|
|
255
|
+
height,
|
|
256
|
+
amount,
|
|
257
|
+
angle,
|
|
258
|
+
flipSourceY
|
|
259
|
+
}) => {
|
|
260
|
+
const { gl, program, textureSource, uniforms } = state;
|
|
261
|
+
const radians = angle * Math.PI / 180;
|
|
262
|
+
const x = Math.cos(radians) * amount / width;
|
|
263
|
+
const y = Math.sin(radians) * amount / height;
|
|
264
|
+
gl.viewport(0, 0, width, height);
|
|
265
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
266
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
267
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
268
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
269
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
270
|
+
gl.clearColor(0, 0, 0, 0);
|
|
271
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
272
|
+
gl.useProgram(program);
|
|
273
|
+
if (uniforms.uSource)
|
|
274
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
275
|
+
if (uniforms.uOffset)
|
|
276
|
+
gl.uniform2f(uniforms.uOffset, x, y);
|
|
277
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
278
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
279
|
+
drawFullscreenQuad(state);
|
|
280
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
281
|
+
gl.useProgram(null);
|
|
282
|
+
};
|
|
283
|
+
|
|
284
|
+
// src/chromatic-aberration/index.ts
|
|
285
|
+
var { createEffect } = Internals2;
|
|
286
|
+
var DEFAULT_CHROMATIC_ABERRATION_AMOUNT = 8;
|
|
287
|
+
var DEFAULT_CHROMATIC_ABERRATION_ANGLE = 0;
|
|
288
|
+
var chromaticAberrationSchema = {
|
|
289
|
+
amount: {
|
|
290
|
+
type: "number",
|
|
291
|
+
min: 0,
|
|
292
|
+
max: 100,
|
|
293
|
+
step: 1,
|
|
294
|
+
default: DEFAULT_CHROMATIC_ABERRATION_AMOUNT,
|
|
295
|
+
description: "Amount"
|
|
296
|
+
},
|
|
297
|
+
angle: {
|
|
298
|
+
type: "number",
|
|
299
|
+
step: 1,
|
|
300
|
+
default: DEFAULT_CHROMATIC_ABERRATION_ANGLE,
|
|
301
|
+
description: "Angle"
|
|
302
|
+
}
|
|
303
|
+
};
|
|
304
|
+
var resolve = (params) => ({
|
|
305
|
+
amount: params.amount ?? DEFAULT_CHROMATIC_ABERRATION_AMOUNT,
|
|
306
|
+
angle: params.angle ?? DEFAULT_CHROMATIC_ABERRATION_ANGLE
|
|
307
|
+
});
|
|
308
|
+
var validateChromaticAberrationParams = (params) => {
|
|
309
|
+
assertEffectParamsObject(params, "Chromatic Aberration");
|
|
310
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
311
|
+
assertOptionalFiniteNumber(params.angle, "angle");
|
|
312
|
+
const resolved = resolve(params);
|
|
313
|
+
validateNonNegative(resolved.amount, "amount");
|
|
314
|
+
};
|
|
315
|
+
var chromaticAberration = createEffect({
|
|
316
|
+
type: "remotion/chromatic-aberration",
|
|
317
|
+
label: "chromaticAberration()",
|
|
318
|
+
documentationLink: "https://www.remotion.dev/docs/effects/chromatic-aberration",
|
|
319
|
+
backend: "webgl2",
|
|
320
|
+
calculateKey: (params) => {
|
|
321
|
+
const resolved = resolve(params);
|
|
322
|
+
return `chromatic-aberration-${resolved.amount}-${resolved.angle}`;
|
|
323
|
+
},
|
|
324
|
+
setup: (target) => setupChromaticAberration(target),
|
|
325
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
326
|
+
const resolved = resolve(params);
|
|
327
|
+
applyChromaticAberration({
|
|
328
|
+
state,
|
|
329
|
+
source,
|
|
330
|
+
width,
|
|
331
|
+
height,
|
|
332
|
+
amount: resolved.amount,
|
|
333
|
+
angle: resolved.angle,
|
|
334
|
+
flipSourceY
|
|
335
|
+
});
|
|
336
|
+
},
|
|
337
|
+
cleanup: (state) => cleanupChromaticAberration(state),
|
|
338
|
+
schema: chromaticAberrationSchema,
|
|
339
|
+
validateParams: validateChromaticAberrationParams
|
|
340
|
+
});
|
|
341
|
+
export {
|
|
342
|
+
chromaticAberration
|
|
343
|
+
};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// src/contrast.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
|
+
|
|
27
|
+
// src/color-utils.ts
|
|
28
|
+
var DEFAULT_AMOUNT = 1;
|
|
29
|
+
var DEFAULT_BRIGHTNESS_AMOUNT = 0;
|
|
30
|
+
var DEFAULT_HUE_DEGREES = 0;
|
|
31
|
+
var colorAmountSchema = {
|
|
32
|
+
type: "number",
|
|
33
|
+
min: 0,
|
|
34
|
+
max: 1,
|
|
35
|
+
step: 0.01,
|
|
36
|
+
default: DEFAULT_AMOUNT,
|
|
37
|
+
description: "Amount"
|
|
38
|
+
};
|
|
39
|
+
var colorMultiplierSchema = {
|
|
40
|
+
type: "number",
|
|
41
|
+
min: 0,
|
|
42
|
+
step: 0.01,
|
|
43
|
+
default: DEFAULT_AMOUNT,
|
|
44
|
+
description: "Amount"
|
|
45
|
+
};
|
|
46
|
+
var brightnessAmountSchema = {
|
|
47
|
+
type: "number",
|
|
48
|
+
min: -1,
|
|
49
|
+
max: 1,
|
|
50
|
+
step: 0.01,
|
|
51
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
52
|
+
description: "Amount"
|
|
53
|
+
};
|
|
54
|
+
var hueDegreesSchema = {
|
|
55
|
+
type: "number",
|
|
56
|
+
step: 1,
|
|
57
|
+
default: DEFAULT_HUE_DEGREES,
|
|
58
|
+
description: "Degrees"
|
|
59
|
+
};
|
|
60
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
61
|
+
if (value === undefined) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
assertRequiredFiniteNumber(value, name);
|
|
65
|
+
};
|
|
66
|
+
var validateUnitInterval = (value, name) => {
|
|
67
|
+
if (value < 0) {
|
|
68
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
69
|
+
}
|
|
70
|
+
if (value > 1) {
|
|
71
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
var validateNonNegative = (value, name) => {
|
|
75
|
+
if (value < 0) {
|
|
76
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
80
|
+
if (value < -1) {
|
|
81
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
82
|
+
}
|
|
83
|
+
if (value > 1) {
|
|
84
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var clampColorChannel = (value) => {
|
|
88
|
+
return Math.max(0, Math.min(255, value));
|
|
89
|
+
};
|
|
90
|
+
var parseColorRgba = (ctx, color) => {
|
|
91
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
92
|
+
ctx.fillStyle = color;
|
|
93
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
94
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
95
|
+
return [data[0], data[1], data[2], data[3]];
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// src/contrast.ts
|
|
99
|
+
var { createEffect } = Internals;
|
|
100
|
+
var contrastSchema = {
|
|
101
|
+
amount: colorMultiplierSchema
|
|
102
|
+
};
|
|
103
|
+
var resolve = (p) => ({
|
|
104
|
+
amount: p.amount ?? DEFAULT_AMOUNT
|
|
105
|
+
});
|
|
106
|
+
var validateContrastParams = (params) => {
|
|
107
|
+
assertEffectParamsObject(params, "Contrast");
|
|
108
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
109
|
+
const { amount } = resolve(params);
|
|
110
|
+
validateNonNegative(amount, "amount");
|
|
111
|
+
};
|
|
112
|
+
var contrast = createEffect({
|
|
113
|
+
type: "remotion/contrast",
|
|
114
|
+
label: "contrast()",
|
|
115
|
+
documentationLink: "https://www.remotion.dev/docs/effects/contrast",
|
|
116
|
+
backend: "2d",
|
|
117
|
+
calculateKey: (params) => {
|
|
118
|
+
const r = resolve(params);
|
|
119
|
+
return `contrast-${r.amount}`;
|
|
120
|
+
},
|
|
121
|
+
setup: () => null,
|
|
122
|
+
apply: ({ source, target, width, height, params }) => {
|
|
123
|
+
const ctx = target.getContext("2d");
|
|
124
|
+
if (!ctx) {
|
|
125
|
+
throw new Error("Failed to acquire 2D context for contrast effect. The canvas may have been assigned a different context type.");
|
|
126
|
+
}
|
|
127
|
+
const r = resolve(params);
|
|
128
|
+
ctx.clearRect(0, 0, width, height);
|
|
129
|
+
ctx.drawImage(source, 0, 0, width, height);
|
|
130
|
+
if (r.amount === 1) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
const imageData = ctx.getImageData(0, 0, width, height);
|
|
134
|
+
const { data } = imageData;
|
|
135
|
+
const factor = r.amount;
|
|
136
|
+
for (let i = 0;i < data.length; i += 4) {
|
|
137
|
+
data[i] = clampColorChannel((data[i] - 128) * factor + 128);
|
|
138
|
+
data[i + 1] = clampColorChannel((data[i + 1] - 128) * factor + 128);
|
|
139
|
+
data[i + 2] = clampColorChannel((data[i + 2] - 128) * factor + 128);
|
|
140
|
+
}
|
|
141
|
+
ctx.putImageData(imageData, 0, 0);
|
|
142
|
+
},
|
|
143
|
+
cleanup: () => {
|
|
144
|
+
return;
|
|
145
|
+
},
|
|
146
|
+
schema: contrastSchema,
|
|
147
|
+
validateParams: validateContrastParams
|
|
148
|
+
});
|
|
149
|
+
export {
|
|
150
|
+
contrast
|
|
151
|
+
};
|