@remotion/effects 4.0.465 → 4.0.467
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/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/brightness.d.ts +7 -0
- 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 +37 -0
- package/dist/contrast.d.ts +7 -0
- package/dist/esm/barrel-distortion.mjs +329 -0
- package/dist/esm/blur.mjs +2 -1
- package/dist/esm/brightness.mjs +138 -0
- package/dist/esm/chromatic-aberration.mjs +330 -0
- package/dist/esm/contrast.mjs +138 -0
- package/dist/esm/grayscale.mjs +128 -0
- package/dist/esm/halftone.mjs +178 -25
- package/dist/esm/hue.mjs +126 -0
- package/dist/esm/index.mjs +0 -428
- 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/translate.mjs +205 -0
- package/dist/esm/wave.mjs +1 -0
- package/dist/grayscale.d.ts +7 -0
- package/dist/halftone.d.ts +39 -10
- package/dist/hue.d.ts +7 -0
- package/dist/index.d.ts +1 -3
- 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/translate/index.d.ts +18 -0
- package/dist/translate.d.ts +1 -0
- package/package.json +107 -3
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type BarrelDistortionState = {
|
|
2
|
+
gl: WebGL2RenderingContext;
|
|
3
|
+
program: WebGLProgram;
|
|
4
|
+
vao: WebGLVertexArrayObject;
|
|
5
|
+
vbo: WebGLBuffer;
|
|
6
|
+
textureSource: WebGLTexture;
|
|
7
|
+
uniforms: {
|
|
8
|
+
uSource: WebGLUniformLocation | null;
|
|
9
|
+
uAmount: WebGLUniformLocation | null;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const setupBarrelDistortion: (target: HTMLCanvasElement) => BarrelDistortionState;
|
|
13
|
+
export declare const cleanupBarrelDistortion: (state: BarrelDistortionState) => void;
|
|
14
|
+
export declare const applyBarrelDistortion: ({ state, source, width, height, amount, flipSourceY, }: {
|
|
15
|
+
readonly state: BarrelDistortionState;
|
|
16
|
+
readonly source: CanvasImageSource;
|
|
17
|
+
readonly width: number;
|
|
18
|
+
readonly height: number;
|
|
19
|
+
readonly amount: number;
|
|
20
|
+
readonly flipSourceY: boolean;
|
|
21
|
+
}) => void;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const BARREL_DISTORTION_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 BARREL_DISTORTION_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform float uAmount;\n\nvoid main() {\n\tvec2 centered = vUv * 2.0 - 1.0;\n\tvec2 warped = centered;\n\twarped.x *= 1.0 + uAmount * centered.y * centered.y;\n\twarped.y *= 1.0 + uAmount * centered.x * centered.x;\n\n\tvec2 srcUv = warped * 0.5 + 0.5;\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";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type BarrelDistortionParams = {
|
|
2
|
+
/** Distortion strength from `0` to `1`. Defaults to `0.25`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const barrelDistortion: (params?: (BarrelDistortionParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { barrelDistortion, type BarrelDistortionParams, } from './barrel-distortion/index.js';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type BrightnessParams = {
|
|
2
|
+
/** Brightness adjustment amount between -1 and 1. Defaults to `0`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const brightness: (params?: (BrightnessParams & {
|
|
6
|
+
readonly disabled?: boolean | undefined;
|
|
7
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -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';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export declare const DEFAULT_AMOUNT: 1;
|
|
2
|
+
export declare const DEFAULT_BRIGHTNESS_AMOUNT: 0;
|
|
3
|
+
export declare const DEFAULT_HUE_DEGREES: 0;
|
|
4
|
+
export declare const colorAmountSchema: {
|
|
5
|
+
readonly type: "number";
|
|
6
|
+
readonly min: 0;
|
|
7
|
+
readonly max: 1;
|
|
8
|
+
readonly step: 0.01;
|
|
9
|
+
readonly default: 1;
|
|
10
|
+
readonly description: "Amount";
|
|
11
|
+
};
|
|
12
|
+
export declare const colorMultiplierSchema: {
|
|
13
|
+
readonly type: "number";
|
|
14
|
+
readonly min: 0;
|
|
15
|
+
readonly step: 0.01;
|
|
16
|
+
readonly default: 1;
|
|
17
|
+
readonly description: "Amount";
|
|
18
|
+
};
|
|
19
|
+
export declare const brightnessAmountSchema: {
|
|
20
|
+
readonly type: "number";
|
|
21
|
+
readonly min: -1;
|
|
22
|
+
readonly max: 1;
|
|
23
|
+
readonly step: 0.01;
|
|
24
|
+
readonly default: 0;
|
|
25
|
+
readonly description: "Amount";
|
|
26
|
+
};
|
|
27
|
+
export declare const hueDegreesSchema: {
|
|
28
|
+
readonly type: "number";
|
|
29
|
+
readonly step: 1;
|
|
30
|
+
readonly default: 0;
|
|
31
|
+
readonly description: "Degrees";
|
|
32
|
+
};
|
|
33
|
+
export declare const assertOptionalFiniteNumber: (value: unknown, name: string) => void;
|
|
34
|
+
export declare const validateUnitInterval: (value: number, name: string) => void;
|
|
35
|
+
export declare const validateNonNegative: (value: number, name: string) => void;
|
|
36
|
+
export declare const validateSignedUnitInterval: (value: number, name: string) => void;
|
|
37
|
+
export declare const clampColorChannel: (value: number) => number;
|
|
@@ -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,329 @@
|
|
|
1
|
+
// src/barrel-distortion/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
|
+
|
|
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
|
+
|
|
85
|
+
// src/barrel-distortion/barrel-distortion-runtime.ts
|
|
86
|
+
import { Internals } from "remotion";
|
|
87
|
+
|
|
88
|
+
// src/barrel-distortion/barrel-distortion-shaders.ts
|
|
89
|
+
var BARREL_DISTORTION_VS = `#version 300 es
|
|
90
|
+
layout(location = 0) in vec2 aPos;
|
|
91
|
+
layout(location = 1) in vec2 aUv;
|
|
92
|
+
out vec2 vUv;
|
|
93
|
+
void main() {
|
|
94
|
+
vUv = aUv;
|
|
95
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
96
|
+
}
|
|
97
|
+
`;
|
|
98
|
+
var BARREL_DISTORTION_FS = `#version 300 es
|
|
99
|
+
precision highp float;
|
|
100
|
+
in vec2 vUv;
|
|
101
|
+
out vec4 fragColor;
|
|
102
|
+
|
|
103
|
+
uniform sampler2D uSource;
|
|
104
|
+
uniform float uAmount;
|
|
105
|
+
|
|
106
|
+
void main() {
|
|
107
|
+
vec2 centered = vUv * 2.0 - 1.0;
|
|
108
|
+
vec2 warped = centered;
|
|
109
|
+
warped.x *= 1.0 + uAmount * centered.y * centered.y;
|
|
110
|
+
warped.y *= 1.0 + uAmount * centered.x * centered.x;
|
|
111
|
+
|
|
112
|
+
vec2 srcUv = warped * 0.5 + 0.5;
|
|
113
|
+
|
|
114
|
+
if (
|
|
115
|
+
srcUv.x < 0.0 ||
|
|
116
|
+
srcUv.x > 1.0 ||
|
|
117
|
+
srcUv.y < 0.0 ||
|
|
118
|
+
srcUv.y > 1.0
|
|
119
|
+
) {
|
|
120
|
+
fragColor = vec4(0.0);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
fragColor = texture(uSource, srcUv);
|
|
125
|
+
}
|
|
126
|
+
`;
|
|
127
|
+
|
|
128
|
+
// src/barrel-distortion/barrel-distortion-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 setupBarrelDistortion = (target) => {
|
|
181
|
+
const gl = target.getContext("webgl2", {
|
|
182
|
+
premultipliedAlpha: true,
|
|
183
|
+
alpha: true,
|
|
184
|
+
preserveDrawingBuffer: true
|
|
185
|
+
});
|
|
186
|
+
if (!gl) {
|
|
187
|
+
throw createWebGL2ContextError("barrel distortion effect");
|
|
188
|
+
}
|
|
189
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
190
|
+
const program = createProgram(gl, BARREL_DISTORTION_VS, BARREL_DISTORTION_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
|
+
uAmount: gl.getUniformLocation(program, "uAmount")
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
};
|
|
238
|
+
var cleanupBarrelDistortion = (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 applyBarrelDistortion = ({
|
|
252
|
+
state,
|
|
253
|
+
source,
|
|
254
|
+
width,
|
|
255
|
+
height,
|
|
256
|
+
amount,
|
|
257
|
+
flipSourceY
|
|
258
|
+
}) => {
|
|
259
|
+
const { gl, program, textureSource, uniforms } = state;
|
|
260
|
+
gl.viewport(0, 0, width, height);
|
|
261
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
262
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
263
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
264
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
265
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
266
|
+
gl.clearColor(0, 0, 0, 0);
|
|
267
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
268
|
+
gl.useProgram(program);
|
|
269
|
+
if (uniforms.uSource)
|
|
270
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
271
|
+
if (uniforms.uAmount)
|
|
272
|
+
gl.uniform1f(uniforms.uAmount, amount);
|
|
273
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
274
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
275
|
+
drawFullscreenQuad(state);
|
|
276
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
277
|
+
gl.useProgram(null);
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
// src/barrel-distortion/index.ts
|
|
281
|
+
var { createEffect } = Internals2;
|
|
282
|
+
var DEFAULT_BARREL_DISTORTION_AMOUNT = 0.25;
|
|
283
|
+
var barrelDistortionSchema = {
|
|
284
|
+
amount: {
|
|
285
|
+
type: "number",
|
|
286
|
+
min: 0,
|
|
287
|
+
max: 1,
|
|
288
|
+
step: 0.01,
|
|
289
|
+
default: DEFAULT_BARREL_DISTORTION_AMOUNT,
|
|
290
|
+
description: "Amount"
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
var resolve = (p) => ({
|
|
294
|
+
amount: p.amount ?? DEFAULT_BARREL_DISTORTION_AMOUNT
|
|
295
|
+
});
|
|
296
|
+
var validateBarrelDistortionParams = (params) => {
|
|
297
|
+
assertEffectParamsObject(params, "Barrel distortion");
|
|
298
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
299
|
+
const resolved = resolve(params);
|
|
300
|
+
validateUnitInterval(resolved.amount, "amount");
|
|
301
|
+
};
|
|
302
|
+
var barrelDistortion = createEffect({
|
|
303
|
+
type: "remotion/barrel-distortion",
|
|
304
|
+
label: "Barrel Distortion",
|
|
305
|
+
documentationLink: "https://www.remotion.dev/docs/effects/barrel-distortion",
|
|
306
|
+
backend: "webgl2",
|
|
307
|
+
calculateKey: (params) => {
|
|
308
|
+
const r = resolve(params);
|
|
309
|
+
return `barrel-distortion-${r.amount}`;
|
|
310
|
+
},
|
|
311
|
+
setup: (target) => setupBarrelDistortion(target),
|
|
312
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
313
|
+
const r = resolve(params);
|
|
314
|
+
applyBarrelDistortion({
|
|
315
|
+
state,
|
|
316
|
+
source,
|
|
317
|
+
width,
|
|
318
|
+
height,
|
|
319
|
+
amount: r.amount,
|
|
320
|
+
flipSourceY
|
|
321
|
+
});
|
|
322
|
+
},
|
|
323
|
+
cleanup: (state) => cleanupBarrelDistortion(state),
|
|
324
|
+
schema: barrelDistortionSchema,
|
|
325
|
+
validateParams: validateBarrelDistortionParams
|
|
326
|
+
});
|
|
327
|
+
export {
|
|
328
|
+
barrelDistortion
|
|
329
|
+
};
|
package/dist/esm/blur.mjs
CHANGED
|
@@ -370,7 +370,7 @@ var blurSchema = {
|
|
|
370
370
|
max: 100,
|
|
371
371
|
step: 1,
|
|
372
372
|
default: undefined,
|
|
373
|
-
description: "
|
|
373
|
+
description: "Radius"
|
|
374
374
|
},
|
|
375
375
|
horizontal: {
|
|
376
376
|
type: "boolean",
|
|
@@ -390,6 +390,7 @@ var validateBlurParams = (params) => {
|
|
|
390
390
|
var blur = createEffect({
|
|
391
391
|
type: "remotion/blur",
|
|
392
392
|
label: "Blur",
|
|
393
|
+
documentationLink: "https://www.remotion.dev/docs/effects/blur",
|
|
393
394
|
backend: "webgl2",
|
|
394
395
|
calculateKey: (params) => {
|
|
395
396
|
const r = resolveBlurParams(params);
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
// src/brightness.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
|
+
|
|
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
|
+
|
|
85
|
+
// src/brightness.ts
|
|
86
|
+
var { createEffect } = Internals;
|
|
87
|
+
var brightnessSchema = {
|
|
88
|
+
amount: brightnessAmountSchema
|
|
89
|
+
};
|
|
90
|
+
var resolve = (p) => ({
|
|
91
|
+
amount: p.amount ?? DEFAULT_BRIGHTNESS_AMOUNT
|
|
92
|
+
});
|
|
93
|
+
var validateBrightnessParams = (params) => {
|
|
94
|
+
assertEffectParamsObject(params, "Brightness");
|
|
95
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
96
|
+
const { amount } = resolve(params);
|
|
97
|
+
validateSignedUnitInterval(amount, "amount");
|
|
98
|
+
};
|
|
99
|
+
var brightness = createEffect({
|
|
100
|
+
type: "remotion/brightness",
|
|
101
|
+
label: "Brightness",
|
|
102
|
+
documentationLink: "https://www.remotion.dev/docs/effects/brightness",
|
|
103
|
+
backend: "2d",
|
|
104
|
+
calculateKey: (params) => {
|
|
105
|
+
const r = resolve(params);
|
|
106
|
+
return `brightness-${r.amount}`;
|
|
107
|
+
},
|
|
108
|
+
setup: () => null,
|
|
109
|
+
apply: ({ source, target, width, height, params }) => {
|
|
110
|
+
const ctx = target.getContext("2d");
|
|
111
|
+
if (!ctx) {
|
|
112
|
+
throw new Error("Failed to acquire 2D context for brightness effect. The canvas may have been assigned a different context type.");
|
|
113
|
+
}
|
|
114
|
+
const r = resolve(params);
|
|
115
|
+
ctx.clearRect(0, 0, width, height);
|
|
116
|
+
ctx.drawImage(source, 0, 0, width, height);
|
|
117
|
+
if (r.amount === 0) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const imageData = ctx.getImageData(0, 0, width, height);
|
|
121
|
+
const delta = Math.round(r.amount * 255);
|
|
122
|
+
const { data } = imageData;
|
|
123
|
+
for (let i = 0;i < data.length; i += 4) {
|
|
124
|
+
data[i] = clampColorChannel(data[i] + delta);
|
|
125
|
+
data[i + 1] = clampColorChannel(data[i + 1] + delta);
|
|
126
|
+
data[i + 2] = clampColorChannel(data[i + 2] + delta);
|
|
127
|
+
}
|
|
128
|
+
ctx.putImageData(imageData, 0, 0);
|
|
129
|
+
},
|
|
130
|
+
cleanup: () => {
|
|
131
|
+
return;
|
|
132
|
+
},
|
|
133
|
+
schema: brightnessSchema,
|
|
134
|
+
validateParams: validateBrightnessParams
|
|
135
|
+
});
|
|
136
|
+
export {
|
|
137
|
+
brightness
|
|
138
|
+
};
|