@remotion/effects 4.0.478 → 4.0.479
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/burlap.d.ts +15 -0
- package/dist/esm/barrel-distortion.mjs +1 -1
- package/dist/esm/blur.mjs +1 -1
- package/dist/esm/brightness.mjs +1 -1
- package/dist/esm/burlap.mjs +454 -0
- package/dist/esm/chromatic-aberration.mjs +1 -1
- package/dist/esm/color-key.mjs +1 -1
- package/dist/esm/contour-lines.mjs +1 -1
- package/dist/esm/contrast.mjs +1 -1
- package/dist/esm/dot-grid.mjs +1 -1
- package/dist/esm/drop-shadow.mjs +1 -1
- package/dist/esm/duotone.mjs +1 -1
- package/dist/esm/evolve.mjs +1 -1
- package/dist/esm/fisheye.mjs +1 -1
- package/dist/esm/glow.mjs +1 -1
- package/dist/esm/grayscale.mjs +1 -1
- package/dist/esm/halftone-linear-gradient.mjs +1 -1
- package/dist/esm/halftone.mjs +20 -1
- package/dist/esm/hue.mjs +1 -1
- package/dist/esm/index.mjs +3 -3
- package/dist/esm/invert.mjs +1 -1
- package/dist/esm/linear-progressive-blur.mjs +1 -1
- package/dist/esm/lines.mjs +1 -1
- package/dist/esm/mirror.mjs +1 -1
- package/dist/esm/noise-displacement.mjs +1 -1
- package/dist/esm/noise.mjs +1 -1
- package/dist/esm/pattern.mjs +1 -1
- package/dist/esm/pixel-dissolve.mjs +1 -1
- package/dist/esm/pixelate.mjs +306 -0
- package/dist/esm/rings.mjs +1 -1
- package/dist/esm/saturation.mjs +1 -1
- package/dist/esm/scale.mjs +1 -1
- package/dist/esm/scanlines.mjs +1 -1
- package/dist/esm/shine.mjs +1 -1
- package/dist/esm/shrinkwrap.mjs +606 -0
- package/dist/esm/speckle.mjs +1 -1
- package/dist/esm/thermal-vision.mjs +404 -0
- package/dist/esm/tint.mjs +1 -1
- package/dist/esm/translate.mjs +2 -2
- package/dist/esm/tv-signal-off.mjs +1 -1
- package/dist/esm/vignette.mjs +1 -1
- package/dist/esm/wave.mjs +1 -1
- package/dist/esm/waves.mjs +1 -1
- package/dist/esm/white-noise.mjs +1 -1
- package/dist/esm/zigzag.mjs +1 -1
- package/dist/pixelate.d.ts +6 -0
- package/dist/shrinkwrap.d.ts +19 -0
- package/dist/thermal-vision.d.ts +31 -0
- package/package.json +35 -3
|
@@ -0,0 +1,404 @@
|
|
|
1
|
+
// src/thermal-vision.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/thermal-vision.ts
|
|
110
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
+
var DEFAULT_AMOUNT2 = 1;
|
|
112
|
+
var DEFAULT_PALETTE = [
|
|
113
|
+
"#020617",
|
|
114
|
+
"#1238ff",
|
|
115
|
+
"#00a6ff",
|
|
116
|
+
"#00c853",
|
|
117
|
+
"#d6f542",
|
|
118
|
+
"#ffb000",
|
|
119
|
+
"#ff2f00",
|
|
120
|
+
"#ffffff"
|
|
121
|
+
];
|
|
122
|
+
var thermalVisionSchema = {
|
|
123
|
+
amount: colorAmountSchema,
|
|
124
|
+
palette: {
|
|
125
|
+
type: "array",
|
|
126
|
+
item: {
|
|
127
|
+
type: "color"
|
|
128
|
+
},
|
|
129
|
+
default: DEFAULT_PALETTE,
|
|
130
|
+
minLength: 2,
|
|
131
|
+
newItemDefault: "#00c853",
|
|
132
|
+
description: "Palette",
|
|
133
|
+
keyframable: false
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
var resolve = (p) => ({
|
|
137
|
+
amount: p.amount ?? DEFAULT_AMOUNT2,
|
|
138
|
+
palette: p.palette ?? DEFAULT_PALETTE
|
|
139
|
+
});
|
|
140
|
+
var validatePalette = (palette) => {
|
|
141
|
+
if (palette === undefined) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
if (!Array.isArray(palette) || palette.length < 2) {
|
|
145
|
+
throw new TypeError(`"palette" must be an array with at least 2 colors, but got ${JSON.stringify(palette)}`);
|
|
146
|
+
}
|
|
147
|
+
for (let i = 0;i < palette.length; i++) {
|
|
148
|
+
assertRequiredColor(palette[i], `palette[${i}]`);
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
var validateThermalVisionParams = (params) => {
|
|
152
|
+
assertEffectParamsObject(params, "Thermal vision");
|
|
153
|
+
assertOptionalFiniteNumber(params.amount, "amount");
|
|
154
|
+
validatePalette(params.palette);
|
|
155
|
+
const { amount } = resolve(params);
|
|
156
|
+
validateUnitInterval(amount, "amount");
|
|
157
|
+
};
|
|
158
|
+
var THERMAL_VISION_VS = `#version 300 es
|
|
159
|
+
in vec2 aPos;
|
|
160
|
+
in vec2 aUv;
|
|
161
|
+
out vec2 vUv;
|
|
162
|
+
|
|
163
|
+
void main() {
|
|
164
|
+
vUv = aUv;
|
|
165
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
166
|
+
}
|
|
167
|
+
`;
|
|
168
|
+
var THERMAL_VISION_FS = `#version 300 es
|
|
169
|
+
precision highp float;
|
|
170
|
+
|
|
171
|
+
in vec2 vUv;
|
|
172
|
+
out vec4 fragColor;
|
|
173
|
+
|
|
174
|
+
uniform sampler2D uSource;
|
|
175
|
+
uniform sampler2D uPalette;
|
|
176
|
+
uniform float uPaletteLength;
|
|
177
|
+
uniform float uAmount;
|
|
178
|
+
|
|
179
|
+
vec3 paletteColor(float luminance) {
|
|
180
|
+
float length = max(uPaletteLength, 2.0);
|
|
181
|
+
float texCoord = (clamp(luminance, 0.0, 1.0) * (length - 1.0) + 0.5) / length;
|
|
182
|
+
return texture(uPalette, vec2(texCoord, 0.5)).rgb;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
void main() {
|
|
186
|
+
vec4 texColor = texture(uSource, vUv);
|
|
187
|
+
float alpha = texColor.a;
|
|
188
|
+
|
|
189
|
+
if (alpha <= 0.001) {
|
|
190
|
+
fragColor = vec4(0.0);
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
vec3 rgb = texColor.rgb / alpha;
|
|
195
|
+
float luminance = dot(rgb, vec3(0.299, 0.587, 0.114));
|
|
196
|
+
vec3 thermalRgb = paletteColor(luminance);
|
|
197
|
+
vec3 mixedRgb = mix(rgb, thermalRgb, clamp(uAmount, 0.0, 1.0));
|
|
198
|
+
|
|
199
|
+
fragColor = vec4(mixedRgb * alpha, alpha);
|
|
200
|
+
}
|
|
201
|
+
`;
|
|
202
|
+
var compileShader = (gl, type, source) => {
|
|
203
|
+
const shader = gl.createShader(type);
|
|
204
|
+
if (!shader) {
|
|
205
|
+
throw new Error("Failed to create WebGL shader");
|
|
206
|
+
}
|
|
207
|
+
gl.shaderSource(shader, source);
|
|
208
|
+
gl.compileShader(shader);
|
|
209
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
210
|
+
const log = gl.getShaderInfoLog(shader);
|
|
211
|
+
gl.deleteShader(shader);
|
|
212
|
+
throw new Error(`Thermal vision shader compile failed: ${log ?? "(no log)"}`);
|
|
213
|
+
}
|
|
214
|
+
return shader;
|
|
215
|
+
};
|
|
216
|
+
var linkProgram = (gl, vs, fs) => {
|
|
217
|
+
const program = gl.createProgram();
|
|
218
|
+
if (!program) {
|
|
219
|
+
throw new Error("Failed to create WebGL program");
|
|
220
|
+
}
|
|
221
|
+
gl.attachShader(program, vs);
|
|
222
|
+
gl.attachShader(program, fs);
|
|
223
|
+
gl.linkProgram(program);
|
|
224
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
225
|
+
const log = gl.getProgramInfoLog(program);
|
|
226
|
+
gl.deleteProgram(program);
|
|
227
|
+
throw new Error(`Thermal vision program link failed: ${log ?? "(no log)"}`);
|
|
228
|
+
}
|
|
229
|
+
return program;
|
|
230
|
+
};
|
|
231
|
+
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
232
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
233
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
234
|
+
const program = linkProgram(gl, vs, fs);
|
|
235
|
+
gl.deleteShader(vs);
|
|
236
|
+
gl.deleteShader(fs);
|
|
237
|
+
return program;
|
|
238
|
+
};
|
|
239
|
+
var createTexture = (gl, filter) => {
|
|
240
|
+
const texture = gl.createTexture();
|
|
241
|
+
if (!texture) {
|
|
242
|
+
throw new Error("Failed to create WebGL texture");
|
|
243
|
+
}
|
|
244
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
245
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
246
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
247
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
248
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
249
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
250
|
+
return texture;
|
|
251
|
+
};
|
|
252
|
+
var setupThermalVision = (target) => {
|
|
253
|
+
const gl = target.getContext("webgl2", {
|
|
254
|
+
premultipliedAlpha: true,
|
|
255
|
+
alpha: true,
|
|
256
|
+
preserveDrawingBuffer: true
|
|
257
|
+
});
|
|
258
|
+
if (!gl) {
|
|
259
|
+
throw createWebGL2ContextError("thermal vision effect");
|
|
260
|
+
}
|
|
261
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
262
|
+
const program = createProgram(gl, THERMAL_VISION_VS, THERMAL_VISION_FS);
|
|
263
|
+
const vao = gl.createVertexArray();
|
|
264
|
+
if (!vao) {
|
|
265
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
266
|
+
}
|
|
267
|
+
gl.bindVertexArray(vao);
|
|
268
|
+
const data = new Float32Array([
|
|
269
|
+
-1,
|
|
270
|
+
-1,
|
|
271
|
+
0,
|
|
272
|
+
0,
|
|
273
|
+
1,
|
|
274
|
+
-1,
|
|
275
|
+
1,
|
|
276
|
+
0,
|
|
277
|
+
-1,
|
|
278
|
+
1,
|
|
279
|
+
0,
|
|
280
|
+
1,
|
|
281
|
+
1,
|
|
282
|
+
1,
|
|
283
|
+
1,
|
|
284
|
+
1
|
|
285
|
+
]);
|
|
286
|
+
const vbo = gl.createBuffer();
|
|
287
|
+
if (!vbo) {
|
|
288
|
+
throw new Error("Failed to create WebGL buffer");
|
|
289
|
+
}
|
|
290
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
291
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
292
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
293
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
294
|
+
gl.enableVertexAttribArray(aPos);
|
|
295
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
296
|
+
gl.enableVertexAttribArray(aUv);
|
|
297
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
298
|
+
gl.bindVertexArray(null);
|
|
299
|
+
const colorCanvas = document.createElement("canvas");
|
|
300
|
+
colorCanvas.width = 1;
|
|
301
|
+
colorCanvas.height = 1;
|
|
302
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
303
|
+
if (!colorCtx) {
|
|
304
|
+
throw new Error("Failed to acquire 2D context for color parsing");
|
|
305
|
+
}
|
|
306
|
+
return {
|
|
307
|
+
gl,
|
|
308
|
+
program,
|
|
309
|
+
vao,
|
|
310
|
+
vbo,
|
|
311
|
+
sourceTexture: createTexture(gl, gl.LINEAR),
|
|
312
|
+
paletteTexture: createTexture(gl, gl.LINEAR),
|
|
313
|
+
colorCtx,
|
|
314
|
+
uniforms: {
|
|
315
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
316
|
+
uPalette: gl.getUniformLocation(program, "uPalette"),
|
|
317
|
+
uPaletteLength: gl.getUniformLocation(program, "uPaletteLength"),
|
|
318
|
+
uAmount: gl.getUniformLocation(program, "uAmount")
|
|
319
|
+
},
|
|
320
|
+
cachedPaletteKey: "",
|
|
321
|
+
palettePixelData: new Uint8Array(0)
|
|
322
|
+
};
|
|
323
|
+
};
|
|
324
|
+
var updatePalette = (state, palette) => {
|
|
325
|
+
const paletteKey = palette.join("|");
|
|
326
|
+
const paletteDirty = state.cachedPaletteKey !== paletteKey;
|
|
327
|
+
if (!paletteDirty) {
|
|
328
|
+
return false;
|
|
329
|
+
}
|
|
330
|
+
state.cachedPaletteKey = paletteKey;
|
|
331
|
+
const len = palette.length * 4;
|
|
332
|
+
if (state.palettePixelData.length !== len) {
|
|
333
|
+
state.palettePixelData = new Uint8Array(len);
|
|
334
|
+
}
|
|
335
|
+
const { palettePixelData } = state;
|
|
336
|
+
for (let i = 0;i < palette.length; i++) {
|
|
337
|
+
const color = parseColorRgba(state.colorCtx, palette[i]);
|
|
338
|
+
palettePixelData[i * 4] = color[0];
|
|
339
|
+
palettePixelData[i * 4 + 1] = color[1];
|
|
340
|
+
palettePixelData[i * 4 + 2] = color[2];
|
|
341
|
+
palettePixelData[i * 4 + 3] = color[3];
|
|
342
|
+
}
|
|
343
|
+
return true;
|
|
344
|
+
};
|
|
345
|
+
var thermalVision = createEffect({
|
|
346
|
+
type: "remotion/thermal-vision",
|
|
347
|
+
label: "thermalVision()",
|
|
348
|
+
documentationLink: "https://www.remotion.dev/docs/effects/thermal-vision",
|
|
349
|
+
backend: "webgl2",
|
|
350
|
+
calculateKey: (params) => {
|
|
351
|
+
const r = resolve(params);
|
|
352
|
+
return `thermal-vision-${r.amount}-${r.palette.join("|")}`;
|
|
353
|
+
},
|
|
354
|
+
setup: (target) => setupThermalVision(target),
|
|
355
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
356
|
+
const r = resolve(params);
|
|
357
|
+
const paletteDirty = updatePalette(state, r.palette);
|
|
358
|
+
const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
|
|
359
|
+
gl.viewport(0, 0, width, height);
|
|
360
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
361
|
+
gl.clearColor(0, 0, 0, 0);
|
|
362
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
363
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
364
|
+
gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
|
|
365
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
366
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
367
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
368
|
+
gl.activeTexture(gl.TEXTURE1);
|
|
369
|
+
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
370
|
+
if (paletteDirty) {
|
|
371
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
372
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
373
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.palette.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
|
|
374
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
375
|
+
}
|
|
376
|
+
gl.useProgram(program);
|
|
377
|
+
if (uniforms.uSource)
|
|
378
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
379
|
+
if (uniforms.uPalette)
|
|
380
|
+
gl.uniform1i(uniforms.uPalette, 1);
|
|
381
|
+
if (uniforms.uPaletteLength)
|
|
382
|
+
gl.uniform1f(uniforms.uPaletteLength, r.palette.length);
|
|
383
|
+
if (uniforms.uAmount)
|
|
384
|
+
gl.uniform1f(uniforms.uAmount, r.amount);
|
|
385
|
+
gl.bindVertexArray(vao);
|
|
386
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
387
|
+
gl.bindVertexArray(null);
|
|
388
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
389
|
+
gl.useProgram(null);
|
|
390
|
+
},
|
|
391
|
+
cleanup: ({ gl, program, vao, vbo, sourceTexture, paletteTexture }) => {
|
|
392
|
+
gl.deleteTexture(sourceTexture);
|
|
393
|
+
gl.deleteTexture(paletteTexture);
|
|
394
|
+
gl.deleteBuffer(vbo);
|
|
395
|
+
gl.deleteProgram(program);
|
|
396
|
+
gl.deleteVertexArray(vao);
|
|
397
|
+
},
|
|
398
|
+
schema: thermalVisionSchema,
|
|
399
|
+
validateParams: validateThermalVisionParams
|
|
400
|
+
});
|
|
401
|
+
export {
|
|
402
|
+
thermalVisionSchema,
|
|
403
|
+
thermalVision
|
|
404
|
+
};
|
package/dist/esm/tint.mjs
CHANGED
|
@@ -138,7 +138,7 @@ var validateTintParams = (params) => {
|
|
|
138
138
|
}
|
|
139
139
|
};
|
|
140
140
|
var tint = createEffect({
|
|
141
|
-
type: "remotion
|
|
141
|
+
type: "dev.remotion.effects.tint",
|
|
142
142
|
label: "tint()",
|
|
143
143
|
documentationLink: "https://www.remotion.dev/docs/effects/tint",
|
|
144
144
|
backend: "2d",
|
package/dist/esm/translate.mjs
CHANGED
|
@@ -174,7 +174,7 @@ var applyTranslate = ({
|
|
|
174
174
|
ctx.drawImage(source, x, y, width, height);
|
|
175
175
|
};
|
|
176
176
|
var xyTranslate = createEffect({
|
|
177
|
-
type: "remotion
|
|
177
|
+
type: "dev.remotion.effects.xyTranslate",
|
|
178
178
|
label: "xyTranslate()",
|
|
179
179
|
documentationLink: "https://www.remotion.dev/docs/effects/xy-translate",
|
|
180
180
|
backend: "2d",
|
|
@@ -201,7 +201,7 @@ var xyTranslate = createEffect({
|
|
|
201
201
|
validateParams: validateXyTranslateParams
|
|
202
202
|
});
|
|
203
203
|
var uvTranslate = createEffect({
|
|
204
|
-
type: "remotion
|
|
204
|
+
type: "dev.remotion.effects.uvTranslate",
|
|
205
205
|
label: "uvTranslate()",
|
|
206
206
|
documentationLink: "https://www.remotion.dev/docs/effects/uv-translate",
|
|
207
207
|
backend: "2d",
|
|
@@ -265,7 +265,7 @@ var createTvSignalOffState = (gl, vertexSource, fragmentSource) => {
|
|
|
265
265
|
};
|
|
266
266
|
};
|
|
267
267
|
var tvSignalOff = createEffect({
|
|
268
|
-
type: "remotion
|
|
268
|
+
type: "dev.remotion.effects.tvSignalOff",
|
|
269
269
|
label: "tvSignalOff()",
|
|
270
270
|
documentationLink: "https://www.remotion.dev/docs/effects/tv-signal-off",
|
|
271
271
|
backend: "webgl2",
|
package/dist/esm/vignette.mjs
CHANGED
|
@@ -420,7 +420,7 @@ var normalizedRgba = (color) => {
|
|
|
420
420
|
return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
|
|
421
421
|
};
|
|
422
422
|
var vignette = createEffect({
|
|
423
|
-
type: "remotion
|
|
423
|
+
type: "dev.remotion.effects.vignette",
|
|
424
424
|
label: "vignette()",
|
|
425
425
|
documentationLink: "https://www.remotion.dev/docs/effects/vignette",
|
|
426
426
|
backend: "webgl2",
|
package/dist/esm/wave.mjs
CHANGED
|
@@ -312,7 +312,7 @@ var validateWaveParams = (params) => {
|
|
|
312
312
|
}
|
|
313
313
|
};
|
|
314
314
|
var wave = createEffect({
|
|
315
|
-
type: "remotion
|
|
315
|
+
type: "dev.remotion.effects.wave",
|
|
316
316
|
label: "wave()",
|
|
317
317
|
documentationLink: "https://www.remotion.dev/docs/effects/wave",
|
|
318
318
|
backend: "webgl2",
|
package/dist/esm/waves.mjs
CHANGED
|
@@ -507,7 +507,7 @@ var updatePalette = (state, colors) => {
|
|
|
507
507
|
return true;
|
|
508
508
|
};
|
|
509
509
|
var waves = createEffect({
|
|
510
|
-
type: "remotion
|
|
510
|
+
type: "dev.remotion.effects.waves",
|
|
511
511
|
label: "waves()",
|
|
512
512
|
documentationLink: "https://www.remotion.dev/docs/effects/waves",
|
|
513
513
|
backend: "webgl2",
|
package/dist/esm/white-noise.mjs
CHANGED
|
@@ -237,7 +237,7 @@ var createWhiteNoiseState = (gl, vertexSource, fragmentSource) => {
|
|
|
237
237
|
};
|
|
238
238
|
};
|
|
239
239
|
var whiteNoise = createEffect({
|
|
240
|
-
type: "remotion
|
|
240
|
+
type: "dev.remotion.effects.whiteNoise",
|
|
241
241
|
label: "whiteNoise()",
|
|
242
242
|
documentationLink: "https://www.remotion.dev/docs/effects/white-noise",
|
|
243
243
|
backend: "webgl2",
|
package/dist/esm/zigzag.mjs
CHANGED
|
@@ -492,7 +492,7 @@ var updatePalette = (state, colors) => {
|
|
|
492
492
|
return true;
|
|
493
493
|
};
|
|
494
494
|
var zigzag = createEffect({
|
|
495
|
-
type: "remotion
|
|
495
|
+
type: "dev.remotion.effects.zigzag",
|
|
496
496
|
label: "zigzag()",
|
|
497
497
|
documentationLink: "https://www.remotion.dev/docs/effects/zigzag",
|
|
498
498
|
backend: "webgl2",
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export type ShrinkwrapParams = {
|
|
2
|
+
/** Strength of the shrinkwrap layer from `0` to `1`. Defaults to `1`. */
|
|
3
|
+
readonly amount?: number;
|
|
4
|
+
/** Pixel displacement caused by the plastic wrinkles. Defaults to `5`. */
|
|
5
|
+
readonly displacement?: number;
|
|
6
|
+
/** Brightness of the glossy highlights. Defaults to `0.75`. */
|
|
7
|
+
readonly highlightIntensity?: number;
|
|
8
|
+
/** Amount of small procedural wrinkles from `0` to `1`. Defaults to `0.42`. */
|
|
9
|
+
readonly wrinkleDensity?: number;
|
|
10
|
+
/** Strength of stretched edge highlights from `0` to `1`. Defaults to `0.45`. */
|
|
11
|
+
readonly edgeTension?: number;
|
|
12
|
+
/** Offset into the continuous wrinkle field. Defaults to `0`. */
|
|
13
|
+
readonly phase?: number;
|
|
14
|
+
/** Seed for the deterministic wrinkle pattern. Defaults to `0`. */
|
|
15
|
+
readonly seed?: number;
|
|
16
|
+
};
|
|
17
|
+
export declare const shrinkwrap: (params?: (ShrinkwrapParams & {
|
|
18
|
+
readonly disabled?: boolean | undefined;
|
|
19
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare const thermalVisionSchema: {
|
|
2
|
+
readonly amount: {
|
|
3
|
+
readonly type: "number";
|
|
4
|
+
readonly min: 0;
|
|
5
|
+
readonly max: 1;
|
|
6
|
+
readonly step: 0.01;
|
|
7
|
+
readonly default: 1;
|
|
8
|
+
readonly description: "Amount";
|
|
9
|
+
readonly hiddenFromList: false;
|
|
10
|
+
};
|
|
11
|
+
readonly palette: {
|
|
12
|
+
readonly type: "array";
|
|
13
|
+
readonly item: {
|
|
14
|
+
readonly type: "color";
|
|
15
|
+
};
|
|
16
|
+
readonly default: readonly ["#020617", "#1238ff", "#00a6ff", "#00c853", "#d6f542", "#ffb000", "#ff2f00", "#ffffff"];
|
|
17
|
+
readonly minLength: 2;
|
|
18
|
+
readonly newItemDefault: "#00c853";
|
|
19
|
+
readonly description: "Palette";
|
|
20
|
+
readonly keyframable: false;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export type ThermalVisionParams = {
|
|
24
|
+
/** Blend amount from `0` to `1`. Defaults to `1`. */
|
|
25
|
+
readonly amount?: number;
|
|
26
|
+
/** Color ramp used from dark to bright pixels. Defaults to a blue, green, yellow, red and white ramp. */
|
|
27
|
+
readonly palette?: readonly string[];
|
|
28
|
+
};
|
|
29
|
+
export declare const thermalVision: (params?: (ThermalVisionParams & {
|
|
30
|
+
readonly disabled?: boolean | undefined;
|
|
31
|
+
}) | undefined) => import("remotion").EffectDescriptor<unknown>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/effects",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.479",
|
|
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.479"
|
|
30
30
|
},
|
|
31
31
|
"exports": {
|
|
32
32
|
".": {
|
|
@@ -44,6 +44,11 @@
|
|
|
44
44
|
"module": "./dist/esm/blur.mjs",
|
|
45
45
|
"import": "./dist/esm/blur.mjs"
|
|
46
46
|
},
|
|
47
|
+
"./burlap": {
|
|
48
|
+
"types": "./dist/burlap.d.ts",
|
|
49
|
+
"module": "./dist/esm/burlap.mjs",
|
|
50
|
+
"import": "./dist/esm/burlap.mjs"
|
|
51
|
+
},
|
|
47
52
|
"./chromatic-aberration": {
|
|
48
53
|
"types": "./dist/chromatic-aberration.d.ts",
|
|
49
54
|
"module": "./dist/esm/chromatic-aberration.mjs",
|
|
@@ -109,6 +114,11 @@
|
|
|
109
114
|
"module": "./dist/esm/pixel-dissolve.mjs",
|
|
110
115
|
"import": "./dist/esm/pixel-dissolve.mjs"
|
|
111
116
|
},
|
|
117
|
+
"./pixelate": {
|
|
118
|
+
"types": "./dist/pixelate.d.ts",
|
|
119
|
+
"module": "./dist/esm/pixelate.mjs",
|
|
120
|
+
"import": "./dist/esm/pixelate.mjs"
|
|
121
|
+
},
|
|
112
122
|
"./grayscale": {
|
|
113
123
|
"types": "./dist/grayscale.d.ts",
|
|
114
124
|
"module": "./dist/esm/grayscale.mjs",
|
|
@@ -184,11 +194,21 @@
|
|
|
184
194
|
"module": "./dist/esm/shine.mjs",
|
|
185
195
|
"import": "./dist/esm/shine.mjs"
|
|
186
196
|
},
|
|
197
|
+
"./shrinkwrap": {
|
|
198
|
+
"types": "./dist/shrinkwrap.d.ts",
|
|
199
|
+
"module": "./dist/esm/shrinkwrap.mjs",
|
|
200
|
+
"import": "./dist/esm/shrinkwrap.mjs"
|
|
201
|
+
},
|
|
187
202
|
"./speckle": {
|
|
188
203
|
"types": "./dist/speckle.d.ts",
|
|
189
204
|
"module": "./dist/esm/speckle.mjs",
|
|
190
205
|
"import": "./dist/esm/speckle.mjs"
|
|
191
206
|
},
|
|
207
|
+
"./thermal-vision": {
|
|
208
|
+
"types": "./dist/thermal-vision.d.ts",
|
|
209
|
+
"module": "./dist/esm/thermal-vision.mjs",
|
|
210
|
+
"import": "./dist/esm/thermal-vision.mjs"
|
|
211
|
+
},
|
|
192
212
|
"./tint": {
|
|
193
213
|
"types": "./dist/tint.d.ts",
|
|
194
214
|
"module": "./dist/esm/tint.mjs",
|
|
@@ -239,6 +259,9 @@
|
|
|
239
259
|
"blur": [
|
|
240
260
|
"dist/blur.d.ts"
|
|
241
261
|
],
|
|
262
|
+
"burlap": [
|
|
263
|
+
"dist/burlap.d.ts"
|
|
264
|
+
],
|
|
242
265
|
"chromatic-aberration": [
|
|
243
266
|
"dist/chromatic-aberration.d.ts"
|
|
244
267
|
],
|
|
@@ -278,6 +301,9 @@
|
|
|
278
301
|
"pixel-dissolve": [
|
|
279
302
|
"dist/pixel-dissolve.d.ts"
|
|
280
303
|
],
|
|
304
|
+
"pixelate": [
|
|
305
|
+
"dist/pixelate.d.ts"
|
|
306
|
+
],
|
|
281
307
|
"grayscale": [
|
|
282
308
|
"dist/grayscale.d.ts"
|
|
283
309
|
],
|
|
@@ -323,9 +349,15 @@
|
|
|
323
349
|
"shine": [
|
|
324
350
|
"dist/shine.d.ts"
|
|
325
351
|
],
|
|
352
|
+
"shrinkwrap": [
|
|
353
|
+
"dist/shrinkwrap.d.ts"
|
|
354
|
+
],
|
|
326
355
|
"speckle": [
|
|
327
356
|
"dist/speckle.d.ts"
|
|
328
357
|
],
|
|
358
|
+
"thermal-vision": [
|
|
359
|
+
"dist/thermal-vision.d.ts"
|
|
360
|
+
],
|
|
329
361
|
"tint": [
|
|
330
362
|
"dist/tint.d.ts"
|
|
331
363
|
],
|
|
@@ -354,7 +386,7 @@
|
|
|
354
386
|
},
|
|
355
387
|
"homepage": "https://www.remotion.dev/docs/effects/api",
|
|
356
388
|
"devDependencies": {
|
|
357
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
389
|
+
"@remotion/eslint-config-internal": "4.0.479",
|
|
358
390
|
"@vitest/browser-playwright": "4.0.9",
|
|
359
391
|
"eslint": "9.19.0",
|
|
360
392
|
"vitest": "4.0.9",
|