@remotion/effects 4.0.507 → 4.0.508
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/exposure.mjs +318 -0
- package/dist/esm/levels.mjs +347 -0
- package/dist/esm/shadows-highlights.mjs +337 -0
- package/dist/esm/vibrance.mjs +314 -0
- package/dist/esm/white-balance.mjs +333 -0
- package/dist/exposure.d.ts +7 -0
- package/dist/levels.d.ts +11 -0
- package/dist/shadows-highlights.d.ts +9 -0
- package/dist/vibrance.d.ts +7 -0
- package/dist/white-balance.d.ts +9 -0
- package/package.json +43 -3
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
// src/exposure.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/exposure.ts
|
|
110
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
+
var DEFAULT_STOPS = 0;
|
|
112
|
+
var MIN_STOPS = -5;
|
|
113
|
+
var MAX_STOPS = 5;
|
|
114
|
+
var exposureSchema = {
|
|
115
|
+
stops: {
|
|
116
|
+
type: "number",
|
|
117
|
+
min: MIN_STOPS,
|
|
118
|
+
max: MAX_STOPS,
|
|
119
|
+
step: 0.1,
|
|
120
|
+
default: DEFAULT_STOPS,
|
|
121
|
+
description: "Stops",
|
|
122
|
+
hiddenFromList: false
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
var resolve = (params) => ({
|
|
126
|
+
stops: params.stops ?? DEFAULT_STOPS
|
|
127
|
+
});
|
|
128
|
+
var validateExposureParams = (params) => {
|
|
129
|
+
assertEffectParamsObject(params, "Exposure");
|
|
130
|
+
assertOptionalFiniteNumber(params.stops, "stops");
|
|
131
|
+
const { stops } = resolve(params);
|
|
132
|
+
if (stops < MIN_STOPS) {
|
|
133
|
+
throw new TypeError(`"stops" must be >= ${MIN_STOPS}, but got ${JSON.stringify(stops)}`);
|
|
134
|
+
}
|
|
135
|
+
if (stops > MAX_STOPS) {
|
|
136
|
+
throw new TypeError(`"stops" must be <= ${MAX_STOPS}, but got ${JSON.stringify(stops)}`);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
var VERTEX_SHADER = `#version 300 es
|
|
140
|
+
in vec2 aPos;
|
|
141
|
+
in vec2 aUv;
|
|
142
|
+
out vec2 vUv;
|
|
143
|
+
|
|
144
|
+
void main() {
|
|
145
|
+
vUv = aUv;
|
|
146
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
147
|
+
}
|
|
148
|
+
`;
|
|
149
|
+
var FRAGMENT_SHADER = `#version 300 es
|
|
150
|
+
precision highp float;
|
|
151
|
+
|
|
152
|
+
in vec2 vUv;
|
|
153
|
+
out vec4 fragColor;
|
|
154
|
+
|
|
155
|
+
uniform sampler2D uSource;
|
|
156
|
+
uniform float uStops;
|
|
157
|
+
|
|
158
|
+
vec3 srgbToLinear(vec3 color) {
|
|
159
|
+
vec3 lower = color / 12.92;
|
|
160
|
+
vec3 upper = pow((color + 0.055) / 1.055, vec3(2.4));
|
|
161
|
+
return mix(lower, upper, step(vec3(0.04045), color));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
vec3 linearToSrgb(vec3 color) {
|
|
165
|
+
vec3 nonNegative = max(color, vec3(0.0));
|
|
166
|
+
vec3 lower = nonNegative * 12.92;
|
|
167
|
+
vec3 upper = 1.055 * pow(nonNegative, vec3(1.0 / 2.4)) - 0.055;
|
|
168
|
+
return mix(lower, upper, step(vec3(0.0031308), nonNegative));
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
void main() {
|
|
172
|
+
vec4 sourceColor = texture(uSource, vUv);
|
|
173
|
+
float alpha = sourceColor.a;
|
|
174
|
+
|
|
175
|
+
if (alpha <= 0.0) {
|
|
176
|
+
fragColor = vec4(0.0);
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
vec3 unpremultiplied = sourceColor.rgb / alpha;
|
|
181
|
+
vec3 linear = srgbToLinear(unpremultiplied);
|
|
182
|
+
vec3 exposed = linear * exp2(uStops);
|
|
183
|
+
vec3 corrected = linearToSrgb(exposed);
|
|
184
|
+
|
|
185
|
+
fragColor = vec4(corrected * alpha, alpha);
|
|
186
|
+
}
|
|
187
|
+
`;
|
|
188
|
+
var compileShader = (gl, type, source) => {
|
|
189
|
+
const shader = gl.createShader(type);
|
|
190
|
+
if (!shader) {
|
|
191
|
+
throw new Error("Failed to create exposure shader");
|
|
192
|
+
}
|
|
193
|
+
gl.shaderSource(shader, source);
|
|
194
|
+
gl.compileShader(shader);
|
|
195
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
196
|
+
const log = gl.getShaderInfoLog(shader);
|
|
197
|
+
gl.deleteShader(shader);
|
|
198
|
+
throw new Error(`Exposure shader compile failed: ${log ?? "(no log)"}`);
|
|
199
|
+
}
|
|
200
|
+
return shader;
|
|
201
|
+
};
|
|
202
|
+
var createProgram = (gl) => {
|
|
203
|
+
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
|
204
|
+
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
|
|
205
|
+
const program = gl.createProgram();
|
|
206
|
+
if (!program) {
|
|
207
|
+
throw new Error("Failed to create exposure shader program");
|
|
208
|
+
}
|
|
209
|
+
gl.attachShader(program, vertexShader);
|
|
210
|
+
gl.attachShader(program, fragmentShader);
|
|
211
|
+
gl.linkProgram(program);
|
|
212
|
+
gl.deleteShader(vertexShader);
|
|
213
|
+
gl.deleteShader(fragmentShader);
|
|
214
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
215
|
+
const log = gl.getProgramInfoLog(program);
|
|
216
|
+
gl.deleteProgram(program);
|
|
217
|
+
throw new Error(`Exposure shader link failed: ${log ?? "(no log)"}`);
|
|
218
|
+
}
|
|
219
|
+
return program;
|
|
220
|
+
};
|
|
221
|
+
var createTexture = (gl) => {
|
|
222
|
+
const texture = gl.createTexture();
|
|
223
|
+
if (!texture) {
|
|
224
|
+
throw new Error("Failed to create exposure texture");
|
|
225
|
+
}
|
|
226
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
227
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
228
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
229
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
230
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
231
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
232
|
+
return texture;
|
|
233
|
+
};
|
|
234
|
+
var setupExposure = (target) => {
|
|
235
|
+
const gl = target.getContext("webgl2", {
|
|
236
|
+
premultipliedAlpha: true,
|
|
237
|
+
alpha: true,
|
|
238
|
+
preserveDrawingBuffer: true
|
|
239
|
+
});
|
|
240
|
+
if (!gl) {
|
|
241
|
+
throw createWebGL2ContextError("exposure effect");
|
|
242
|
+
}
|
|
243
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
244
|
+
const program = createProgram(gl);
|
|
245
|
+
const vao = gl.createVertexArray();
|
|
246
|
+
if (!vao) {
|
|
247
|
+
throw new Error("Failed to create exposure vertex array");
|
|
248
|
+
}
|
|
249
|
+
const vbo = gl.createBuffer();
|
|
250
|
+
if (!vbo) {
|
|
251
|
+
throw new Error("Failed to create exposure vertex buffer");
|
|
252
|
+
}
|
|
253
|
+
gl.bindVertexArray(vao);
|
|
254
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
255
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
|
|
256
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
257
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
258
|
+
gl.enableVertexAttribArray(aPos);
|
|
259
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
260
|
+
gl.enableVertexAttribArray(aUv);
|
|
261
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
262
|
+
gl.bindVertexArray(null);
|
|
263
|
+
return {
|
|
264
|
+
gl,
|
|
265
|
+
program,
|
|
266
|
+
vao,
|
|
267
|
+
vbo,
|
|
268
|
+
textureSource: createTexture(gl),
|
|
269
|
+
uniforms: {
|
|
270
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
271
|
+
uStops: gl.getUniformLocation(program, "uStops")
|
|
272
|
+
}
|
|
273
|
+
};
|
|
274
|
+
};
|
|
275
|
+
var exposure = createEffect({
|
|
276
|
+
type: "remotion/exposure",
|
|
277
|
+
label: "exposure()",
|
|
278
|
+
documentationLink: "https://www.remotion.dev/docs/effects/exposure",
|
|
279
|
+
backend: "webgl2",
|
|
280
|
+
calculateKey: (params) => {
|
|
281
|
+
const { stops } = resolve(params);
|
|
282
|
+
return `exposure-${stops}`;
|
|
283
|
+
},
|
|
284
|
+
setup: setupExposure,
|
|
285
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
286
|
+
const { stops } = resolve(params);
|
|
287
|
+
const { gl, program, textureSource, uniforms, vao } = state;
|
|
288
|
+
gl.viewport(0, 0, width, height);
|
|
289
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
290
|
+
gl.clearColor(0, 0, 0, 0);
|
|
291
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
292
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
293
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
294
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
295
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
296
|
+
gl.useProgram(program);
|
|
297
|
+
if (uniforms.uSource)
|
|
298
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
299
|
+
if (uniforms.uStops)
|
|
300
|
+
gl.uniform1f(uniforms.uStops, stops);
|
|
301
|
+
gl.bindVertexArray(vao);
|
|
302
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
303
|
+
gl.bindVertexArray(null);
|
|
304
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
305
|
+
gl.useProgram(null);
|
|
306
|
+
},
|
|
307
|
+
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
308
|
+
gl.deleteTexture(textureSource);
|
|
309
|
+
gl.deleteBuffer(vbo);
|
|
310
|
+
gl.deleteProgram(program);
|
|
311
|
+
gl.deleteVertexArray(vao);
|
|
312
|
+
},
|
|
313
|
+
schema: exposureSchema,
|
|
314
|
+
validateParams: validateExposureParams
|
|
315
|
+
});
|
|
316
|
+
export {
|
|
317
|
+
exposure
|
|
318
|
+
};
|
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
// src/levels.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/levels.ts
|
|
110
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
+
var DEFAULT_BLACK_POINT = 0;
|
|
112
|
+
var DEFAULT_WHITE_POINT = 1;
|
|
113
|
+
var DEFAULT_GAMMA = 1;
|
|
114
|
+
var MIN_GAMMA = 0.01;
|
|
115
|
+
var MAX_GAMMA = 10;
|
|
116
|
+
var levelsSchema = {
|
|
117
|
+
blackPoint: {
|
|
118
|
+
type: "number",
|
|
119
|
+
min: 0,
|
|
120
|
+
max: 1,
|
|
121
|
+
step: 0.01,
|
|
122
|
+
default: DEFAULT_BLACK_POINT,
|
|
123
|
+
description: "Black point",
|
|
124
|
+
hiddenFromList: false
|
|
125
|
+
},
|
|
126
|
+
whitePoint: {
|
|
127
|
+
type: "number",
|
|
128
|
+
min: 0,
|
|
129
|
+
max: 1,
|
|
130
|
+
step: 0.01,
|
|
131
|
+
default: DEFAULT_WHITE_POINT,
|
|
132
|
+
description: "White point",
|
|
133
|
+
hiddenFromList: false
|
|
134
|
+
},
|
|
135
|
+
gamma: {
|
|
136
|
+
type: "number",
|
|
137
|
+
min: MIN_GAMMA,
|
|
138
|
+
max: MAX_GAMMA,
|
|
139
|
+
step: 0.01,
|
|
140
|
+
default: DEFAULT_GAMMA,
|
|
141
|
+
description: "Gamma",
|
|
142
|
+
hiddenFromList: false
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
var resolve = (params) => ({
|
|
146
|
+
blackPoint: params.blackPoint ?? DEFAULT_BLACK_POINT,
|
|
147
|
+
whitePoint: params.whitePoint ?? DEFAULT_WHITE_POINT,
|
|
148
|
+
gamma: params.gamma ?? DEFAULT_GAMMA
|
|
149
|
+
});
|
|
150
|
+
var validateLevelsParams = (params) => {
|
|
151
|
+
assertEffectParamsObject(params, "Levels");
|
|
152
|
+
assertOptionalFiniteNumber(params.blackPoint, "blackPoint");
|
|
153
|
+
assertOptionalFiniteNumber(params.whitePoint, "whitePoint");
|
|
154
|
+
assertOptionalFiniteNumber(params.gamma, "gamma");
|
|
155
|
+
const { blackPoint, whitePoint, gamma } = resolve(params);
|
|
156
|
+
validateUnitInterval(blackPoint, "blackPoint");
|
|
157
|
+
validateUnitInterval(whitePoint, "whitePoint");
|
|
158
|
+
if (blackPoint >= whitePoint) {
|
|
159
|
+
throw new TypeError(`"blackPoint" must be less than "whitePoint", but got ${JSON.stringify(blackPoint)} and ${JSON.stringify(whitePoint)}`);
|
|
160
|
+
}
|
|
161
|
+
if (gamma < MIN_GAMMA) {
|
|
162
|
+
throw new TypeError(`"gamma" must be >= ${MIN_GAMMA}, but got ${JSON.stringify(gamma)}`);
|
|
163
|
+
}
|
|
164
|
+
if (gamma > MAX_GAMMA) {
|
|
165
|
+
throw new TypeError(`"gamma" must be <= ${MAX_GAMMA}, but got ${JSON.stringify(gamma)}`);
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
var VERTEX_SHADER = `#version 300 es
|
|
169
|
+
in vec2 aPos;
|
|
170
|
+
in vec2 aUv;
|
|
171
|
+
out vec2 vUv;
|
|
172
|
+
|
|
173
|
+
void main() {
|
|
174
|
+
vUv = aUv;
|
|
175
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
176
|
+
}
|
|
177
|
+
`;
|
|
178
|
+
var FRAGMENT_SHADER = `#version 300 es
|
|
179
|
+
precision highp float;
|
|
180
|
+
|
|
181
|
+
in vec2 vUv;
|
|
182
|
+
out vec4 fragColor;
|
|
183
|
+
|
|
184
|
+
uniform sampler2D uSource;
|
|
185
|
+
uniform float uBlackPoint;
|
|
186
|
+
uniform float uWhitePoint;
|
|
187
|
+
uniform float uGamma;
|
|
188
|
+
|
|
189
|
+
void main() {
|
|
190
|
+
vec4 sourceColor = texture(uSource, vUv);
|
|
191
|
+
float alpha = sourceColor.a;
|
|
192
|
+
|
|
193
|
+
if (alpha <= 0.0) {
|
|
194
|
+
fragColor = vec4(0.0);
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
vec3 color = sourceColor.rgb / alpha;
|
|
199
|
+
vec3 normalized = clamp(
|
|
200
|
+
(color - vec3(uBlackPoint)) / (uWhitePoint - uBlackPoint),
|
|
201
|
+
0.0,
|
|
202
|
+
1.0
|
|
203
|
+
);
|
|
204
|
+
vec3 corrected = pow(normalized, vec3(1.0 / uGamma));
|
|
205
|
+
|
|
206
|
+
fragColor = vec4(corrected * alpha, alpha);
|
|
207
|
+
}
|
|
208
|
+
`;
|
|
209
|
+
var compileShader = (gl, type, source) => {
|
|
210
|
+
const shader = gl.createShader(type);
|
|
211
|
+
if (!shader) {
|
|
212
|
+
throw new Error("Failed to create levels shader");
|
|
213
|
+
}
|
|
214
|
+
gl.shaderSource(shader, source);
|
|
215
|
+
gl.compileShader(shader);
|
|
216
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
217
|
+
const log = gl.getShaderInfoLog(shader);
|
|
218
|
+
gl.deleteShader(shader);
|
|
219
|
+
throw new Error(`Levels shader compile failed: ${log ?? "(no log)"}`);
|
|
220
|
+
}
|
|
221
|
+
return shader;
|
|
222
|
+
};
|
|
223
|
+
var createProgram = (gl) => {
|
|
224
|
+
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
|
225
|
+
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
|
|
226
|
+
const program = gl.createProgram();
|
|
227
|
+
if (!program) {
|
|
228
|
+
throw new Error("Failed to create levels shader program");
|
|
229
|
+
}
|
|
230
|
+
gl.attachShader(program, vertexShader);
|
|
231
|
+
gl.attachShader(program, fragmentShader);
|
|
232
|
+
gl.linkProgram(program);
|
|
233
|
+
gl.deleteShader(vertexShader);
|
|
234
|
+
gl.deleteShader(fragmentShader);
|
|
235
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
236
|
+
const log = gl.getProgramInfoLog(program);
|
|
237
|
+
gl.deleteProgram(program);
|
|
238
|
+
throw new Error(`Levels shader link failed: ${log ?? "(no log)"}`);
|
|
239
|
+
}
|
|
240
|
+
return program;
|
|
241
|
+
};
|
|
242
|
+
var createTexture = (gl) => {
|
|
243
|
+
const texture = gl.createTexture();
|
|
244
|
+
if (!texture) {
|
|
245
|
+
throw new Error("Failed to create levels texture");
|
|
246
|
+
}
|
|
247
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
248
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
249
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
250
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
251
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
252
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
253
|
+
return texture;
|
|
254
|
+
};
|
|
255
|
+
var setupLevels = (target) => {
|
|
256
|
+
const gl = target.getContext("webgl2", {
|
|
257
|
+
premultipliedAlpha: true,
|
|
258
|
+
alpha: true,
|
|
259
|
+
preserveDrawingBuffer: true
|
|
260
|
+
});
|
|
261
|
+
if (!gl) {
|
|
262
|
+
throw createWebGL2ContextError("levels effect");
|
|
263
|
+
}
|
|
264
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
265
|
+
const program = createProgram(gl);
|
|
266
|
+
const vao = gl.createVertexArray();
|
|
267
|
+
if (!vao) {
|
|
268
|
+
throw new Error("Failed to create levels vertex array");
|
|
269
|
+
}
|
|
270
|
+
const vbo = gl.createBuffer();
|
|
271
|
+
if (!vbo) {
|
|
272
|
+
throw new Error("Failed to create levels vertex buffer");
|
|
273
|
+
}
|
|
274
|
+
gl.bindVertexArray(vao);
|
|
275
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
276
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
|
|
277
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
278
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
279
|
+
gl.enableVertexAttribArray(aPos);
|
|
280
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
281
|
+
gl.enableVertexAttribArray(aUv);
|
|
282
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
283
|
+
gl.bindVertexArray(null);
|
|
284
|
+
return {
|
|
285
|
+
gl,
|
|
286
|
+
program,
|
|
287
|
+
vao,
|
|
288
|
+
vbo,
|
|
289
|
+
textureSource: createTexture(gl),
|
|
290
|
+
uniforms: {
|
|
291
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
292
|
+
uBlackPoint: gl.getUniformLocation(program, "uBlackPoint"),
|
|
293
|
+
uWhitePoint: gl.getUniformLocation(program, "uWhitePoint"),
|
|
294
|
+
uGamma: gl.getUniformLocation(program, "uGamma")
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
};
|
|
298
|
+
var levels = createEffect({
|
|
299
|
+
type: "remotion/levels",
|
|
300
|
+
label: "levels()",
|
|
301
|
+
documentationLink: "https://www.remotion.dev/docs/effects/levels",
|
|
302
|
+
backend: "webgl2",
|
|
303
|
+
calculateKey: (params) => {
|
|
304
|
+
const { blackPoint, whitePoint, gamma } = resolve(params);
|
|
305
|
+
return `levels-${blackPoint}-${whitePoint}-${gamma}`;
|
|
306
|
+
},
|
|
307
|
+
setup: setupLevels,
|
|
308
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
309
|
+
const { blackPoint, whitePoint, gamma } = resolve(params);
|
|
310
|
+
const { gl, program, textureSource, uniforms, vao } = state;
|
|
311
|
+
gl.viewport(0, 0, width, height);
|
|
312
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
313
|
+
gl.clearColor(0, 0, 0, 0);
|
|
314
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
315
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
316
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
317
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
318
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
319
|
+
gl.useProgram(program);
|
|
320
|
+
if (uniforms.uSource)
|
|
321
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
322
|
+
if (uniforms.uBlackPoint) {
|
|
323
|
+
gl.uniform1f(uniforms.uBlackPoint, blackPoint);
|
|
324
|
+
}
|
|
325
|
+
if (uniforms.uWhitePoint) {
|
|
326
|
+
gl.uniform1f(uniforms.uWhitePoint, whitePoint);
|
|
327
|
+
}
|
|
328
|
+
if (uniforms.uGamma)
|
|
329
|
+
gl.uniform1f(uniforms.uGamma, gamma);
|
|
330
|
+
gl.bindVertexArray(vao);
|
|
331
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
332
|
+
gl.bindVertexArray(null);
|
|
333
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
334
|
+
gl.useProgram(null);
|
|
335
|
+
},
|
|
336
|
+
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
337
|
+
gl.deleteTexture(textureSource);
|
|
338
|
+
gl.deleteBuffer(vbo);
|
|
339
|
+
gl.deleteProgram(program);
|
|
340
|
+
gl.deleteVertexArray(vao);
|
|
341
|
+
},
|
|
342
|
+
schema: levelsSchema,
|
|
343
|
+
validateParams: validateLevelsParams
|
|
344
|
+
});
|
|
345
|
+
export {
|
|
346
|
+
levels
|
|
347
|
+
};
|