@remotion/light-leaks 4.0.461 → 4.0.463
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/index.mjs +298 -1
- package/dist/index.d.ts +2 -0
- package/dist/light-leak-internals.d.ts +36 -0
- package/package.json +3 -4
package/dist/esm/index.mjs
CHANGED
|
@@ -189,7 +189,8 @@ var lightLeakSchema = {
|
|
|
189
189
|
default: 0,
|
|
190
190
|
description: "Hue Shift"
|
|
191
191
|
},
|
|
192
|
-
...Internals.sequenceStyleSchema
|
|
192
|
+
...Internals.sequenceStyleSchema,
|
|
193
|
+
hidden: Internals.hiddenField
|
|
193
194
|
};
|
|
194
195
|
var LightLeakInner = ({
|
|
195
196
|
seed = 0,
|
|
@@ -225,6 +226,302 @@ var LightLeakInner = ({
|
|
|
225
226
|
var LightLeak = Internals.wrapInSchema(LightLeakInner, lightLeakSchema);
|
|
226
227
|
LightLeak.displayName = "LightLeak";
|
|
227
228
|
Internals.addSequenceStackTraces(LightLeak);
|
|
229
|
+
// src/light-leak-internals.ts
|
|
230
|
+
import { Internals as Internals2 } from "remotion";
|
|
231
|
+
var { createEffect } = Internals2;
|
|
232
|
+
var lightLeakEffectSchema = {
|
|
233
|
+
seed: { type: "number", default: 0, description: "Seed" },
|
|
234
|
+
hueShift: {
|
|
235
|
+
type: "number",
|
|
236
|
+
min: 0,
|
|
237
|
+
max: 360,
|
|
238
|
+
default: 0,
|
|
239
|
+
description: "Hue Shift"
|
|
240
|
+
},
|
|
241
|
+
progress: {
|
|
242
|
+
type: "number",
|
|
243
|
+
min: 0,
|
|
244
|
+
max: 1,
|
|
245
|
+
step: 0.01,
|
|
246
|
+
default: 0,
|
|
247
|
+
description: "Progress"
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
var resolve = (p) => ({
|
|
251
|
+
seed: p.seed ?? 0,
|
|
252
|
+
hueShift: p.hueShift ?? 0,
|
|
253
|
+
progress: p.progress ?? 0
|
|
254
|
+
});
|
|
255
|
+
var LIGHT_LEAK_VS = `#version 300 es
|
|
256
|
+
in vec2 aPos;
|
|
257
|
+
in vec2 aUv;
|
|
258
|
+
out vec2 vUv;
|
|
259
|
+
void main() {
|
|
260
|
+
vUv = aUv;
|
|
261
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
262
|
+
}
|
|
263
|
+
`;
|
|
264
|
+
var LIGHT_LEAK_FS = `#version 300 es
|
|
265
|
+
precision highp float;
|
|
266
|
+
|
|
267
|
+
in vec2 vUv;
|
|
268
|
+
out vec4 fragColor;
|
|
269
|
+
|
|
270
|
+
uniform sampler2D uSource;
|
|
271
|
+
uniform float evolveProgress;
|
|
272
|
+
uniform float retractProgress;
|
|
273
|
+
uniform float seed;
|
|
274
|
+
uniform float retractSeed;
|
|
275
|
+
uniform float hueShift;
|
|
276
|
+
uniform vec2 resolution;
|
|
277
|
+
|
|
278
|
+
const float Pi = 3.14159;
|
|
279
|
+
|
|
280
|
+
vec3 computePattern(vec2 uv, float s, float t) {
|
|
281
|
+
vec2 p = uv * 0.8;
|
|
282
|
+
p += vec2(sin(s * 1.61803) * 5.0, cos(s * 2.71828) * 5.0);
|
|
283
|
+
|
|
284
|
+
for (int i = 1; i < 5; i++) {
|
|
285
|
+
vec2 newp = p;
|
|
286
|
+
float fi = float(i);
|
|
287
|
+
float phase = s * 0.7 * fi;
|
|
288
|
+
newp.x += 0.6 / fi * cos(fi * p.y + t * 0.7 + 0.3 * fi + phase) + 20.0;
|
|
289
|
+
newp.y += 0.6 / fi * cos(fi * p.x + t * 0.7 + 0.3 * float(i + 10) + phase) - 20.0 + 15.0;
|
|
290
|
+
p = newp;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
float v1 = 0.5 * sin(2.0 * p.x) + 0.5;
|
|
294
|
+
float v2 = 0.5 * sin(2.0 * p.y) + 0.5;
|
|
295
|
+
float blend = sin(p.x + p.y) * 0.5 + 0.5;
|
|
296
|
+
float brightness = v1 * 0.5 + v2 * 0.5;
|
|
297
|
+
float patternValue = brightness * 0.6 + blend * 0.4;
|
|
298
|
+
|
|
299
|
+
return vec3(brightness, blend, patternValue);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
void main() {
|
|
303
|
+
float refScale = 1.92;
|
|
304
|
+
vec2 uv = (gl_FragCoord.xy / resolution) * vec2(refScale, refScale * resolution.y / resolution.x);
|
|
305
|
+
|
|
306
|
+
vec3 patA = computePattern(uv, seed, evolveProgress * Pi);
|
|
307
|
+
float threshA = 1.0 - evolveProgress;
|
|
308
|
+
float revealAlpha = smoothstep(threshA, threshA + 0.3, patA.z);
|
|
309
|
+
|
|
310
|
+
vec2 maxUv = vec2(refScale, refScale * resolution.y / resolution.x);
|
|
311
|
+
vec2 retractUv = maxUv - uv;
|
|
312
|
+
vec3 patB = computePattern(retractUv, retractSeed, retractProgress * Pi);
|
|
313
|
+
float threshB = 1.0 - retractProgress;
|
|
314
|
+
float eraseAlpha = smoothstep(threshB, threshB + 0.3, patB.z);
|
|
315
|
+
|
|
316
|
+
float alpha = revealAlpha * (1.0 - eraseAlpha);
|
|
317
|
+
|
|
318
|
+
vec3 yellow = vec3(1.0, 0.85, 0.2);
|
|
319
|
+
vec3 orange = vec3(1.0, 0.5, 0.05);
|
|
320
|
+
vec3 col = mix(yellow, orange, patA.y);
|
|
321
|
+
col *= 0.6 + 0.6 * patA.x;
|
|
322
|
+
|
|
323
|
+
float angle = hueShift * Pi / 180.0;
|
|
324
|
+
float cosA = cos(angle);
|
|
325
|
+
float sinA = sin(angle);
|
|
326
|
+
mat3 hueRot = mat3(
|
|
327
|
+
cosA + (1.0 - cosA) / 3.0,
|
|
328
|
+
(1.0 - cosA) / 3.0 - sinA * 0.57735,
|
|
329
|
+
(1.0 - cosA) / 3.0 + sinA * 0.57735,
|
|
330
|
+
(1.0 - cosA) / 3.0 + sinA * 0.57735,
|
|
331
|
+
cosA + (1.0 - cosA) / 3.0,
|
|
332
|
+
(1.0 - cosA) / 3.0 - sinA * 0.57735,
|
|
333
|
+
(1.0 - cosA) / 3.0 - sinA * 0.57735,
|
|
334
|
+
(1.0 - cosA) / 3.0 + sinA * 0.57735,
|
|
335
|
+
cosA + (1.0 - cosA) / 3.0
|
|
336
|
+
);
|
|
337
|
+
col = clamp(hueRot * col, 0.0, 1.0);
|
|
338
|
+
|
|
339
|
+
vec4 src = texture(uSource, vUv);
|
|
340
|
+
vec4 leakPm = vec4(col * alpha, alpha);
|
|
341
|
+
fragColor = leakPm + src * (1.0 - alpha);
|
|
342
|
+
}
|
|
343
|
+
`;
|
|
344
|
+
var compileShader = (gl, type, source) => {
|
|
345
|
+
const shader = gl.createShader(type);
|
|
346
|
+
if (!shader) {
|
|
347
|
+
throw new Error("Failed to create WebGL shader");
|
|
348
|
+
}
|
|
349
|
+
gl.shaderSource(shader, source);
|
|
350
|
+
gl.compileShader(shader);
|
|
351
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
352
|
+
const log = gl.getShaderInfoLog(shader);
|
|
353
|
+
gl.deleteShader(shader);
|
|
354
|
+
throw new Error(`Light leak shader compile failed: ${log ?? "(no log)"}`);
|
|
355
|
+
}
|
|
356
|
+
return shader;
|
|
357
|
+
};
|
|
358
|
+
var linkProgram = (gl, vs, fs) => {
|
|
359
|
+
const program = gl.createProgram();
|
|
360
|
+
if (!program) {
|
|
361
|
+
throw new Error("Failed to create WebGL program");
|
|
362
|
+
}
|
|
363
|
+
gl.attachShader(program, vs);
|
|
364
|
+
gl.attachShader(program, fs);
|
|
365
|
+
gl.linkProgram(program);
|
|
366
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
367
|
+
const log = gl.getProgramInfoLog(program);
|
|
368
|
+
gl.deleteProgram(program);
|
|
369
|
+
throw new Error(`Light leak program link failed: ${log ?? "(no log)"}`);
|
|
370
|
+
}
|
|
371
|
+
return program;
|
|
372
|
+
};
|
|
373
|
+
var lightLeak = createEffect({
|
|
374
|
+
type: "remotion/light-leak",
|
|
375
|
+
label: "Light leak",
|
|
376
|
+
backend: "webgl2",
|
|
377
|
+
calculateKey: (params) => {
|
|
378
|
+
const r = resolve(params);
|
|
379
|
+
return `light-leak-${r.seed}-${r.hueShift}-${r.progress}`;
|
|
380
|
+
},
|
|
381
|
+
setup: (target) => {
|
|
382
|
+
const gl = target.getContext("webgl2", {
|
|
383
|
+
premultipliedAlpha: true,
|
|
384
|
+
alpha: true,
|
|
385
|
+
preserveDrawingBuffer: true
|
|
386
|
+
});
|
|
387
|
+
if (!gl) {
|
|
388
|
+
throw new Error("Failed to acquire WebGL2 context for light leak effect");
|
|
389
|
+
}
|
|
390
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
391
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
392
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, LIGHT_LEAK_VS);
|
|
393
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, LIGHT_LEAK_FS);
|
|
394
|
+
const program = linkProgram(gl, vs, fs);
|
|
395
|
+
gl.deleteShader(vs);
|
|
396
|
+
gl.deleteShader(fs);
|
|
397
|
+
const vao = gl.createVertexArray();
|
|
398
|
+
if (!vao) {
|
|
399
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
400
|
+
}
|
|
401
|
+
gl.bindVertexArray(vao);
|
|
402
|
+
const data = new Float32Array([
|
|
403
|
+
-1,
|
|
404
|
+
-1,
|
|
405
|
+
0,
|
|
406
|
+
0,
|
|
407
|
+
1,
|
|
408
|
+
-1,
|
|
409
|
+
1,
|
|
410
|
+
0,
|
|
411
|
+
-1,
|
|
412
|
+
1,
|
|
413
|
+
0,
|
|
414
|
+
1,
|
|
415
|
+
1,
|
|
416
|
+
1,
|
|
417
|
+
1,
|
|
418
|
+
1
|
|
419
|
+
]);
|
|
420
|
+
const vbo = gl.createBuffer();
|
|
421
|
+
if (!vbo) {
|
|
422
|
+
throw new Error("Failed to create WebGL buffer");
|
|
423
|
+
}
|
|
424
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
425
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
426
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
427
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
428
|
+
gl.enableVertexAttribArray(aPos);
|
|
429
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
430
|
+
gl.enableVertexAttribArray(aUv);
|
|
431
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
432
|
+
gl.bindVertexArray(null);
|
|
433
|
+
const texture = gl.createTexture();
|
|
434
|
+
if (!texture) {
|
|
435
|
+
throw new Error("Failed to create WebGL texture");
|
|
436
|
+
}
|
|
437
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
438
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
439
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
440
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
441
|
+
return {
|
|
442
|
+
gl,
|
|
443
|
+
program,
|
|
444
|
+
vao,
|
|
445
|
+
vbo,
|
|
446
|
+
texture,
|
|
447
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
448
|
+
uEvolveProgress: gl.getUniformLocation(program, "evolveProgress"),
|
|
449
|
+
uRetractProgress: gl.getUniformLocation(program, "retractProgress"),
|
|
450
|
+
uSeed: gl.getUniformLocation(program, "seed"),
|
|
451
|
+
uRetractSeed: gl.getUniformLocation(program, "retractSeed"),
|
|
452
|
+
uHueShift: gl.getUniformLocation(program, "hueShift"),
|
|
453
|
+
uResolution: gl.getUniformLocation(program, "resolution")
|
|
454
|
+
};
|
|
455
|
+
},
|
|
456
|
+
apply: ({ source, width, height, params, state }) => {
|
|
457
|
+
const r = resolve(params);
|
|
458
|
+
if (typeof r.seed !== "number" || !Number.isFinite(r.seed)) {
|
|
459
|
+
throw new TypeError(`"seed" must be a finite number, but got ${JSON.stringify(r.seed)}`);
|
|
460
|
+
}
|
|
461
|
+
if (typeof r.hueShift !== "number" || !Number.isFinite(r.hueShift)) {
|
|
462
|
+
throw new TypeError(`"hueShift" must be a finite number, but got ${JSON.stringify(r.hueShift)}`);
|
|
463
|
+
}
|
|
464
|
+
if (r.hueShift < 0 || r.hueShift > 360) {
|
|
465
|
+
throw new RangeError(`"hueShift" must be between 0 and 360, but got ${r.hueShift}`);
|
|
466
|
+
}
|
|
467
|
+
const normalized = Math.min(1, Math.max(0, r.progress));
|
|
468
|
+
const evolveProgress = Math.min(1, normalized * 2);
|
|
469
|
+
const retractProgress = Math.max(0, normalized * 2 - 1);
|
|
470
|
+
const {
|
|
471
|
+
gl,
|
|
472
|
+
program,
|
|
473
|
+
vao,
|
|
474
|
+
texture,
|
|
475
|
+
uSource,
|
|
476
|
+
uEvolveProgress,
|
|
477
|
+
uRetractProgress,
|
|
478
|
+
uSeed,
|
|
479
|
+
uRetractSeed,
|
|
480
|
+
uHueShift,
|
|
481
|
+
uResolution
|
|
482
|
+
} = state;
|
|
483
|
+
gl.viewport(0, 0, width, height);
|
|
484
|
+
gl.clearColor(0, 0, 0, 0);
|
|
485
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
486
|
+
gl.useProgram(program);
|
|
487
|
+
gl.bindVertexArray(vao);
|
|
488
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
489
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
490
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
491
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
492
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
493
|
+
if (uSource)
|
|
494
|
+
gl.uniform1i(uSource, 0);
|
|
495
|
+
if (uEvolveProgress)
|
|
496
|
+
gl.uniform1f(uEvolveProgress, evolveProgress);
|
|
497
|
+
if (uRetractProgress)
|
|
498
|
+
gl.uniform1f(uRetractProgress, retractProgress);
|
|
499
|
+
if (uSeed)
|
|
500
|
+
gl.uniform1f(uSeed, r.seed);
|
|
501
|
+
if (uRetractSeed)
|
|
502
|
+
gl.uniform1f(uRetractSeed, r.seed + 42);
|
|
503
|
+
if (uHueShift)
|
|
504
|
+
gl.uniform1f(uHueShift, r.hueShift);
|
|
505
|
+
if (uResolution)
|
|
506
|
+
gl.uniform2f(uResolution, width, height);
|
|
507
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
508
|
+
gl.bindVertexArray(null);
|
|
509
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
510
|
+
gl.useProgram(null);
|
|
511
|
+
},
|
|
512
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
513
|
+
gl.deleteBuffer(vbo);
|
|
514
|
+
gl.deleteProgram(program);
|
|
515
|
+
gl.deleteVertexArray(vao);
|
|
516
|
+
gl.deleteTexture(texture);
|
|
517
|
+
},
|
|
518
|
+
schema: lightLeakEffectSchema
|
|
519
|
+
});
|
|
520
|
+
var LightLeakInternals = {
|
|
521
|
+
lightLeak
|
|
522
|
+
};
|
|
228
523
|
export {
|
|
524
|
+
lightLeakEffectSchema,
|
|
525
|
+
LightLeakInternals,
|
|
229
526
|
LightLeak
|
|
230
527
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export declare const lightLeakEffectSchema: {
|
|
2
|
+
readonly seed: {
|
|
3
|
+
readonly type: "number";
|
|
4
|
+
readonly default: 0;
|
|
5
|
+
readonly description: "Seed";
|
|
6
|
+
};
|
|
7
|
+
readonly hueShift: {
|
|
8
|
+
readonly type: "number";
|
|
9
|
+
readonly min: 0;
|
|
10
|
+
readonly max: 360;
|
|
11
|
+
readonly default: 0;
|
|
12
|
+
readonly description: "Hue Shift";
|
|
13
|
+
};
|
|
14
|
+
readonly progress: {
|
|
15
|
+
readonly type: "number";
|
|
16
|
+
readonly min: 0;
|
|
17
|
+
readonly max: 1;
|
|
18
|
+
readonly step: 0.01;
|
|
19
|
+
readonly default: 0;
|
|
20
|
+
readonly description: "Progress";
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export type LightLeakEffectParams = {
|
|
24
|
+
readonly seed?: number;
|
|
25
|
+
readonly hueShift?: number;
|
|
26
|
+
/** Evolve/retract phase from 0 (start) to 1 (end). */
|
|
27
|
+
readonly progress?: number;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Experimental internals for the light leak canvas effect pipeline.
|
|
31
|
+
*/
|
|
32
|
+
export declare const LightLeakInternals: {
|
|
33
|
+
readonly lightLeak: (params?: (LightLeakEffectParams & {
|
|
34
|
+
readonly disabled?: boolean | undefined;
|
|
35
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
36
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/light-leaks",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.463",
|
|
4
4
|
"description": "Light leak effects for Remotion",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/light-leaks"
|
|
10
10
|
},
|
|
11
|
-
"sideEffects": false,
|
|
12
11
|
"type": "module",
|
|
13
12
|
"scripts": {
|
|
14
13
|
"formatting": "oxfmt src --check",
|
|
@@ -24,7 +23,7 @@
|
|
|
24
23
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
25
24
|
},
|
|
26
25
|
"dependencies": {
|
|
27
|
-
"remotion": "4.0.
|
|
26
|
+
"remotion": "4.0.463",
|
|
28
27
|
"zod": "4.3.6"
|
|
29
28
|
},
|
|
30
29
|
"peerDependencies": {
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
"devDependencies": {
|
|
43
42
|
"react": "19.2.3",
|
|
44
43
|
"react-dom": "19.2.3",
|
|
45
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
44
|
+
"@remotion/eslint-config-internal": "4.0.463",
|
|
46
45
|
"eslint": "9.19.0",
|
|
47
46
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
48
47
|
},
|