@remotion/effects 4.0.460 → 4.0.462
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/blur/blur-horizontal.d.ts +1 -2
- package/dist/blur/blur-runtime.d.ts +25 -7
- package/dist/blur/blur-shaders.d.ts +1 -1
- package/dist/blur/blur-vertical.d.ts +1 -2
- package/dist/blur/index.d.ts +1 -6
- package/dist/entrypoints/blur.d.ts +4 -0
- package/dist/esm/blur.mjs +330 -0
- package/dist/esm/halftone.mjs +341 -0
- package/dist/esm/index.mjs +1 -626
- package/dist/esm/tint.mjs +71 -0
- package/dist/esm/wave.mjs +54 -0
- package/dist/halftone.d.ts +1 -2
- package/dist/index.d.ts +1 -8
- package/dist/tint.d.ts +6 -2
- package/dist/wave.d.ts +1 -2
- package/package.json +39 -4
package/dist/esm/index.mjs
CHANGED
|
@@ -1,626 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { Internals } from "remotion";
|
|
3
|
-
|
|
4
|
-
// src/blur/blur-shaders.ts
|
|
5
|
-
var BLUR_VS = `#version 300 es
|
|
6
|
-
in vec2 aPos;
|
|
7
|
-
in vec2 aUv;
|
|
8
|
-
out vec2 vUv;
|
|
9
|
-
void main() {
|
|
10
|
-
vUv = aUv;
|
|
11
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
12
|
-
}
|
|
13
|
-
`;
|
|
14
|
-
var buildFs = (direction) => {
|
|
15
|
-
const dirVec = direction === "horizontal" ? "vec2(1.0, 0.0)" : "vec2(0.0, 1.0)";
|
|
16
|
-
return `#version 300 es
|
|
17
|
-
precision highp float;
|
|
18
|
-
in vec2 vUv;
|
|
19
|
-
out vec4 fragColor;
|
|
20
|
-
|
|
21
|
-
uniform sampler2D uSource;
|
|
22
|
-
uniform float uRadius;
|
|
23
|
-
uniform vec2 uTexelSize;
|
|
24
|
-
|
|
25
|
-
const int KERNEL_HALF = 4;
|
|
26
|
-
const vec2 DIRECTION = ${dirVec};
|
|
27
|
-
|
|
28
|
-
void main() {
|
|
29
|
-
if (uRadius <= 0.0) {
|
|
30
|
-
fragColor = texture(uSource, vUv);
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
float pixelStride = uRadius / float(KERNEL_HALF);
|
|
35
|
-
float sigma = uRadius / 3.0;
|
|
36
|
-
float twoSigmaSq = 2.0 * sigma * sigma;
|
|
37
|
-
|
|
38
|
-
vec4 sum = vec4(0.0);
|
|
39
|
-
float weightSum = 0.0;
|
|
40
|
-
|
|
41
|
-
for (int i = -KERNEL_HALF; i <= KERNEL_HALF; ++i) {
|
|
42
|
-
float offsetPx = float(i) * pixelStride;
|
|
43
|
-
float w = exp(-(offsetPx * offsetPx) / twoSigmaSq);
|
|
44
|
-
vec2 uv = vUv + DIRECTION * uTexelSize * offsetPx;
|
|
45
|
-
sum += texture(uSource, uv) * w;
|
|
46
|
-
weightSum += w;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
fragColor = sum / weightSum;
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
};
|
|
53
|
-
var BLUR_FS_HORIZONTAL = buildFs("horizontal");
|
|
54
|
-
var BLUR_FS_VERTICAL = buildFs("vertical");
|
|
55
|
-
|
|
56
|
-
// src/blur/blur-runtime.ts
|
|
57
|
-
var compileShader = (gl, type, source) => {
|
|
58
|
-
const shader = gl.createShader(type);
|
|
59
|
-
if (!shader) {
|
|
60
|
-
throw new Error("Failed to create WebGL shader");
|
|
61
|
-
}
|
|
62
|
-
gl.shaderSource(shader, source);
|
|
63
|
-
gl.compileShader(shader);
|
|
64
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
65
|
-
const log = gl.getShaderInfoLog(shader);
|
|
66
|
-
gl.deleteShader(shader);
|
|
67
|
-
throw new Error(`Shader compile failed: ${log ?? "(no log)"}`);
|
|
68
|
-
}
|
|
69
|
-
return shader;
|
|
70
|
-
};
|
|
71
|
-
var linkProgram = (gl, vs, fs) => {
|
|
72
|
-
const program = gl.createProgram();
|
|
73
|
-
if (!program) {
|
|
74
|
-
throw new Error("Failed to create WebGL program");
|
|
75
|
-
}
|
|
76
|
-
gl.attachShader(program, vs);
|
|
77
|
-
gl.attachShader(program, fs);
|
|
78
|
-
gl.linkProgram(program);
|
|
79
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
80
|
-
const log = gl.getProgramInfoLog(program);
|
|
81
|
-
gl.deleteProgram(program);
|
|
82
|
-
throw new Error(`Program link failed: ${log ?? "(no log)"}`);
|
|
83
|
-
}
|
|
84
|
-
return program;
|
|
85
|
-
};
|
|
86
|
-
var setupBlur = (target, fragmentSource) => {
|
|
87
|
-
const gl = target.getContext("webgl2", {
|
|
88
|
-
premultipliedAlpha: true,
|
|
89
|
-
alpha: true,
|
|
90
|
-
preserveDrawingBuffer: true
|
|
91
|
-
});
|
|
92
|
-
if (!gl) {
|
|
93
|
-
throw new Error("Failed to acquire WebGL2 context for blur effect");
|
|
94
|
-
}
|
|
95
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
96
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
97
|
-
const vs = compileShader(gl, gl.VERTEX_SHADER, BLUR_VS);
|
|
98
|
-
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
99
|
-
const program = linkProgram(gl, vs, fs);
|
|
100
|
-
gl.deleteShader(vs);
|
|
101
|
-
gl.deleteShader(fs);
|
|
102
|
-
const vao = gl.createVertexArray();
|
|
103
|
-
if (!vao) {
|
|
104
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
105
|
-
}
|
|
106
|
-
gl.bindVertexArray(vao);
|
|
107
|
-
const data = new Float32Array([
|
|
108
|
-
-1,
|
|
109
|
-
-1,
|
|
110
|
-
0,
|
|
111
|
-
0,
|
|
112
|
-
1,
|
|
113
|
-
-1,
|
|
114
|
-
1,
|
|
115
|
-
0,
|
|
116
|
-
-1,
|
|
117
|
-
1,
|
|
118
|
-
0,
|
|
119
|
-
1,
|
|
120
|
-
1,
|
|
121
|
-
1,
|
|
122
|
-
1,
|
|
123
|
-
1
|
|
124
|
-
]);
|
|
125
|
-
const vbo = gl.createBuffer();
|
|
126
|
-
if (!vbo) {
|
|
127
|
-
throw new Error("Failed to create WebGL buffer");
|
|
128
|
-
}
|
|
129
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
130
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
131
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
132
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
133
|
-
gl.enableVertexAttribArray(aPos);
|
|
134
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
135
|
-
gl.enableVertexAttribArray(aUv);
|
|
136
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
137
|
-
gl.bindVertexArray(null);
|
|
138
|
-
const texture = gl.createTexture();
|
|
139
|
-
if (!texture) {
|
|
140
|
-
throw new Error("Failed to create WebGL texture");
|
|
141
|
-
}
|
|
142
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
143
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
144
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
145
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
146
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
147
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
148
|
-
const uRadius = gl.getUniformLocation(program, "uRadius");
|
|
149
|
-
const uTexelSize = gl.getUniformLocation(program, "uTexelSize");
|
|
150
|
-
const uSource = gl.getUniformLocation(program, "uSource");
|
|
151
|
-
return { gl, program, vao, vbo, texture, uRadius, uTexelSize, uSource };
|
|
152
|
-
};
|
|
153
|
-
var cleanupBlur = (state) => {
|
|
154
|
-
const { gl, program, vao, vbo, texture } = state;
|
|
155
|
-
gl.deleteBuffer(vbo);
|
|
156
|
-
gl.deleteProgram(program);
|
|
157
|
-
gl.deleteVertexArray(vao);
|
|
158
|
-
gl.deleteTexture(texture);
|
|
159
|
-
};
|
|
160
|
-
var applyBlur = (state, source, width, height, radius) => {
|
|
161
|
-
const { gl, program, vao, texture, uRadius, uTexelSize, uSource } = state;
|
|
162
|
-
gl.viewport(0, 0, width, height);
|
|
163
|
-
gl.clearColor(0, 0, 0, 0);
|
|
164
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
165
|
-
gl.useProgram(program);
|
|
166
|
-
gl.bindVertexArray(vao);
|
|
167
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
168
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
169
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
170
|
-
if (uSource)
|
|
171
|
-
gl.uniform1i(uSource, 0);
|
|
172
|
-
if (uRadius)
|
|
173
|
-
gl.uniform1f(uRadius, radius);
|
|
174
|
-
if (uTexelSize)
|
|
175
|
-
gl.uniform2f(uTexelSize, 1 / width, 1 / height);
|
|
176
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
177
|
-
gl.bindVertexArray(null);
|
|
178
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
179
|
-
gl.useProgram(null);
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
// src/blur/blur-horizontal.ts
|
|
183
|
-
var { createDescriptor, defineEffect } = Internals;
|
|
184
|
-
var blurHorizontalDef = defineEffect({
|
|
185
|
-
type: "remotion/blur-horizontal",
|
|
186
|
-
label: "Blur (horizontal)",
|
|
187
|
-
backend: "webgl2",
|
|
188
|
-
setup: (target) => setupBlur(target, BLUR_FS_HORIZONTAL),
|
|
189
|
-
apply: ({ source, width, height, params, state }) => {
|
|
190
|
-
applyBlur(state, source, width, height, params.radius);
|
|
191
|
-
},
|
|
192
|
-
cleanup: (state) => cleanupBlur(state),
|
|
193
|
-
schema: null
|
|
194
|
-
});
|
|
195
|
-
var blurHorizontal = (params) => createDescriptor(blurHorizontalDef, params);
|
|
196
|
-
|
|
197
|
-
// src/blur/blur-vertical.ts
|
|
198
|
-
import { Internals as Internals2 } from "remotion";
|
|
199
|
-
var { createDescriptor: createDescriptor2, defineEffect: defineEffect2 } = Internals2;
|
|
200
|
-
var blurVerticalDef = defineEffect2({
|
|
201
|
-
type: "remotion/blur-vertical",
|
|
202
|
-
label: "Blur (vertical)",
|
|
203
|
-
backend: "webgl2",
|
|
204
|
-
setup: (target) => setupBlur(target, BLUR_FS_VERTICAL),
|
|
205
|
-
apply: ({ source, width, height, params, state }) => {
|
|
206
|
-
applyBlur(state, source, width, height, params.radius);
|
|
207
|
-
},
|
|
208
|
-
cleanup: (state) => cleanupBlur(state),
|
|
209
|
-
schema: null
|
|
210
|
-
});
|
|
211
|
-
var blurVertical = (params) => createDescriptor2(blurVerticalDef, params);
|
|
212
|
-
|
|
213
|
-
// src/blur/index.ts
|
|
214
|
-
var blur = (params) => [
|
|
215
|
-
blurHorizontal({ radius: params.radius }),
|
|
216
|
-
blurVertical({ radius: params.radius })
|
|
217
|
-
];
|
|
218
|
-
// src/halftone.ts
|
|
219
|
-
import { Internals as Internals3 } from "remotion";
|
|
220
|
-
var { createDescriptor: createDescriptor3, defineEffect: defineEffect3 } = Internals3;
|
|
221
|
-
var SHADE_OUTSIDE_DOT_SCALE = 0.5;
|
|
222
|
-
var halftoneSchema = {
|
|
223
|
-
dotSize: {
|
|
224
|
-
type: "number",
|
|
225
|
-
min: 1,
|
|
226
|
-
max: 200,
|
|
227
|
-
step: 1,
|
|
228
|
-
default: 20,
|
|
229
|
-
description: "Dot size"
|
|
230
|
-
},
|
|
231
|
-
dotSpacing: {
|
|
232
|
-
type: "number",
|
|
233
|
-
min: 1,
|
|
234
|
-
max: 200,
|
|
235
|
-
step: 1,
|
|
236
|
-
default: 20,
|
|
237
|
-
description: "Dot spacing"
|
|
238
|
-
},
|
|
239
|
-
rotation: {
|
|
240
|
-
type: "number",
|
|
241
|
-
min: -180,
|
|
242
|
-
max: 180,
|
|
243
|
-
step: 1,
|
|
244
|
-
default: 0,
|
|
245
|
-
description: "Rotation"
|
|
246
|
-
},
|
|
247
|
-
offsetX: {
|
|
248
|
-
type: "number",
|
|
249
|
-
step: 1,
|
|
250
|
-
default: 0,
|
|
251
|
-
description: "Offset X"
|
|
252
|
-
},
|
|
253
|
-
offsetY: {
|
|
254
|
-
type: "number",
|
|
255
|
-
step: 1,
|
|
256
|
-
default: 0,
|
|
257
|
-
description: "Offset Y"
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
var resolve = (p) => ({
|
|
261
|
-
shape: p.shape ?? "circle",
|
|
262
|
-
dotSize: p.dotSize ?? 20,
|
|
263
|
-
dotSpacing: p.dotSpacing ?? p.dotSize ?? 20,
|
|
264
|
-
rotation: p.rotation ?? 0,
|
|
265
|
-
offsetX: p.offsetX ?? 0,
|
|
266
|
-
offsetY: p.offsetY ?? 0,
|
|
267
|
-
sampling: p.sampling ?? "bilinear",
|
|
268
|
-
color: p.color ?? "black",
|
|
269
|
-
shadeOutside: p.shadeOutside ?? false
|
|
270
|
-
});
|
|
271
|
-
var HALFTONE_VS = `#version 300 es
|
|
272
|
-
in vec2 aPos;
|
|
273
|
-
in vec2 aUv;
|
|
274
|
-
out vec2 vUv;
|
|
275
|
-
void main() {
|
|
276
|
-
vUv = aUv;
|
|
277
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
278
|
-
}
|
|
279
|
-
`;
|
|
280
|
-
var HALFTONE_FS = `#version 300 es
|
|
281
|
-
precision highp float;
|
|
282
|
-
|
|
283
|
-
in vec2 vUv;
|
|
284
|
-
out vec4 fragColor;
|
|
285
|
-
|
|
286
|
-
uniform sampler2D uSource;
|
|
287
|
-
uniform vec2 uResolution;
|
|
288
|
-
uniform float uDotSize;
|
|
289
|
-
uniform float uDotSpacing;
|
|
290
|
-
uniform float uRotation;
|
|
291
|
-
uniform vec2 uOffset;
|
|
292
|
-
uniform vec4 uColor;
|
|
293
|
-
uniform int uShape;
|
|
294
|
-
uniform bool uShadeOutside;
|
|
295
|
-
|
|
296
|
-
const float SHADE_OUTSIDE_SCALE = ${SHADE_OUTSIDE_DOT_SCALE.toFixed(1)};
|
|
297
|
-
|
|
298
|
-
void main() {
|
|
299
|
-
vec2 fragPos = vUv * uResolution;
|
|
300
|
-
vec2 center = uResolution * 0.5;
|
|
301
|
-
|
|
302
|
-
vec2 d = fragPos - center;
|
|
303
|
-
float cosR = cos(uRotation);
|
|
304
|
-
float sinR = sin(uRotation);
|
|
305
|
-
|
|
306
|
-
vec2 gridPos = vec2(
|
|
307
|
-
d.x * cosR + d.y * sinR,
|
|
308
|
-
-d.x * sinR + d.y * cosR
|
|
309
|
-
);
|
|
310
|
-
|
|
311
|
-
float spacing = max(uDotSpacing, 0.001);
|
|
312
|
-
vec2 cellIndex = floor((gridPos + uOffset) / spacing + 0.5);
|
|
313
|
-
vec2 gridCenter = cellIndex * spacing - uOffset;
|
|
314
|
-
|
|
315
|
-
vec2 canvasPos = center + vec2(
|
|
316
|
-
gridCenter.x * cosR - gridCenter.y * sinR,
|
|
317
|
-
gridCenter.x * sinR + gridCenter.y * cosR
|
|
318
|
-
);
|
|
319
|
-
|
|
320
|
-
vec2 sampleUv = clamp(canvasPos / uResolution, vec2(0.0), vec2(1.0));
|
|
321
|
-
vec4 texColor = texture(uSource, sampleUv);
|
|
322
|
-
|
|
323
|
-
float alpha = texColor.a;
|
|
324
|
-
vec3 rgb = alpha > 0.001 ? texColor.rgb / alpha : vec3(0.0);
|
|
325
|
-
float lum = dot(rgb, vec3(0.299, 0.587, 0.114));
|
|
326
|
-
|
|
327
|
-
float lumDefault = lum * alpha + (1.0 - alpha);
|
|
328
|
-
float dotScale = uShadeOutside
|
|
329
|
-
? (1.0 - alpha) * SHADE_OUTSIDE_SCALE
|
|
330
|
-
: 1.0 - lumDefault;
|
|
331
|
-
|
|
332
|
-
if (dotScale <= 0.01) {
|
|
333
|
-
fragColor = vec4(0.0);
|
|
334
|
-
return;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
vec2 diff = gridPos - gridCenter;
|
|
338
|
-
float halfSize = uDotSize * 0.5;
|
|
339
|
-
float coverage = 0.0;
|
|
340
|
-
|
|
341
|
-
if (uShape == 0) {
|
|
342
|
-
float radius = halfSize * dotScale;
|
|
343
|
-
float dist = length(diff);
|
|
344
|
-
coverage = 1.0 - smoothstep(radius - 0.75, radius + 0.75, dist);
|
|
345
|
-
} else if (uShape == 1) {
|
|
346
|
-
float s = uDotSize * dotScale * 0.5;
|
|
347
|
-
coverage = (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.x)))
|
|
348
|
-
* (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.y)));
|
|
349
|
-
} else {
|
|
350
|
-
float lineHalf = uDotSize * dotScale * 0.5;
|
|
351
|
-
coverage = (1.0 - smoothstep(halfSize - 0.5, halfSize + 0.5, abs(diff.x)))
|
|
352
|
-
* (1.0 - smoothstep(lineHalf - 0.5, lineHalf + 0.5, abs(diff.y)));
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
fragColor = uColor * coverage;
|
|
356
|
-
}
|
|
357
|
-
`;
|
|
358
|
-
var SHAPE_INDEX = {
|
|
359
|
-
circle: 0,
|
|
360
|
-
square: 1,
|
|
361
|
-
line: 2
|
|
362
|
-
};
|
|
363
|
-
var compileShader2 = (gl, type, source) => {
|
|
364
|
-
const shader = gl.createShader(type);
|
|
365
|
-
if (!shader) {
|
|
366
|
-
throw new Error("Failed to create WebGL shader");
|
|
367
|
-
}
|
|
368
|
-
gl.shaderSource(shader, source);
|
|
369
|
-
gl.compileShader(shader);
|
|
370
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
371
|
-
const log = gl.getShaderInfoLog(shader);
|
|
372
|
-
gl.deleteShader(shader);
|
|
373
|
-
throw new Error(`Halftone shader compile failed: ${log ?? "(no log)"}`);
|
|
374
|
-
}
|
|
375
|
-
return shader;
|
|
376
|
-
};
|
|
377
|
-
var linkProgram2 = (gl, vs, fs) => {
|
|
378
|
-
const program = gl.createProgram();
|
|
379
|
-
if (!program) {
|
|
380
|
-
throw new Error("Failed to create WebGL program");
|
|
381
|
-
}
|
|
382
|
-
gl.attachShader(program, vs);
|
|
383
|
-
gl.attachShader(program, fs);
|
|
384
|
-
gl.linkProgram(program);
|
|
385
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
386
|
-
const log = gl.getProgramInfoLog(program);
|
|
387
|
-
gl.deleteProgram(program);
|
|
388
|
-
throw new Error(`Halftone program link failed: ${log ?? "(no log)"}`);
|
|
389
|
-
}
|
|
390
|
-
return program;
|
|
391
|
-
};
|
|
392
|
-
var parseColorRgba = (ctx, color) => {
|
|
393
|
-
ctx.clearRect(0, 0, 1, 1);
|
|
394
|
-
ctx.fillStyle = color;
|
|
395
|
-
ctx.fillRect(0, 0, 1, 1);
|
|
396
|
-
const { data } = ctx.getImageData(0, 0, 1, 1);
|
|
397
|
-
return [data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255];
|
|
398
|
-
};
|
|
399
|
-
var halftoneDef = defineEffect3({
|
|
400
|
-
type: "remotion/halftone",
|
|
401
|
-
label: "Halftone",
|
|
402
|
-
backend: "webgl2",
|
|
403
|
-
setup: (target) => {
|
|
404
|
-
const gl = target.getContext("webgl2", {
|
|
405
|
-
premultipliedAlpha: true,
|
|
406
|
-
alpha: true,
|
|
407
|
-
preserveDrawingBuffer: true
|
|
408
|
-
});
|
|
409
|
-
if (!gl) {
|
|
410
|
-
throw new Error("Failed to acquire WebGL2 context for halftone effect");
|
|
411
|
-
}
|
|
412
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
413
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
414
|
-
const vs = compileShader2(gl, gl.VERTEX_SHADER, HALFTONE_VS);
|
|
415
|
-
const fs = compileShader2(gl, gl.FRAGMENT_SHADER, HALFTONE_FS);
|
|
416
|
-
const program = linkProgram2(gl, vs, fs);
|
|
417
|
-
gl.deleteShader(vs);
|
|
418
|
-
gl.deleteShader(fs);
|
|
419
|
-
const vao = gl.createVertexArray();
|
|
420
|
-
if (!vao) {
|
|
421
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
422
|
-
}
|
|
423
|
-
gl.bindVertexArray(vao);
|
|
424
|
-
const data = new Float32Array([
|
|
425
|
-
-1,
|
|
426
|
-
-1,
|
|
427
|
-
0,
|
|
428
|
-
0,
|
|
429
|
-
1,
|
|
430
|
-
-1,
|
|
431
|
-
1,
|
|
432
|
-
0,
|
|
433
|
-
-1,
|
|
434
|
-
1,
|
|
435
|
-
0,
|
|
436
|
-
1,
|
|
437
|
-
1,
|
|
438
|
-
1,
|
|
439
|
-
1,
|
|
440
|
-
1
|
|
441
|
-
]);
|
|
442
|
-
const vbo = gl.createBuffer();
|
|
443
|
-
if (!vbo) {
|
|
444
|
-
throw new Error("Failed to create WebGL buffer");
|
|
445
|
-
}
|
|
446
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
447
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
448
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
449
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
450
|
-
gl.enableVertexAttribArray(aPos);
|
|
451
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
452
|
-
gl.enableVertexAttribArray(aUv);
|
|
453
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
454
|
-
gl.bindVertexArray(null);
|
|
455
|
-
const texture = gl.createTexture();
|
|
456
|
-
if (!texture) {
|
|
457
|
-
throw new Error("Failed to create WebGL texture");
|
|
458
|
-
}
|
|
459
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
460
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
461
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
462
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
463
|
-
const colorCanvas = document.createElement("canvas");
|
|
464
|
-
colorCanvas.width = 1;
|
|
465
|
-
colorCanvas.height = 1;
|
|
466
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
467
|
-
if (!colorCtx) {
|
|
468
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
469
|
-
}
|
|
470
|
-
return {
|
|
471
|
-
gl,
|
|
472
|
-
program,
|
|
473
|
-
vao,
|
|
474
|
-
vbo,
|
|
475
|
-
texture,
|
|
476
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
477
|
-
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
478
|
-
uDotSize: gl.getUniformLocation(program, "uDotSize"),
|
|
479
|
-
uDotSpacing: gl.getUniformLocation(program, "uDotSpacing"),
|
|
480
|
-
uRotation: gl.getUniformLocation(program, "uRotation"),
|
|
481
|
-
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
482
|
-
uColor: gl.getUniformLocation(program, "uColor"),
|
|
483
|
-
uShape: gl.getUniformLocation(program, "uShape"),
|
|
484
|
-
uShadeOutside: gl.getUniformLocation(program, "uShadeOutside"),
|
|
485
|
-
colorCtx,
|
|
486
|
-
cachedColorStr: "",
|
|
487
|
-
cachedColorRgba: [0, 0, 0, 1]
|
|
488
|
-
};
|
|
489
|
-
},
|
|
490
|
-
apply: ({ source, width, height, params, state }) => {
|
|
491
|
-
const r = resolve(params);
|
|
492
|
-
const { gl, program, vao, texture } = state;
|
|
493
|
-
if (state.cachedColorStr !== r.color) {
|
|
494
|
-
state.cachedColorStr = r.color;
|
|
495
|
-
state.cachedColorRgba = parseColorRgba(state.colorCtx, r.color);
|
|
496
|
-
}
|
|
497
|
-
const [cr, cg, cb, ca] = state.cachedColorRgba;
|
|
498
|
-
const filter = r.sampling === "nearest" ? gl.NEAREST : gl.LINEAR;
|
|
499
|
-
gl.viewport(0, 0, width, height);
|
|
500
|
-
gl.clearColor(0, 0, 0, 0);
|
|
501
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
502
|
-
gl.useProgram(program);
|
|
503
|
-
gl.bindVertexArray(vao);
|
|
504
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
505
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
506
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
507
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
508
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
509
|
-
if (state.uSource)
|
|
510
|
-
gl.uniform1i(state.uSource, 0);
|
|
511
|
-
if (state.uResolution)
|
|
512
|
-
gl.uniform2f(state.uResolution, width, height);
|
|
513
|
-
if (state.uDotSize)
|
|
514
|
-
gl.uniform1f(state.uDotSize, r.dotSize);
|
|
515
|
-
if (state.uDotSpacing)
|
|
516
|
-
gl.uniform1f(state.uDotSpacing, r.dotSpacing);
|
|
517
|
-
if (state.uRotation)
|
|
518
|
-
gl.uniform1f(state.uRotation, r.rotation * Math.PI / 180);
|
|
519
|
-
if (state.uOffset)
|
|
520
|
-
gl.uniform2f(state.uOffset, r.offsetX, r.offsetY);
|
|
521
|
-
if (state.uColor)
|
|
522
|
-
gl.uniform4f(state.uColor, cr * ca, cg * ca, cb * ca, ca);
|
|
523
|
-
if (state.uShape)
|
|
524
|
-
gl.uniform1i(state.uShape, SHAPE_INDEX[r.shape]);
|
|
525
|
-
if (state.uShadeOutside)
|
|
526
|
-
gl.uniform1i(state.uShadeOutside, r.shadeOutside ? 1 : 0);
|
|
527
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
528
|
-
gl.bindVertexArray(null);
|
|
529
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
530
|
-
gl.useProgram(null);
|
|
531
|
-
},
|
|
532
|
-
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
533
|
-
gl.deleteBuffer(vbo);
|
|
534
|
-
gl.deleteProgram(program);
|
|
535
|
-
gl.deleteVertexArray(vao);
|
|
536
|
-
gl.deleteTexture(texture);
|
|
537
|
-
},
|
|
538
|
-
schema: halftoneSchema
|
|
539
|
-
});
|
|
540
|
-
var halftone = (params = {}) => createDescriptor3(halftoneDef, params);
|
|
541
|
-
// src/tint.ts
|
|
542
|
-
import { Internals as Internals4 } from "remotion";
|
|
543
|
-
var { createDescriptor: createDescriptor4, defineEffect: defineEffect4 } = Internals4;
|
|
544
|
-
var tintSchema = {
|
|
545
|
-
amount: {
|
|
546
|
-
type: "number",
|
|
547
|
-
min: 0,
|
|
548
|
-
max: 1,
|
|
549
|
-
step: 0.01,
|
|
550
|
-
default: 0.5,
|
|
551
|
-
description: "Amount"
|
|
552
|
-
}
|
|
553
|
-
};
|
|
554
|
-
var tintDef = defineEffect4({
|
|
555
|
-
type: "remotion/tint",
|
|
556
|
-
label: "Tint",
|
|
557
|
-
backend: "2d",
|
|
558
|
-
setup: () => null,
|
|
559
|
-
apply: ({ source, target, width, height, params }) => {
|
|
560
|
-
const ctx = target.getContext("2d");
|
|
561
|
-
if (!ctx) {
|
|
562
|
-
throw new Error("Failed to acquire 2D context for tint effect. The canvas may have been assigned a different context type.");
|
|
563
|
-
}
|
|
564
|
-
const amount = Math.max(0, Math.min(1, params.amount ?? 0.5));
|
|
565
|
-
ctx.clearRect(0, 0, width, height);
|
|
566
|
-
ctx.globalAlpha = 1;
|
|
567
|
-
ctx.globalCompositeOperation = "source-over";
|
|
568
|
-
ctx.drawImage(source, 0, 0, width, height);
|
|
569
|
-
ctx.globalAlpha = amount;
|
|
570
|
-
ctx.globalCompositeOperation = "source-atop";
|
|
571
|
-
ctx.fillStyle = params.color;
|
|
572
|
-
ctx.fillRect(0, 0, width, height);
|
|
573
|
-
ctx.globalAlpha = 1;
|
|
574
|
-
ctx.globalCompositeOperation = "source-over";
|
|
575
|
-
},
|
|
576
|
-
cleanup: () => {
|
|
577
|
-
return;
|
|
578
|
-
},
|
|
579
|
-
schema: tintSchema
|
|
580
|
-
});
|
|
581
|
-
var tint = (params) => createDescriptor4(tintDef, params);
|
|
582
|
-
// src/wave.ts
|
|
583
|
-
import { Internals as Internals5 } from "remotion";
|
|
584
|
-
var { createDescriptor: createDescriptor5, defineEffect: defineEffect5 } = Internals5;
|
|
585
|
-
var resolve2 = (p) => ({
|
|
586
|
-
amplitude: p.amplitude ?? 60,
|
|
587
|
-
wavelength: p.wavelength ?? 240,
|
|
588
|
-
speed: p.speed ?? 1 / 6,
|
|
589
|
-
sliceWidth: p.sliceWidth ?? 4,
|
|
590
|
-
background: p.background ?? "transparent"
|
|
591
|
-
});
|
|
592
|
-
var waveDef = defineEffect5({
|
|
593
|
-
type: "remotion/wave",
|
|
594
|
-
label: "Wave",
|
|
595
|
-
backend: "2d",
|
|
596
|
-
setup: () => null,
|
|
597
|
-
apply: ({ source, target, frame, width, height, params }) => {
|
|
598
|
-
const ctx = target.getContext("2d");
|
|
599
|
-
if (!ctx) {
|
|
600
|
-
throw new Error("Failed to acquire 2D context for wave effect. The canvas may have been assigned a different context type.");
|
|
601
|
-
}
|
|
602
|
-
const r = resolve2(params);
|
|
603
|
-
ctx.clearRect(0, 0, width, height);
|
|
604
|
-
if (r.background !== "transparent") {
|
|
605
|
-
ctx.fillStyle = r.background;
|
|
606
|
-
ctx.fillRect(0, 0, width, height);
|
|
607
|
-
}
|
|
608
|
-
for (let x = 0;x < width; x += r.sliceWidth) {
|
|
609
|
-
const offset = Math.sin(x / r.wavelength * Math.PI * 2 + frame * r.speed) * r.amplitude;
|
|
610
|
-
ctx.drawImage(source, x, 0, r.sliceWidth, height, x, offset, r.sliceWidth, height);
|
|
611
|
-
}
|
|
612
|
-
},
|
|
613
|
-
cleanup: () => {
|
|
614
|
-
return;
|
|
615
|
-
},
|
|
616
|
-
schema: null
|
|
617
|
-
});
|
|
618
|
-
var wave = (params = {}) => createDescriptor5(waveDef, params);
|
|
619
|
-
export {
|
|
620
|
-
wave,
|
|
621
|
-
tint,
|
|
622
|
-
halftone,
|
|
623
|
-
blurVertical,
|
|
624
|
-
blurHorizontal,
|
|
625
|
-
blur
|
|
626
|
-
};
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __export = (target, all) => {
|
|
3
|
+
for (var name in all)
|
|
4
|
+
__defProp(target, name, {
|
|
5
|
+
get: all[name],
|
|
6
|
+
enumerable: true,
|
|
7
|
+
configurable: true,
|
|
8
|
+
set: (newValue) => all[name] = () => newValue
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// src/tint.ts
|
|
13
|
+
import { Internals } from "remotion";
|
|
14
|
+
var { createEffect } = Internals;
|
|
15
|
+
var DEFAULT_AMOUNT = 0.5;
|
|
16
|
+
var DEFAULT_COLOR = "#ff0000";
|
|
17
|
+
var tintSchema = {
|
|
18
|
+
color: {
|
|
19
|
+
type: "color",
|
|
20
|
+
default: DEFAULT_COLOR,
|
|
21
|
+
description: "Color"
|
|
22
|
+
},
|
|
23
|
+
amount: {
|
|
24
|
+
type: "number",
|
|
25
|
+
min: 0,
|
|
26
|
+
max: 1,
|
|
27
|
+
step: 0.01,
|
|
28
|
+
default: DEFAULT_AMOUNT,
|
|
29
|
+
description: "Amount"
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
var resolve = (p) => ({
|
|
33
|
+
color: p.color,
|
|
34
|
+
amount: p.amount ?? DEFAULT_AMOUNT
|
|
35
|
+
});
|
|
36
|
+
var tint = createEffect({
|
|
37
|
+
type: "remotion/tint",
|
|
38
|
+
label: "Tint",
|
|
39
|
+
backend: "2d",
|
|
40
|
+
calculateKey: (params) => {
|
|
41
|
+
const r = resolve(params);
|
|
42
|
+
return `tint-${r.color}-${r.amount}`;
|
|
43
|
+
},
|
|
44
|
+
setup: () => null,
|
|
45
|
+
apply: ({ source, target, width, height, params }) => {
|
|
46
|
+
const ctx = target.getContext("2d");
|
|
47
|
+
if (!ctx) {
|
|
48
|
+
throw new Error("Failed to acquire 2D context for tint effect. The canvas may have been assigned a different context type.");
|
|
49
|
+
}
|
|
50
|
+
const r = resolve(params);
|
|
51
|
+
const amount = Math.max(0, Math.min(1, r.amount));
|
|
52
|
+
ctx.clearRect(0, 0, width, height);
|
|
53
|
+
ctx.globalAlpha = 1;
|
|
54
|
+
ctx.globalCompositeOperation = "source-over";
|
|
55
|
+
ctx.drawImage(source, 0, 0, width, height);
|
|
56
|
+
ctx.globalAlpha = amount;
|
|
57
|
+
ctx.globalCompositeOperation = "source-atop";
|
|
58
|
+
ctx.fillStyle = r.color;
|
|
59
|
+
ctx.fillRect(0, 0, width, height);
|
|
60
|
+
ctx.globalAlpha = 1;
|
|
61
|
+
ctx.globalCompositeOperation = "source-over";
|
|
62
|
+
},
|
|
63
|
+
cleanup: () => {
|
|
64
|
+
return;
|
|
65
|
+
},
|
|
66
|
+
schema: tintSchema
|
|
67
|
+
});
|
|
68
|
+
export {
|
|
69
|
+
tintSchema,
|
|
70
|
+
tint
|
|
71
|
+
};
|