@remotion/effects 4.0.541 → 4.0.543
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/THIRD_PARTY_LICENSES.md +10 -0
- package/dist/esm/lightning.mjs +603 -0
- package/dist/esm/magnify.mjs +403 -0
- package/dist/esm/preview/barrel-distortion.mjs +303 -0
- package/dist/esm/preview/bevel-alpha.mjs +525 -0
- package/dist/esm/preview/blur.mjs +435 -0
- package/dist/esm/preview/brightness.mjs +95 -0
- package/dist/esm/preview/burlap.mjs +481 -0
- package/dist/esm/preview/checkerboard.mjs +8 -0
- package/dist/esm/preview/chromatic-aberration.mjs +308 -0
- package/dist/esm/preview/color-correction.mjs +522 -0
- package/dist/esm/preview/color-key.mjs +440 -0
- package/dist/esm/preview/contour-lines.mjs +608 -0
- package/dist/esm/preview/contrast.mjs +95 -0
- package/dist/esm/preview/corner-pin.mjs +6 -0
- package/dist/esm/preview/curves.mjs +357 -0
- package/dist/esm/preview/cylinder.mjs +273 -0
- package/dist/esm/preview/dot-grid.mjs +333 -0
- package/dist/esm/preview/drop-shadow.mjs +607 -0
- package/dist/esm/preview/duotone.mjs +344 -0
- package/dist/esm/preview/emboss.mjs +479 -0
- package/dist/esm/preview/evolve.mjs +485 -0
- package/dist/esm/preview/exposure.mjs +264 -0
- package/dist/esm/preview/film-burn.mjs +298 -0
- package/dist/esm/preview/fisheye.mjs +422 -0
- package/dist/esm/preview/flannel.mjs +401 -0
- package/dist/esm/preview/fractal-noise.mjs +642 -0
- package/dist/esm/preview/glow.mjs +598 -0
- package/dist/esm/preview/grayscale.mjs +86 -0
- package/dist/esm/preview/gridlines.mjs +8 -0
- package/dist/esm/preview/halftone-linear-gradient.mjs +523 -0
- package/dist/esm/preview/halftone.mjs +552 -0
- package/dist/esm/preview/hue.mjs +83 -0
- package/dist/esm/preview/index-00v3hr66.mjs +299 -0
- package/dist/esm/preview/index-0w4eqht8.mjs +351 -0
- package/dist/esm/preview/index-18y0zcy2.mjs +440 -0
- package/dist/esm/preview/index-1m1b1ad7.mjs +520 -0
- package/dist/esm/preview/index-34fxm3ax.mjs +518 -0
- package/dist/esm/preview/index-4fvp93ps.mjs +32 -0
- package/dist/esm/preview/index-4scpn12x.mjs +224 -0
- package/dist/esm/preview/index-4z6pt3ka.mjs +104 -0
- package/dist/esm/preview/index-618ky75w.mjs +51 -0
- package/dist/esm/preview/index-6agxdrvr.mjs +411 -0
- package/dist/esm/preview/index-6jkps947.mjs +120 -0
- package/dist/esm/preview/index-8agtsbw4.mjs +617 -0
- package/dist/esm/preview/index-8jx11jyn.mjs +29 -0
- package/dist/esm/preview/index-8p04sssx.mjs +123 -0
- package/dist/esm/preview/index-afdtmrh2.mjs +596 -0
- package/dist/esm/preview/index-b86qstcs.mjs +18 -0
- package/dist/esm/preview/index-cb77qg3g.mjs +587 -0
- package/dist/esm/preview/index-cdp7tr8x.mjs +122 -0
- package/dist/esm/preview/index-evy8hyah.mjs +55 -0
- package/dist/esm/preview/index-gnsce796.mjs +6 -0
- package/dist/esm/preview/index-kkvzt8b7.mjs +199 -0
- package/dist/esm/preview/index-r0v18b2n.mjs +425 -0
- package/dist/esm/preview/index-rswpzmm5.mjs +926 -0
- package/dist/esm/preview/index-s9mrx750.mjs +97 -0
- package/dist/esm/preview/index-tvfexb7s.mjs +164 -0
- package/dist/esm/preview/index-vp56k1gj.mjs +215 -0
- package/dist/esm/preview/index-wxhvgv2s.mjs +79 -0
- package/dist/esm/preview/index-wy95a41r.mjs +407 -0
- package/dist/esm/preview/index-ysnwfc4t.mjs +306 -0
- package/dist/esm/preview/index.mjs +51 -0
- package/dist/esm/preview/invert.mjs +84 -0
- package/dist/esm/preview/iris-wipe.mjs +315 -0
- package/dist/esm/preview/lens-blur.mjs +563 -0
- package/dist/esm/preview/levels.mjs +400 -0
- package/dist/esm/preview/light-leak.mjs +8 -0
- package/dist/esm/preview/light-trail.mjs +516 -0
- package/dist/esm/preview/lightning.mjs +603 -0
- package/dist/esm/preview/linear-gradient-tint.mjs +6 -0
- package/dist/esm/preview/linear-gradient.mjs +6 -0
- package/dist/esm/preview/linear-progressive-blur.mjs +516 -0
- package/dist/esm/preview/linear-progressive-pixelate.mjs +176 -0
- package/dist/esm/preview/lines.mjs +536 -0
- package/dist/esm/preview/liquid-contours.mjs +512 -0
- package/dist/esm/preview/long-shadows.mjs +437 -0
- package/dist/esm/preview/lut.mjs +601 -0
- package/dist/esm/preview/magnify.mjs +403 -0
- package/dist/esm/preview/mirror.mjs +341 -0
- package/dist/esm/preview/noise-displacement.mjs +584 -0
- package/dist/esm/preview/noise.mjs +318 -0
- package/dist/esm/preview/outline.mjs +725 -0
- package/dist/esm/preview/page-turn.mjs +302 -0
- package/dist/esm/preview/paper.mjs +1249 -0
- package/dist/esm/preview/pattern.mjs +6 -0
- package/dist/esm/preview/pixel-dissolve.mjs +360 -0
- package/dist/esm/preview/pixelate.mjs +249 -0
- package/dist/esm/preview/radial-progressive-blur.mjs +582 -0
- package/dist/esm/preview/radial-progressive-pixelate.mjs +220 -0
- package/dist/esm/preview/radial-wipe.mjs +224 -0
- package/dist/esm/preview/rain-fall.mjs +114 -0
- package/dist/esm/preview/region-blur.mjs +500 -0
- package/dist/esm/preview/rings.mjs +8 -0
- package/dist/esm/preview/roughen-edges.mjs +590 -0
- package/dist/esm/preview/saturation.mjs +86 -0
- package/dist/esm/preview/scale.mjs +109 -0
- package/dist/esm/preview/scanlines.mjs +362 -0
- package/dist/esm/preview/shadows-highlights.mjs +284 -0
- package/dist/esm/preview/shatter.mjs +868 -0
- package/dist/esm/preview/shine.mjs +368 -0
- package/dist/esm/preview/shrinkwrap.mjs +769 -0
- package/dist/esm/preview/skew.mjs +300 -0
- package/dist/esm/preview/snow-fall.mjs +170 -0
- package/dist/esm/preview/speckle.mjs +356 -0
- package/dist/esm/preview/sphere.mjs +252 -0
- package/dist/esm/preview/starburst.mjs +8 -0
- package/dist/esm/preview/tear.mjs +375 -0
- package/dist/esm/preview/thermal-vision.mjs +387 -0
- package/dist/esm/preview/tile.mjs +7 -0
- package/dist/esm/preview/tint.mjs +125 -0
- package/dist/esm/preview/translate.mjs +151 -0
- package/dist/esm/preview/turbulent-displace.mjs +613 -0
- package/dist/esm/preview/tv-signal-off.mjs +308 -0
- package/dist/esm/preview/venetian-blinds.mjs +341 -0
- package/dist/esm/preview/vibrance.mjs +254 -0
- package/dist/esm/preview/vignette.mjs +458 -0
- package/dist/esm/preview/wave.mjs +384 -0
- package/dist/esm/preview/waves.mjs +599 -0
- package/dist/esm/preview/white-balance.mjs +280 -0
- package/dist/esm/preview/white-noise.mjs +244 -0
- package/dist/esm/preview/zigzag.mjs +8 -0
- package/dist/esm/preview/zoom-blur.mjs +389 -0
- package/dist/lightning/geometry.d.ts +10 -0
- package/dist/lightning/index.d.ts +4 -0
- package/dist/lightning/mask.d.ts +2 -0
- package/dist/lightning/params.d.ts +259 -0
- package/dist/lightning/shaders.d.ts +2 -0
- package/dist/lightning.d.ts +2 -0
- package/dist/magnify/shader.d.ts +1 -0
- package/dist/magnify/webgpu-shader.d.ts +1 -0
- package/dist/magnify.d.ts +28 -0
- package/package.json +30 -6
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
import {
|
|
2
|
+
assertOptionalFiniteNumber,
|
|
3
|
+
validateUnitInterval
|
|
4
|
+
} from "./index-wxhvgv2s.mjs";
|
|
5
|
+
import {
|
|
6
|
+
WEBGPU_SINGLE_PASS_VERTEX,
|
|
7
|
+
setupWebGpuSinglePass,
|
|
8
|
+
cleanupWebGpuSinglePass,
|
|
9
|
+
applyWebGpuSinglePass
|
|
10
|
+
} from "./index-tvfexb7s.mjs";
|
|
11
|
+
import {
|
|
12
|
+
assertEffectParamsObject
|
|
13
|
+
} from "./index-4fvp93ps.mjs";
|
|
14
|
+
|
|
15
|
+
// src/pixel-dissolve.ts
|
|
16
|
+
import { Internals } from "remotion";
|
|
17
|
+
|
|
18
|
+
// src/pixel-dissolve-webgpu-shader.ts
|
|
19
|
+
var PIXEL_DISSOLVE_WEBGPU_SHADER = `
|
|
20
|
+
${WEBGPU_SINGLE_PASS_VERTEX}
|
|
21
|
+
@group(0) @binding(0) var source: texture_2d<f32>;
|
|
22
|
+
@group(0) @binding(1) var sourceSampler: sampler;
|
|
23
|
+
@group(0) @binding(2) var<uniform> params: Params;
|
|
24
|
+
|
|
25
|
+
struct Params { progress: f32, columns: f32, rows: f32, seed: f32, feather: f32, }
|
|
26
|
+
|
|
27
|
+
fn hash21(p: vec2f) -> f32 {
|
|
28
|
+
var p3 = fract(p.xyx * vec3f(443.8975, 397.2973, 491.1871));
|
|
29
|
+
p3 += vec3f(dot(p3, p3.yzx + vec3f(19.19)));
|
|
30
|
+
return fract((p3.x + p3.y) * p3.z);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
|
|
34
|
+
let divisions = max(vec2f(params.columns, params.rows), vec2f(1));
|
|
35
|
+
let uv = vec2f(input.uv.x, 1.0 - input.uv.y);
|
|
36
|
+
let cell = floor(min(uv, vec2f(1.0 - 0.000001)) * divisions + vec2f(0.00001));
|
|
37
|
+
let color = textureSampleLevel(source, sourceSampler, input.uv, 0);
|
|
38
|
+
let noise = hash21(cell + vec2f(params.seed, params.seed * 1.618));
|
|
39
|
+
let edge = max(params.feather, 0.0);
|
|
40
|
+
let threshold = 1.0 - clamp(params.progress, 0.0, 1.0) * (1.0 + edge);
|
|
41
|
+
var mask: f32;
|
|
42
|
+
if (edge <= 0.0001) { mask = 1.0 - step(threshold, noise); }
|
|
43
|
+
else { mask = 1.0 - smoothstep(threshold, threshold + edge, noise); }
|
|
44
|
+
return color * mask;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
// src/pixel-dissolve.ts
|
|
50
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
51
|
+
var DEFAULT_PROGRESS = 0.5;
|
|
52
|
+
var DEFAULT_COLUMNS = 10;
|
|
53
|
+
var DEFAULT_ROWS = 10;
|
|
54
|
+
var DEFAULT_SEED = 0;
|
|
55
|
+
var DEFAULT_FEATHER = 0.15;
|
|
56
|
+
var pixelDissolveSchema = {
|
|
57
|
+
progress: {
|
|
58
|
+
type: "number",
|
|
59
|
+
min: 0,
|
|
60
|
+
max: 1,
|
|
61
|
+
step: 0.01,
|
|
62
|
+
default: DEFAULT_PROGRESS,
|
|
63
|
+
description: "Progress",
|
|
64
|
+
hiddenFromList: false
|
|
65
|
+
},
|
|
66
|
+
columns: {
|
|
67
|
+
type: "number",
|
|
68
|
+
min: 1,
|
|
69
|
+
max: 400,
|
|
70
|
+
step: 1,
|
|
71
|
+
integer: true,
|
|
72
|
+
default: DEFAULT_COLUMNS,
|
|
73
|
+
description: "Columns",
|
|
74
|
+
hiddenFromList: false
|
|
75
|
+
},
|
|
76
|
+
rows: {
|
|
77
|
+
type: "number",
|
|
78
|
+
min: 1,
|
|
79
|
+
max: 400,
|
|
80
|
+
step: 1,
|
|
81
|
+
integer: true,
|
|
82
|
+
default: DEFAULT_ROWS,
|
|
83
|
+
description: "Rows",
|
|
84
|
+
hiddenFromList: false
|
|
85
|
+
},
|
|
86
|
+
seed: {
|
|
87
|
+
type: "number",
|
|
88
|
+
step: 1,
|
|
89
|
+
default: DEFAULT_SEED,
|
|
90
|
+
description: "Seed",
|
|
91
|
+
hiddenFromList: false
|
|
92
|
+
},
|
|
93
|
+
feather: {
|
|
94
|
+
type: "number",
|
|
95
|
+
min: 0,
|
|
96
|
+
max: 1,
|
|
97
|
+
step: 0.01,
|
|
98
|
+
default: DEFAULT_FEATHER,
|
|
99
|
+
description: "Feather",
|
|
100
|
+
hiddenFromList: false
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
var resolve = (params) => ({
|
|
104
|
+
progress: params.progress ?? DEFAULT_PROGRESS,
|
|
105
|
+
columns: params.columns ?? DEFAULT_COLUMNS,
|
|
106
|
+
rows: params.rows ?? DEFAULT_ROWS,
|
|
107
|
+
seed: params.seed ?? DEFAULT_SEED,
|
|
108
|
+
feather: params.feather ?? DEFAULT_FEATHER
|
|
109
|
+
});
|
|
110
|
+
var assertOptionalIntegerNumber = (value, name) => {
|
|
111
|
+
if (value === undefined) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
if (!Number.isInteger(value)) {
|
|
115
|
+
throw new TypeError(`"${name}" must be an integer, but got ${JSON.stringify(value)}`);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
var validatePixelDissolveParams = (params) => {
|
|
119
|
+
assertEffectParamsObject(params, "Pixel Dissolve");
|
|
120
|
+
assertOptionalFiniteNumber(params.progress, "progress");
|
|
121
|
+
assertOptionalFiniteNumber(params.columns, "columns");
|
|
122
|
+
assertOptionalFiniteNumber(params.rows, "rows");
|
|
123
|
+
assertOptionalFiniteNumber(params.seed, "seed");
|
|
124
|
+
assertOptionalFiniteNumber(params.feather, "feather");
|
|
125
|
+
assertOptionalIntegerNumber(params.columns, "columns");
|
|
126
|
+
assertOptionalIntegerNumber(params.rows, "rows");
|
|
127
|
+
const r = resolve(params);
|
|
128
|
+
validateUnitInterval(r.progress, "progress");
|
|
129
|
+
validateUnitInterval(r.feather, "feather");
|
|
130
|
+
if (r.columns < 1) {
|
|
131
|
+
throw new TypeError(`"columns" must be >= 1, but got ${JSON.stringify(r.columns)}`);
|
|
132
|
+
}
|
|
133
|
+
if (r.rows < 1) {
|
|
134
|
+
throw new TypeError(`"rows" must be >= 1, but got ${JSON.stringify(r.rows)}`);
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
var VERTEX_SHADER = `#version 300 es
|
|
138
|
+
in vec2 aPos;
|
|
139
|
+
in vec2 aUv;
|
|
140
|
+
out vec2 vUv;
|
|
141
|
+
|
|
142
|
+
void main() {
|
|
143
|
+
vUv = aUv;
|
|
144
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
145
|
+
}
|
|
146
|
+
`;
|
|
147
|
+
var FRAGMENT_SHADER = `#version 300 es
|
|
148
|
+
precision highp float;
|
|
149
|
+
|
|
150
|
+
in vec2 vUv;
|
|
151
|
+
out vec4 fragColor;
|
|
152
|
+
|
|
153
|
+
uniform sampler2D uSource;
|
|
154
|
+
uniform float uProgress;
|
|
155
|
+
uniform float uColumns;
|
|
156
|
+
uniform float uRows;
|
|
157
|
+
uniform float uSeed;
|
|
158
|
+
uniform float uFeather;
|
|
159
|
+
|
|
160
|
+
float hash21(vec2 p) {
|
|
161
|
+
vec3 p3 = fract(vec3(p.xyx) * vec3(443.8975, 397.2973, 491.1871));
|
|
162
|
+
p3 += dot(p3, p3.yzx + 19.19);
|
|
163
|
+
return fract((p3.x + p3.y) * p3.z);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
float dissolveMask(float noise, float progress, float feather) {
|
|
167
|
+
float edge = max(feather, 0.0);
|
|
168
|
+
float threshold = 1.0 - clamp(progress, 0.0, 1.0) * (1.0 + edge);
|
|
169
|
+
|
|
170
|
+
if (edge <= 0.0001) {
|
|
171
|
+
return 1.0 - step(threshold, noise);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
return 1.0 - smoothstep(threshold, threshold + edge, noise);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
void main() {
|
|
178
|
+
vec2 divisions = max(vec2(uColumns, uRows), vec2(1.0));
|
|
179
|
+
vec2 gridUv = min(vUv, vec2(1.0) - vec2(0.000001));
|
|
180
|
+
// Stabilize cells when a pixel center falls exactly on a grid boundary.
|
|
181
|
+
vec2 cell = floor(gridUv * divisions + vec2(0.00001));
|
|
182
|
+
vec4 color = texture(uSource, vUv);
|
|
183
|
+
|
|
184
|
+
float noise = hash21(cell + vec2(uSeed, uSeed * 1.618));
|
|
185
|
+
float mask = dissolveMask(noise, uProgress, uFeather);
|
|
186
|
+
|
|
187
|
+
fragColor = vec4(color.rgb * mask, color.a * mask);
|
|
188
|
+
}
|
|
189
|
+
`;
|
|
190
|
+
var compileShader = (gl, type, source) => {
|
|
191
|
+
const shader = gl.createShader(type);
|
|
192
|
+
if (!shader) {
|
|
193
|
+
throw new Error("Failed to create WebGL shader");
|
|
194
|
+
}
|
|
195
|
+
gl.shaderSource(shader, source);
|
|
196
|
+
gl.compileShader(shader);
|
|
197
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
198
|
+
const log = gl.getShaderInfoLog(shader);
|
|
199
|
+
gl.deleteShader(shader);
|
|
200
|
+
throw new Error(`Pixel Dissolve shader compile failed: ${log ?? "(no log)"}`);
|
|
201
|
+
}
|
|
202
|
+
return shader;
|
|
203
|
+
};
|
|
204
|
+
var linkProgram = (gl, vs, fs) => {
|
|
205
|
+
const program = gl.createProgram();
|
|
206
|
+
if (!program) {
|
|
207
|
+
throw new Error("Failed to create WebGL program");
|
|
208
|
+
}
|
|
209
|
+
gl.attachShader(program, vs);
|
|
210
|
+
gl.attachShader(program, fs);
|
|
211
|
+
gl.linkProgram(program);
|
|
212
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
213
|
+
const log = gl.getProgramInfoLog(program);
|
|
214
|
+
gl.deleteProgram(program);
|
|
215
|
+
throw new Error(`Pixel Dissolve program link failed: ${log ?? "(no log)"}`);
|
|
216
|
+
}
|
|
217
|
+
return program;
|
|
218
|
+
};
|
|
219
|
+
var createFullscreenQuad = (gl) => {
|
|
220
|
+
const vao = gl.createVertexArray();
|
|
221
|
+
if (!vao) {
|
|
222
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
223
|
+
}
|
|
224
|
+
gl.bindVertexArray(vao);
|
|
225
|
+
const vbo = gl.createBuffer();
|
|
226
|
+
if (!vbo) {
|
|
227
|
+
throw new Error("Failed to create WebGL buffer");
|
|
228
|
+
}
|
|
229
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
230
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
|
|
231
|
+
return { vao, vbo };
|
|
232
|
+
};
|
|
233
|
+
var pixelDissolve = createEffect({
|
|
234
|
+
type: "dev.remotion.effects.pixelDissolve",
|
|
235
|
+
label: "pixelDissolve()",
|
|
236
|
+
documentationLink: "https://www.remotion.dev/docs/effects/pixel-dissolve",
|
|
237
|
+
calculateKey: (params) => {
|
|
238
|
+
const r = resolve(params);
|
|
239
|
+
return `pixel-dissolve-${r.progress}-${r.columns}-${r.rows}-${r.seed}-${r.feather}`;
|
|
240
|
+
},
|
|
241
|
+
implementations: {
|
|
242
|
+
webgpu: Internals.createEffectImplementation({
|
|
243
|
+
setup: (target) => setupWebGpuSinglePass(target, "pixel-dissolve"),
|
|
244
|
+
apply: ({ source, width, height, params, state, gpuDevice }) => {
|
|
245
|
+
if (!gpuDevice)
|
|
246
|
+
throw new Error("A WebGPU device is required for the pixel-dissolve effect");
|
|
247
|
+
const r = resolve(params);
|
|
248
|
+
const uniformData = new Float32Array([
|
|
249
|
+
r.progress,
|
|
250
|
+
r.columns,
|
|
251
|
+
r.rows,
|
|
252
|
+
r.seed,
|
|
253
|
+
r.feather,
|
|
254
|
+
0,
|
|
255
|
+
0,
|
|
256
|
+
0
|
|
257
|
+
]);
|
|
258
|
+
applyWebGpuSinglePass({
|
|
259
|
+
state,
|
|
260
|
+
source,
|
|
261
|
+
width,
|
|
262
|
+
height,
|
|
263
|
+
device: gpuDevice,
|
|
264
|
+
shader: PIXEL_DISSOLVE_WEBGPU_SHADER,
|
|
265
|
+
uniformData
|
|
266
|
+
});
|
|
267
|
+
},
|
|
268
|
+
cleanup: cleanupWebGpuSinglePass
|
|
269
|
+
}),
|
|
270
|
+
webgl2: Internals.createEffectImplementation({
|
|
271
|
+
setup: (target) => {
|
|
272
|
+
const gl = target.getContext("webgl2", {
|
|
273
|
+
premultipliedAlpha: true,
|
|
274
|
+
alpha: true,
|
|
275
|
+
preserveDrawingBuffer: true
|
|
276
|
+
});
|
|
277
|
+
if (!gl) {
|
|
278
|
+
throw createWebGL2ContextError("pixel dissolve effect");
|
|
279
|
+
}
|
|
280
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
281
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
|
282
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
|
|
283
|
+
const program = linkProgram(gl, vs, fs);
|
|
284
|
+
gl.deleteShader(vs);
|
|
285
|
+
gl.deleteShader(fs);
|
|
286
|
+
const { vao, vbo } = createFullscreenQuad(gl);
|
|
287
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
288
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
289
|
+
gl.enableVertexAttribArray(aPos);
|
|
290
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
291
|
+
gl.enableVertexAttribArray(aUv);
|
|
292
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
293
|
+
gl.bindVertexArray(null);
|
|
294
|
+
const texture = gl.createTexture();
|
|
295
|
+
if (!texture) {
|
|
296
|
+
throw new Error("Failed to create WebGL texture");
|
|
297
|
+
}
|
|
298
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
299
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
300
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
301
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
302
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
303
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
304
|
+
return {
|
|
305
|
+
gl,
|
|
306
|
+
program,
|
|
307
|
+
vao,
|
|
308
|
+
vbo,
|
|
309
|
+
texture,
|
|
310
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
311
|
+
uProgress: gl.getUniformLocation(program, "uProgress"),
|
|
312
|
+
uColumns: gl.getUniformLocation(program, "uColumns"),
|
|
313
|
+
uRows: gl.getUniformLocation(program, "uRows"),
|
|
314
|
+
uSeed: gl.getUniformLocation(program, "uSeed"),
|
|
315
|
+
uFeather: gl.getUniformLocation(program, "uFeather")
|
|
316
|
+
};
|
|
317
|
+
},
|
|
318
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
319
|
+
const r = resolve(params);
|
|
320
|
+
state.gl.viewport(0, 0, width, height);
|
|
321
|
+
state.gl.bindFramebuffer(state.gl.FRAMEBUFFER, null);
|
|
322
|
+
state.gl.clearColor(0, 0, 0, 0);
|
|
323
|
+
state.gl.clear(state.gl.COLOR_BUFFER_BIT);
|
|
324
|
+
state.gl.useProgram(state.program);
|
|
325
|
+
state.gl.bindVertexArray(state.vao);
|
|
326
|
+
state.gl.activeTexture(state.gl.TEXTURE0);
|
|
327
|
+
state.gl.bindTexture(state.gl.TEXTURE_2D, state.texture);
|
|
328
|
+
state.gl.pixelStorei(state.gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
329
|
+
state.gl.texImage2D(state.gl.TEXTURE_2D, 0, state.gl.RGBA, state.gl.RGBA, state.gl.UNSIGNED_BYTE, source);
|
|
330
|
+
if (state.uSource)
|
|
331
|
+
state.gl.uniform1i(state.uSource, 0);
|
|
332
|
+
if (state.uProgress)
|
|
333
|
+
state.gl.uniform1f(state.uProgress, r.progress);
|
|
334
|
+
if (state.uColumns)
|
|
335
|
+
state.gl.uniform1f(state.uColumns, r.columns);
|
|
336
|
+
if (state.uRows)
|
|
337
|
+
state.gl.uniform1f(state.uRows, r.rows);
|
|
338
|
+
if (state.uSeed)
|
|
339
|
+
state.gl.uniform1f(state.uSeed, r.seed);
|
|
340
|
+
if (state.uFeather)
|
|
341
|
+
state.gl.uniform1f(state.uFeather, r.feather);
|
|
342
|
+
state.gl.drawArrays(state.gl.TRIANGLE_STRIP, 0, 4);
|
|
343
|
+
state.gl.bindVertexArray(null);
|
|
344
|
+
state.gl.bindTexture(state.gl.TEXTURE_2D, null);
|
|
345
|
+
state.gl.useProgram(null);
|
|
346
|
+
},
|
|
347
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
348
|
+
gl.deleteTexture(texture);
|
|
349
|
+
gl.deleteBuffer(vbo);
|
|
350
|
+
gl.deleteProgram(program);
|
|
351
|
+
gl.deleteVertexArray(vao);
|
|
352
|
+
}
|
|
353
|
+
})
|
|
354
|
+
},
|
|
355
|
+
schema: pixelDissolveSchema,
|
|
356
|
+
validateParams: validatePixelDissolveParams
|
|
357
|
+
});
|
|
358
|
+
export {
|
|
359
|
+
pixelDissolve
|
|
360
|
+
};
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import {
|
|
2
|
+
assertOptionalFiniteNumber
|
|
3
|
+
} from "./index-wxhvgv2s.mjs";
|
|
4
|
+
import {
|
|
5
|
+
WEBGPU_SINGLE_PASS_VERTEX,
|
|
6
|
+
setupWebGpuSinglePass,
|
|
7
|
+
cleanupWebGpuSinglePass,
|
|
8
|
+
applyWebGpuSinglePass
|
|
9
|
+
} from "./index-tvfexb7s.mjs";
|
|
10
|
+
import {
|
|
11
|
+
assertEffectParamsObject
|
|
12
|
+
} from "./index-4fvp93ps.mjs";
|
|
13
|
+
|
|
14
|
+
// src/pixelate.ts
|
|
15
|
+
import { Internals } from "remotion";
|
|
16
|
+
var { createEffect, createWebGL2ContextError } = Internals;
|
|
17
|
+
var DEFAULT_BLOCK_SIZE = 20;
|
|
18
|
+
var pixelateSchema = {
|
|
19
|
+
blockSize: {
|
|
20
|
+
type: "number",
|
|
21
|
+
min: 1,
|
|
22
|
+
max: 200,
|
|
23
|
+
step: 1,
|
|
24
|
+
default: DEFAULT_BLOCK_SIZE,
|
|
25
|
+
description: "Block size",
|
|
26
|
+
hiddenFromList: false
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
var resolve = (p) => ({
|
|
30
|
+
blockSize: p.blockSize ?? DEFAULT_BLOCK_SIZE
|
|
31
|
+
});
|
|
32
|
+
var validatePixelateParams = (params) => {
|
|
33
|
+
assertEffectParamsObject(params, "Pixelate");
|
|
34
|
+
assertOptionalFiniteNumber(params.blockSize, "blockSize");
|
|
35
|
+
if ((params.blockSize ?? DEFAULT_BLOCK_SIZE) < 1) {
|
|
36
|
+
throw new Error('"blockSize" must be >= 1');
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
var VERTEX_SHADER = `#version 300 es
|
|
40
|
+
|
|
41
|
+
in vec2 aPos;
|
|
42
|
+
in vec2 aUv;
|
|
43
|
+
out vec2 vUv;
|
|
44
|
+
|
|
45
|
+
void main() {
|
|
46
|
+
vUv = aUv;
|
|
47
|
+
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
var FRAGMENT_SHADER = `#version 300 es
|
|
51
|
+
precision highp float;
|
|
52
|
+
|
|
53
|
+
in vec2 vUv;
|
|
54
|
+
out vec4 fragColor;
|
|
55
|
+
uniform sampler2D uSource;
|
|
56
|
+
uniform float uBlockSize;
|
|
57
|
+
uniform vec2 uResolution;
|
|
58
|
+
|
|
59
|
+
void main() {
|
|
60
|
+
vec2 pixelSizeUv = vec2(uBlockSize) / uResolution;
|
|
61
|
+
// Use fragment pixels directly so fractional grid boundaries do not depend on UV interpolation.
|
|
62
|
+
vec2 blockUv = (floor(gl_FragCoord.xy / uBlockSize) + 0.5) * pixelSizeUv;
|
|
63
|
+
fragColor = texture(uSource, blockUv);
|
|
64
|
+
}
|
|
65
|
+
`;
|
|
66
|
+
var compileShader = (gl, type, source) => {
|
|
67
|
+
const shader = gl.createShader(type);
|
|
68
|
+
if (!shader) {
|
|
69
|
+
throw new Error("Failed to create WebGL shader");
|
|
70
|
+
}
|
|
71
|
+
gl.shaderSource(shader, source);
|
|
72
|
+
gl.compileShader(shader);
|
|
73
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
74
|
+
const log = gl.getShaderInfoLog(shader);
|
|
75
|
+
gl.deleteShader(shader);
|
|
76
|
+
throw new Error(`Pixelate shader compile failed: ${log ?? "(no log)"}`);
|
|
77
|
+
}
|
|
78
|
+
return shader;
|
|
79
|
+
};
|
|
80
|
+
var linkProgram = (gl, vs, fs) => {
|
|
81
|
+
const program = gl.createProgram();
|
|
82
|
+
if (!program) {
|
|
83
|
+
throw new Error("Failed to create WebGL program");
|
|
84
|
+
}
|
|
85
|
+
gl.attachShader(program, vs);
|
|
86
|
+
gl.attachShader(program, fs);
|
|
87
|
+
gl.linkProgram(program);
|
|
88
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
89
|
+
const log = gl.getProgramInfoLog(program);
|
|
90
|
+
gl.deleteProgram(program);
|
|
91
|
+
throw new Error(`Pixelate program link failed: ${log ?? "(no log)"}`);
|
|
92
|
+
}
|
|
93
|
+
return program;
|
|
94
|
+
};
|
|
95
|
+
var createPixelateState = (gl) => {
|
|
96
|
+
const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
|
97
|
+
const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
|
|
98
|
+
const program = linkProgram(gl, vs, fs);
|
|
99
|
+
gl.deleteShader(vs);
|
|
100
|
+
gl.deleteShader(fs);
|
|
101
|
+
const vao = gl.createVertexArray();
|
|
102
|
+
if (!vao) {
|
|
103
|
+
throw new Error("Failed to create WebGL vertex array");
|
|
104
|
+
}
|
|
105
|
+
gl.bindVertexArray(vao);
|
|
106
|
+
const data = new Float32Array([
|
|
107
|
+
-1,
|
|
108
|
+
-1,
|
|
109
|
+
0,
|
|
110
|
+
0,
|
|
111
|
+
1,
|
|
112
|
+
-1,
|
|
113
|
+
1,
|
|
114
|
+
0,
|
|
115
|
+
-1,
|
|
116
|
+
1,
|
|
117
|
+
0,
|
|
118
|
+
1,
|
|
119
|
+
1,
|
|
120
|
+
1,
|
|
121
|
+
1,
|
|
122
|
+
1
|
|
123
|
+
]);
|
|
124
|
+
const vbo = gl.createBuffer();
|
|
125
|
+
if (!vbo) {
|
|
126
|
+
throw new Error("Failed to create WebGL buffer");
|
|
127
|
+
}
|
|
128
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
129
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
130
|
+
const aPos = gl.getAttribLocation(program, "aPos");
|
|
131
|
+
const aUv = gl.getAttribLocation(program, "aUv");
|
|
132
|
+
gl.enableVertexAttribArray(aPos);
|
|
133
|
+
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
134
|
+
gl.enableVertexAttribArray(aUv);
|
|
135
|
+
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
136
|
+
gl.bindVertexArray(null);
|
|
137
|
+
const texture = gl.createTexture();
|
|
138
|
+
if (!texture) {
|
|
139
|
+
throw new Error("Failed to create WebGL texture");
|
|
140
|
+
}
|
|
141
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
142
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
143
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
144
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
145
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
146
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
147
|
+
return {
|
|
148
|
+
gl,
|
|
149
|
+
program,
|
|
150
|
+
vao,
|
|
151
|
+
vbo,
|
|
152
|
+
texture,
|
|
153
|
+
uSource: gl.getUniformLocation(program, "uSource"),
|
|
154
|
+
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
155
|
+
uBlockSize: gl.getUniformLocation(program, "uBlockSize")
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
var WEBGPU_SHADER = `
|
|
159
|
+
${WEBGPU_SINGLE_PASS_VERTEX}
|
|
160
|
+
struct Params { resolutionBlockSize: vec4f, }
|
|
161
|
+
@group(0) @binding(0) var source: texture_2d<f32>;
|
|
162
|
+
@group(0) @binding(1) var sourceSampler: sampler;
|
|
163
|
+
@group(0) @binding(2) var<uniform> params: Params;
|
|
164
|
+
@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
|
|
165
|
+
let pixelSizeUv = vec2f(params.resolutionBlockSize.z) / params.resolutionBlockSize.xy;
|
|
166
|
+
// Keep the original grid anchored at the bottom-left corner.
|
|
167
|
+
let pixel = vec2f(input.position.x, params.resolutionBlockSize.y - input.position.y);
|
|
168
|
+
let blockUv = (floor(pixel / params.resolutionBlockSize.z) + 0.5) * pixelSizeUv;
|
|
169
|
+
return textureSampleLevel(source, sourceSampler, vec2f(blockUv.x, 1.0 - blockUv.y), 0);
|
|
170
|
+
}
|
|
171
|
+
`;
|
|
172
|
+
var pixelate = createEffect({
|
|
173
|
+
type: "dev.remotion.effects.pixelate",
|
|
174
|
+
label: "pixelate()",
|
|
175
|
+
documentationLink: "https://www.remotion.dev/docs/effects/pixelate",
|
|
176
|
+
calculateKey: (params) => {
|
|
177
|
+
const r = resolve(params);
|
|
178
|
+
return `pixelate-${r.blockSize}`;
|
|
179
|
+
},
|
|
180
|
+
implementations: {
|
|
181
|
+
webgpu: Internals.createEffectImplementation({
|
|
182
|
+
setup: (target) => setupWebGpuSinglePass(target, "pixelate"),
|
|
183
|
+
apply: ({ source, width, height, params, state, gpuDevice }) => {
|
|
184
|
+
if (!gpuDevice) {
|
|
185
|
+
throw new Error("A WebGPU device is required for the pixelate effect");
|
|
186
|
+
}
|
|
187
|
+
const r = resolve(params);
|
|
188
|
+
applyWebGpuSinglePass({
|
|
189
|
+
source,
|
|
190
|
+
width,
|
|
191
|
+
height,
|
|
192
|
+
state,
|
|
193
|
+
device: gpuDevice,
|
|
194
|
+
shader: WEBGPU_SHADER,
|
|
195
|
+
uniformData: new Float32Array([width, height, r.blockSize, 0])
|
|
196
|
+
});
|
|
197
|
+
},
|
|
198
|
+
cleanup: cleanupWebGpuSinglePass
|
|
199
|
+
}),
|
|
200
|
+
webgl2: Internals.createEffectImplementation({
|
|
201
|
+
setup: (target) => {
|
|
202
|
+
const gl = target.getContext("webgl2", {
|
|
203
|
+
premultipliedAlpha: true,
|
|
204
|
+
alpha: true,
|
|
205
|
+
preserveDrawingBuffer: true
|
|
206
|
+
});
|
|
207
|
+
if (!gl) {
|
|
208
|
+
throw createWebGL2ContextError("pixelate effect");
|
|
209
|
+
}
|
|
210
|
+
return createPixelateState(gl);
|
|
211
|
+
},
|
|
212
|
+
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
213
|
+
const r = resolve(params);
|
|
214
|
+
state.gl.viewport(0, 0, width, height);
|
|
215
|
+
state.gl.clearColor(0, 0, 0, 0);
|
|
216
|
+
state.gl.clear(state.gl.COLOR_BUFFER_BIT);
|
|
217
|
+
state.gl.useProgram(state.program);
|
|
218
|
+
state.gl.bindVertexArray(state.vao);
|
|
219
|
+
state.gl.bindFramebuffer(state.gl.FRAMEBUFFER, null);
|
|
220
|
+
state.gl.activeTexture(state.gl.TEXTURE0);
|
|
221
|
+
state.gl.bindTexture(state.gl.TEXTURE_2D, state.texture);
|
|
222
|
+
state.gl.pixelStorei(state.gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
223
|
+
state.gl.pixelStorei(state.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
224
|
+
state.gl.texImage2D(state.gl.TEXTURE_2D, 0, state.gl.RGBA, state.gl.RGBA, state.gl.UNSIGNED_BYTE, source);
|
|
225
|
+
if (state.uSource)
|
|
226
|
+
state.gl.uniform1i(state.uSource, 0);
|
|
227
|
+
if (state.uBlockSize)
|
|
228
|
+
state.gl.uniform1f(state.uBlockSize, r.blockSize);
|
|
229
|
+
if (state.uResolution)
|
|
230
|
+
state.gl.uniform2f(state.uResolution, width, height);
|
|
231
|
+
state.gl.drawArrays(state.gl.TRIANGLE_STRIP, 0, 4);
|
|
232
|
+
state.gl.bindVertexArray(null);
|
|
233
|
+
state.gl.bindTexture(state.gl.TEXTURE_2D, null);
|
|
234
|
+
state.gl.useProgram(null);
|
|
235
|
+
},
|
|
236
|
+
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
237
|
+
gl.deleteTexture(texture);
|
|
238
|
+
gl.deleteBuffer(vbo);
|
|
239
|
+
gl.deleteProgram(program);
|
|
240
|
+
gl.deleteVertexArray(vao);
|
|
241
|
+
}
|
|
242
|
+
})
|
|
243
|
+
},
|
|
244
|
+
schema: pixelateSchema,
|
|
245
|
+
validateParams: validatePixelateParams
|
|
246
|
+
});
|
|
247
|
+
export {
|
|
248
|
+
pixelate
|
|
249
|
+
};
|