@remotion/effects 4.0.481 → 4.0.482
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/corner-pin/corner-pin-runtime.d.ts +27 -0
- package/dist/corner-pin/corner-pin-shaders.d.ts +2 -0
- package/dist/corner-pin/index.d.ts +14 -0
- package/dist/corner-pin.d.ts +1 -0
- package/dist/esm/corner-pin.mjs +389 -0
- package/dist/esm/gridlines.mjs +2 -2
- package/dist/esm/index.mjs +353 -2
- package/dist/esm/light-trail.mjs +519 -0
- package/dist/gridlines.d.ts +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/light-trail/index.d.ts +19 -0
- package/dist/light-trail/light-trail-runtime.d.ts +38 -0
- package/dist/light-trail/light-trail-shaders.d.ts +2 -0
- package/dist/light-trail.d.ts +1 -0
- package/package.json +19 -3
|
@@ -0,0 +1,519 @@
|
|
|
1
|
+
// src/light-trail/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
|
+
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/light-trail/light-trail-runtime.ts
|
|
110
|
+
import { Internals } from "remotion";
|
|
111
|
+
|
|
112
|
+
// src/light-trail/light-trail-shaders.ts
|
|
113
|
+
var LIGHT_TRAIL_VS = `#version 300 es
|
|
114
|
+
layout(location = 0) in vec2 aPos;
|
|
115
|
+
layout(location = 1) in vec2 aUv;
|
|
116
|
+
out vec2 vUv;
|
|
117
|
+
|
|
118
|
+
void main() {
|
|
119
|
+
vUv = aUv;
|
|
120
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
121
|
+
}
|
|
122
|
+
`;
|
|
123
|
+
var LIGHT_TRAIL_FS = `#version 300 es
|
|
124
|
+
precision highp float;
|
|
125
|
+
|
|
126
|
+
in vec2 vUv;
|
|
127
|
+
out vec4 fragColor;
|
|
128
|
+
|
|
129
|
+
uniform sampler2D uSource;
|
|
130
|
+
uniform vec2 uDirection;
|
|
131
|
+
uniform vec2 uTexelSize;
|
|
132
|
+
uniform vec4 uColor;
|
|
133
|
+
uniform float uDistance;
|
|
134
|
+
uniform float uIntensity;
|
|
135
|
+
uniform float uDecay;
|
|
136
|
+
uniform float uThreshold;
|
|
137
|
+
uniform int uSamples;
|
|
138
|
+
|
|
139
|
+
const int MAX_SAMPLES = 64;
|
|
140
|
+
|
|
141
|
+
float getContribution(vec4 color) {
|
|
142
|
+
if (color.a <= 0.001) {
|
|
143
|
+
return 0.0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
vec3 rgb = color.rgb / color.a;
|
|
147
|
+
float luminance = dot(rgb, vec3(0.299, 0.587, 0.114));
|
|
148
|
+
float source = max(color.a, luminance);
|
|
149
|
+
float threshold = clamp(uThreshold, 0.0, 1.0);
|
|
150
|
+
|
|
151
|
+
if (threshold >= 1.0) {
|
|
152
|
+
return step(1.0, source);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
return clamp((source - threshold) / max(1.0 - threshold, 0.0001), 0.0, 1.0);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
void main() {
|
|
159
|
+
vec4 source = texture(uSource, vUv);
|
|
160
|
+
vec4 trail = vec4(0.0);
|
|
161
|
+
float sampleCount = float(max(uSamples, 1));
|
|
162
|
+
|
|
163
|
+
for (int i = 1; i <= MAX_SAMPLES; i++) {
|
|
164
|
+
if (i > uSamples) {
|
|
165
|
+
break;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
float progress = float(i) / sampleCount;
|
|
169
|
+
vec2 offset = uDirection * uTexelSize * uDistance * progress;
|
|
170
|
+
vec4 sampleColor = texture(uSource, vUv - offset);
|
|
171
|
+
float contribution = getContribution(sampleColor);
|
|
172
|
+
float weight = pow(clamp(uDecay, 0.0, 1.0), float(i - 1)) * contribution;
|
|
173
|
+
float alpha = sampleColor.a * uColor.a * weight;
|
|
174
|
+
|
|
175
|
+
trail += vec4(uColor.rgb * alpha, alpha);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
trail *= max(uIntensity, 0.0) / sampleCount;
|
|
179
|
+
|
|
180
|
+
vec4 outColor = source + trail;
|
|
181
|
+
fragColor = vec4(min(outColor.rgb, vec3(1.0)), min(outColor.a, 1.0));
|
|
182
|
+
}
|
|
183
|
+
`;
|
|
184
|
+
|
|
185
|
+
// src/light-trail/light-trail-runtime.ts
|
|
186
|
+
var { createWebGL2ContextError } = Internals;
|
|
187
|
+
var compileShader = (gl, type, source) => {
|
|
188
|
+
const shader = gl.createShader(type);
|
|
189
|
+
if (!shader) {
|
|
190
|
+
throw new Error("Failed to create WebGL shader");
|
|
191
|
+
}
|
|
192
|
+
gl.shaderSource(shader, source);
|
|
193
|
+
gl.compileShader(shader);
|
|
194
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
195
|
+
const log = gl.getShaderInfoLog(shader);
|
|
196
|
+
gl.deleteShader(shader);
|
|
197
|
+
throw new Error(`Light trail shader compile failed: ${log ?? "(no log)"}`);
|
|
198
|
+
}
|
|
199
|
+
return shader;
|
|
200
|
+
};
|
|
201
|
+
var linkProgram = (gl, vs, fs) => {
|
|
202
|
+
const program = gl.createProgram();
|
|
203
|
+
if (!program) {
|
|
204
|
+
throw new Error("Failed to create WebGL program");
|
|
205
|
+
}
|
|
206
|
+
gl.attachShader(program, vs);
|
|
207
|
+
gl.attachShader(program, fs);
|
|
208
|
+
gl.linkProgram(program);
|
|
209
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
210
|
+
const log = gl.getProgramInfoLog(program);
|
|
211
|
+
gl.deleteProgram(program);
|
|
212
|
+
throw new Error(`Light trail program link failed: ${log ?? "(no log)"}`);
|
|
213
|
+
}
|
|
214
|
+
return program;
|
|
215
|
+
};
|
|
216
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
217
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
218
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
219
|
+
const program = linkProgram(gl, vs, fs);
|
|
220
|
+
gl.deleteShader(vs);
|
|
221
|
+
gl.deleteShader(fs);
|
|
222
|
+
return program;
|
|
223
|
+
};
|
|
224
|
+
var createRgbaTexture = (gl) => {
|
|
225
|
+
const texture = gl.createTexture();
|
|
226
|
+
if (!texture) {
|
|
227
|
+
throw new Error("Failed to create WebGL texture");
|
|
228
|
+
}
|
|
229
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
230
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
231
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
232
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
233
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
234
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
235
|
+
return texture;
|
|
236
|
+
};
|
|
237
|
+
var setupLightTrail = (target) => {
|
|
238
|
+
const gl = target.getContext("webgl2", {
|
|
239
|
+
premultipliedAlpha: true,
|
|
240
|
+
alpha: true,
|
|
241
|
+
preserveDrawingBuffer: true
|
|
242
|
+
});
|
|
243
|
+
if (!gl) {
|
|
244
|
+
throw createWebGL2ContextError("light trail effect");
|
|
245
|
+
}
|
|
246
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
247
|
+
const program = createProgram(gl, LIGHT_TRAIL_VS, LIGHT_TRAIL_FS);
|
|
248
|
+
const vao = gl.createVertexArray();
|
|
249
|
+
if (!vao) {
|
|
250
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
251
|
+
}
|
|
252
|
+
gl.bindVertexArray(vao);
|
|
253
|
+
const data = new Float32Array([
|
|
254
|
+
-1,
|
|
255
|
+
-1,
|
|
256
|
+
0,
|
|
257
|
+
0,
|
|
258
|
+
1,
|
|
259
|
+
-1,
|
|
260
|
+
1,
|
|
261
|
+
0,
|
|
262
|
+
-1,
|
|
263
|
+
1,
|
|
264
|
+
0,
|
|
265
|
+
1,
|
|
266
|
+
1,
|
|
267
|
+
1,
|
|
268
|
+
1,
|
|
269
|
+
1
|
|
270
|
+
]);
|
|
271
|
+
const vbo = gl.createBuffer();
|
|
272
|
+
if (!vbo) {
|
|
273
|
+
throw new Error("Failed to create WebGL buffer");
|
|
274
|
+
}
|
|
275
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
276
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
277
|
+
gl.enableVertexAttribArray(0);
|
|
278
|
+
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
|
|
279
|
+
gl.enableVertexAttribArray(1);
|
|
280
|
+
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
|
|
281
|
+
gl.bindVertexArray(null);
|
|
282
|
+
const colorCanvas = document.createElement("canvas");
|
|
283
|
+
colorCanvas.width = 1;
|
|
284
|
+
colorCanvas.height = 1;
|
|
285
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
286
|
+
if (!colorCtx) {
|
|
287
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
288
|
+
}
|
|
289
|
+
return {
|
|
290
|
+
gl,
|
|
291
|
+
program,
|
|
292
|
+
vao,
|
|
293
|
+
vbo,
|
|
294
|
+
textureSource: createRgbaTexture(gl),
|
|
295
|
+
uniforms: {
|
|
296
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
297
|
+
uDirection: gl.getUniformLocation(program, "uDirection"),
|
|
298
|
+
uTexelSize: gl.getUniformLocation(program, "uTexelSize"),
|
|
299
|
+
uColor: gl.getUniformLocation(program, "uColor"),
|
|
300
|
+
uDistance: gl.getUniformLocation(program, "uDistance"),
|
|
301
|
+
uIntensity: gl.getUniformLocation(program, "uIntensity"),
|
|
302
|
+
uDecay: gl.getUniformLocation(program, "uDecay"),
|
|
303
|
+
uThreshold: gl.getUniformLocation(program, "uThreshold"),
|
|
304
|
+
uSamples: gl.getUniformLocation(program, "uSamples")
|
|
305
|
+
},
|
|
306
|
+
colorCtx,
|
|
307
|
+
cachedColorStr: "",
|
|
308
|
+
cachedColorRgba: [255, 255, 255, 255]
|
|
309
|
+
};
|
|
310
|
+
};
|
|
311
|
+
var cleanupLightTrail = (state) => {
|
|
312
|
+
const { gl, program, vao, vbo, textureSource } = state;
|
|
313
|
+
gl.deleteTexture(textureSource);
|
|
314
|
+
gl.deleteBuffer(vbo);
|
|
315
|
+
gl.deleteProgram(program);
|
|
316
|
+
gl.deleteVertexArray(vao);
|
|
317
|
+
};
|
|
318
|
+
var drawFullscreenQuad = (state) => {
|
|
319
|
+
const { gl, vao } = state;
|
|
320
|
+
gl.bindVertexArray(vao);
|
|
321
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
322
|
+
gl.bindVertexArray(null);
|
|
323
|
+
};
|
|
324
|
+
var applyLightTrail = ({
|
|
325
|
+
state,
|
|
326
|
+
source,
|
|
327
|
+
width,
|
|
328
|
+
height,
|
|
329
|
+
direction,
|
|
330
|
+
distance,
|
|
331
|
+
intensity,
|
|
332
|
+
decay,
|
|
333
|
+
threshold,
|
|
334
|
+
samples,
|
|
335
|
+
color,
|
|
336
|
+
flipSourceY
|
|
337
|
+
}) => {
|
|
338
|
+
const { gl, program, textureSource, uniforms } = state;
|
|
339
|
+
const radians = direction * Math.PI / 180;
|
|
340
|
+
const x = Math.cos(radians);
|
|
341
|
+
const y = Math.sin(radians);
|
|
342
|
+
gl.viewport(0, 0, width, height);
|
|
343
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
344
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
345
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
346
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
347
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
348
|
+
gl.clearColor(0, 0, 0, 0);
|
|
349
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
350
|
+
gl.useProgram(program);
|
|
351
|
+
if (uniforms.uSource)
|
|
352
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
353
|
+
if (uniforms.uDirection)
|
|
354
|
+
gl.uniform2f(uniforms.uDirection, x, y);
|
|
355
|
+
if (uniforms.uTexelSize) {
|
|
356
|
+
gl.uniform2f(uniforms.uTexelSize, 1 / width, 1 / height);
|
|
357
|
+
}
|
|
358
|
+
if (uniforms.uColor) {
|
|
359
|
+
gl.uniform4f(uniforms.uColor, color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255);
|
|
360
|
+
}
|
|
361
|
+
if (uniforms.uDistance)
|
|
362
|
+
gl.uniform1f(uniforms.uDistance, distance);
|
|
363
|
+
if (uniforms.uIntensity)
|
|
364
|
+
gl.uniform1f(uniforms.uIntensity, intensity);
|
|
365
|
+
if (uniforms.uDecay)
|
|
366
|
+
gl.uniform1f(uniforms.uDecay, decay);
|
|
367
|
+
if (uniforms.uThreshold)
|
|
368
|
+
gl.uniform1f(uniforms.uThreshold, threshold);
|
|
369
|
+
if (uniforms.uSamples)
|
|
370
|
+
gl.uniform1i(uniforms.uSamples, samples);
|
|
371
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
372
|
+
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
373
|
+
drawFullscreenQuad(state);
|
|
374
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
375
|
+
gl.useProgram(null);
|
|
376
|
+
};
|
|
377
|
+
|
|
378
|
+
// src/light-trail/index.ts
|
|
379
|
+
var { createEffect } = Internals2;
|
|
380
|
+
var DEFAULT_DIRECTION = 180;
|
|
381
|
+
var DEFAULT_DISTANCE = 80;
|
|
382
|
+
var DEFAULT_INTENSITY = 1;
|
|
383
|
+
var DEFAULT_DECAY = 0.9;
|
|
384
|
+
var DEFAULT_THRESHOLD = 0;
|
|
385
|
+
var DEFAULT_SAMPLES = 32;
|
|
386
|
+
var DEFAULT_COLOR = "#ffffff";
|
|
387
|
+
var MAX_SAMPLES = 64;
|
|
388
|
+
var lightTrailSchema = {
|
|
389
|
+
direction: {
|
|
390
|
+
type: "rotation-degrees",
|
|
391
|
+
step: 1,
|
|
392
|
+
default: DEFAULT_DIRECTION,
|
|
393
|
+
description: "Direction"
|
|
394
|
+
},
|
|
395
|
+
distance: {
|
|
396
|
+
type: "number",
|
|
397
|
+
min: 0,
|
|
398
|
+
max: 300,
|
|
399
|
+
step: 1,
|
|
400
|
+
default: DEFAULT_DISTANCE,
|
|
401
|
+
description: "Distance",
|
|
402
|
+
hiddenFromList: false
|
|
403
|
+
},
|
|
404
|
+
intensity: {
|
|
405
|
+
type: "number",
|
|
406
|
+
min: 0,
|
|
407
|
+
max: 5,
|
|
408
|
+
step: 0.1,
|
|
409
|
+
default: DEFAULT_INTENSITY,
|
|
410
|
+
description: "Intensity",
|
|
411
|
+
hiddenFromList: false
|
|
412
|
+
},
|
|
413
|
+
decay: {
|
|
414
|
+
type: "number",
|
|
415
|
+
min: 0,
|
|
416
|
+
max: 1,
|
|
417
|
+
step: 0.01,
|
|
418
|
+
default: DEFAULT_DECAY,
|
|
419
|
+
description: "Decay",
|
|
420
|
+
hiddenFromList: false
|
|
421
|
+
},
|
|
422
|
+
threshold: {
|
|
423
|
+
type: "number",
|
|
424
|
+
min: 0,
|
|
425
|
+
max: 1,
|
|
426
|
+
step: 0.01,
|
|
427
|
+
default: DEFAULT_THRESHOLD,
|
|
428
|
+
description: "Threshold",
|
|
429
|
+
hiddenFromList: false
|
|
430
|
+
},
|
|
431
|
+
samples: {
|
|
432
|
+
type: "number",
|
|
433
|
+
min: 1,
|
|
434
|
+
max: MAX_SAMPLES,
|
|
435
|
+
step: 1,
|
|
436
|
+
default: DEFAULT_SAMPLES,
|
|
437
|
+
description: "Samples",
|
|
438
|
+
hiddenFromList: false
|
|
439
|
+
},
|
|
440
|
+
color: {
|
|
441
|
+
type: "color",
|
|
442
|
+
default: DEFAULT_COLOR,
|
|
443
|
+
description: "Color"
|
|
444
|
+
}
|
|
445
|
+
};
|
|
446
|
+
var resolve = (p) => ({
|
|
447
|
+
direction: p.direction ?? DEFAULT_DIRECTION,
|
|
448
|
+
distance: p.distance ?? DEFAULT_DISTANCE,
|
|
449
|
+
intensity: p.intensity ?? DEFAULT_INTENSITY,
|
|
450
|
+
decay: p.decay ?? DEFAULT_DECAY,
|
|
451
|
+
threshold: p.threshold ?? DEFAULT_THRESHOLD,
|
|
452
|
+
samples: p.samples ?? DEFAULT_SAMPLES,
|
|
453
|
+
color: p.color ?? DEFAULT_COLOR
|
|
454
|
+
});
|
|
455
|
+
var validateSamples = (samples) => {
|
|
456
|
+
if (!Number.isInteger(samples)) {
|
|
457
|
+
throw new TypeError(`"samples" must be an integer, but got ${samples}`);
|
|
458
|
+
}
|
|
459
|
+
if (samples < 1) {
|
|
460
|
+
throw new TypeError(`"samples" must be >= 1, but got ${samples}`);
|
|
461
|
+
}
|
|
462
|
+
if (samples > MAX_SAMPLES) {
|
|
463
|
+
throw new TypeError(`"samples" must be <= ${MAX_SAMPLES}, but got ${samples}`);
|
|
464
|
+
}
|
|
465
|
+
};
|
|
466
|
+
var validateLightTrailParams = (params) => {
|
|
467
|
+
assertEffectParamsObject(params, "Light trail");
|
|
468
|
+
assertOptionalFiniteNumber(params.direction, "direction");
|
|
469
|
+
assertOptionalFiniteNumber(params.distance, "distance");
|
|
470
|
+
assertOptionalFiniteNumber(params.intensity, "intensity");
|
|
471
|
+
assertOptionalFiniteNumber(params.decay, "decay");
|
|
472
|
+
assertOptionalFiniteNumber(params.threshold, "threshold");
|
|
473
|
+
assertOptionalFiniteNumber(params.samples, "samples");
|
|
474
|
+
assertOptionalColor(params.color, "color");
|
|
475
|
+
const r = resolve(params);
|
|
476
|
+
validateNonNegative(r.distance, "distance");
|
|
477
|
+
validateNonNegative(r.intensity, "intensity");
|
|
478
|
+
validateUnitInterval(r.decay, "decay");
|
|
479
|
+
validateUnitInterval(r.threshold, "threshold");
|
|
480
|
+
validateSamples(r.samples);
|
|
481
|
+
};
|
|
482
|
+
var lightTrail = createEffect({
|
|
483
|
+
type: "remotion/light-trail",
|
|
484
|
+
label: "lightTrail()",
|
|
485
|
+
documentationLink: "https://www.remotion.dev/docs/effects/light-trail",
|
|
486
|
+
backend: "webgl2",
|
|
487
|
+
calculateKey: (params) => {
|
|
488
|
+
const r = resolve(params);
|
|
489
|
+
return `light-trail-${r.direction}-${r.distance}-${r.intensity}-${r.decay}-${r.threshold}-${r.samples}-${r.color}`;
|
|
490
|
+
},
|
|
491
|
+
setup: (target) => setupLightTrail(target),
|
|
492
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
493
|
+
const r = resolve(params);
|
|
494
|
+
if (state.cachedColorStr !== r.color) {
|
|
495
|
+
state.cachedColorStr = r.color;
|
|
496
|
+
state.cachedColorRgba = parseColorRgba(state.colorCtx, r.color);
|
|
497
|
+
}
|
|
498
|
+
applyLightTrail({
|
|
499
|
+
state,
|
|
500
|
+
source,
|
|
501
|
+
width,
|
|
502
|
+
height,
|
|
503
|
+
direction: r.direction,
|
|
504
|
+
distance: r.distance,
|
|
505
|
+
intensity: r.intensity,
|
|
506
|
+
decay: r.decay,
|
|
507
|
+
threshold: r.threshold,
|
|
508
|
+
samples: r.samples,
|
|
509
|
+
color: state.cachedColorRgba,
|
|
510
|
+
flipSourceY
|
|
511
|
+
});
|
|
512
|
+
},
|
|
513
|
+
cleanup: (state) => cleanupLightTrail(state),
|
|
514
|
+
schema: lightTrailSchema,
|
|
515
|
+
validateParams: validateLightTrailParams
|
|
516
|
+
});
|
|
517
|
+
export {
|
|
518
|
+
lightTrail
|
|
519
|
+
};
|
package/dist/gridlines.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ export declare const gridlinesSchema: {
|
|
|
39
39
|
readonly type: "rotation-degrees";
|
|
40
40
|
readonly min: -180;
|
|
41
41
|
readonly max: 180;
|
|
42
|
-
readonly step: 1;
|
|
42
|
+
readonly step: 0.1;
|
|
43
43
|
readonly default: 0;
|
|
44
44
|
readonly description: "Rotation X";
|
|
45
45
|
};
|
|
@@ -47,7 +47,7 @@ export declare const gridlinesSchema: {
|
|
|
47
47
|
readonly type: "rotation-degrees";
|
|
48
48
|
readonly min: -180;
|
|
49
49
|
readonly max: 180;
|
|
50
|
-
readonly step: 1;
|
|
50
|
+
readonly step: 0.1;
|
|
51
51
|
readonly default: 0;
|
|
52
52
|
readonly description: "Rotation Y";
|
|
53
53
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export { pattern, type PatternOrigin, type PatternParams } from './pattern.js';
|
|
|
3
3
|
export { rings, type RingsCenter, type RingsParams } from './rings.js';
|
|
4
4
|
export { gridlines, type GridlinesParams } from './gridlines.js';
|
|
5
5
|
export { zigzag, type ZigzagDirection, type ZigzagParams } from './zigzag.js';
|
|
6
|
+
export { cornerPin, type CornerPinParams, type CornerPinUvCoordinate, } from './corner-pin/index.js';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export type LightTrailParams = {
|
|
2
|
+
/** Direction in which the trail extends, in degrees. Defaults to `180`. */
|
|
3
|
+
readonly direction?: number;
|
|
4
|
+
/** Length of the trail in pixels. Defaults to `80`. */
|
|
5
|
+
readonly distance?: number;
|
|
6
|
+
/** Brightness multiplier for the trail. Defaults to `1`. */
|
|
7
|
+
readonly intensity?: number;
|
|
8
|
+
/** Falloff from one sample to the next. Defaults to `0.9`. */
|
|
9
|
+
readonly decay?: number;
|
|
10
|
+
/** Luminance or alpha threshold from `0` to `1`. Defaults to `0`. */
|
|
11
|
+
readonly threshold?: number;
|
|
12
|
+
/** Number of samples used for the trail. Defaults to `32`. */
|
|
13
|
+
readonly samples?: number;
|
|
14
|
+
/** Color of the trail. Defaults to white. */
|
|
15
|
+
readonly color?: string;
|
|
16
|
+
};
|
|
17
|
+
export declare const lightTrail: (params?: (LightTrailParams & {
|
|
18
|
+
readonly disabled?: boolean | undefined;
|
|
19
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ParsedColorRgba } from '../color-utils.js';
|
|
2
|
+
export type LightTrailState = {
|
|
3
|
+
readonly gl: WebGL2RenderingContext;
|
|
4
|
+
readonly program: WebGLProgram;
|
|
5
|
+
readonly vao: WebGLVertexArrayObject;
|
|
6
|
+
readonly vbo: WebGLBuffer;
|
|
7
|
+
readonly textureSource: WebGLTexture;
|
|
8
|
+
readonly uniforms: {
|
|
9
|
+
readonly uSource: WebGLUniformLocation | null;
|
|
10
|
+
readonly uDirection: WebGLUniformLocation | null;
|
|
11
|
+
readonly uTexelSize: WebGLUniformLocation | null;
|
|
12
|
+
readonly uColor: WebGLUniformLocation | null;
|
|
13
|
+
readonly uDistance: WebGLUniformLocation | null;
|
|
14
|
+
readonly uIntensity: WebGLUniformLocation | null;
|
|
15
|
+
readonly uDecay: WebGLUniformLocation | null;
|
|
16
|
+
readonly uThreshold: WebGLUniformLocation | null;
|
|
17
|
+
readonly uSamples: WebGLUniformLocation | null;
|
|
18
|
+
};
|
|
19
|
+
readonly colorCtx: CanvasRenderingContext2D;
|
|
20
|
+
cachedColorStr: string;
|
|
21
|
+
cachedColorRgba: ParsedColorRgba;
|
|
22
|
+
};
|
|
23
|
+
export declare const setupLightTrail: (target: HTMLCanvasElement) => LightTrailState;
|
|
24
|
+
export declare const cleanupLightTrail: (state: LightTrailState) => void;
|
|
25
|
+
export declare const applyLightTrail: ({ state, source, width, height, direction, distance, intensity, decay, threshold, samples, color, flipSourceY, }: {
|
|
26
|
+
readonly state: LightTrailState;
|
|
27
|
+
readonly source: CanvasImageSource;
|
|
28
|
+
readonly width: number;
|
|
29
|
+
readonly height: number;
|
|
30
|
+
readonly direction: number;
|
|
31
|
+
readonly distance: number;
|
|
32
|
+
readonly intensity: number;
|
|
33
|
+
readonly decay: number;
|
|
34
|
+
readonly threshold: number;
|
|
35
|
+
readonly samples: number;
|
|
36
|
+
readonly color: ParsedColorRgba;
|
|
37
|
+
readonly flipSourceY: boolean;
|
|
38
|
+
}) => void;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const LIGHT_TRAIL_VS = "#version 300 es\nlayout(location = 0) in vec2 aPos;\nlayout(location = 1) in vec2 aUv;\nout vec2 vUv;\n\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
|
|
2
|
+
export declare const LIGHT_TRAIL_FS = "#version 300 es\nprecision highp float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uDirection;\nuniform vec2 uTexelSize;\nuniform vec4 uColor;\nuniform float uDistance;\nuniform float uIntensity;\nuniform float uDecay;\nuniform float uThreshold;\nuniform int uSamples;\n\nconst int MAX_SAMPLES = 64;\n\nfloat getContribution(vec4 color) {\n\tif (color.a <= 0.001) {\n\t\treturn 0.0;\n\t}\n\n\tvec3 rgb = color.rgb / color.a;\n\tfloat luminance = dot(rgb, vec3(0.299, 0.587, 0.114));\n\tfloat source = max(color.a, luminance);\n\tfloat threshold = clamp(uThreshold, 0.0, 1.0);\n\n\tif (threshold >= 1.0) {\n\t\treturn step(1.0, source);\n\t}\n\n\treturn clamp((source - threshold) / max(1.0 - threshold, 0.0001), 0.0, 1.0);\n}\n\nvoid main() {\n\tvec4 source = texture(uSource, vUv);\n\tvec4 trail = vec4(0.0);\n\tfloat sampleCount = float(max(uSamples, 1));\n\n\tfor (int i = 1; i <= MAX_SAMPLES; i++) {\n\t\tif (i > uSamples) {\n\t\t\tbreak;\n\t\t}\n\n\t\tfloat progress = float(i) / sampleCount;\n\t\tvec2 offset = uDirection * uTexelSize * uDistance * progress;\n\t\tvec4 sampleColor = texture(uSource, vUv - offset);\n\t\tfloat contribution = getContribution(sampleColor);\n\t\tfloat weight = pow(clamp(uDecay, 0.0, 1.0), float(i - 1)) * contribution;\n\t\tfloat alpha = sampleColor.a * uColor.a * weight;\n\n\t\ttrail += vec4(uColor.rgb * alpha, alpha);\n\t}\n\n\ttrail *= max(uIntensity, 0.0) / sampleCount;\n\n\tvec4 outColor = source + trail;\n\tfragColor = vec4(min(outColor.rgb, vec3(1.0)), min(outColor.a, 1.0));\n}\n";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { lightTrail, type LightTrailParams } from './light-trail/index.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/effects",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.482",
|
|
4
4
|
"description": "Effects that can be applied to Remotion-based canvas components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"remotion": "4.0.
|
|
29
|
+
"remotion": "4.0.482"
|
|
30
30
|
},
|
|
31
31
|
"exports": {
|
|
32
32
|
".": {
|
|
@@ -104,6 +104,11 @@
|
|
|
104
104
|
"module": "./dist/esm/fisheye.mjs",
|
|
105
105
|
"import": "./dist/esm/fisheye.mjs"
|
|
106
106
|
},
|
|
107
|
+
"./corner-pin": {
|
|
108
|
+
"types": "./dist/corner-pin.d.ts",
|
|
109
|
+
"module": "./dist/esm/corner-pin.mjs",
|
|
110
|
+
"import": "./dist/esm/corner-pin.mjs"
|
|
111
|
+
},
|
|
107
112
|
"./glow": {
|
|
108
113
|
"types": "./dist/glow.d.ts",
|
|
109
114
|
"module": "./dist/esm/glow.mjs",
|
|
@@ -159,6 +164,11 @@
|
|
|
159
164
|
"module": "./dist/esm/linear-progressive-blur.mjs",
|
|
160
165
|
"import": "./dist/esm/linear-progressive-blur.mjs"
|
|
161
166
|
},
|
|
167
|
+
"./light-trail": {
|
|
168
|
+
"types": "./dist/light-trail.d.ts",
|
|
169
|
+
"module": "./dist/esm/light-trail.mjs",
|
|
170
|
+
"import": "./dist/esm/light-trail.mjs"
|
|
171
|
+
},
|
|
162
172
|
"./dot-grid": {
|
|
163
173
|
"types": "./dist/dot-grid.d.ts",
|
|
164
174
|
"module": "./dist/esm/dot-grid.mjs",
|
|
@@ -315,6 +325,9 @@
|
|
|
315
325
|
"fisheye": [
|
|
316
326
|
"dist/fisheye.d.ts"
|
|
317
327
|
],
|
|
328
|
+
"corner-pin": [
|
|
329
|
+
"dist/corner-pin.d.ts"
|
|
330
|
+
],
|
|
318
331
|
"glow": [
|
|
319
332
|
"dist/glow.d.ts"
|
|
320
333
|
],
|
|
@@ -348,6 +361,9 @@
|
|
|
348
361
|
"linear-progressive-blur": [
|
|
349
362
|
"dist/linear-progressive-blur.d.ts"
|
|
350
363
|
],
|
|
364
|
+
"light-trail": [
|
|
365
|
+
"dist/light-trail.d.ts"
|
|
366
|
+
],
|
|
351
367
|
"dot-grid": [
|
|
352
368
|
"dist/dot-grid.d.ts"
|
|
353
369
|
],
|
|
@@ -418,7 +434,7 @@
|
|
|
418
434
|
},
|
|
419
435
|
"homepage": "https://www.remotion.dev/docs/effects/api",
|
|
420
436
|
"devDependencies": {
|
|
421
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
437
|
+
"@remotion/eslint-config-internal": "4.0.482",
|
|
422
438
|
"@vitest/browser-playwright": "4.0.9",
|
|
423
439
|
"eslint": "9.19.0",
|
|
424
440
|
"vitest": "4.0.9",
|