@remotion/effects 4.0.507 → 4.0.509
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/color-correction-shader-utils.d.ts +4 -0
- package/dist/color-correction.d.ts +27 -0
- package/dist/esm/color-correction.mjs +560 -0
- package/dist/esm/exposure.mjs +372 -0
- package/dist/esm/levels.mjs +347 -0
- package/dist/esm/shadows-highlights.mjs +386 -0
- package/dist/esm/vibrance.mjs +363 -0
- package/dist/esm/white-balance.mjs +384 -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 +51 -3
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
// src/shadows-highlights.ts
|
|
2
|
+
import { Internals } from "remotion";
|
|
3
|
+
|
|
4
|
+
// src/color-correction-shader-utils.ts
|
|
5
|
+
var COLOR_SPACE_GLSL = `
|
|
6
|
+
vec3 srgbToLinear(vec3 color) {
|
|
7
|
+
vec3 lower = color / 12.92;
|
|
8
|
+
vec3 upper = pow((color + 0.055) / 1.055, vec3(2.4));
|
|
9
|
+
return mix(lower, upper, step(vec3(0.04045), color));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
vec3 linearToSrgb(vec3 color) {
|
|
13
|
+
vec3 nonNegative = max(color, vec3(0.0));
|
|
14
|
+
vec3 lower = nonNegative * 12.92;
|
|
15
|
+
vec3 upper = 1.055 * pow(nonNegative, vec3(1.0 / 2.4)) - 0.055;
|
|
16
|
+
return mix(lower, upper, step(vec3(0.0031308), nonNegative));
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
var WHITE_BALANCE_GLSL = `
|
|
20
|
+
vec3 applyWhiteBalanceLinear(vec3 linear, float temperature, float tint) {
|
|
21
|
+
vec3 temperatureOffset = vec3(0.3, 0.0, -0.3) * temperature;
|
|
22
|
+
vec3 tintOffset = vec3(0.15, -0.3, 0.15) * tint;
|
|
23
|
+
vec3 gains = exp2(temperatureOffset + tintOffset);
|
|
24
|
+
float luminanceGain = dot(gains, vec3(0.2126, 0.7152, 0.0722));
|
|
25
|
+
return linear * gains / luminanceGain;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
var SHADOWS_HIGHLIGHTS_GLSL = `
|
|
29
|
+
float getShadowsHighlightsStops(
|
|
30
|
+
vec3 color,
|
|
31
|
+
float shadows,
|
|
32
|
+
float highlights
|
|
33
|
+
) {
|
|
34
|
+
float luminance = dot(color, vec3(0.2126, 0.7152, 0.0722));
|
|
35
|
+
float shadowWeight = 1.0 - smoothstep(0.0, 0.6, luminance);
|
|
36
|
+
float highlightWeight = smoothstep(0.4, 1.0, luminance);
|
|
37
|
+
shadowWeight *= shadowWeight;
|
|
38
|
+
highlightWeight *= highlightWeight;
|
|
39
|
+
return shadows * shadowWeight + highlights * highlightWeight;
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
var VIBRANCE_GLSL = `
|
|
43
|
+
vec3 applyVibrance(vec3 color, float amount) {
|
|
44
|
+
float maximum = max(max(color.r, color.g), color.b);
|
|
45
|
+
float minimum = min(min(color.r, color.g), color.b);
|
|
46
|
+
float lightness = (maximum + minimum) * 0.5;
|
|
47
|
+
float chroma = maximum - minimum;
|
|
48
|
+
float saturationDenominator = 1.0 - abs(2.0 * lightness - 1.0);
|
|
49
|
+
float saturation = saturationDenominator <= 0.0
|
|
50
|
+
? 0.0
|
|
51
|
+
: chroma / saturationDenominator;
|
|
52
|
+
|
|
53
|
+
if (saturation <= 0.000001) {
|
|
54
|
+
return color;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
float targetSaturation = amount >= 0.0
|
|
58
|
+
? saturation + amount * (1.0 - saturation)
|
|
59
|
+
: saturation * (1.0 + amount);
|
|
60
|
+
return clamp(
|
|
61
|
+
vec3(lightness) +
|
|
62
|
+
(color - vec3(lightness)) * (targetSaturation / saturation),
|
|
63
|
+
0.0,
|
|
64
|
+
1.0
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
|
|
69
|
+
// src/validate-effect-param.ts
|
|
70
|
+
var assertEffectParamsObject = (params, effectLabel) => {
|
|
71
|
+
if (params === null || typeof params !== "object") {
|
|
72
|
+
throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var assertRequiredFiniteNumber = (value, name) => {
|
|
76
|
+
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
77
|
+
throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
var assertRequiredColor = (value, name) => {
|
|
81
|
+
if (typeof value !== "string" || value.length === 0) {
|
|
82
|
+
throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var assertOptionalColor = (value, name) => {
|
|
86
|
+
if (value === undefined) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
assertRequiredColor(value, name);
|
|
90
|
+
};
|
|
91
|
+
var assertOptionalBoolean = (value, name) => {
|
|
92
|
+
if (value === undefined) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (typeof value !== "boolean") {
|
|
96
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
// src/color-utils.ts
|
|
101
|
+
var DEFAULT_AMOUNT = 1;
|
|
102
|
+
var DEFAULT_BRIGHTNESS_AMOUNT = 0;
|
|
103
|
+
var DEFAULT_HUE_DEGREES = 0;
|
|
104
|
+
var colorAmountSchema = {
|
|
105
|
+
type: "number",
|
|
106
|
+
min: 0,
|
|
107
|
+
max: 1,
|
|
108
|
+
step: 0.01,
|
|
109
|
+
default: DEFAULT_AMOUNT,
|
|
110
|
+
description: "Amount",
|
|
111
|
+
hiddenFromList: false
|
|
112
|
+
};
|
|
113
|
+
var colorMultiplierSchema = {
|
|
114
|
+
type: "number",
|
|
115
|
+
min: 0,
|
|
116
|
+
step: 0.01,
|
|
117
|
+
default: DEFAULT_AMOUNT,
|
|
118
|
+
description: "Amount",
|
|
119
|
+
hiddenFromList: false
|
|
120
|
+
};
|
|
121
|
+
var brightnessAmountSchema = {
|
|
122
|
+
type: "number",
|
|
123
|
+
min: -1,
|
|
124
|
+
max: 1,
|
|
125
|
+
step: 0.01,
|
|
126
|
+
default: DEFAULT_BRIGHTNESS_AMOUNT,
|
|
127
|
+
description: "Amount",
|
|
128
|
+
hiddenFromList: false
|
|
129
|
+
};
|
|
130
|
+
var hueDegreesSchema = {
|
|
131
|
+
type: "rotation-degrees",
|
|
132
|
+
step: 1,
|
|
133
|
+
default: DEFAULT_HUE_DEGREES,
|
|
134
|
+
description: "Degrees"
|
|
135
|
+
};
|
|
136
|
+
var assertOptionalFiniteNumber = (value, name) => {
|
|
137
|
+
if (value === undefined) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
assertRequiredFiniteNumber(value, name);
|
|
141
|
+
};
|
|
142
|
+
var validateUnitInterval = (value, name) => {
|
|
143
|
+
if (value < 0) {
|
|
144
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
145
|
+
}
|
|
146
|
+
if (value > 1) {
|
|
147
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
var validateNonNegative = (value, name) => {
|
|
151
|
+
if (value < 0) {
|
|
152
|
+
throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
var validateSignedUnitInterval = (value, name) => {
|
|
156
|
+
if (value < -1) {
|
|
157
|
+
throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
|
|
158
|
+
}
|
|
159
|
+
if (value > 1) {
|
|
160
|
+
throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
var clampColorChannel = (value) => {
|
|
164
|
+
return Math.max(0, Math.min(255, value));
|
|
165
|
+
};
|
|
166
|
+
var parseColorRgba = (ctx, color) => {
|
|
167
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
168
|
+
ctx.fillStyle = color;
|
|
169
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
170
|
+
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
171
|
+
return [data[0], data[1], data[2], data[3]];
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
// src/shadows-highlights.ts
|
|
175
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
176
|
+
var DEFAULT_SHADOWS = 0;
|
|
177
|
+
var DEFAULT_HIGHLIGHTS = 0;
|
|
178
|
+
var shadowsHighlightsSchema = {
|
|
179
|
+
shadows: {
|
|
180
|
+
type: "number",
|
|
181
|
+
min: -1,
|
|
182
|
+
max: 1,
|
|
183
|
+
step: 0.01,
|
|
184
|
+
default: DEFAULT_SHADOWS,
|
|
185
|
+
description: "Shadows",
|
|
186
|
+
hiddenFromList: false
|
|
187
|
+
},
|
|
188
|
+
highlights: {
|
|
189
|
+
type: "number",
|
|
190
|
+
min: -1,
|
|
191
|
+
max: 1,
|
|
192
|
+
step: 0.01,
|
|
193
|
+
default: DEFAULT_HIGHLIGHTS,
|
|
194
|
+
description: "Highlights",
|
|
195
|
+
hiddenFromList: false
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
var resolve = (params) => ({
|
|
199
|
+
shadows: params.shadows ?? DEFAULT_SHADOWS,
|
|
200
|
+
highlights: params.highlights ?? DEFAULT_HIGHLIGHTS
|
|
201
|
+
});
|
|
202
|
+
var validateShadowsHighlightsParams = (params) => {
|
|
203
|
+
assertEffectParamsObject(params, "Shadows and highlights");
|
|
204
|
+
assertOptionalFiniteNumber(params.shadows, "shadows");
|
|
205
|
+
assertOptionalFiniteNumber(params.highlights, "highlights");
|
|
206
|
+
const { shadows, highlights } = resolve(params);
|
|
207
|
+
validateSignedUnitInterval(shadows, "shadows");
|
|
208
|
+
validateSignedUnitInterval(highlights, "highlights");
|
|
209
|
+
};
|
|
210
|
+
var VERTEX_SHADER = `#version 300 es
|
|
211
|
+
in vec2 aPos;
|
|
212
|
+
in vec2 aUv;
|
|
213
|
+
out vec2 vUv;
|
|
214
|
+
|
|
215
|
+
void main() {
|
|
216
|
+
vUv = aUv;
|
|
217
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
218
|
+
}
|
|
219
|
+
`;
|
|
220
|
+
var FRAGMENT_SHADER = `#version 300 es
|
|
221
|
+
precision highp float;
|
|
222
|
+
|
|
223
|
+
in vec2 vUv;
|
|
224
|
+
out vec4 fragColor;
|
|
225
|
+
|
|
226
|
+
uniform sampler2D uSource;
|
|
227
|
+
uniform float uShadows;
|
|
228
|
+
uniform float uHighlights;
|
|
229
|
+
|
|
230
|
+
${COLOR_SPACE_GLSL}
|
|
231
|
+
${SHADOWS_HIGHLIGHTS_GLSL}
|
|
232
|
+
|
|
233
|
+
void main() {
|
|
234
|
+
vec4 sourceColor = texture(uSource, vUv);
|
|
235
|
+
float alpha = sourceColor.a;
|
|
236
|
+
|
|
237
|
+
if (alpha <= 0.0) {
|
|
238
|
+
fragColor = vec4(0.0);
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
vec3 color = sourceColor.rgb / alpha;
|
|
243
|
+
float stops = getShadowsHighlightsStops(color, uShadows, uHighlights);
|
|
244
|
+
vec3 linear = srgbToLinear(color);
|
|
245
|
+
vec3 adjusted = linear * exp2(stops);
|
|
246
|
+
vec3 corrected = linearToSrgb(adjusted);
|
|
247
|
+
|
|
248
|
+
fragColor = vec4(corrected * alpha, alpha);
|
|
249
|
+
}
|
|
250
|
+
`;
|
|
251
|
+
var compileShader = (gl, type, source) => {
|
|
252
|
+
const shader = gl.createShader(type);
|
|
253
|
+
if (!shader) {
|
|
254
|
+
throw new Error("Failed to create shadows and highlights shader");
|
|
255
|
+
}
|
|
256
|
+
gl.shaderSource(shader, source);
|
|
257
|
+
gl.compileShader(shader);
|
|
258
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
259
|
+
const log = gl.getShaderInfoLog(shader);
|
|
260
|
+
gl.deleteShader(shader);
|
|
261
|
+
throw new Error(`Shadows and highlights shader compile failed: ${log ?? "(no log)"}`);
|
|
262
|
+
}
|
|
263
|
+
return shader;
|
|
264
|
+
};
|
|
265
|
+
var createProgram = (gl) => {
|
|
266
|
+
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
|
267
|
+
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
|
|
268
|
+
const program = gl.createProgram();
|
|
269
|
+
if (!program) {
|
|
270
|
+
throw new Error("Failed to create shadows and highlights shader program");
|
|
271
|
+
}
|
|
272
|
+
gl.attachShader(program, vertexShader);
|
|
273
|
+
gl.attachShader(program, fragmentShader);
|
|
274
|
+
gl.linkProgram(program);
|
|
275
|
+
gl.deleteShader(vertexShader);
|
|
276
|
+
gl.deleteShader(fragmentShader);
|
|
277
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
278
|
+
const log = gl.getProgramInfoLog(program);
|
|
279
|
+
gl.deleteProgram(program);
|
|
280
|
+
throw new Error(`Shadows and highlights shader link failed: ${log ?? "(no log)"}`);
|
|
281
|
+
}
|
|
282
|
+
return program;
|
|
283
|
+
};
|
|
284
|
+
var createTexture = (gl) => {
|
|
285
|
+
const texture = gl.createTexture();
|
|
286
|
+
if (!texture) {
|
|
287
|
+
throw new Error("Failed to create shadows and highlights texture");
|
|
288
|
+
}
|
|
289
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
290
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
291
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
292
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
293
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
294
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
295
|
+
return texture;
|
|
296
|
+
};
|
|
297
|
+
var setupShadowsHighlights = (target) => {
|
|
298
|
+
const gl = target.getContext("webgl2", {
|
|
299
|
+
premultipliedAlpha: true,
|
|
300
|
+
alpha: true,
|
|
301
|
+
preserveDrawingBuffer: true
|
|
302
|
+
});
|
|
303
|
+
if (!gl) {
|
|
304
|
+
throw createWebGL2ContextError("shadows and highlights effect");
|
|
305
|
+
}
|
|
306
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
307
|
+
const program = createProgram(gl);
|
|
308
|
+
const vao = gl.createVertexArray();
|
|
309
|
+
if (!vao) {
|
|
310
|
+
throw new Error("Failed to create shadows and highlights vertex array");
|
|
311
|
+
}
|
|
312
|
+
const vbo = gl.createBuffer();
|
|
313
|
+
if (!vbo) {
|
|
314
|
+
throw new Error("Failed to create shadows and highlights vertex buffer");
|
|
315
|
+
}
|
|
316
|
+
gl.bindVertexArray(vao);
|
|
317
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
318
|
+
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);
|
|
319
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
320
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
321
|
+
gl.enableVertexAttribArray(aPos);
|
|
322
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
323
|
+
gl.enableVertexAttribArray(aUv);
|
|
324
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
325
|
+
gl.bindVertexArray(null);
|
|
326
|
+
return {
|
|
327
|
+
gl,
|
|
328
|
+
program,
|
|
329
|
+
vao,
|
|
330
|
+
vbo,
|
|
331
|
+
textureSource: createTexture(gl),
|
|
332
|
+
uniforms: {
|
|
333
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
334
|
+
uShadows: gl.getUniformLocation(program, "uShadows"),
|
|
335
|
+
uHighlights: gl.getUniformLocation(program, "uHighlights")
|
|
336
|
+
}
|
|
337
|
+
};
|
|
338
|
+
};
|
|
339
|
+
var shadowsHighlights = createEffect({
|
|
340
|
+
type: "remotion/shadows-highlights",
|
|
341
|
+
label: "shadowsHighlights()",
|
|
342
|
+
documentationLink: "https://www.remotion.dev/docs/effects/shadows-highlights",
|
|
343
|
+
backend: "webgl2",
|
|
344
|
+
calculateKey: (params) => {
|
|
345
|
+
const { shadows, highlights } = resolve(params);
|
|
346
|
+
return `shadows-highlights-${shadows}-${highlights}`;
|
|
347
|
+
},
|
|
348
|
+
setup: setupShadowsHighlights,
|
|
349
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
350
|
+
const { shadows, highlights } = resolve(params);
|
|
351
|
+
const { gl, program, textureSource, uniforms, vao } = state;
|
|
352
|
+
gl.viewport(0, 0, width, height);
|
|
353
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
354
|
+
gl.clearColor(0, 0, 0, 0);
|
|
355
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
356
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
357
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
358
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
359
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
360
|
+
gl.useProgram(program);
|
|
361
|
+
if (uniforms.uSource)
|
|
362
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
363
|
+
if (uniforms.uShadows) {
|
|
364
|
+
gl.uniform1f(uniforms.uShadows, shadows);
|
|
365
|
+
}
|
|
366
|
+
if (uniforms.uHighlights) {
|
|
367
|
+
gl.uniform1f(uniforms.uHighlights, highlights);
|
|
368
|
+
}
|
|
369
|
+
gl.bindVertexArray(vao);
|
|
370
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
371
|
+
gl.bindVertexArray(null);
|
|
372
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
373
|
+
gl.useProgram(null);
|
|
374
|
+
},
|
|
375
|
+
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
376
|
+
gl.deleteTexture(textureSource);
|
|
377
|
+
gl.deleteBuffer(vbo);
|
|
378
|
+
gl.deleteProgram(program);
|
|
379
|
+
gl.deleteVertexArray(vao);
|
|
380
|
+
},
|
|
381
|
+
schema: shadowsHighlightsSchema,
|
|
382
|
+
validateParams: validateShadowsHighlightsParams
|
|
383
|
+
});
|
|
384
|
+
export {
|
|
385
|
+
shadowsHighlights
|
|
386
|
+
};
|