@remotion/effects 4.0.539 → 4.0.540
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 +15 -0
- package/dist/barrel-distortion/webgpu-shader.d.ts +1 -0
- package/dist/bevel-alpha/webgpu-shaders.d.ts +2 -0
- package/dist/burlap-webgpu-shader.d.ts +1 -0
- package/dist/checkerboard-webgpu-shader.d.ts +1 -0
- package/dist/chromatic-aberration/webgpu-shader.d.ts +1 -0
- package/dist/color-correction-webgpu-shader-utils.d.ts +4 -0
- package/dist/color-key-webgpu-shader.d.ts +1 -0
- package/dist/color-matrix-runtime.d.ts +4 -0
- package/dist/contour-lines-webgpu-shader.d.ts +1 -0
- package/dist/corner-pin/webgpu-shader.d.ts +1 -0
- package/dist/cylinder/webgl-shader.d.ts +1 -0
- package/dist/dot-grid-webgpu-shader.d.ts +1 -0
- package/dist/drop-shadow/webgpu-shaders.d.ts +2 -0
- package/dist/emboss-webgpu-shader.d.ts +1 -0
- package/dist/esm/barrel-distortion.mjs +67 -118
- package/dist/esm/bevel-alpha.mjs +247 -196
- package/dist/esm/blur.mjs +101 -115
- package/dist/esm/brightness.mjs +65 -132
- package/dist/esm/burlap.mjs +178 -151
- package/dist/esm/checkerboard.mjs +6 -514
- package/dist/esm/chromatic-aberration.mjs +72 -119
- package/dist/esm/color-correction.mjs +186 -224
- package/dist/esm/color-key.mjs +149 -136
- package/dist/esm/contour-lines.mjs +201 -160
- package/dist/esm/contrast.mjs +65 -132
- package/dist/esm/corner-pin.mjs +4 -390
- package/dist/esm/curves.mjs +195 -211
- package/dist/esm/cylinder.mjs +108 -225
- package/dist/esm/dot-grid.mjs +184 -213
- package/dist/esm/drop-shadow.mjs +162 -180
- package/dist/esm/duotone.mjs +110 -143
- package/dist/esm/emboss.mjs +153 -151
- package/dist/esm/evolve.mjs +228 -154
- package/dist/esm/exposure.mjs +93 -201
- package/dist/esm/film-burn.mjs +298 -0
- package/dist/esm/fisheye.mjs +97 -126
- package/dist/esm/flannel.mjs +158 -156
- package/dist/esm/fractal-noise.mjs +186 -232
- package/dist/esm/glow.mjs +164 -179
- package/dist/esm/grayscale.mjs +56 -122
- package/dist/esm/gridlines.mjs +6 -575
- package/dist/esm/halftone-linear-gradient.mjs +246 -245
- package/dist/esm/halftone.mjs +267 -243
- package/dist/esm/hue.mjs +55 -122
- package/dist/esm/index-00v3hr66.mjs +299 -0
- package/dist/esm/index-0w4eqht8.mjs +351 -0
- package/dist/esm/index-18y0zcy2.mjs +440 -0
- package/dist/esm/index-1m1b1ad7.mjs +520 -0
- package/dist/esm/index-34fxm3ax.mjs +518 -0
- package/dist/esm/index-4fvp93ps.mjs +32 -0
- package/dist/esm/index-4scpn12x.mjs +224 -0
- package/dist/esm/index-4z6pt3ka.mjs +104 -0
- package/dist/esm/index-618ky75w.mjs +51 -0
- package/dist/esm/index-6agxdrvr.mjs +411 -0
- package/dist/esm/index-6jkps947.mjs +120 -0
- package/dist/esm/index-8agtsbw4.mjs +617 -0
- package/dist/esm/index-8jx11jyn.mjs +29 -0
- package/dist/esm/index-8p04sssx.mjs +123 -0
- package/dist/esm/index-afdtmrh2.mjs +596 -0
- package/dist/esm/index-b86qstcs.mjs +18 -0
- package/dist/esm/index-cb77qg3g.mjs +587 -0
- package/dist/esm/index-cdp7tr8x.mjs +122 -0
- package/dist/esm/index-evy8hyah.mjs +55 -0
- package/dist/esm/index-gnsce796.mjs +6 -0
- package/dist/esm/index-kkvzt8b7.mjs +199 -0
- package/dist/esm/index-r0v18b2n.mjs +425 -0
- package/dist/esm/index-rswpzmm5.mjs +926 -0
- package/dist/esm/index-s9mrx750.mjs +97 -0
- package/dist/esm/index-tvfexb7s.mjs +164 -0
- package/dist/esm/index-vp56k1gj.mjs +215 -0
- package/dist/esm/index-wxhvgv2s.mjs +79 -0
- package/dist/esm/index-wy95a41r.mjs +407 -0
- package/dist/esm/index-ysnwfc4t.mjs +306 -0
- package/dist/esm/index.mjs +49 -4053
- package/dist/esm/invert.mjs +54 -122
- package/dist/esm/iris-wipe.mjs +315 -0
- package/dist/esm/lens-blur.mjs +169 -156
- package/dist/esm/levels.mjs +134 -151
- package/dist/esm/light-leak.mjs +6 -416
- package/dist/esm/light-trail.mjs +124 -128
- package/dist/esm/linear-gradient-tint.mjs +4 -424
- package/dist/esm/linear-gradient.mjs +4 -370
- package/dist/esm/linear-progressive-blur.mjs +92 -118
- package/dist/esm/linear-progressive-pixelate.mjs +83 -378
- package/dist/esm/lines.mjs +167 -162
- package/dist/esm/liquid-contours.mjs +192 -153
- package/dist/esm/long-shadows.mjs +278 -251
- package/dist/esm/lut.mjs +123 -23
- package/dist/esm/mirror.mjs +78 -120
- package/dist/esm/noise-displacement.mjs +156 -151
- package/dist/esm/noise.mjs +107 -143
- package/dist/esm/outline.mjs +192 -170
- package/dist/esm/page-turn.mjs +141 -244
- package/dist/esm/paper.mjs +522 -194
- package/dist/esm/pattern.mjs +4 -568
- package/dist/esm/pixel-dissolve.mjs +158 -186
- package/dist/esm/pixelate.mjs +92 -149
- package/dist/esm/radial-progressive-blur.mjs +96 -118
- package/dist/esm/radial-progressive-pixelate.mjs +91 -384
- package/dist/esm/radial-wipe.mjs +224 -0
- package/dist/esm/rain-fall.mjs +114 -0
- package/dist/esm/region-blur.mjs +138 -192
- package/dist/esm/rings.mjs +6 -512
- package/dist/esm/roughen-edges.mjs +180 -156
- package/dist/esm/saturation.mjs +56 -122
- package/dist/esm/scale.mjs +50 -60
- package/dist/esm/scanlines.mjs +115 -149
- package/dist/esm/shadows-highlights.mjs +103 -205
- package/dist/esm/shatter.mjs +133 -153
- package/dist/esm/shine.mjs +192 -227
- package/dist/esm/shrinkwrap.mjs +388 -225
- package/dist/esm/skew.mjs +100 -145
- package/dist/esm/snow-fall.mjs +170 -0
- package/dist/esm/speckle.mjs +192 -210
- package/dist/esm/sphere.mjs +101 -225
- package/dist/esm/starburst.mjs +6 -345
- package/dist/esm/tear.mjs +138 -155
- package/dist/esm/thermal-vision.mjs +135 -152
- package/dist/esm/tile.mjs +5 -184
- package/dist/esm/tint.mjs +80 -132
- package/dist/esm/translate.mjs +55 -137
- package/dist/esm/turbulent-displace.mjs +182 -221
- package/dist/esm/tv-signal-off.mjs +140 -149
- package/dist/esm/venetian-blinds.mjs +91 -140
- package/dist/esm/vibrance.mjs +95 -204
- package/dist/esm/vignette.mjs +136 -155
- package/dist/esm/wave.mjs +88 -47
- package/dist/esm/waves.mjs +181 -169
- package/dist/esm/white-balance.mjs +100 -204
- package/dist/esm/white-noise.mjs +98 -146
- package/dist/esm/zigzag.mjs +6 -575
- package/dist/esm/zoom-blur.mjs +90 -121
- package/dist/evolve.d.ts +46 -10
- package/dist/film-burn-webgpu-shader.d.ts +1 -0
- package/dist/film-burn.d.ts +40 -0
- package/dist/fisheye/webgpu-shader.d.ts +1 -0
- package/dist/flannel-webgpu-shader.d.ts +1 -0
- package/dist/fractal-noise/shader.d.ts +1 -1
- package/dist/fractal-noise/webgpu-shader.d.ts +1 -0
- package/dist/gaussian-blur-webgpu-shader.d.ts +1 -0
- package/dist/glow/webgpu-shaders.d.ts +2 -0
- package/dist/gridlines-webgpu-shader.d.ts +1 -0
- package/dist/halftone-linear-gradient-webgpu-shader.d.ts +1 -0
- package/dist/halftone-webgpu-shader.d.ts +1 -0
- package/dist/iris-wipe.d.ts +78 -0
- package/dist/lens-blur/webgpu-shader.d.ts +1 -0
- package/dist/light-leak-webgpu-shader.d.ts +1 -0
- package/dist/light-trail/webgpu-shader.d.ts +1 -0
- package/dist/linear-gradient-tint-webgpu-shader.d.ts +1 -0
- package/dist/linear-gradient-webgpu-shader.d.ts +1 -0
- package/dist/lines-webgpu-shader.d.ts +1 -0
- package/dist/liquid-contours-webgpu-shader.d.ts +1 -0
- package/dist/long-shadows-webgpu-shaders.d.ts +2 -0
- package/dist/lut/webgpu-shader.d.ts +1 -0
- package/dist/mirror/webgpu-shader.d.ts +1 -0
- package/dist/noise-displacement-webgpu-shader.d.ts +1 -0
- package/dist/noise-webgpu-shader.d.ts +1 -0
- package/dist/outline/webgpu-shader.d.ts +1 -0
- package/dist/page-turn/webgl-shader.d.ts +1 -0
- package/dist/paper-webgpu-shader.d.ts +2 -0
- package/dist/pattern-webgpu-shader.d.ts +1 -0
- package/dist/pixel-dissolve-webgpu-shader.d.ts +1 -0
- package/dist/progressive-pixelate-runtime.d.ts +1 -0
- package/dist/radial-wipe.d.ts +19 -0
- package/dist/rain-fall.d.ts +143 -0
- package/dist/rect-transform-runtime.d.ts +11 -0
- package/dist/region-blur/webgpu-shader.d.ts +1 -0
- package/dist/rings-webgpu-shader.d.ts +1 -0
- package/dist/roughen-edges-webgpu-shader.d.ts +1 -0
- package/dist/shatter/webgpu-shader.d.ts +1 -0
- package/dist/shine-webgpu-shader.d.ts +1 -0
- package/dist/shrinkwrap-webgpu-shader.d.ts +1 -0
- package/dist/single-pass-runtime.d.ts +18 -0
- package/dist/skew-webgpu-shader.d.ts +1 -0
- package/dist/snow-fall.d.ts +208 -0
- package/dist/speckle-webgpu-shader.d.ts +1 -0
- package/dist/sphere/webgl-shader.d.ts +1 -0
- package/dist/starburst-webgpu-shader.d.ts +1 -0
- package/dist/tear-webgpu-shader.d.ts +1 -0
- package/dist/thermal-vision-webgpu-shader.d.ts +1 -0
- package/dist/tile-gpu-runtime.d.ts +24 -0
- package/dist/turbulent-displace/webgpu-shader.d.ts +1 -0
- package/dist/value-noise-webgpu-shader.d.ts +1 -0
- package/dist/vignette-webgpu-shader.d.ts +1 -0
- package/dist/wave/wave-runtime.d.ts +2 -1
- package/dist/wave/webgpu-shader.d.ts +1 -0
- package/dist/waves-webgpu-shader.d.ts +1 -0
- package/dist/weather/params.d.ts +149 -0
- package/dist/weather/runtime.d.ts +52 -0
- package/dist/weather/shaders.d.ts +4 -0
- package/dist/weather/webgpu-runtime.d.ts +36 -0
- package/dist/weather/webgpu-shader.d.ts +1 -0
- package/dist/webgl-projection-runtime.d.ts +18 -0
- package/dist/webgpu-color-state.d.ts +10 -0
- package/dist/webgpu-mesh-runtime.d.ts +46 -0
- package/dist/webgpu-multipass-runtime.d.ts +50 -0
- package/dist/webgpu-projection-runtime.d.ts +9 -5
- package/dist/webgpu-single-pass-runtime.d.ts +47 -0
- package/dist/white-noise-webgpu-shader.d.ts +1 -0
- package/dist/zigzag-webgpu-shader.d.ts +1 -0
- package/dist/zoom-blur/webgpu-shader.d.ts +1 -0
- package/package.json +43 -3
package/dist/esm/index.mjs
CHANGED
|
@@ -1,4055 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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/checkerboard.ts
|
|
110
|
-
var { createEffect, createWebGL2ContextError } = Internals;
|
|
111
|
-
var DEFAULT_COLORS = ["#dff4ff", "#7cc6ff"];
|
|
112
|
-
var DEFAULT_CELL_SIZE = 80;
|
|
113
|
-
var DEFAULT_GAP = 0;
|
|
114
|
-
var DEFAULT_ANGLE = 0;
|
|
115
|
-
var DEFAULT_OFFSET_X = 0;
|
|
116
|
-
var DEFAULT_OFFSET_Y = 0;
|
|
117
|
-
var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
|
|
118
|
-
var checkerboardSchema = {
|
|
119
|
-
colors: {
|
|
120
|
-
type: "array",
|
|
121
|
-
item: {
|
|
122
|
-
type: "color"
|
|
123
|
-
},
|
|
124
|
-
default: DEFAULT_COLORS,
|
|
125
|
-
minLength: 2,
|
|
126
|
-
newItemDefault: "#ff0000",
|
|
127
|
-
description: "Colors",
|
|
128
|
-
keyframable: false
|
|
129
|
-
},
|
|
130
|
-
cellSize: {
|
|
131
|
-
type: "number",
|
|
132
|
-
min: 0.1,
|
|
133
|
-
max: 800,
|
|
134
|
-
step: 0.1,
|
|
135
|
-
default: DEFAULT_CELL_SIZE,
|
|
136
|
-
description: "Cell size",
|
|
137
|
-
hiddenFromList: false
|
|
138
|
-
},
|
|
139
|
-
gap: {
|
|
140
|
-
type: "number",
|
|
141
|
-
min: 0,
|
|
142
|
-
max: 400,
|
|
143
|
-
step: 0.1,
|
|
144
|
-
default: DEFAULT_GAP,
|
|
145
|
-
description: "Gap",
|
|
146
|
-
hiddenFromList: false
|
|
147
|
-
},
|
|
148
|
-
angle: {
|
|
149
|
-
type: "rotation-degrees",
|
|
150
|
-
step: 1,
|
|
151
|
-
default: DEFAULT_ANGLE,
|
|
152
|
-
description: "Angle"
|
|
153
|
-
},
|
|
154
|
-
offsetX: {
|
|
155
|
-
type: "number",
|
|
156
|
-
step: 0.1,
|
|
157
|
-
default: DEFAULT_OFFSET_X,
|
|
158
|
-
description: "Offset X",
|
|
159
|
-
hiddenFromList: false
|
|
160
|
-
},
|
|
161
|
-
offsetY: {
|
|
162
|
-
type: "number",
|
|
163
|
-
step: 0.1,
|
|
164
|
-
default: DEFAULT_OFFSET_Y,
|
|
165
|
-
description: "Offset Y",
|
|
166
|
-
hiddenFromList: false
|
|
167
|
-
},
|
|
168
|
-
maskToSourceAlpha: {
|
|
169
|
-
type: "boolean",
|
|
170
|
-
default: DEFAULT_MASK_TO_SOURCE_ALPHA,
|
|
171
|
-
description: "Mask to source alpha"
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
var resolve = (p) => {
|
|
175
|
-
const cellSize = p.cellSize ?? DEFAULT_CELL_SIZE;
|
|
176
|
-
const gap = p.gap ?? DEFAULT_GAP;
|
|
177
|
-
return {
|
|
178
|
-
colors: p.colors ?? DEFAULT_COLORS,
|
|
179
|
-
cellSize,
|
|
180
|
-
spacing: cellSize + gap,
|
|
181
|
-
angle: p.angle ?? DEFAULT_ANGLE,
|
|
182
|
-
offsetX: p.offsetX ?? DEFAULT_OFFSET_X,
|
|
183
|
-
offsetY: p.offsetY ?? DEFAULT_OFFSET_Y,
|
|
184
|
-
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
|
|
185
|
-
};
|
|
186
|
-
};
|
|
187
|
-
var validatePositive = (value, name) => {
|
|
188
|
-
if (value <= 0) {
|
|
189
|
-
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
var validateNonNegative2 = (value, name) => {
|
|
193
|
-
if (value < 0) {
|
|
194
|
-
throw new TypeError(`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`);
|
|
195
|
-
}
|
|
196
|
-
};
|
|
197
|
-
var validateColors = (colors) => {
|
|
198
|
-
if (colors === undefined) {
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
201
|
-
if (!Array.isArray(colors) || colors.length < 2) {
|
|
202
|
-
throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
|
|
203
|
-
}
|
|
204
|
-
for (let i = 0;i < colors.length; i++) {
|
|
205
|
-
assertRequiredColor(colors[i], `colors[${i}]`);
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
var validateCheckerboardParams = (params) => {
|
|
209
|
-
assertEffectParamsObject(params, "Checkerboard");
|
|
210
|
-
validateColors(params.colors);
|
|
211
|
-
assertOptionalFiniteNumber(params.cellSize, "cellSize");
|
|
212
|
-
assertOptionalFiniteNumber(params.gap, "gap");
|
|
213
|
-
assertOptionalFiniteNumber(params.angle, "angle");
|
|
214
|
-
assertOptionalFiniteNumber(params.offsetX, "offsetX");
|
|
215
|
-
assertOptionalFiniteNumber(params.offsetY, "offsetY");
|
|
216
|
-
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
217
|
-
const cellSize = params.cellSize ?? DEFAULT_CELL_SIZE;
|
|
218
|
-
const gap = params.gap ?? DEFAULT_GAP;
|
|
219
|
-
validatePositive(cellSize, "cellSize");
|
|
220
|
-
validateNonNegative2(gap, "gap");
|
|
221
|
-
};
|
|
222
|
-
var CHECKERBOARD_VS = `#version 300 es
|
|
223
|
-
in vec2 aPos;
|
|
224
|
-
in vec2 aUv;
|
|
225
|
-
out vec2 vUv;
|
|
226
|
-
|
|
227
|
-
void main() {
|
|
228
|
-
vUv = aUv;
|
|
229
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
230
|
-
}
|
|
231
|
-
`;
|
|
232
|
-
var CHECKERBOARD_FS = `#version 300 es
|
|
233
|
-
precision highp float;
|
|
234
|
-
|
|
235
|
-
in vec2 vUv;
|
|
236
|
-
out vec4 fragColor;
|
|
237
|
-
|
|
238
|
-
uniform sampler2D uSource;
|
|
239
|
-
uniform sampler2D uPalette;
|
|
240
|
-
uniform vec2 uResolution;
|
|
241
|
-
uniform float uNumColors;
|
|
242
|
-
uniform float uCellSize;
|
|
243
|
-
uniform float uSpacing;
|
|
244
|
-
uniform float uAngle;
|
|
245
|
-
uniform vec2 uOffset;
|
|
246
|
-
uniform bool uMaskToSourceAlpha;
|
|
247
|
-
|
|
248
|
-
void main() {
|
|
249
|
-
vec4 texColor = texture(uSource, vUv);
|
|
250
|
-
float cellSize = max(uCellSize, 0.001);
|
|
251
|
-
float spacing = max(uSpacing, 0.001);
|
|
252
|
-
vec2 centered = vUv * uResolution - uResolution * 0.5;
|
|
253
|
-
float s = sin(uAngle);
|
|
254
|
-
float c = cos(uAngle);
|
|
255
|
-
vec2 rotated = vec2(
|
|
256
|
-
centered.x * c - centered.y * s,
|
|
257
|
-
centered.x * s + centered.y * c
|
|
258
|
-
);
|
|
259
|
-
vec2 position = rotated + uOffset;
|
|
260
|
-
vec2 localPosition = mod(position, spacing);
|
|
261
|
-
if (localPosition.x < 0.0) {
|
|
262
|
-
localPosition.x += spacing;
|
|
263
|
-
}
|
|
264
|
-
if (localPosition.y < 0.0) {
|
|
265
|
-
localPosition.y += spacing;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
if (localPosition.x > cellSize || localPosition.y > cellSize) {
|
|
269
|
-
fragColor = texColor;
|
|
270
|
-
return;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
vec2 cell = floor(position / spacing);
|
|
274
|
-
float colorIndex = mod(cell.x + cell.y, uNumColors);
|
|
275
|
-
if (colorIndex < 0.0) {
|
|
276
|
-
colorIndex += uNumColors;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
float texCoord = (colorIndex + 0.5) / uNumColors;
|
|
280
|
-
vec4 checkerColor = texture(uPalette, vec2(texCoord, 0.5));
|
|
281
|
-
float checkerAlpha = checkerColor.a;
|
|
282
|
-
vec3 premultipliedChecker = checkerColor.rgb * checkerAlpha;
|
|
283
|
-
|
|
284
|
-
if (uMaskToSourceAlpha) {
|
|
285
|
-
fragColor = vec4(
|
|
286
|
-
premultipliedChecker * texColor.a + texColor.rgb * (1.0 - checkerAlpha),
|
|
287
|
-
texColor.a
|
|
288
|
-
);
|
|
289
|
-
return;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
fragColor = vec4(
|
|
293
|
-
premultipliedChecker + texColor.rgb * (1.0 - checkerAlpha),
|
|
294
|
-
checkerAlpha + texColor.a * (1.0 - checkerAlpha)
|
|
295
|
-
);
|
|
296
|
-
}
|
|
297
|
-
`;
|
|
298
|
-
var compileShader = (gl, type, source) => {
|
|
299
|
-
const shader = gl.createShader(type);
|
|
300
|
-
if (!shader) {
|
|
301
|
-
throw new Error("Failed to create WebGL shader");
|
|
302
|
-
}
|
|
303
|
-
gl.shaderSource(shader, source);
|
|
304
|
-
gl.compileShader(shader);
|
|
305
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
306
|
-
const log = gl.getShaderInfoLog(shader);
|
|
307
|
-
gl.deleteShader(shader);
|
|
308
|
-
throw new Error(`Checkerboard shader compile failed: ${log ?? "(no log)"}`);
|
|
309
|
-
}
|
|
310
|
-
return shader;
|
|
311
|
-
};
|
|
312
|
-
var linkProgram = (gl, vs, fs) => {
|
|
313
|
-
const program = gl.createProgram();
|
|
314
|
-
if (!program) {
|
|
315
|
-
throw new Error("Failed to create WebGL program");
|
|
316
|
-
}
|
|
317
|
-
gl.attachShader(program, vs);
|
|
318
|
-
gl.attachShader(program, fs);
|
|
319
|
-
gl.linkProgram(program);
|
|
320
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
321
|
-
const log = gl.getProgramInfoLog(program);
|
|
322
|
-
gl.deleteProgram(program);
|
|
323
|
-
throw new Error(`Checkerboard program link failed: ${log ?? "(no log)"}`);
|
|
324
|
-
}
|
|
325
|
-
return program;
|
|
326
|
-
};
|
|
327
|
-
var createProgram = (gl, vertexSource, fragmentSource) => {
|
|
328
|
-
const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
|
|
329
|
-
const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
330
|
-
const program = linkProgram(gl, vs, fs);
|
|
331
|
-
gl.deleteShader(vs);
|
|
332
|
-
gl.deleteShader(fs);
|
|
333
|
-
return program;
|
|
334
|
-
};
|
|
335
|
-
var createTexture = (gl, filter) => {
|
|
336
|
-
const texture = gl.createTexture();
|
|
337
|
-
if (!texture) {
|
|
338
|
-
throw new Error("Failed to create WebGL texture");
|
|
339
|
-
}
|
|
340
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
341
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
342
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
343
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
344
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
345
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
346
|
-
return texture;
|
|
347
|
-
};
|
|
348
|
-
var setupCheckerboard = (target) => {
|
|
349
|
-
const gl = target.getContext("webgl2", {
|
|
350
|
-
premultipliedAlpha: true,
|
|
351
|
-
alpha: true,
|
|
352
|
-
preserveDrawingBuffer: true
|
|
353
|
-
});
|
|
354
|
-
if (!gl) {
|
|
355
|
-
throw createWebGL2ContextError("checkerboard effect");
|
|
356
|
-
}
|
|
357
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
358
|
-
const program = createProgram(gl, CHECKERBOARD_VS, CHECKERBOARD_FS);
|
|
359
|
-
const vao = gl.createVertexArray();
|
|
360
|
-
if (!vao) {
|
|
361
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
362
|
-
}
|
|
363
|
-
gl.bindVertexArray(vao);
|
|
364
|
-
const data = new Float32Array([
|
|
365
|
-
-1,
|
|
366
|
-
-1,
|
|
367
|
-
0,
|
|
368
|
-
0,
|
|
369
|
-
1,
|
|
370
|
-
-1,
|
|
371
|
-
1,
|
|
372
|
-
0,
|
|
373
|
-
-1,
|
|
374
|
-
1,
|
|
375
|
-
0,
|
|
376
|
-
1,
|
|
377
|
-
1,
|
|
378
|
-
1,
|
|
379
|
-
1,
|
|
380
|
-
1
|
|
381
|
-
]);
|
|
382
|
-
const vbo = gl.createBuffer();
|
|
383
|
-
if (!vbo) {
|
|
384
|
-
throw new Error("Failed to create WebGL buffer");
|
|
385
|
-
}
|
|
386
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
387
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
388
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
389
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
390
|
-
gl.enableVertexAttribArray(aPos);
|
|
391
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
392
|
-
gl.enableVertexAttribArray(aUv);
|
|
393
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
394
|
-
gl.bindVertexArray(null);
|
|
395
|
-
const colorCanvas = document.createElement("canvas");
|
|
396
|
-
colorCanvas.width = 1;
|
|
397
|
-
colorCanvas.height = 1;
|
|
398
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
399
|
-
if (!colorCtx) {
|
|
400
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
401
|
-
}
|
|
402
|
-
return {
|
|
403
|
-
gl,
|
|
404
|
-
program,
|
|
405
|
-
vao,
|
|
406
|
-
vbo,
|
|
407
|
-
sourceTexture: createTexture(gl, gl.LINEAR),
|
|
408
|
-
paletteTexture: createTexture(gl, gl.NEAREST),
|
|
409
|
-
colorCtx,
|
|
410
|
-
uniforms: {
|
|
411
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
412
|
-
uPalette: gl.getUniformLocation(program, "uPalette"),
|
|
413
|
-
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
414
|
-
uNumColors: gl.getUniformLocation(program, "uNumColors"),
|
|
415
|
-
uCellSize: gl.getUniformLocation(program, "uCellSize"),
|
|
416
|
-
uSpacing: gl.getUniformLocation(program, "uSpacing"),
|
|
417
|
-
uAngle: gl.getUniformLocation(program, "uAngle"),
|
|
418
|
-
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
419
|
-
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
420
|
-
},
|
|
421
|
-
cachedPaletteKey: "",
|
|
422
|
-
palettePixelData: new Uint8Array(0)
|
|
423
|
-
};
|
|
424
|
-
};
|
|
425
|
-
var updatePalette = (state, colors) => {
|
|
426
|
-
const paletteKey = colors.join("|");
|
|
427
|
-
const paletteDirty = state.cachedPaletteKey !== paletteKey;
|
|
428
|
-
if (!paletteDirty) {
|
|
429
|
-
return false;
|
|
430
|
-
}
|
|
431
|
-
state.cachedPaletteKey = paletteKey;
|
|
432
|
-
const len = colors.length * 4;
|
|
433
|
-
if (state.palettePixelData.length !== len) {
|
|
434
|
-
state.palettePixelData = new Uint8Array(len);
|
|
435
|
-
}
|
|
436
|
-
const { palettePixelData } = state;
|
|
437
|
-
for (let i = 0;i < colors.length; i++) {
|
|
438
|
-
const color = parseColorRgba(state.colorCtx, colors[i]);
|
|
439
|
-
palettePixelData[i * 4] = color[0];
|
|
440
|
-
palettePixelData[i * 4 + 1] = color[1];
|
|
441
|
-
palettePixelData[i * 4 + 2] = color[2];
|
|
442
|
-
palettePixelData[i * 4 + 3] = color[3];
|
|
443
|
-
}
|
|
444
|
-
return true;
|
|
445
|
-
};
|
|
446
|
-
var checkerboard = createEffect({
|
|
447
|
-
type: "remotion/checkerboard",
|
|
448
|
-
label: "checkerboard()",
|
|
449
|
-
documentationLink: "https://www.remotion.dev/docs/effects/checkerboard",
|
|
450
|
-
backend: "webgl2",
|
|
451
|
-
calculateKey: (params) => {
|
|
452
|
-
const r = resolve(params);
|
|
453
|
-
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
454
|
-
return `checkerboard-${r.colors.join("|")}-${r.cellSize}-${r.spacing}-${r.angle}-${r.offsetX}-${r.offsetY}${maskSuffix}`;
|
|
455
|
-
},
|
|
456
|
-
setup: (target) => setupCheckerboard(target),
|
|
457
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
458
|
-
const r = resolve(params);
|
|
459
|
-
const paletteDirty = updatePalette(state, r.colors);
|
|
460
|
-
const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
|
|
461
|
-
gl.viewport(0, 0, width, height);
|
|
462
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
463
|
-
gl.clearColor(0, 0, 0, 0);
|
|
464
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
465
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
466
|
-
gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
|
|
467
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
468
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
469
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
470
|
-
gl.activeTexture(gl.TEXTURE1);
|
|
471
|
-
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
472
|
-
if (paletteDirty) {
|
|
473
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
474
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
475
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
|
|
476
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
477
|
-
}
|
|
478
|
-
gl.useProgram(program);
|
|
479
|
-
if (uniforms.uSource)
|
|
480
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
481
|
-
if (uniforms.uPalette)
|
|
482
|
-
gl.uniform1i(uniforms.uPalette, 1);
|
|
483
|
-
if (uniforms.uResolution)
|
|
484
|
-
gl.uniform2f(uniforms.uResolution, width, height);
|
|
485
|
-
if (uniforms.uNumColors)
|
|
486
|
-
gl.uniform1f(uniforms.uNumColors, r.colors.length);
|
|
487
|
-
if (uniforms.uCellSize)
|
|
488
|
-
gl.uniform1f(uniforms.uCellSize, r.cellSize);
|
|
489
|
-
if (uniforms.uSpacing)
|
|
490
|
-
gl.uniform1f(uniforms.uSpacing, r.spacing);
|
|
491
|
-
if (uniforms.uAngle)
|
|
492
|
-
gl.uniform1f(uniforms.uAngle, r.angle * Math.PI / 180);
|
|
493
|
-
if (uniforms.uOffset)
|
|
494
|
-
gl.uniform2f(uniforms.uOffset, r.offsetX, r.offsetY);
|
|
495
|
-
if (uniforms.uMaskToSourceAlpha)
|
|
496
|
-
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
497
|
-
gl.bindVertexArray(vao);
|
|
498
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
499
|
-
gl.bindVertexArray(null);
|
|
500
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
501
|
-
gl.useProgram(null);
|
|
502
|
-
},
|
|
503
|
-
cleanup: ({ gl, program, vao, vbo, sourceTexture, paletteTexture }) => {
|
|
504
|
-
gl.deleteTexture(sourceTexture);
|
|
505
|
-
gl.deleteTexture(paletteTexture);
|
|
506
|
-
gl.deleteBuffer(vbo);
|
|
507
|
-
gl.deleteProgram(program);
|
|
508
|
-
gl.deleteVertexArray(vao);
|
|
509
|
-
},
|
|
510
|
-
schema: checkerboardSchema,
|
|
511
|
-
validateParams: validateCheckerboardParams
|
|
512
|
-
});
|
|
513
|
-
// src/pattern.ts
|
|
514
|
-
import { Internals as Internals2 } from "remotion";
|
|
515
|
-
var { createEffect: createEffect2, createWebGL2ContextError: createWebGL2ContextError2 } = Internals2;
|
|
516
|
-
var DEFAULT_SCALE = 0.1;
|
|
517
|
-
var DEFAULT_CROP = 0;
|
|
518
|
-
var DEFAULT_GAP2 = 0;
|
|
519
|
-
var DEFAULT_OFFSET = 0;
|
|
520
|
-
var DEFAULT_OFFSET_EVERY = 0;
|
|
521
|
-
var DEFAULT_ORIGIN = [0, 0];
|
|
522
|
-
var DEFAULT_WRAP = true;
|
|
523
|
-
var patternSchema = {
|
|
524
|
-
scale: {
|
|
525
|
-
type: "number",
|
|
526
|
-
min: 0.001,
|
|
527
|
-
max: 2,
|
|
528
|
-
step: 0.01,
|
|
529
|
-
default: DEFAULT_SCALE,
|
|
530
|
-
description: "Scale",
|
|
531
|
-
hiddenFromList: false
|
|
532
|
-
},
|
|
533
|
-
cropLeft: {
|
|
534
|
-
type: "number",
|
|
535
|
-
step: 1,
|
|
536
|
-
default: DEFAULT_CROP,
|
|
537
|
-
description: "Crop left",
|
|
538
|
-
hiddenFromList: false
|
|
539
|
-
},
|
|
540
|
-
cropTop: {
|
|
541
|
-
type: "number",
|
|
542
|
-
step: 1,
|
|
543
|
-
default: DEFAULT_CROP,
|
|
544
|
-
description: "Crop top",
|
|
545
|
-
hiddenFromList: false
|
|
546
|
-
},
|
|
547
|
-
cropRight: {
|
|
548
|
-
type: "number",
|
|
549
|
-
step: 1,
|
|
550
|
-
default: DEFAULT_CROP,
|
|
551
|
-
description: "Crop right",
|
|
552
|
-
hiddenFromList: false
|
|
553
|
-
},
|
|
554
|
-
cropBottom: {
|
|
555
|
-
type: "number",
|
|
556
|
-
step: 1,
|
|
557
|
-
default: DEFAULT_CROP,
|
|
558
|
-
description: "Crop bottom",
|
|
559
|
-
hiddenFromList: false
|
|
560
|
-
},
|
|
561
|
-
gapX: {
|
|
562
|
-
type: "number",
|
|
563
|
-
step: 1,
|
|
564
|
-
default: DEFAULT_GAP2,
|
|
565
|
-
description: "Gap X",
|
|
566
|
-
hiddenFromList: false
|
|
567
|
-
},
|
|
568
|
-
gapY: {
|
|
569
|
-
type: "number",
|
|
570
|
-
step: 1,
|
|
571
|
-
default: DEFAULT_GAP2,
|
|
572
|
-
description: "Gap Y",
|
|
573
|
-
hiddenFromList: false
|
|
574
|
-
},
|
|
575
|
-
offsetU: {
|
|
576
|
-
type: "number",
|
|
577
|
-
step: 0.01,
|
|
578
|
-
default: DEFAULT_OFFSET,
|
|
579
|
-
description: "Offset U",
|
|
580
|
-
hiddenFromList: false
|
|
581
|
-
},
|
|
582
|
-
offsetV: {
|
|
583
|
-
type: "number",
|
|
584
|
-
step: 0.01,
|
|
585
|
-
default: DEFAULT_OFFSET,
|
|
586
|
-
description: "Offset V",
|
|
587
|
-
hiddenFromList: false
|
|
588
|
-
},
|
|
589
|
-
rowOffset: {
|
|
590
|
-
type: "number",
|
|
591
|
-
step: 1,
|
|
592
|
-
default: DEFAULT_OFFSET,
|
|
593
|
-
description: "Row offset",
|
|
594
|
-
hiddenFromList: false
|
|
595
|
-
},
|
|
596
|
-
rowOffsetEvery: {
|
|
597
|
-
type: "number",
|
|
598
|
-
min: 0,
|
|
599
|
-
step: 1,
|
|
600
|
-
integer: true,
|
|
601
|
-
default: DEFAULT_OFFSET_EVERY,
|
|
602
|
-
description: "Row offset every",
|
|
603
|
-
hiddenFromList: false
|
|
604
|
-
},
|
|
605
|
-
columnOffset: {
|
|
606
|
-
type: "number",
|
|
607
|
-
step: 1,
|
|
608
|
-
default: DEFAULT_OFFSET,
|
|
609
|
-
description: "Column offset",
|
|
610
|
-
hiddenFromList: false
|
|
611
|
-
},
|
|
612
|
-
columnOffsetEvery: {
|
|
613
|
-
type: "number",
|
|
614
|
-
min: 0,
|
|
615
|
-
step: 1,
|
|
616
|
-
integer: true,
|
|
617
|
-
default: DEFAULT_OFFSET_EVERY,
|
|
618
|
-
description: "Column offset every",
|
|
619
|
-
hiddenFromList: false
|
|
620
|
-
},
|
|
621
|
-
origin: {
|
|
622
|
-
type: "uv-coordinate",
|
|
623
|
-
min: 0,
|
|
624
|
-
max: 1,
|
|
625
|
-
step: 0.01,
|
|
626
|
-
default: DEFAULT_ORIGIN,
|
|
627
|
-
description: "Origin"
|
|
628
|
-
},
|
|
629
|
-
wrap: {
|
|
630
|
-
type: "boolean",
|
|
631
|
-
default: DEFAULT_WRAP,
|
|
632
|
-
description: "Wrap"
|
|
633
|
-
}
|
|
634
|
-
};
|
|
635
|
-
var resolve2 = (p) => ({
|
|
636
|
-
scale: p.scale ?? DEFAULT_SCALE,
|
|
637
|
-
cropLeft: p.cropLeft ?? DEFAULT_CROP,
|
|
638
|
-
cropTop: p.cropTop ?? DEFAULT_CROP,
|
|
639
|
-
cropRight: p.cropRight ?? DEFAULT_CROP,
|
|
640
|
-
cropBottom: p.cropBottom ?? DEFAULT_CROP,
|
|
641
|
-
gapX: p.gapX ?? DEFAULT_GAP2,
|
|
642
|
-
gapY: p.gapY ?? DEFAULT_GAP2,
|
|
643
|
-
offsetU: p.offsetU ?? DEFAULT_OFFSET,
|
|
644
|
-
offsetV: p.offsetV ?? DEFAULT_OFFSET,
|
|
645
|
-
rowOffset: p.rowOffset ?? DEFAULT_OFFSET,
|
|
646
|
-
rowOffsetEvery: p.rowOffsetEvery ?? DEFAULT_OFFSET_EVERY,
|
|
647
|
-
columnOffset: p.columnOffset ?? DEFAULT_OFFSET,
|
|
648
|
-
columnOffsetEvery: p.columnOffsetEvery ?? DEFAULT_OFFSET_EVERY,
|
|
649
|
-
origin: [...p.origin ?? DEFAULT_ORIGIN],
|
|
650
|
-
wrap: p.wrap ?? DEFAULT_WRAP
|
|
651
|
-
});
|
|
652
|
-
var assertOptionalUvCoordinate = (value, name) => {
|
|
653
|
-
if (value === undefined) {
|
|
654
|
-
return;
|
|
655
|
-
}
|
|
656
|
-
if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
|
|
657
|
-
throw new TypeError(`"${name}" must be a [number, number] tuple`);
|
|
658
|
-
}
|
|
659
|
-
};
|
|
660
|
-
var assertOptionalInteger = (value, name) => {
|
|
661
|
-
if (value === undefined) {
|
|
662
|
-
return;
|
|
663
|
-
}
|
|
664
|
-
if (!Number.isInteger(value)) {
|
|
665
|
-
throw new TypeError(`"${name}" must be an integer, but got ${JSON.stringify(value)}`);
|
|
666
|
-
}
|
|
667
|
-
};
|
|
668
|
-
var validatePositive2 = (value, name) => {
|
|
669
|
-
if (value <= 0) {
|
|
670
|
-
throw new TypeError(`"${name}" must be > 0`);
|
|
671
|
-
}
|
|
672
|
-
};
|
|
673
|
-
var validateAtLeast = (value, min, name) => {
|
|
674
|
-
if (value < min) {
|
|
675
|
-
throw new TypeError(`"${name}" must be >= ${min}, but got ${JSON.stringify(value)}`);
|
|
676
|
-
}
|
|
677
|
-
};
|
|
678
|
-
var validatePatternParams = (params) => {
|
|
679
|
-
assertEffectParamsObject(params, "Pattern");
|
|
680
|
-
assertOptionalFiniteNumber(params.scale, "scale");
|
|
681
|
-
assertOptionalFiniteNumber(params.cropLeft, "cropLeft");
|
|
682
|
-
assertOptionalFiniteNumber(params.cropTop, "cropTop");
|
|
683
|
-
assertOptionalFiniteNumber(params.cropRight, "cropRight");
|
|
684
|
-
assertOptionalFiniteNumber(params.cropBottom, "cropBottom");
|
|
685
|
-
assertOptionalFiniteNumber(params.gapX, "gapX");
|
|
686
|
-
assertOptionalFiniteNumber(params.gapY, "gapY");
|
|
687
|
-
assertOptionalFiniteNumber(params.offsetU, "offsetU");
|
|
688
|
-
assertOptionalFiniteNumber(params.offsetV, "offsetV");
|
|
689
|
-
assertOptionalFiniteNumber(params.rowOffset, "rowOffset");
|
|
690
|
-
assertOptionalFiniteNumber(params.rowOffsetEvery, "rowOffsetEvery");
|
|
691
|
-
assertOptionalFiniteNumber(params.columnOffset, "columnOffset");
|
|
692
|
-
assertOptionalFiniteNumber(params.columnOffsetEvery, "columnOffsetEvery");
|
|
693
|
-
assertOptionalUvCoordinate(params.origin, "origin");
|
|
694
|
-
assertOptionalBoolean(params.wrap, "wrap");
|
|
695
|
-
assertOptionalInteger(params.rowOffsetEvery, "rowOffsetEvery");
|
|
696
|
-
assertOptionalInteger(params.columnOffsetEvery, "columnOffsetEvery");
|
|
697
|
-
const r = resolve2(params);
|
|
698
|
-
validatePositive2(r.scale, "scale");
|
|
699
|
-
validateAtLeast(r.rowOffsetEvery, 0, "rowOffsetEvery");
|
|
700
|
-
validateAtLeast(r.columnOffsetEvery, 0, "columnOffsetEvery");
|
|
701
|
-
validateUnitInterval(r.origin[0], "origin[0]");
|
|
702
|
-
validateUnitInterval(r.origin[1], "origin[1]");
|
|
703
|
-
};
|
|
704
|
-
var PATTERN_VS = `#version 300 es
|
|
705
|
-
in vec2 aPos;
|
|
706
|
-
in vec2 aUv;
|
|
707
|
-
out vec2 vUv;
|
|
708
|
-
|
|
709
|
-
void main() {
|
|
710
|
-
vUv = aUv;
|
|
711
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
712
|
-
}
|
|
713
|
-
`;
|
|
714
|
-
var PATTERN_FS = `#version 300 es
|
|
715
|
-
precision highp float;
|
|
716
|
-
|
|
717
|
-
in vec2 vUv;
|
|
718
|
-
out vec4 fragColor;
|
|
719
|
-
|
|
720
|
-
uniform sampler2D uSource;
|
|
721
|
-
uniform vec2 uResolution;
|
|
722
|
-
uniform float uScale;
|
|
723
|
-
uniform vec4 uCrop;
|
|
724
|
-
uniform vec2 uGap;
|
|
725
|
-
uniform vec2 uOffset;
|
|
726
|
-
uniform vec2 uRowOffset;
|
|
727
|
-
uniform vec2 uColumnOffset;
|
|
728
|
-
uniform vec2 uOrigin;
|
|
729
|
-
uniform bool uWrap;
|
|
730
|
-
|
|
731
|
-
float positiveModulo(float value, float modulo) {
|
|
732
|
-
return mod(mod(value, modulo) + modulo, modulo);
|
|
733
|
-
}
|
|
734
|
-
|
|
735
|
-
float getPhase(float index, float every) {
|
|
736
|
-
if (every == 0.0) {
|
|
737
|
-
return index;
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
return positiveModulo(index, every);
|
|
741
|
-
}
|
|
742
|
-
|
|
743
|
-
bool sampleCell(vec2 cell, vec2 fragPx, vec2 cropStart, vec2 tileSize, vec2 pitch, vec2 originPx, out vec4 color) {
|
|
744
|
-
if (!uWrap && (cell.x < 0.0 || cell.y < 0.0)) {
|
|
745
|
-
return false;
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
float rowPhase = getPhase(cell.y, uRowOffset.y);
|
|
749
|
-
float columnPhase = getPhase(cell.x, uColumnOffset.y);
|
|
750
|
-
vec2 stagger = vec2(rowPhase * uRowOffset.x, columnPhase * uColumnOffset.x);
|
|
751
|
-
vec2 localPx = fragPx - originPx - stagger - cell * pitch;
|
|
752
|
-
|
|
753
|
-
if (localPx.x < 0.0 || localPx.y < 0.0 || localPx.x >= tileSize.x || localPx.y >= tileSize.y) {
|
|
754
|
-
return false;
|
|
755
|
-
}
|
|
756
|
-
|
|
757
|
-
vec2 sourcePx = cropStart + localPx / uScale;
|
|
758
|
-
vec2 sourceUv = vec2(sourcePx.x / uResolution.x, 1.0 - sourcePx.y / uResolution.y);
|
|
759
|
-
|
|
760
|
-
if (sourceUv.x < 0.0 || sourceUv.y < 0.0 || sourceUv.x > 1.0 || sourceUv.y > 1.0) {
|
|
761
|
-
return false;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
color = texture(uSource, sourceUv);
|
|
765
|
-
return true;
|
|
766
|
-
}
|
|
767
|
-
|
|
768
|
-
void main() {
|
|
769
|
-
vec2 cropStart = uCrop.xy;
|
|
770
|
-
vec2 cropEnd = uResolution - uCrop.zw;
|
|
771
|
-
vec2 cropSize = max(cropEnd - cropStart, vec2(0.001));
|
|
772
|
-
vec2 tileSize = max(cropSize * uScale, vec2(0.001));
|
|
773
|
-
vec2 pitch = max(tileSize + uGap, vec2(0.001));
|
|
774
|
-
vec2 patternUv = vec2(vUv.x, 1.0 - vUv.y);
|
|
775
|
-
vec2 originPx = (uOrigin + uOffset) * uResolution;
|
|
776
|
-
vec2 fragPx = patternUv * uResolution;
|
|
777
|
-
|
|
778
|
-
vec2 gridPx = fragPx - originPx;
|
|
779
|
-
vec2 cell = floor(gridPx / pitch);
|
|
780
|
-
|
|
781
|
-
for (int i = 0; i < 4; i++) {
|
|
782
|
-
float rowPhase = getPhase(cell.y, uRowOffset.y);
|
|
783
|
-
float columnPhase = getPhase(cell.x, uColumnOffset.y);
|
|
784
|
-
vec2 stagger = vec2(rowPhase * uRowOffset.x, columnPhase * uColumnOffset.x);
|
|
785
|
-
vec2 adjustedGridPx = fragPx - originPx - stagger;
|
|
786
|
-
vec2 nextCell = floor(adjustedGridPx / pitch);
|
|
787
|
-
|
|
788
|
-
if (all(equal(nextCell, cell))) {
|
|
789
|
-
break;
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
cell = nextCell;
|
|
793
|
-
}
|
|
794
|
-
|
|
795
|
-
vec4 color = vec4(0.0);
|
|
796
|
-
for (int y = -4; y <= 4; y++) {
|
|
797
|
-
for (int x = -4; x <= 4; x++) {
|
|
798
|
-
if (sampleCell(cell + vec2(float(x), float(y)), fragPx, cropStart, tileSize, pitch, originPx, color)) {
|
|
799
|
-
fragColor = color;
|
|
800
|
-
return;
|
|
801
|
-
}
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
fragColor = vec4(0.0);
|
|
806
|
-
}
|
|
807
|
-
`;
|
|
808
|
-
var compileShader2 = (gl, type, source) => {
|
|
809
|
-
const shader = gl.createShader(type);
|
|
810
|
-
if (!shader) {
|
|
811
|
-
throw new Error("Failed to create WebGL shader");
|
|
812
|
-
}
|
|
813
|
-
gl.shaderSource(shader, source);
|
|
814
|
-
gl.compileShader(shader);
|
|
815
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
816
|
-
const log = gl.getShaderInfoLog(shader);
|
|
817
|
-
gl.deleteShader(shader);
|
|
818
|
-
throw new Error(`Pattern shader compile failed: ${log ?? "(no log)"}`);
|
|
819
|
-
}
|
|
820
|
-
return shader;
|
|
821
|
-
};
|
|
822
|
-
var linkProgram2 = (gl, vs, fs) => {
|
|
823
|
-
const program = gl.createProgram();
|
|
824
|
-
if (!program) {
|
|
825
|
-
throw new Error("Failed to create WebGL program");
|
|
826
|
-
}
|
|
827
|
-
gl.attachShader(program, vs);
|
|
828
|
-
gl.attachShader(program, fs);
|
|
829
|
-
gl.linkProgram(program);
|
|
830
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
831
|
-
const log = gl.getProgramInfoLog(program);
|
|
832
|
-
gl.deleteProgram(program);
|
|
833
|
-
throw new Error(`Pattern program link failed: ${log ?? "(no log)"}`);
|
|
834
|
-
}
|
|
835
|
-
return program;
|
|
836
|
-
};
|
|
837
|
-
var pattern = createEffect2({
|
|
838
|
-
type: "dev.remotion.effects.pattern",
|
|
839
|
-
label: "pattern()",
|
|
840
|
-
documentationLink: "https://www.remotion.dev/docs/effects/pattern",
|
|
841
|
-
backend: "webgl2",
|
|
842
|
-
calculateKey: (params) => {
|
|
843
|
-
const r = resolve2(params);
|
|
844
|
-
return `pattern-${r.scale}-${r.cropLeft}-${r.cropTop}-${r.cropRight}-${r.cropBottom}-${r.gapX}-${r.gapY}-${r.offsetU}-${r.offsetV}-${r.rowOffset}-${r.rowOffsetEvery}-${r.columnOffset}-${r.columnOffsetEvery}-${r.origin[0]}-${r.origin[1]}-${r.wrap ? 1 : 0}`;
|
|
845
|
-
},
|
|
846
|
-
setup: (target) => {
|
|
847
|
-
const gl = target.getContext("webgl2", {
|
|
848
|
-
premultipliedAlpha: true,
|
|
849
|
-
alpha: true,
|
|
850
|
-
preserveDrawingBuffer: true
|
|
851
|
-
});
|
|
852
|
-
if (!gl) {
|
|
853
|
-
throw createWebGL2ContextError2("pattern effect");
|
|
854
|
-
}
|
|
855
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
856
|
-
const vs = compileShader2(gl, gl.VERTEX_SHADER, PATTERN_VS);
|
|
857
|
-
const fs = compileShader2(gl, gl.FRAGMENT_SHADER, PATTERN_FS);
|
|
858
|
-
const program = linkProgram2(gl, vs, fs);
|
|
859
|
-
gl.deleteShader(vs);
|
|
860
|
-
gl.deleteShader(fs);
|
|
861
|
-
const vao = gl.createVertexArray();
|
|
862
|
-
if (!vao) {
|
|
863
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
864
|
-
}
|
|
865
|
-
gl.bindVertexArray(vao);
|
|
866
|
-
const data = new Float32Array([
|
|
867
|
-
-1,
|
|
868
|
-
-1,
|
|
869
|
-
0,
|
|
870
|
-
0,
|
|
871
|
-
1,
|
|
872
|
-
-1,
|
|
873
|
-
1,
|
|
874
|
-
0,
|
|
875
|
-
-1,
|
|
876
|
-
1,
|
|
877
|
-
0,
|
|
878
|
-
1,
|
|
879
|
-
1,
|
|
880
|
-
1,
|
|
881
|
-
1,
|
|
882
|
-
1
|
|
883
|
-
]);
|
|
884
|
-
const vbo = gl.createBuffer();
|
|
885
|
-
if (!vbo) {
|
|
886
|
-
throw new Error("Failed to create WebGL buffer");
|
|
887
|
-
}
|
|
888
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
889
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
890
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
891
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
892
|
-
gl.enableVertexAttribArray(aPos);
|
|
893
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
894
|
-
gl.enableVertexAttribArray(aUv);
|
|
895
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
896
|
-
gl.bindVertexArray(null);
|
|
897
|
-
const texture = gl.createTexture();
|
|
898
|
-
if (!texture) {
|
|
899
|
-
throw new Error("Failed to create WebGL texture");
|
|
900
|
-
}
|
|
901
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
902
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
903
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
904
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
905
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
906
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
907
|
-
return {
|
|
908
|
-
gl,
|
|
909
|
-
program,
|
|
910
|
-
vao,
|
|
911
|
-
vbo,
|
|
912
|
-
texture,
|
|
913
|
-
uniforms: {
|
|
914
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
915
|
-
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
916
|
-
uScale: gl.getUniformLocation(program, "uScale"),
|
|
917
|
-
uCrop: gl.getUniformLocation(program, "uCrop"),
|
|
918
|
-
uGap: gl.getUniformLocation(program, "uGap"),
|
|
919
|
-
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
920
|
-
uRowOffset: gl.getUniformLocation(program, "uRowOffset"),
|
|
921
|
-
uColumnOffset: gl.getUniformLocation(program, "uColumnOffset"),
|
|
922
|
-
uOrigin: gl.getUniformLocation(program, "uOrigin"),
|
|
923
|
-
uWrap: gl.getUniformLocation(program, "uWrap")
|
|
924
|
-
}
|
|
925
|
-
};
|
|
926
|
-
},
|
|
927
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
928
|
-
const r = resolve2(params);
|
|
929
|
-
const { gl, program, vao, texture, uniforms } = state;
|
|
930
|
-
gl.viewport(0, 0, width, height);
|
|
931
|
-
gl.clearColor(0, 0, 0, 0);
|
|
932
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
933
|
-
gl.useProgram(program);
|
|
934
|
-
gl.bindVertexArray(vao);
|
|
935
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
936
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
937
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
938
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
939
|
-
if (uniforms.uSource)
|
|
940
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
941
|
-
if (uniforms.uResolution)
|
|
942
|
-
gl.uniform2f(uniforms.uResolution, width, height);
|
|
943
|
-
if (uniforms.uScale)
|
|
944
|
-
gl.uniform1f(uniforms.uScale, r.scale);
|
|
945
|
-
if (uniforms.uCrop)
|
|
946
|
-
gl.uniform4f(uniforms.uCrop, r.cropLeft, r.cropTop, r.cropRight, r.cropBottom);
|
|
947
|
-
if (uniforms.uGap)
|
|
948
|
-
gl.uniform2f(uniforms.uGap, r.gapX, r.gapY);
|
|
949
|
-
if (uniforms.uOffset)
|
|
950
|
-
gl.uniform2f(uniforms.uOffset, r.offsetU, r.offsetV);
|
|
951
|
-
if (uniforms.uRowOffset)
|
|
952
|
-
gl.uniform2f(uniforms.uRowOffset, r.rowOffset, r.rowOffsetEvery);
|
|
953
|
-
if (uniforms.uColumnOffset)
|
|
954
|
-
gl.uniform2f(uniforms.uColumnOffset, r.columnOffset, r.columnOffsetEvery);
|
|
955
|
-
if (uniforms.uOrigin)
|
|
956
|
-
gl.uniform2f(uniforms.uOrigin, r.origin[0], r.origin[1]);
|
|
957
|
-
if (uniforms.uWrap)
|
|
958
|
-
gl.uniform1i(uniforms.uWrap, r.wrap ? 1 : 0);
|
|
959
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
960
|
-
gl.bindVertexArray(null);
|
|
961
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
962
|
-
gl.useProgram(null);
|
|
963
|
-
},
|
|
964
|
-
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
965
|
-
gl.deleteBuffer(vbo);
|
|
966
|
-
gl.deleteProgram(program);
|
|
967
|
-
gl.deleteVertexArray(vao);
|
|
968
|
-
gl.deleteTexture(texture);
|
|
969
|
-
},
|
|
970
|
-
schema: patternSchema,
|
|
971
|
-
validateParams: validatePatternParams
|
|
972
|
-
});
|
|
973
|
-
// src/tile.ts
|
|
974
|
-
import { Internals as Internals3 } from "remotion";
|
|
975
|
-
var { createEffect: createEffect3 } = Internals3;
|
|
976
|
-
var DEFAULT_HORIZONTAL = true;
|
|
977
|
-
var DEFAULT_VERTICAL = true;
|
|
978
|
-
var tileSchema = {
|
|
979
|
-
horizontal: {
|
|
980
|
-
type: "boolean",
|
|
981
|
-
default: DEFAULT_HORIZONTAL,
|
|
982
|
-
description: "Horizontal"
|
|
983
|
-
},
|
|
984
|
-
vertical: {
|
|
985
|
-
type: "boolean",
|
|
986
|
-
default: DEFAULT_VERTICAL,
|
|
987
|
-
description: "Vertical"
|
|
988
|
-
}
|
|
989
|
-
};
|
|
990
|
-
var resolve3 = (params) => ({
|
|
991
|
-
horizontal: params.horizontal ?? DEFAULT_HORIZONTAL,
|
|
992
|
-
vertical: params.vertical ?? DEFAULT_VERTICAL
|
|
993
|
-
});
|
|
994
|
-
var validateTileParams = (params) => {
|
|
995
|
-
assertEffectParamsObject(params, "Tile");
|
|
996
|
-
assertOptionalBoolean(params.horizontal, "horizontal");
|
|
997
|
-
assertOptionalBoolean(params.vertical, "vertical");
|
|
998
|
-
};
|
|
999
|
-
var tile = createEffect3({
|
|
1000
|
-
type: "dev.remotion.effects.tile",
|
|
1001
|
-
label: "tile()",
|
|
1002
|
-
documentationLink: "https://www.remotion.dev/docs/effects/tile",
|
|
1003
|
-
backend: "2d",
|
|
1004
|
-
calculateKey: (params) => {
|
|
1005
|
-
const r = resolve3(params);
|
|
1006
|
-
return `tile-${r.horizontal}-${r.vertical}`;
|
|
1007
|
-
},
|
|
1008
|
-
setup: (target) => {
|
|
1009
|
-
const boundsCanvas = target.ownerDocument.createElement("canvas");
|
|
1010
|
-
const boundsContext = boundsCanvas.getContext("2d", {
|
|
1011
|
-
colorSpace: "srgb",
|
|
1012
|
-
willReadFrequently: true
|
|
1013
|
-
});
|
|
1014
|
-
if (!boundsContext) {
|
|
1015
|
-
throw new Error("Failed to acquire 2D context for tile effect.");
|
|
1016
|
-
}
|
|
1017
|
-
const tileCanvas = target.ownerDocument.createElement("canvas");
|
|
1018
|
-
const tileContext = tileCanvas.getContext("2d");
|
|
1019
|
-
if (!tileContext) {
|
|
1020
|
-
throw new Error("Failed to acquire 2D context for tile effect.");
|
|
1021
|
-
}
|
|
1022
|
-
return { boundsCanvas, boundsContext, tileCanvas, tileContext };
|
|
1023
|
-
},
|
|
1024
|
-
apply: ({ source, target, width, height, params, state }) => {
|
|
1025
|
-
const context = target.getContext("2d");
|
|
1026
|
-
if (!context) {
|
|
1027
|
-
throw new Error("Failed to acquire 2D context for tile effect. The canvas may have been assigned a different context type.");
|
|
1028
|
-
}
|
|
1029
|
-
const r = resolve3(params);
|
|
1030
|
-
context.clearRect(0, 0, width, height);
|
|
1031
|
-
if (!r.horizontal && !r.vertical) {
|
|
1032
|
-
context.drawImage(source, 0, 0, width, height);
|
|
1033
|
-
return;
|
|
1034
|
-
}
|
|
1035
|
-
if (state.boundsCanvas.width !== width || state.boundsCanvas.height !== height) {
|
|
1036
|
-
state.boundsCanvas.width = width;
|
|
1037
|
-
state.boundsCanvas.height = height;
|
|
1038
|
-
}
|
|
1039
|
-
state.boundsContext.clearRect(0, 0, width, height);
|
|
1040
|
-
state.boundsContext.drawImage(source, 0, 0, width, height);
|
|
1041
|
-
const pixels = state.boundsContext.getImageData(0, 0, width, height).data;
|
|
1042
|
-
const rowMaximumAlpha = (y) => {
|
|
1043
|
-
let maximumAlpha = 0;
|
|
1044
|
-
for (let x = 0;x < width; x++) {
|
|
1045
|
-
maximumAlpha = Math.max(maximumAlpha, pixels[(y * width + x) * 4 + 3]);
|
|
1046
|
-
}
|
|
1047
|
-
return maximumAlpha;
|
|
1048
|
-
};
|
|
1049
|
-
const columnMaximumAlpha = (x, visibleTop, visibleBottom) => {
|
|
1050
|
-
let maximumAlpha = 0;
|
|
1051
|
-
for (let y = visibleTop;y <= visibleBottom; y++) {
|
|
1052
|
-
maximumAlpha = Math.max(maximumAlpha, pixels[(y * width + x) * 4 + 3]);
|
|
1053
|
-
}
|
|
1054
|
-
return maximumAlpha;
|
|
1055
|
-
};
|
|
1056
|
-
let top = 0;
|
|
1057
|
-
while (top < height && rowMaximumAlpha(top) === 0) {
|
|
1058
|
-
top++;
|
|
1059
|
-
}
|
|
1060
|
-
if (top === height) {
|
|
1061
|
-
context.clearRect(0, 0, width, height);
|
|
1062
|
-
return;
|
|
1063
|
-
}
|
|
1064
|
-
let bottom = height - 1;
|
|
1065
|
-
while (bottom > top && rowMaximumAlpha(bottom) === 0) {
|
|
1066
|
-
bottom--;
|
|
1067
|
-
}
|
|
1068
|
-
let left = 0;
|
|
1069
|
-
while (left < width && columnMaximumAlpha(left, top, bottom) === 0) {
|
|
1070
|
-
left++;
|
|
1071
|
-
}
|
|
1072
|
-
let right = width - 1;
|
|
1073
|
-
while (right > left && columnMaximumAlpha(right, top, bottom) === 0) {
|
|
1074
|
-
right--;
|
|
1075
|
-
}
|
|
1076
|
-
if (r.vertical && top < bottom) {
|
|
1077
|
-
if (rowMaximumAlpha(top) < rowMaximumAlpha(top + 1)) {
|
|
1078
|
-
top++;
|
|
1079
|
-
}
|
|
1080
|
-
if (rowMaximumAlpha(bottom) < rowMaximumAlpha(bottom - 1)) {
|
|
1081
|
-
bottom--;
|
|
1082
|
-
}
|
|
1083
|
-
}
|
|
1084
|
-
if (r.horizontal && left < right) {
|
|
1085
|
-
if (columnMaximumAlpha(left, top, bottom) < columnMaximumAlpha(left + 1, top, bottom)) {
|
|
1086
|
-
left++;
|
|
1087
|
-
}
|
|
1088
|
-
if (columnMaximumAlpha(right, top, bottom) < columnMaximumAlpha(right - 1, top, bottom)) {
|
|
1089
|
-
right--;
|
|
1090
|
-
}
|
|
1091
|
-
}
|
|
1092
|
-
const tileWidth = right - left + 1;
|
|
1093
|
-
const tileHeight = bottom - top + 1;
|
|
1094
|
-
state.tileCanvas.width = tileWidth;
|
|
1095
|
-
state.tileCanvas.height = tileHeight;
|
|
1096
|
-
state.tileContext.clearRect(0, 0, tileWidth, tileHeight);
|
|
1097
|
-
state.tileContext.drawImage(source, left, top, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
|
|
1098
|
-
context.clearRect(0, 0, width, height);
|
|
1099
|
-
const startX = r.horizontal ? left - Math.ceil(left / tileWidth) * tileWidth : left;
|
|
1100
|
-
const startY = r.vertical ? top - Math.ceil(top / tileHeight) * tileHeight : top;
|
|
1101
|
-
const endX = r.horizontal ? width : left + tileWidth;
|
|
1102
|
-
const endY = r.vertical ? height : top + tileHeight;
|
|
1103
|
-
for (let y = startY;y < endY; y += tileHeight) {
|
|
1104
|
-
const tileY = Math.round((y - top) / tileHeight);
|
|
1105
|
-
const mirrorY = r.vertical && Math.abs(tileY) % 2 === 1;
|
|
1106
|
-
for (let x = startX;x < endX; x += tileWidth) {
|
|
1107
|
-
const tileX = Math.round((x - left) / tileWidth);
|
|
1108
|
-
const mirrorX = r.horizontal && Math.abs(tileX) % 2 === 1;
|
|
1109
|
-
context.save();
|
|
1110
|
-
context.translate(mirrorX ? x + tileWidth : x, mirrorY ? y + tileHeight : y);
|
|
1111
|
-
context.scale(mirrorX ? -1 : 1, mirrorY ? -1 : 1);
|
|
1112
|
-
context.drawImage(state.tileCanvas, 0, 0);
|
|
1113
|
-
context.restore();
|
|
1114
|
-
}
|
|
1115
|
-
}
|
|
1116
|
-
},
|
|
1117
|
-
cleanup: () => {
|
|
1118
|
-
return;
|
|
1119
|
-
},
|
|
1120
|
-
schema: tileSchema,
|
|
1121
|
-
validateParams: validateTileParams
|
|
1122
|
-
});
|
|
1123
|
-
// src/rings.ts
|
|
1124
|
-
import { Internals as Internals4 } from "remotion";
|
|
1125
|
-
|
|
1126
|
-
// src/uv-coordinate.ts
|
|
1127
|
-
var publicUvToShaderUv = (uv) => {
|
|
1128
|
-
return [uv[0], 1 - uv[1]];
|
|
1129
|
-
};
|
|
1130
|
-
|
|
1131
|
-
// src/rings.ts
|
|
1132
|
-
var { createEffect: createEffect4, createWebGL2ContextError: createWebGL2ContextError3 } = Internals4;
|
|
1133
|
-
var DEFAULT_COLORS2 = ["#dff4ff", "#7cc6ff"];
|
|
1134
|
-
var DEFAULT_CENTER = [0.5, 0.5];
|
|
1135
|
-
var DEFAULT_THICKNESS = 40;
|
|
1136
|
-
var DEFAULT_GAP3 = 0;
|
|
1137
|
-
var DEFAULT_OFFSET2 = 0;
|
|
1138
|
-
var DEFAULT_MASK_TO_SOURCE_ALPHA2 = false;
|
|
1139
|
-
var ringsSchema = {
|
|
1140
|
-
colors: {
|
|
1141
|
-
type: "array",
|
|
1142
|
-
item: {
|
|
1143
|
-
type: "color"
|
|
1144
|
-
},
|
|
1145
|
-
default: DEFAULT_COLORS2,
|
|
1146
|
-
minLength: 2,
|
|
1147
|
-
newItemDefault: "#ff0000",
|
|
1148
|
-
description: "Colors",
|
|
1149
|
-
keyframable: false
|
|
1150
|
-
},
|
|
1151
|
-
center: {
|
|
1152
|
-
type: "uv-coordinate",
|
|
1153
|
-
min: 0,
|
|
1154
|
-
max: 1,
|
|
1155
|
-
step: 0.01,
|
|
1156
|
-
default: DEFAULT_CENTER,
|
|
1157
|
-
description: "Center"
|
|
1158
|
-
},
|
|
1159
|
-
thickness: {
|
|
1160
|
-
type: "number",
|
|
1161
|
-
min: 0.1,
|
|
1162
|
-
max: 400,
|
|
1163
|
-
step: 0.1,
|
|
1164
|
-
default: DEFAULT_THICKNESS,
|
|
1165
|
-
description: "Thickness",
|
|
1166
|
-
hiddenFromList: false
|
|
1167
|
-
},
|
|
1168
|
-
gap: {
|
|
1169
|
-
type: "number",
|
|
1170
|
-
min: 0,
|
|
1171
|
-
max: 400,
|
|
1172
|
-
step: 0.1,
|
|
1173
|
-
default: DEFAULT_GAP3,
|
|
1174
|
-
description: "Gap",
|
|
1175
|
-
hiddenFromList: false
|
|
1176
|
-
},
|
|
1177
|
-
offset: {
|
|
1178
|
-
type: "number",
|
|
1179
|
-
step: 0.1,
|
|
1180
|
-
default: DEFAULT_OFFSET2,
|
|
1181
|
-
description: "Offset",
|
|
1182
|
-
hiddenFromList: false
|
|
1183
|
-
},
|
|
1184
|
-
maskToSourceAlpha: {
|
|
1185
|
-
type: "boolean",
|
|
1186
|
-
default: DEFAULT_MASK_TO_SOURCE_ALPHA2,
|
|
1187
|
-
description: "Mask to source alpha"
|
|
1188
|
-
}
|
|
1189
|
-
};
|
|
1190
|
-
var resolve4 = (p) => {
|
|
1191
|
-
const thickness = p.thickness ?? DEFAULT_THICKNESS;
|
|
1192
|
-
const gap = p.gap ?? DEFAULT_GAP3;
|
|
1193
|
-
return {
|
|
1194
|
-
colors: p.colors ?? DEFAULT_COLORS2,
|
|
1195
|
-
center: [...p.center ?? DEFAULT_CENTER],
|
|
1196
|
-
thickness,
|
|
1197
|
-
spacing: thickness + gap,
|
|
1198
|
-
offset: p.offset ?? DEFAULT_OFFSET2,
|
|
1199
|
-
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA2
|
|
1200
|
-
};
|
|
1201
|
-
};
|
|
1202
|
-
var validatePositive3 = (value, name) => {
|
|
1203
|
-
if (value <= 0) {
|
|
1204
|
-
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
1205
|
-
}
|
|
1206
|
-
};
|
|
1207
|
-
var validateNonNegative3 = (value, name) => {
|
|
1208
|
-
if (value < 0) {
|
|
1209
|
-
throw new TypeError(`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`);
|
|
1210
|
-
}
|
|
1211
|
-
};
|
|
1212
|
-
var validateColors2 = (colors) => {
|
|
1213
|
-
if (colors === undefined) {
|
|
1214
|
-
return;
|
|
1215
|
-
}
|
|
1216
|
-
if (!Array.isArray(colors) || colors.length < 2) {
|
|
1217
|
-
throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
|
|
1218
|
-
}
|
|
1219
|
-
for (let i = 0;i < colors.length; i++) {
|
|
1220
|
-
assertRequiredColor(colors[i], `colors[${i}]`);
|
|
1221
|
-
}
|
|
1222
|
-
};
|
|
1223
|
-
var assertOptionalCenter = (value, name) => {
|
|
1224
|
-
if (value === undefined) {
|
|
1225
|
-
return;
|
|
1226
|
-
}
|
|
1227
|
-
if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
|
|
1228
|
-
throw new TypeError(`"${name}" must be a [number, number] tuple`);
|
|
1229
|
-
}
|
|
1230
|
-
validateUnitInterval(value[0], `${name}[0]`);
|
|
1231
|
-
validateUnitInterval(value[1], `${name}[1]`);
|
|
1232
|
-
};
|
|
1233
|
-
var validateRingsParams = (params) => {
|
|
1234
|
-
assertEffectParamsObject(params, "Rings");
|
|
1235
|
-
validateColors2(params.colors);
|
|
1236
|
-
assertOptionalCenter(params.center, "center");
|
|
1237
|
-
assertOptionalFiniteNumber(params.thickness, "thickness");
|
|
1238
|
-
assertOptionalFiniteNumber(params.gap, "gap");
|
|
1239
|
-
assertOptionalFiniteNumber(params.offset, "offset");
|
|
1240
|
-
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
1241
|
-
const thickness = params.thickness ?? DEFAULT_THICKNESS;
|
|
1242
|
-
const gap = params.gap ?? DEFAULT_GAP3;
|
|
1243
|
-
validatePositive3(thickness, "thickness");
|
|
1244
|
-
validateNonNegative3(gap, "gap");
|
|
1245
|
-
};
|
|
1246
|
-
var RINGS_VS = `#version 300 es
|
|
1247
|
-
in vec2 aPos;
|
|
1248
|
-
in vec2 aUv;
|
|
1249
|
-
out vec2 vUv;
|
|
1250
|
-
|
|
1251
|
-
void main() {
|
|
1252
|
-
vUv = aUv;
|
|
1253
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
1254
|
-
}
|
|
1255
|
-
`;
|
|
1256
|
-
var RINGS_FS = `#version 300 es
|
|
1257
|
-
precision highp float;
|
|
1258
|
-
|
|
1259
|
-
in vec2 vUv;
|
|
1260
|
-
out vec4 fragColor;
|
|
1261
|
-
|
|
1262
|
-
uniform sampler2D uSource;
|
|
1263
|
-
uniform sampler2D uPalette;
|
|
1264
|
-
uniform vec2 uResolution;
|
|
1265
|
-
uniform float uNumColors;
|
|
1266
|
-
uniform vec2 uCenter;
|
|
1267
|
-
uniform float uThickness;
|
|
1268
|
-
uniform float uSpacing;
|
|
1269
|
-
uniform float uOffset;
|
|
1270
|
-
uniform bool uMaskToSourceAlpha;
|
|
1271
|
-
|
|
1272
|
-
void main() {
|
|
1273
|
-
vec4 texColor = texture(uSource, vUv);
|
|
1274
|
-
float thickness = max(uThickness, 0.001);
|
|
1275
|
-
float spacing = max(uSpacing, 0.001);
|
|
1276
|
-
float cycle = spacing * uNumColors;
|
|
1277
|
-
vec2 pixelPosition = vUv * uResolution;
|
|
1278
|
-
vec2 centerPosition = uCenter * uResolution;
|
|
1279
|
-
float radius = length(pixelPosition - centerPosition);
|
|
1280
|
-
float position = mod(radius + uOffset, cycle);
|
|
1281
|
-
if (position < 0.0) {
|
|
1282
|
-
position += cycle;
|
|
1283
|
-
}
|
|
1284
|
-
|
|
1285
|
-
float colorIndex = floor(position / spacing);
|
|
1286
|
-
float inStripe = mod(position, spacing);
|
|
1287
|
-
if (inStripe > thickness) {
|
|
1288
|
-
fragColor = texColor;
|
|
1289
|
-
return;
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
|
-
float texCoord = (colorIndex + 0.5) / uNumColors;
|
|
1293
|
-
vec4 ringColor = texture(uPalette, vec2(texCoord, 0.5));
|
|
1294
|
-
float ringAlpha = ringColor.a;
|
|
1295
|
-
vec3 premultipliedRing = ringColor.rgb * ringAlpha;
|
|
1296
|
-
|
|
1297
|
-
if (uMaskToSourceAlpha) {
|
|
1298
|
-
fragColor = vec4(
|
|
1299
|
-
premultipliedRing * texColor.a + texColor.rgb * (1.0 - ringAlpha),
|
|
1300
|
-
texColor.a
|
|
1301
|
-
);
|
|
1302
|
-
return;
|
|
1303
|
-
}
|
|
1304
|
-
|
|
1305
|
-
fragColor = vec4(
|
|
1306
|
-
premultipliedRing + texColor.rgb * (1.0 - ringAlpha),
|
|
1307
|
-
ringAlpha + texColor.a * (1.0 - ringAlpha)
|
|
1308
|
-
);
|
|
1309
|
-
}
|
|
1310
|
-
`;
|
|
1311
|
-
var compileShader3 = (gl, type, source) => {
|
|
1312
|
-
const shader = gl.createShader(type);
|
|
1313
|
-
if (!shader) {
|
|
1314
|
-
throw new Error("Failed to create WebGL shader");
|
|
1315
|
-
}
|
|
1316
|
-
gl.shaderSource(shader, source);
|
|
1317
|
-
gl.compileShader(shader);
|
|
1318
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
1319
|
-
const log = gl.getShaderInfoLog(shader);
|
|
1320
|
-
gl.deleteShader(shader);
|
|
1321
|
-
throw new Error(`Rings shader compile failed: ${log ?? "(no log)"}`);
|
|
1322
|
-
}
|
|
1323
|
-
return shader;
|
|
1324
|
-
};
|
|
1325
|
-
var linkProgram3 = (gl, vs, fs) => {
|
|
1326
|
-
const program = gl.createProgram();
|
|
1327
|
-
if (!program) {
|
|
1328
|
-
throw new Error("Failed to create WebGL program");
|
|
1329
|
-
}
|
|
1330
|
-
gl.attachShader(program, vs);
|
|
1331
|
-
gl.attachShader(program, fs);
|
|
1332
|
-
gl.linkProgram(program);
|
|
1333
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
1334
|
-
const log = gl.getProgramInfoLog(program);
|
|
1335
|
-
gl.deleteProgram(program);
|
|
1336
|
-
throw new Error(`Rings program link failed: ${log ?? "(no log)"}`);
|
|
1337
|
-
}
|
|
1338
|
-
return program;
|
|
1339
|
-
};
|
|
1340
|
-
var createProgram2 = (gl, vertexSource, fragmentSource) => {
|
|
1341
|
-
const vs = compileShader3(gl, gl.VERTEX_SHADER, vertexSource);
|
|
1342
|
-
const fs = compileShader3(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
1343
|
-
const program = linkProgram3(gl, vs, fs);
|
|
1344
|
-
gl.deleteShader(vs);
|
|
1345
|
-
gl.deleteShader(fs);
|
|
1346
|
-
return program;
|
|
1347
|
-
};
|
|
1348
|
-
var createTexture2 = (gl, filter) => {
|
|
1349
|
-
const texture = gl.createTexture();
|
|
1350
|
-
if (!texture) {
|
|
1351
|
-
throw new Error("Failed to create WebGL texture");
|
|
1352
|
-
}
|
|
1353
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
1354
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
1355
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
1356
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
1357
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
1358
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
1359
|
-
return texture;
|
|
1360
|
-
};
|
|
1361
|
-
var setupRings = (target) => {
|
|
1362
|
-
const gl = target.getContext("webgl2", {
|
|
1363
|
-
premultipliedAlpha: true,
|
|
1364
|
-
alpha: true,
|
|
1365
|
-
preserveDrawingBuffer: true
|
|
1366
|
-
});
|
|
1367
|
-
if (!gl) {
|
|
1368
|
-
throw createWebGL2ContextError3("rings effect");
|
|
1369
|
-
}
|
|
1370
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
1371
|
-
const program = createProgram2(gl, RINGS_VS, RINGS_FS);
|
|
1372
|
-
const vao = gl.createVertexArray();
|
|
1373
|
-
if (!vao) {
|
|
1374
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
1375
|
-
}
|
|
1376
|
-
gl.bindVertexArray(vao);
|
|
1377
|
-
const data = new Float32Array([
|
|
1378
|
-
-1,
|
|
1379
|
-
-1,
|
|
1380
|
-
0,
|
|
1381
|
-
0,
|
|
1382
|
-
1,
|
|
1383
|
-
-1,
|
|
1384
|
-
1,
|
|
1385
|
-
0,
|
|
1386
|
-
-1,
|
|
1387
|
-
1,
|
|
1388
|
-
0,
|
|
1389
|
-
1,
|
|
1390
|
-
1,
|
|
1391
|
-
1,
|
|
1392
|
-
1,
|
|
1393
|
-
1
|
|
1394
|
-
]);
|
|
1395
|
-
const vbo = gl.createBuffer();
|
|
1396
|
-
if (!vbo) {
|
|
1397
|
-
throw new Error("Failed to create WebGL buffer");
|
|
1398
|
-
}
|
|
1399
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
1400
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
1401
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
1402
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
1403
|
-
gl.enableVertexAttribArray(aPos);
|
|
1404
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
1405
|
-
gl.enableVertexAttribArray(aUv);
|
|
1406
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
1407
|
-
gl.bindVertexArray(null);
|
|
1408
|
-
const colorCanvas = document.createElement("canvas");
|
|
1409
|
-
colorCanvas.width = 1;
|
|
1410
|
-
colorCanvas.height = 1;
|
|
1411
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
1412
|
-
if (!colorCtx) {
|
|
1413
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
1414
|
-
}
|
|
1415
|
-
return {
|
|
1416
|
-
gl,
|
|
1417
|
-
program,
|
|
1418
|
-
vao,
|
|
1419
|
-
vbo,
|
|
1420
|
-
sourceTexture: createTexture2(gl, gl.LINEAR),
|
|
1421
|
-
paletteTexture: createTexture2(gl, gl.NEAREST),
|
|
1422
|
-
colorCtx,
|
|
1423
|
-
uniforms: {
|
|
1424
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
1425
|
-
uPalette: gl.getUniformLocation(program, "uPalette"),
|
|
1426
|
-
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
1427
|
-
uNumColors: gl.getUniformLocation(program, "uNumColors"),
|
|
1428
|
-
uCenter: gl.getUniformLocation(program, "uCenter"),
|
|
1429
|
-
uThickness: gl.getUniformLocation(program, "uThickness"),
|
|
1430
|
-
uSpacing: gl.getUniformLocation(program, "uSpacing"),
|
|
1431
|
-
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
1432
|
-
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
1433
|
-
},
|
|
1434
|
-
cachedPaletteKey: "",
|
|
1435
|
-
palettePixelData: new Uint8Array(0)
|
|
1436
|
-
};
|
|
1437
|
-
};
|
|
1438
|
-
var updatePalette2 = (state, colors) => {
|
|
1439
|
-
const paletteKey = colors.join("|");
|
|
1440
|
-
const paletteDirty = state.cachedPaletteKey !== paletteKey;
|
|
1441
|
-
if (!paletteDirty) {
|
|
1442
|
-
return false;
|
|
1443
|
-
}
|
|
1444
|
-
state.cachedPaletteKey = paletteKey;
|
|
1445
|
-
const len = colors.length * 4;
|
|
1446
|
-
if (state.palettePixelData.length !== len) {
|
|
1447
|
-
state.palettePixelData = new Uint8Array(len);
|
|
1448
|
-
}
|
|
1449
|
-
const { palettePixelData } = state;
|
|
1450
|
-
for (let i = 0;i < colors.length; i++) {
|
|
1451
|
-
const color = parseColorRgba(state.colorCtx, colors[i]);
|
|
1452
|
-
palettePixelData[i * 4] = color[0];
|
|
1453
|
-
palettePixelData[i * 4 + 1] = color[1];
|
|
1454
|
-
palettePixelData[i * 4 + 2] = color[2];
|
|
1455
|
-
palettePixelData[i * 4 + 3] = color[3];
|
|
1456
|
-
}
|
|
1457
|
-
return true;
|
|
1458
|
-
};
|
|
1459
|
-
var rings = createEffect4({
|
|
1460
|
-
type: "dev.remotion.effects.rings",
|
|
1461
|
-
label: "rings()",
|
|
1462
|
-
documentationLink: "https://www.remotion.dev/docs/effects/rings",
|
|
1463
|
-
backend: "webgl2",
|
|
1464
|
-
calculateKey: (params) => {
|
|
1465
|
-
const r = resolve4(params);
|
|
1466
|
-
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
1467
|
-
return `rings-${r.colors.join("|")}-${r.center.join(":")}-${r.thickness}-${r.spacing}-${r.offset}${maskSuffix}`;
|
|
1468
|
-
},
|
|
1469
|
-
setup: (target) => setupRings(target),
|
|
1470
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
1471
|
-
const r = resolve4(params);
|
|
1472
|
-
const paletteDirty = updatePalette2(state, r.colors);
|
|
1473
|
-
const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
|
|
1474
|
-
gl.viewport(0, 0, width, height);
|
|
1475
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
1476
|
-
gl.clearColor(0, 0, 0, 0);
|
|
1477
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
1478
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
1479
|
-
gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
|
|
1480
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
1481
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
1482
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
1483
|
-
gl.activeTexture(gl.TEXTURE1);
|
|
1484
|
-
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
1485
|
-
if (paletteDirty) {
|
|
1486
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
1487
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
1488
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
|
|
1489
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
1490
|
-
}
|
|
1491
|
-
gl.useProgram(program);
|
|
1492
|
-
if (uniforms.uSource)
|
|
1493
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
1494
|
-
if (uniforms.uPalette)
|
|
1495
|
-
gl.uniform1i(uniforms.uPalette, 1);
|
|
1496
|
-
if (uniforms.uResolution)
|
|
1497
|
-
gl.uniform2f(uniforms.uResolution, width, height);
|
|
1498
|
-
if (uniforms.uNumColors)
|
|
1499
|
-
gl.uniform1f(uniforms.uNumColors, r.colors.length);
|
|
1500
|
-
if (uniforms.uCenter) {
|
|
1501
|
-
const shaderCenter = publicUvToShaderUv(r.center);
|
|
1502
|
-
gl.uniform2f(uniforms.uCenter, shaderCenter[0], shaderCenter[1]);
|
|
1503
|
-
}
|
|
1504
|
-
if (uniforms.uThickness)
|
|
1505
|
-
gl.uniform1f(uniforms.uThickness, r.thickness);
|
|
1506
|
-
if (uniforms.uSpacing)
|
|
1507
|
-
gl.uniform1f(uniforms.uSpacing, r.spacing);
|
|
1508
|
-
if (uniforms.uOffset)
|
|
1509
|
-
gl.uniform1f(uniforms.uOffset, r.offset);
|
|
1510
|
-
if (uniforms.uMaskToSourceAlpha)
|
|
1511
|
-
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
1512
|
-
gl.bindVertexArray(vao);
|
|
1513
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
1514
|
-
gl.bindVertexArray(null);
|
|
1515
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
1516
|
-
gl.useProgram(null);
|
|
1517
|
-
},
|
|
1518
|
-
cleanup: ({ gl, program, vao, vbo, sourceTexture, paletteTexture }) => {
|
|
1519
|
-
gl.deleteTexture(sourceTexture);
|
|
1520
|
-
gl.deleteTexture(paletteTexture);
|
|
1521
|
-
gl.deleteBuffer(vbo);
|
|
1522
|
-
gl.deleteProgram(program);
|
|
1523
|
-
gl.deleteVertexArray(vao);
|
|
1524
|
-
},
|
|
1525
|
-
schema: ringsSchema,
|
|
1526
|
-
validateParams: validateRingsParams
|
|
1527
|
-
});
|
|
1528
|
-
// src/starburst.ts
|
|
1529
|
-
import { Internals as Internals5 } from "remotion";
|
|
1530
|
-
import { NoReactInternals } from "remotion/no-react";
|
|
1531
|
-
var { createEffect: createEffect5, createWebGL2ContextError: createWebGL2ContextError4 } = Internals5;
|
|
1532
|
-
var colorToRgb = (color) => {
|
|
1533
|
-
const packed = NoReactInternals.processColor(color);
|
|
1534
|
-
return [packed >>> 16 & 255, packed >>> 8 & 255, packed & 255];
|
|
1535
|
-
};
|
|
1536
|
-
var DEFAULT_ORIGIN2 = [0.5, 0.5];
|
|
1537
|
-
var starburstEffectSchema = {
|
|
1538
|
-
rays: {
|
|
1539
|
-
type: "number",
|
|
1540
|
-
min: 2,
|
|
1541
|
-
max: 100,
|
|
1542
|
-
step: 1,
|
|
1543
|
-
default: undefined,
|
|
1544
|
-
description: "Number of Rays",
|
|
1545
|
-
hiddenFromList: false
|
|
1546
|
-
},
|
|
1547
|
-
colors: {
|
|
1548
|
-
type: "array",
|
|
1549
|
-
item: {
|
|
1550
|
-
type: "color"
|
|
1551
|
-
},
|
|
1552
|
-
default: undefined,
|
|
1553
|
-
minLength: 2,
|
|
1554
|
-
newItemDefault: "#ff0000",
|
|
1555
|
-
description: "Colors",
|
|
1556
|
-
keyframable: false
|
|
1557
|
-
},
|
|
1558
|
-
rotation: {
|
|
1559
|
-
type: "number",
|
|
1560
|
-
min: 0,
|
|
1561
|
-
max: 360,
|
|
1562
|
-
step: 1,
|
|
1563
|
-
default: 0,
|
|
1564
|
-
description: "Rotation",
|
|
1565
|
-
hiddenFromList: false
|
|
1566
|
-
},
|
|
1567
|
-
smoothness: {
|
|
1568
|
-
type: "number",
|
|
1569
|
-
min: 0,
|
|
1570
|
-
max: 1,
|
|
1571
|
-
step: 0.01,
|
|
1572
|
-
default: 0,
|
|
1573
|
-
description: "Edge Smoothness",
|
|
1574
|
-
hiddenFromList: false
|
|
1575
|
-
},
|
|
1576
|
-
origin: {
|
|
1577
|
-
type: "uv-coordinate",
|
|
1578
|
-
min: 0,
|
|
1579
|
-
max: 1,
|
|
1580
|
-
step: 0.01,
|
|
1581
|
-
default: DEFAULT_ORIGIN2,
|
|
1582
|
-
description: "Origin"
|
|
1583
|
-
}
|
|
1584
|
-
};
|
|
1585
|
-
var resolve5 = (p) => ({
|
|
1586
|
-
rays: p.rays,
|
|
1587
|
-
colors: p.colors,
|
|
1588
|
-
rotation: p.rotation ?? 0,
|
|
1589
|
-
smoothness: p.smoothness ?? 0,
|
|
1590
|
-
origin: p.origin ?? DEFAULT_ORIGIN2
|
|
1591
|
-
});
|
|
1592
|
-
var validateStarburstEffectParams = (params) => {
|
|
1593
|
-
if (params === null || typeof params !== "object") {
|
|
1594
|
-
throw new TypeError(`Starburst effect requires a parameters object, but got ${JSON.stringify(params)}`);
|
|
1595
|
-
}
|
|
1596
|
-
const { rays, colors } = params;
|
|
1597
|
-
if (typeof rays !== "number" || !Number.isFinite(rays)) {
|
|
1598
|
-
throw new TypeError(`"rays" must be a finite number, but got ${JSON.stringify(rays)}`);
|
|
1599
|
-
}
|
|
1600
|
-
if (rays < 2 || rays > 100) {
|
|
1601
|
-
throw new RangeError(`"rays" must be between 2 and 100, but got ${rays}`);
|
|
1602
|
-
}
|
|
1603
|
-
if (!Array.isArray(colors) || colors.length < 2) {
|
|
1604
|
-
throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
|
|
1605
|
-
}
|
|
1606
|
-
const r = resolve5(params);
|
|
1607
|
-
if (typeof r.rotation !== "number" || !Number.isFinite(r.rotation)) {
|
|
1608
|
-
throw new TypeError(`"rotation" must be a finite number, but got ${JSON.stringify(params.rotation)}`);
|
|
1609
|
-
}
|
|
1610
|
-
if (typeof r.smoothness !== "number" || !Number.isFinite(r.smoothness)) {
|
|
1611
|
-
throw new TypeError(`"smoothness" must be a finite number, but got ${JSON.stringify(params.smoothness)}`);
|
|
1612
|
-
}
|
|
1613
|
-
if (r.smoothness < 0 || r.smoothness > 1) {
|
|
1614
|
-
throw new RangeError(`"smoothness" must be between 0 and 1, but got ${r.smoothness}`);
|
|
1615
|
-
}
|
|
1616
|
-
if (!Array.isArray(r.origin) || r.origin.length !== 2 || r.origin.some((coordinate) => {
|
|
1617
|
-
return typeof coordinate !== "number" || !Number.isFinite(coordinate);
|
|
1618
|
-
})) {
|
|
1619
|
-
throw new TypeError('"origin" must be a [number, number] tuple');
|
|
1620
|
-
}
|
|
1621
|
-
if (r.origin.some((coordinate) => coordinate < 0 || coordinate > 1)) {
|
|
1622
|
-
throw new RangeError(`"origin" must contain coordinates between 0 and 1, but got ${JSON.stringify(r.origin)}`);
|
|
1623
|
-
}
|
|
1624
|
-
for (const c of r.colors) {
|
|
1625
|
-
colorToRgb(c);
|
|
1626
|
-
}
|
|
1627
|
-
};
|
|
1628
|
-
var STARBURST_VS = `#version 300 es
|
|
1629
|
-
in vec2 aPos;
|
|
1630
|
-
in vec2 aUv;
|
|
1631
|
-
out vec2 vUv;
|
|
1632
|
-
void main() {
|
|
1633
|
-
vUv = aUv;
|
|
1634
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
1635
|
-
}
|
|
1636
|
-
`;
|
|
1637
|
-
var STARBURST_FS = `#version 300 es
|
|
1638
|
-
precision highp float;
|
|
1639
|
-
|
|
1640
|
-
uniform sampler2D colorPalette;
|
|
1641
|
-
uniform float numRays;
|
|
1642
|
-
uniform float rotationOffset;
|
|
1643
|
-
uniform float smoothEdge;
|
|
1644
|
-
uniform vec2 resolution;
|
|
1645
|
-
uniform float numColors;
|
|
1646
|
-
uniform vec2 origin;
|
|
1647
|
-
|
|
1648
|
-
in vec2 vUv;
|
|
1649
|
-
out vec4 fragColor;
|
|
1650
|
-
|
|
1651
|
-
const float Pi = 3.14159265359;
|
|
1652
|
-
|
|
1653
|
-
void main() {
|
|
1654
|
-
vec2 uv = vUv;
|
|
1655
|
-
vec2 center = uv - origin;
|
|
1656
|
-
center.x *= resolution.x / resolution.y;
|
|
1657
|
-
|
|
1658
|
-
float angle = atan(center.y, center.x) + rotationOffset;
|
|
1659
|
-
float normalizedAngle = (angle + Pi) / (2.0 * Pi);
|
|
1660
|
-
float sector = normalizedAngle * numRays;
|
|
1661
|
-
float rayIndex = mod(floor(sector), numRays);
|
|
1662
|
-
|
|
1663
|
-
float colorIndex = mod(rayIndex, numColors);
|
|
1664
|
-
float texCoord = (colorIndex + 0.5) / numColors;
|
|
1665
|
-
vec3 col = texture(colorPalette, vec2(texCoord, 0.5)).rgb;
|
|
1666
|
-
|
|
1667
|
-
float fractSector = fract(sector);
|
|
1668
|
-
float edgeSmooth = smoothEdge * 0.5;
|
|
1669
|
-
float nextColorIndex = mod(rayIndex + 1.0, numColors);
|
|
1670
|
-
float nextTexCoord = (nextColorIndex + 0.5) / numColors;
|
|
1671
|
-
vec3 nextCol = texture(colorPalette, vec2(nextTexCoord, 0.5)).rgb;
|
|
1672
|
-
|
|
1673
|
-
float blend = smoothstep(1.0 - edgeSmooth, 1.0, fractSector);
|
|
1674
|
-
col = mix(col, nextCol, blend);
|
|
1675
|
-
float blendStart = smoothstep(edgeSmooth, 0.0, fractSector);
|
|
1676
|
-
float prevColorIndex = mod(rayIndex - 1.0 + numColors, numColors);
|
|
1677
|
-
float prevTexCoord = (prevColorIndex + 0.5) / numColors;
|
|
1678
|
-
vec3 prevCol = texture(colorPalette, vec2(prevTexCoord, 0.5)).rgb;
|
|
1679
|
-
col = mix(col, prevCol, blendStart);
|
|
1680
|
-
|
|
1681
|
-
fragColor = vec4(col, 1.0);
|
|
1682
|
-
}
|
|
1683
|
-
`;
|
|
1684
|
-
var compileShader4 = (gl, type, source) => {
|
|
1685
|
-
const shader = gl.createShader(type);
|
|
1686
|
-
if (!shader) {
|
|
1687
|
-
throw new Error("Failed to create WebGL shader");
|
|
1688
|
-
}
|
|
1689
|
-
gl.shaderSource(shader, source);
|
|
1690
|
-
gl.compileShader(shader);
|
|
1691
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
1692
|
-
const log = gl.getShaderInfoLog(shader);
|
|
1693
|
-
gl.deleteShader(shader);
|
|
1694
|
-
throw new Error(`Starburst shader compile failed: ${log ?? "(no log)"}`);
|
|
1695
|
-
}
|
|
1696
|
-
return shader;
|
|
1697
|
-
};
|
|
1698
|
-
var linkProgram4 = (gl, vs, fs) => {
|
|
1699
|
-
const program = gl.createProgram();
|
|
1700
|
-
if (!program) {
|
|
1701
|
-
throw new Error("Failed to create WebGL program");
|
|
1702
|
-
}
|
|
1703
|
-
gl.attachShader(program, vs);
|
|
1704
|
-
gl.attachShader(program, fs);
|
|
1705
|
-
gl.linkProgram(program);
|
|
1706
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
1707
|
-
const log = gl.getProgramInfoLog(program);
|
|
1708
|
-
gl.deleteProgram(program);
|
|
1709
|
-
throw new Error(`Starburst program link failed: ${log ?? "(no log)"}`);
|
|
1710
|
-
}
|
|
1711
|
-
return program;
|
|
1712
|
-
};
|
|
1713
|
-
var starburst = createEffect5({
|
|
1714
|
-
type: "remotion/starburst",
|
|
1715
|
-
label: "starburst()",
|
|
1716
|
-
documentationLink: "https://www.remotion.dev/docs/effects/starburst",
|
|
1717
|
-
backend: "webgl2",
|
|
1718
|
-
calculateKey: (params) => {
|
|
1719
|
-
const r = resolve5(params);
|
|
1720
|
-
return `starburst-${r.rays}-${r.colors.join("|")}-${r.rotation}-${r.smoothness}-${r.origin.join(":")}`;
|
|
1721
|
-
},
|
|
1722
|
-
setup: (target) => {
|
|
1723
|
-
const gl = target.getContext("webgl2", {
|
|
1724
|
-
premultipliedAlpha: true,
|
|
1725
|
-
alpha: true,
|
|
1726
|
-
preserveDrawingBuffer: true
|
|
1727
|
-
});
|
|
1728
|
-
if (!gl) {
|
|
1729
|
-
throw createWebGL2ContextError4("starburst effect");
|
|
1730
|
-
}
|
|
1731
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
1732
|
-
const vs = compileShader4(gl, gl.VERTEX_SHADER, STARBURST_VS);
|
|
1733
|
-
const fs = compileShader4(gl, gl.FRAGMENT_SHADER, STARBURST_FS);
|
|
1734
|
-
const program = linkProgram4(gl, vs, fs);
|
|
1735
|
-
gl.deleteShader(vs);
|
|
1736
|
-
gl.deleteShader(fs);
|
|
1737
|
-
const vao = gl.createVertexArray();
|
|
1738
|
-
if (!vao) {
|
|
1739
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
1740
|
-
}
|
|
1741
|
-
gl.bindVertexArray(vao);
|
|
1742
|
-
const data = new Float32Array([
|
|
1743
|
-
-1,
|
|
1744
|
-
-1,
|
|
1745
|
-
0,
|
|
1746
|
-
0,
|
|
1747
|
-
1,
|
|
1748
|
-
-1,
|
|
1749
|
-
1,
|
|
1750
|
-
0,
|
|
1751
|
-
-1,
|
|
1752
|
-
1,
|
|
1753
|
-
0,
|
|
1754
|
-
1,
|
|
1755
|
-
1,
|
|
1756
|
-
1,
|
|
1757
|
-
1,
|
|
1758
|
-
1
|
|
1759
|
-
]);
|
|
1760
|
-
const vbo = gl.createBuffer();
|
|
1761
|
-
if (!vbo) {
|
|
1762
|
-
throw new Error("Failed to create WebGL buffer");
|
|
1763
|
-
}
|
|
1764
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
1765
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
1766
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
1767
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
1768
|
-
gl.enableVertexAttribArray(aPos);
|
|
1769
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
1770
|
-
gl.enableVertexAttribArray(aUv);
|
|
1771
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
1772
|
-
gl.bindVertexArray(null);
|
|
1773
|
-
const paletteTexture = gl.createTexture();
|
|
1774
|
-
if (!paletteTexture) {
|
|
1775
|
-
throw new Error("Failed to create WebGL palette texture");
|
|
1776
|
-
}
|
|
1777
|
-
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
1778
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
|
1779
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
|
1780
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
1781
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
1782
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
1783
|
-
return {
|
|
1784
|
-
gl,
|
|
1785
|
-
program,
|
|
1786
|
-
vao,
|
|
1787
|
-
vbo,
|
|
1788
|
-
paletteTexture,
|
|
1789
|
-
uColorPalette: gl.getUniformLocation(program, "colorPalette"),
|
|
1790
|
-
uNumRays: gl.getUniformLocation(program, "numRays"),
|
|
1791
|
-
uRotationOffset: gl.getUniformLocation(program, "rotationOffset"),
|
|
1792
|
-
uSmoothEdge: gl.getUniformLocation(program, "smoothEdge"),
|
|
1793
|
-
uResolution: gl.getUniformLocation(program, "resolution"),
|
|
1794
|
-
uNumColors: gl.getUniformLocation(program, "numColors"),
|
|
1795
|
-
uOrigin: gl.getUniformLocation(program, "origin"),
|
|
1796
|
-
cachedPaletteKey: "",
|
|
1797
|
-
palettePixelData: new Uint8Array(0)
|
|
1798
|
-
};
|
|
1799
|
-
},
|
|
1800
|
-
apply: ({ width, height, params, state }) => {
|
|
1801
|
-
const r = resolve5(params);
|
|
1802
|
-
const {
|
|
1803
|
-
gl,
|
|
1804
|
-
program,
|
|
1805
|
-
vao,
|
|
1806
|
-
paletteTexture,
|
|
1807
|
-
uColorPalette,
|
|
1808
|
-
uNumRays,
|
|
1809
|
-
uRotationOffset,
|
|
1810
|
-
uSmoothEdge,
|
|
1811
|
-
uResolution,
|
|
1812
|
-
uNumColors,
|
|
1813
|
-
uOrigin
|
|
1814
|
-
} = state;
|
|
1815
|
-
const rotationRad = r.rotation * Math.PI / 180;
|
|
1816
|
-
const paletteKey = r.colors.join("|");
|
|
1817
|
-
const paletteDirty = state.cachedPaletteKey !== paletteKey;
|
|
1818
|
-
if (paletteDirty) {
|
|
1819
|
-
state.cachedPaletteKey = paletteKey;
|
|
1820
|
-
const len = r.colors.length * 4;
|
|
1821
|
-
if (state.palettePixelData.length !== len) {
|
|
1822
|
-
state.palettePixelData = new Uint8Array(len);
|
|
1823
|
-
}
|
|
1824
|
-
const { palettePixelData } = state;
|
|
1825
|
-
for (let i = 0;i < r.colors.length; i++) {
|
|
1826
|
-
const rgb = colorToRgb(r.colors[i]);
|
|
1827
|
-
palettePixelData[i * 4] = rgb[0];
|
|
1828
|
-
palettePixelData[i * 4 + 1] = rgb[1];
|
|
1829
|
-
palettePixelData[i * 4 + 2] = rgb[2];
|
|
1830
|
-
palettePixelData[i * 4 + 3] = 255;
|
|
1831
|
-
}
|
|
1832
|
-
}
|
|
1833
|
-
gl.viewport(0, 0, width, height);
|
|
1834
|
-
gl.clearColor(0, 0, 0, 0);
|
|
1835
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
1836
|
-
gl.useProgram(program);
|
|
1837
|
-
gl.bindVertexArray(vao);
|
|
1838
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
1839
|
-
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
1840
|
-
if (paletteDirty) {
|
|
1841
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
|
|
1842
|
-
}
|
|
1843
|
-
if (uColorPalette)
|
|
1844
|
-
gl.uniform1i(uColorPalette, 0);
|
|
1845
|
-
if (uNumRays)
|
|
1846
|
-
gl.uniform1f(uNumRays, r.rays);
|
|
1847
|
-
if (uNumColors)
|
|
1848
|
-
gl.uniform1f(uNumColors, r.colors.length);
|
|
1849
|
-
if (uRotationOffset)
|
|
1850
|
-
gl.uniform1f(uRotationOffset, rotationRad);
|
|
1851
|
-
if (uSmoothEdge)
|
|
1852
|
-
gl.uniform1f(uSmoothEdge, r.smoothness);
|
|
1853
|
-
if (uOrigin)
|
|
1854
|
-
gl.uniform2f(uOrigin, r.origin[0], 1 - r.origin[1]);
|
|
1855
|
-
if (uResolution)
|
|
1856
|
-
gl.uniform2f(uResolution, width, height);
|
|
1857
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
1858
|
-
gl.bindVertexArray(null);
|
|
1859
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
1860
|
-
gl.useProgram(null);
|
|
1861
|
-
},
|
|
1862
|
-
cleanup: ({ gl, program, vao, vbo, paletteTexture }) => {
|
|
1863
|
-
gl.deleteBuffer(vbo);
|
|
1864
|
-
gl.deleteProgram(program);
|
|
1865
|
-
gl.deleteVertexArray(vao);
|
|
1866
|
-
gl.deleteTexture(paletteTexture);
|
|
1867
|
-
},
|
|
1868
|
-
schema: starburstEffectSchema,
|
|
1869
|
-
validateParams: validateStarburstEffectParams
|
|
1870
|
-
});
|
|
1871
|
-
// src/light-leak.ts
|
|
1872
|
-
import { Internals as Internals6 } from "remotion";
|
|
1873
|
-
var { createEffect: createEffect6, createWebGL2ContextError: createWebGL2ContextError5 } = Internals6;
|
|
1874
|
-
var DEFAULT_SEED = 0;
|
|
1875
|
-
var DEFAULT_HUE_SHIFT = 0;
|
|
1876
|
-
var DEFAULT_PROGRESS = 0.5;
|
|
1877
|
-
var lightLeakEffectSchema = {
|
|
1878
|
-
seed: {
|
|
1879
|
-
type: "number",
|
|
1880
|
-
default: DEFAULT_SEED,
|
|
1881
|
-
description: "Seed",
|
|
1882
|
-
hiddenFromList: false
|
|
1883
|
-
},
|
|
1884
|
-
hueShift: {
|
|
1885
|
-
type: "number",
|
|
1886
|
-
min: 0,
|
|
1887
|
-
max: 360,
|
|
1888
|
-
default: DEFAULT_HUE_SHIFT,
|
|
1889
|
-
description: "Hue Shift",
|
|
1890
|
-
hiddenFromList: false
|
|
1891
|
-
},
|
|
1892
|
-
progress: {
|
|
1893
|
-
type: "number",
|
|
1894
|
-
min: 0,
|
|
1895
|
-
max: 1,
|
|
1896
|
-
step: 0.01,
|
|
1897
|
-
default: DEFAULT_PROGRESS,
|
|
1898
|
-
description: "Progress",
|
|
1899
|
-
hiddenFromList: false
|
|
1900
|
-
}
|
|
1901
|
-
};
|
|
1902
|
-
var resolve6 = (p) => ({
|
|
1903
|
-
seed: p.seed ?? DEFAULT_SEED,
|
|
1904
|
-
hueShift: p.hueShift ?? DEFAULT_HUE_SHIFT,
|
|
1905
|
-
progress: p.progress ?? DEFAULT_PROGRESS
|
|
1906
|
-
});
|
|
1907
|
-
var validateLightLeakParams = (params) => {
|
|
1908
|
-
assertEffectParamsObject(params, "lightLeak()");
|
|
1909
|
-
assertOptionalFiniteNumber(params.seed, "seed");
|
|
1910
|
-
assertOptionalFiniteNumber(params.hueShift, "hueShift");
|
|
1911
|
-
assertOptionalFiniteNumber(params.progress, "progress");
|
|
1912
|
-
const { hueShift, progress } = resolve6(params);
|
|
1913
|
-
if (hueShift < 0) {
|
|
1914
|
-
throw new TypeError(`"hueShift" must be >= 0, but got ${hueShift}`);
|
|
1915
|
-
}
|
|
1916
|
-
if (hueShift > 360) {
|
|
1917
|
-
throw new TypeError(`"hueShift" must be <= 360, but got ${hueShift}`);
|
|
1918
|
-
}
|
|
1919
|
-
validateUnitInterval(progress, "progress");
|
|
1920
|
-
};
|
|
1921
|
-
var LIGHT_LEAK_VS = `#version 300 es
|
|
1922
|
-
in vec2 aPos;
|
|
1923
|
-
in vec2 aUv;
|
|
1924
|
-
out vec2 vUv;
|
|
1925
|
-
void main() {
|
|
1926
|
-
vUv = aUv;
|
|
1927
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
1928
|
-
}
|
|
1929
|
-
`;
|
|
1930
|
-
var LIGHT_LEAK_FS = `#version 300 es
|
|
1931
|
-
precision highp float;
|
|
1932
|
-
|
|
1933
|
-
in vec2 vUv;
|
|
1934
|
-
out vec4 fragColor;
|
|
1935
|
-
|
|
1936
|
-
uniform sampler2D uSource;
|
|
1937
|
-
uniform float evolveProgress;
|
|
1938
|
-
uniform float retractProgress;
|
|
1939
|
-
uniform float seed;
|
|
1940
|
-
uniform float retractSeed;
|
|
1941
|
-
uniform float hueShift;
|
|
1942
|
-
uniform vec2 resolution;
|
|
1943
|
-
|
|
1944
|
-
const float Pi = 3.14159;
|
|
1945
|
-
|
|
1946
|
-
vec3 computePattern(vec2 uv, float s, float t) {
|
|
1947
|
-
vec2 p = uv * 0.8;
|
|
1948
|
-
p += vec2(sin(s * 1.61803) * 5.0, cos(s * 2.71828) * 5.0);
|
|
1949
|
-
|
|
1950
|
-
for (int i = 1; i < 5; i++) {
|
|
1951
|
-
vec2 newp = p;
|
|
1952
|
-
float fi = float(i);
|
|
1953
|
-
float phase = s * 0.7 * fi;
|
|
1954
|
-
newp.x += 0.6 / fi * cos(fi * p.y + t * 0.7 + 0.3 * fi + phase) + 20.0;
|
|
1955
|
-
newp.y += 0.6 / fi * cos(fi * p.x + t * 0.7 + 0.3 * float(i + 10) + phase) - 20.0 + 15.0;
|
|
1956
|
-
p = newp;
|
|
1957
|
-
}
|
|
1958
|
-
|
|
1959
|
-
float v1 = 0.5 * sin(2.0 * p.x) + 0.5;
|
|
1960
|
-
float v2 = 0.5 * sin(2.0 * p.y) + 0.5;
|
|
1961
|
-
float blend = sin(p.x + p.y) * 0.5 + 0.5;
|
|
1962
|
-
float brightness = v1 * 0.5 + v2 * 0.5;
|
|
1963
|
-
float patternValue = brightness * 0.6 + blend * 0.4;
|
|
1964
|
-
|
|
1965
|
-
return vec3(brightness, blend, patternValue);
|
|
1966
|
-
}
|
|
1967
|
-
|
|
1968
|
-
void main() {
|
|
1969
|
-
float refScale = 1.92;
|
|
1970
|
-
vec2 uv = (gl_FragCoord.xy / resolution) * vec2(refScale, refScale * resolution.y / resolution.x);
|
|
1971
|
-
|
|
1972
|
-
vec3 patA = computePattern(uv, seed, evolveProgress * Pi);
|
|
1973
|
-
float threshA = 1.0 - evolveProgress;
|
|
1974
|
-
float revealAlpha = smoothstep(threshA, threshA + 0.3, patA.z);
|
|
1975
|
-
|
|
1976
|
-
vec2 maxUv = vec2(refScale, refScale * resolution.y / resolution.x);
|
|
1977
|
-
vec2 retractUv = maxUv - uv;
|
|
1978
|
-
vec3 patB = computePattern(retractUv, retractSeed, retractProgress * Pi);
|
|
1979
|
-
float threshB = 1.0 - retractProgress;
|
|
1980
|
-
float eraseAlpha = smoothstep(threshB, threshB + 0.3, patB.z);
|
|
1981
|
-
|
|
1982
|
-
float alpha = revealAlpha * (1.0 - eraseAlpha);
|
|
1983
|
-
|
|
1984
|
-
vec3 yellow = vec3(1.0, 0.85, 0.2);
|
|
1985
|
-
vec3 orange = vec3(1.0, 0.5, 0.05);
|
|
1986
|
-
vec3 col = mix(yellow, orange, patA.y);
|
|
1987
|
-
col *= 0.6 + 0.6 * patA.x;
|
|
1988
|
-
|
|
1989
|
-
float angle = hueShift * Pi / 180.0;
|
|
1990
|
-
float cosA = cos(angle);
|
|
1991
|
-
float sinA = sin(angle);
|
|
1992
|
-
mat3 hueRot = mat3(
|
|
1993
|
-
cosA + (1.0 - cosA) / 3.0,
|
|
1994
|
-
(1.0 - cosA) / 3.0 - sinA * 0.57735,
|
|
1995
|
-
(1.0 - cosA) / 3.0 + sinA * 0.57735,
|
|
1996
|
-
(1.0 - cosA) / 3.0 + sinA * 0.57735,
|
|
1997
|
-
cosA + (1.0 - cosA) / 3.0,
|
|
1998
|
-
(1.0 - cosA) / 3.0 - sinA * 0.57735,
|
|
1999
|
-
(1.0 - cosA) / 3.0 - sinA * 0.57735,
|
|
2000
|
-
(1.0 - cosA) / 3.0 + sinA * 0.57735,
|
|
2001
|
-
cosA + (1.0 - cosA) / 3.0
|
|
2002
|
-
);
|
|
2003
|
-
col = clamp(hueRot * col, 0.0, 1.0);
|
|
2004
|
-
|
|
2005
|
-
vec4 src = texture(uSource, vUv);
|
|
2006
|
-
vec4 leakPm = vec4(col * alpha, alpha);
|
|
2007
|
-
fragColor = leakPm + src * (1.0 - alpha);
|
|
2008
|
-
}
|
|
2009
|
-
`;
|
|
2010
|
-
var compileShader5 = (gl, type, source) => {
|
|
2011
|
-
const shader = gl.createShader(type);
|
|
2012
|
-
if (!shader) {
|
|
2013
|
-
throw new Error("Failed to create WebGL shader");
|
|
2014
|
-
}
|
|
2015
|
-
gl.shaderSource(shader, source);
|
|
2016
|
-
gl.compileShader(shader);
|
|
2017
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
2018
|
-
const log = gl.getShaderInfoLog(shader);
|
|
2019
|
-
gl.deleteShader(shader);
|
|
2020
|
-
throw new Error(`Light leak shader compile failed: ${log ?? "(no log)"}`);
|
|
2021
|
-
}
|
|
2022
|
-
return shader;
|
|
2023
|
-
};
|
|
2024
|
-
var linkProgram5 = (gl, vs, fs) => {
|
|
2025
|
-
const program = gl.createProgram();
|
|
2026
|
-
if (!program) {
|
|
2027
|
-
throw new Error("Failed to create WebGL program");
|
|
2028
|
-
}
|
|
2029
|
-
gl.attachShader(program, vs);
|
|
2030
|
-
gl.attachShader(program, fs);
|
|
2031
|
-
gl.linkProgram(program);
|
|
2032
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
2033
|
-
const log = gl.getProgramInfoLog(program);
|
|
2034
|
-
gl.deleteProgram(program);
|
|
2035
|
-
throw new Error(`Light leak program link failed: ${log ?? "(no log)"}`);
|
|
2036
|
-
}
|
|
2037
|
-
return program;
|
|
2038
|
-
};
|
|
2039
|
-
var lightLeak = createEffect6({
|
|
2040
|
-
type: "remotion/light-leak",
|
|
2041
|
-
label: "lightLeak()",
|
|
2042
|
-
documentationLink: "https://www.remotion.dev/docs/effects/light-leak",
|
|
2043
|
-
backend: "webgl2",
|
|
2044
|
-
calculateKey: (params) => {
|
|
2045
|
-
const r = resolve6(params);
|
|
2046
|
-
return `light-leak-${r.seed}-${r.hueShift}-${r.progress}`;
|
|
2047
|
-
},
|
|
2048
|
-
setup: (target) => {
|
|
2049
|
-
const gl = target.getContext("webgl2", {
|
|
2050
|
-
premultipliedAlpha: true,
|
|
2051
|
-
alpha: true,
|
|
2052
|
-
preserveDrawingBuffer: true
|
|
2053
|
-
});
|
|
2054
|
-
if (!gl) {
|
|
2055
|
-
throw createWebGL2ContextError5("light leak effect");
|
|
2056
|
-
}
|
|
2057
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
2058
|
-
const vs = compileShader5(gl, gl.VERTEX_SHADER, LIGHT_LEAK_VS);
|
|
2059
|
-
const fs = compileShader5(gl, gl.FRAGMENT_SHADER, LIGHT_LEAK_FS);
|
|
2060
|
-
const program = linkProgram5(gl, vs, fs);
|
|
2061
|
-
gl.deleteShader(vs);
|
|
2062
|
-
gl.deleteShader(fs);
|
|
2063
|
-
const vao = gl.createVertexArray();
|
|
2064
|
-
if (!vao) {
|
|
2065
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
2066
|
-
}
|
|
2067
|
-
gl.bindVertexArray(vao);
|
|
2068
|
-
const data = new Float32Array([
|
|
2069
|
-
-1,
|
|
2070
|
-
-1,
|
|
2071
|
-
0,
|
|
2072
|
-
0,
|
|
2073
|
-
1,
|
|
2074
|
-
-1,
|
|
2075
|
-
1,
|
|
2076
|
-
0,
|
|
2077
|
-
-1,
|
|
2078
|
-
1,
|
|
2079
|
-
0,
|
|
2080
|
-
1,
|
|
2081
|
-
1,
|
|
2082
|
-
1,
|
|
2083
|
-
1,
|
|
2084
|
-
1
|
|
2085
|
-
]);
|
|
2086
|
-
const vbo = gl.createBuffer();
|
|
2087
|
-
if (!vbo) {
|
|
2088
|
-
throw new Error("Failed to create WebGL buffer");
|
|
2089
|
-
}
|
|
2090
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
2091
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
2092
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
2093
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
2094
|
-
gl.enableVertexAttribArray(aPos);
|
|
2095
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
2096
|
-
gl.enableVertexAttribArray(aUv);
|
|
2097
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
2098
|
-
gl.bindVertexArray(null);
|
|
2099
|
-
const texture = gl.createTexture();
|
|
2100
|
-
if (!texture) {
|
|
2101
|
-
throw new Error("Failed to create WebGL texture");
|
|
2102
|
-
}
|
|
2103
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
2104
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
2105
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
2106
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
2107
|
-
return {
|
|
2108
|
-
gl,
|
|
2109
|
-
program,
|
|
2110
|
-
vao,
|
|
2111
|
-
vbo,
|
|
2112
|
-
texture,
|
|
2113
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
2114
|
-
uEvolveProgress: gl.getUniformLocation(program, "evolveProgress"),
|
|
2115
|
-
uRetractProgress: gl.getUniformLocation(program, "retractProgress"),
|
|
2116
|
-
uSeed: gl.getUniformLocation(program, "seed"),
|
|
2117
|
-
uRetractSeed: gl.getUniformLocation(program, "retractSeed"),
|
|
2118
|
-
uHueShift: gl.getUniformLocation(program, "hueShift"),
|
|
2119
|
-
uResolution: gl.getUniformLocation(program, "resolution")
|
|
2120
|
-
};
|
|
2121
|
-
},
|
|
2122
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
2123
|
-
const r = resolve6(params);
|
|
2124
|
-
const evolveProgress = Math.min(1, r.progress * 2);
|
|
2125
|
-
const retractProgress = Math.max(0, r.progress * 2 - 1);
|
|
2126
|
-
const {
|
|
2127
|
-
gl,
|
|
2128
|
-
program,
|
|
2129
|
-
vao,
|
|
2130
|
-
texture,
|
|
2131
|
-
uSource,
|
|
2132
|
-
uEvolveProgress,
|
|
2133
|
-
uRetractProgress,
|
|
2134
|
-
uSeed,
|
|
2135
|
-
uRetractSeed,
|
|
2136
|
-
uHueShift,
|
|
2137
|
-
uResolution
|
|
2138
|
-
} = state;
|
|
2139
|
-
gl.viewport(0, 0, width, height);
|
|
2140
|
-
gl.clearColor(0, 0, 0, 0);
|
|
2141
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
2142
|
-
gl.useProgram(program);
|
|
2143
|
-
gl.bindVertexArray(vao);
|
|
2144
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
2145
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
2146
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
2147
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
2148
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
2149
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
2150
|
-
if (uSource)
|
|
2151
|
-
gl.uniform1i(uSource, 0);
|
|
2152
|
-
if (uEvolveProgress)
|
|
2153
|
-
gl.uniform1f(uEvolveProgress, evolveProgress);
|
|
2154
|
-
if (uRetractProgress)
|
|
2155
|
-
gl.uniform1f(uRetractProgress, retractProgress);
|
|
2156
|
-
if (uSeed)
|
|
2157
|
-
gl.uniform1f(uSeed, r.seed);
|
|
2158
|
-
if (uRetractSeed)
|
|
2159
|
-
gl.uniform1f(uRetractSeed, r.seed + 42);
|
|
2160
|
-
if (uHueShift)
|
|
2161
|
-
gl.uniform1f(uHueShift, r.hueShift);
|
|
2162
|
-
if (uResolution)
|
|
2163
|
-
gl.uniform2f(uResolution, width, height);
|
|
2164
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
2165
|
-
gl.bindVertexArray(null);
|
|
2166
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
2167
|
-
gl.useProgram(null);
|
|
2168
|
-
},
|
|
2169
|
-
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
2170
|
-
gl.deleteBuffer(vbo);
|
|
2171
|
-
gl.deleteProgram(program);
|
|
2172
|
-
gl.deleteVertexArray(vao);
|
|
2173
|
-
gl.deleteTexture(texture);
|
|
2174
|
-
},
|
|
2175
|
-
schema: lightLeakEffectSchema,
|
|
2176
|
-
validateParams: validateLightLeakParams
|
|
2177
|
-
});
|
|
2178
|
-
// src/gridlines.ts
|
|
2179
|
-
import { Internals as Internals7 } from "remotion";
|
|
2180
|
-
var { createEffect: createEffect7, createWebGL2ContextError: createWebGL2ContextError6 } = Internals7;
|
|
2181
|
-
var DEFAULT_GRID_SIZE = 64;
|
|
2182
|
-
var DEFAULT_LINE_WIDTH = 2;
|
|
2183
|
-
var DEFAULT_LINE_COLOR = "#ffffff";
|
|
2184
|
-
var DEFAULT_BACKGROUND_COLOR = "transparent";
|
|
2185
|
-
var DEFAULT_ROTATION = 0;
|
|
2186
|
-
var DEFAULT_ROTATION_X = 0;
|
|
2187
|
-
var DEFAULT_ROTATION_Y = 0;
|
|
2188
|
-
var DEFAULT_PERSPECTIVE = 0;
|
|
2189
|
-
var DEFAULT_OFFSET_X2 = 0;
|
|
2190
|
-
var DEFAULT_OFFSET_Y2 = 0;
|
|
2191
|
-
var DEFAULT_MASK_TO_SOURCE_ALPHA3 = false;
|
|
2192
|
-
var gridlinesSchema = {
|
|
2193
|
-
gridSize: {
|
|
2194
|
-
type: "number",
|
|
2195
|
-
min: 1,
|
|
2196
|
-
max: 400,
|
|
2197
|
-
step: 1,
|
|
2198
|
-
default: DEFAULT_GRID_SIZE,
|
|
2199
|
-
description: "Grid size",
|
|
2200
|
-
hiddenFromList: false
|
|
2201
|
-
},
|
|
2202
|
-
lineWidth: {
|
|
2203
|
-
type: "number",
|
|
2204
|
-
min: 0,
|
|
2205
|
-
max: 100,
|
|
2206
|
-
step: 0.1,
|
|
2207
|
-
default: DEFAULT_LINE_WIDTH,
|
|
2208
|
-
description: "Line width",
|
|
2209
|
-
hiddenFromList: false
|
|
2210
|
-
},
|
|
2211
|
-
lineColor: {
|
|
2212
|
-
type: "color",
|
|
2213
|
-
default: DEFAULT_LINE_COLOR,
|
|
2214
|
-
description: "Line color"
|
|
2215
|
-
},
|
|
2216
|
-
backgroundColor: {
|
|
2217
|
-
type: "color",
|
|
2218
|
-
default: DEFAULT_BACKGROUND_COLOR,
|
|
2219
|
-
description: "Background color"
|
|
2220
|
-
},
|
|
2221
|
-
rotation: {
|
|
2222
|
-
type: "rotation-degrees",
|
|
2223
|
-
min: -180,
|
|
2224
|
-
max: 180,
|
|
2225
|
-
step: 1,
|
|
2226
|
-
default: DEFAULT_ROTATION,
|
|
2227
|
-
description: "Rotation"
|
|
2228
|
-
},
|
|
2229
|
-
rotationX: {
|
|
2230
|
-
type: "rotation-degrees",
|
|
2231
|
-
min: -180,
|
|
2232
|
-
max: 180,
|
|
2233
|
-
step: 0.1,
|
|
2234
|
-
default: DEFAULT_ROTATION_X,
|
|
2235
|
-
description: "Rotation X"
|
|
2236
|
-
},
|
|
2237
|
-
rotationY: {
|
|
2238
|
-
type: "rotation-degrees",
|
|
2239
|
-
min: -180,
|
|
2240
|
-
max: 180,
|
|
2241
|
-
step: 0.1,
|
|
2242
|
-
default: DEFAULT_ROTATION_Y,
|
|
2243
|
-
description: "Rotation Y"
|
|
2244
|
-
},
|
|
2245
|
-
perspective: {
|
|
2246
|
-
type: "number",
|
|
2247
|
-
min: 0,
|
|
2248
|
-
max: 4000,
|
|
2249
|
-
step: 1,
|
|
2250
|
-
default: DEFAULT_PERSPECTIVE,
|
|
2251
|
-
description: "Perspective",
|
|
2252
|
-
hiddenFromList: false
|
|
2253
|
-
},
|
|
2254
|
-
offsetX: {
|
|
2255
|
-
type: "number",
|
|
2256
|
-
min: -400,
|
|
2257
|
-
max: 400,
|
|
2258
|
-
step: 0.1,
|
|
2259
|
-
default: DEFAULT_OFFSET_X2,
|
|
2260
|
-
description: "Offset X",
|
|
2261
|
-
hiddenFromList: false
|
|
2262
|
-
},
|
|
2263
|
-
offsetY: {
|
|
2264
|
-
type: "number",
|
|
2265
|
-
min: -400,
|
|
2266
|
-
max: 400,
|
|
2267
|
-
step: 0.1,
|
|
2268
|
-
default: DEFAULT_OFFSET_Y2,
|
|
2269
|
-
description: "Offset Y",
|
|
2270
|
-
hiddenFromList: false
|
|
2271
|
-
},
|
|
2272
|
-
maskToSourceAlpha: {
|
|
2273
|
-
type: "boolean",
|
|
2274
|
-
default: DEFAULT_MASK_TO_SOURCE_ALPHA3,
|
|
2275
|
-
description: "Mask to source alpha"
|
|
2276
|
-
}
|
|
2277
|
-
};
|
|
2278
|
-
var resolve7 = (p) => ({
|
|
2279
|
-
gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
|
|
2280
|
-
lineWidth: p.lineWidth ?? DEFAULT_LINE_WIDTH,
|
|
2281
|
-
lineColor: p.lineColor ?? DEFAULT_LINE_COLOR,
|
|
2282
|
-
backgroundColor: p.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
|
|
2283
|
-
rotation: p.rotation ?? DEFAULT_ROTATION,
|
|
2284
|
-
rotationX: p.rotationX ?? DEFAULT_ROTATION_X,
|
|
2285
|
-
rotationY: p.rotationY ?? DEFAULT_ROTATION_Y,
|
|
2286
|
-
perspective: p.perspective ?? DEFAULT_PERSPECTIVE,
|
|
2287
|
-
offsetX: p.offsetX ?? DEFAULT_OFFSET_X2,
|
|
2288
|
-
offsetY: p.offsetY ?? DEFAULT_OFFSET_Y2,
|
|
2289
|
-
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA3
|
|
2290
|
-
});
|
|
2291
|
-
var validatePositive4 = (value, name) => {
|
|
2292
|
-
if (value <= 0) {
|
|
2293
|
-
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
2294
|
-
}
|
|
2295
|
-
};
|
|
2296
|
-
var validateNonNegative4 = (value, name) => {
|
|
2297
|
-
if (value < 0) {
|
|
2298
|
-
throw new TypeError(`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`);
|
|
2299
|
-
}
|
|
2300
|
-
};
|
|
2301
|
-
var validateGridlinesParams = (params) => {
|
|
2302
|
-
assertEffectParamsObject(params, "Gridlines");
|
|
2303
|
-
assertOptionalFiniteNumber(params.gridSize, "gridSize");
|
|
2304
|
-
assertOptionalFiniteNumber(params.lineWidth, "lineWidth");
|
|
2305
|
-
assertOptionalFiniteNumber(params.rotation, "rotation");
|
|
2306
|
-
assertOptionalFiniteNumber(params.rotationX, "rotationX");
|
|
2307
|
-
assertOptionalFiniteNumber(params.rotationY, "rotationY");
|
|
2308
|
-
assertOptionalFiniteNumber(params.perspective, "perspective");
|
|
2309
|
-
assertOptionalFiniteNumber(params.offsetX, "offsetX");
|
|
2310
|
-
assertOptionalFiniteNumber(params.offsetY, "offsetY");
|
|
2311
|
-
assertOptionalColor(params.lineColor, "lineColor");
|
|
2312
|
-
assertOptionalColor(params.backgroundColor, "backgroundColor");
|
|
2313
|
-
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
2314
|
-
validatePositive4(params.gridSize ?? DEFAULT_GRID_SIZE, "gridSize");
|
|
2315
|
-
validateNonNegative4(params.lineWidth ?? DEFAULT_LINE_WIDTH, "lineWidth");
|
|
2316
|
-
validateNonNegative4(params.perspective ?? DEFAULT_PERSPECTIVE, "perspective");
|
|
2317
|
-
};
|
|
2318
|
-
var GRIDLINES_VS = `#version 300 es
|
|
2319
|
-
in vec2 aPos;
|
|
2320
|
-
in vec2 aUv;
|
|
2321
|
-
out vec2 vUv;
|
|
2322
|
-
|
|
2323
|
-
void main() {
|
|
2324
|
-
vUv = aUv;
|
|
2325
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
2326
|
-
}
|
|
2327
|
-
`;
|
|
2328
|
-
var GRIDLINES_FS = `#version 300 es
|
|
2329
|
-
precision highp float;
|
|
2330
|
-
|
|
2331
|
-
in vec2 vUv;
|
|
2332
|
-
out vec4 fragColor;
|
|
2333
|
-
|
|
2334
|
-
uniform sampler2D uSource;
|
|
2335
|
-
uniform vec2 uResolution;
|
|
2336
|
-
uniform float uGridSize;
|
|
2337
|
-
uniform float uLineWidth;
|
|
2338
|
-
uniform vec4 uLineColor;
|
|
2339
|
-
uniform vec4 uBackgroundColor;
|
|
2340
|
-
uniform float uRotation;
|
|
2341
|
-
uniform float uRotationX;
|
|
2342
|
-
uniform float uRotationY;
|
|
2343
|
-
uniform float uPerspective;
|
|
2344
|
-
uniform vec2 uOffset;
|
|
2345
|
-
uniform bool uMaskToSourceAlpha;
|
|
2346
|
-
|
|
2347
|
-
vec4 sourceOver(vec4 backdrop, vec4 overlay) {
|
|
2348
|
-
return overlay + backdrop * (1.0 - overlay.a);
|
|
2349
|
-
}
|
|
2350
|
-
|
|
2351
|
-
vec4 sourceAtop(vec4 backdrop, vec4 overlay) {
|
|
2352
|
-
return vec4(
|
|
2353
|
-
overlay.rgb * backdrop.a + backdrop.rgb * (1.0 - overlay.a),
|
|
2354
|
-
backdrop.a
|
|
2355
|
-
);
|
|
2356
|
-
}
|
|
2357
|
-
|
|
2358
|
-
mat3 rotationMatrix(float rotationX, float rotationY, float rotationZ) {
|
|
2359
|
-
float sx = sin(rotationX);
|
|
2360
|
-
float cx = cos(rotationX);
|
|
2361
|
-
float sy = sin(rotationY);
|
|
2362
|
-
float cy = cos(rotationY);
|
|
2363
|
-
float sz = sin(rotationZ);
|
|
2364
|
-
float cz = cos(rotationZ);
|
|
2365
|
-
|
|
2366
|
-
mat3 rx = mat3(
|
|
2367
|
-
1.0, 0.0, 0.0,
|
|
2368
|
-
0.0, cx, sx,
|
|
2369
|
-
0.0, -sx, cx
|
|
2370
|
-
);
|
|
2371
|
-
mat3 ry = mat3(
|
|
2372
|
-
cy, 0.0, -sy,
|
|
2373
|
-
0.0, 1.0, 0.0,
|
|
2374
|
-
sy, 0.0, cy
|
|
2375
|
-
);
|
|
2376
|
-
mat3 rz = mat3(
|
|
2377
|
-
cz, sz, 0.0,
|
|
2378
|
-
-sz, cz, 0.0,
|
|
2379
|
-
0.0, 0.0, 1.0
|
|
2380
|
-
);
|
|
2381
|
-
|
|
2382
|
-
return rz * ry * rx;
|
|
2383
|
-
}
|
|
2384
|
-
|
|
2385
|
-
void main() {
|
|
2386
|
-
vec4 texColor = texture(uSource, vUv);
|
|
2387
|
-
vec2 centered = vUv * uResolution - uResolution * 0.5;
|
|
2388
|
-
mat3 rotation = rotationMatrix(uRotationX, uRotationY, uRotation);
|
|
2389
|
-
vec2 gridCoord;
|
|
2390
|
-
|
|
2391
|
-
if (uPerspective <= 0.0) {
|
|
2392
|
-
vec3 rotated = rotation * vec3(centered, 0.0);
|
|
2393
|
-
gridCoord = rotated.xy + uOffset;
|
|
2394
|
-
} else {
|
|
2395
|
-
vec3 camera = vec3(0.0, 0.0, uPerspective);
|
|
2396
|
-
vec3 ray = normalize(vec3(centered, -uPerspective));
|
|
2397
|
-
vec3 normal = rotation * vec3(0.0, 0.0, 1.0);
|
|
2398
|
-
float denominator = dot(ray, normal);
|
|
2399
|
-
float t = -dot(camera, normal) / denominator;
|
|
2400
|
-
|
|
2401
|
-
if (abs(denominator) < 0.0001 || t <= 0.0) {
|
|
2402
|
-
fragColor = sourceOver(texColor, uBackgroundColor);
|
|
2403
|
-
return;
|
|
2404
|
-
}
|
|
2405
|
-
|
|
2406
|
-
vec3 worldPosition = camera + ray * t;
|
|
2407
|
-
vec3 localPosition = transpose(rotation) * worldPosition;
|
|
2408
|
-
gridCoord = localPosition.xy + uOffset;
|
|
2409
|
-
}
|
|
2410
|
-
|
|
2411
|
-
float gridSize = max(uGridSize, 0.001);
|
|
2412
|
-
vec2 cell = abs(fract(gridCoord / gridSize + 0.5) - 0.5) * gridSize;
|
|
2413
|
-
float halfLineWidth = uLineWidth * 0.5;
|
|
2414
|
-
vec2 gridUnitsPerPixel = max(fwidth(gridCoord), vec2(0.001));
|
|
2415
|
-
vec2 halfWidthInGridUnits = halfLineWidth * gridUnitsPerPixel;
|
|
2416
|
-
vec2 antialiasInGridUnits = gridUnitsPerPixel;
|
|
2417
|
-
vec2 projectedCellSize = gridSize / gridUnitsPerPixel;
|
|
2418
|
-
vec2 densityFade = smoothstep(
|
|
2419
|
-
vec2(max(uLineWidth * 1.5, 1.0)),
|
|
2420
|
-
vec2(max(uLineWidth * 4.0, 2.0)),
|
|
2421
|
-
projectedCellSize
|
|
2422
|
-
);
|
|
2423
|
-
vec2 lineCoverage = halfLineWidth <= 0.001
|
|
2424
|
-
? vec2(0.0)
|
|
2425
|
-
: 1.0 - smoothstep(
|
|
2426
|
-
halfWidthInGridUnits - antialiasInGridUnits,
|
|
2427
|
-
halfWidthInGridUnits + antialiasInGridUnits,
|
|
2428
|
-
cell
|
|
2429
|
-
);
|
|
2430
|
-
lineCoverage *= densityFade;
|
|
2431
|
-
float coverage = max(lineCoverage.x, lineCoverage.y);
|
|
2432
|
-
|
|
2433
|
-
vec4 background = uBackgroundColor;
|
|
2434
|
-
vec4 line = uLineColor * coverage;
|
|
2435
|
-
|
|
2436
|
-
if (uMaskToSourceAlpha) {
|
|
2437
|
-
fragColor = sourceAtop(sourceAtop(texColor, background), line);
|
|
2438
|
-
return;
|
|
2439
|
-
}
|
|
2440
|
-
|
|
2441
|
-
fragColor = sourceOver(sourceOver(texColor, background), line);
|
|
2442
|
-
}
|
|
2443
|
-
`;
|
|
2444
|
-
var compileShader6 = (gl, type, source) => {
|
|
2445
|
-
const shader = gl.createShader(type);
|
|
2446
|
-
if (!shader) {
|
|
2447
|
-
throw new Error("Failed to create WebGL shader");
|
|
2448
|
-
}
|
|
2449
|
-
gl.shaderSource(shader, source);
|
|
2450
|
-
gl.compileShader(shader);
|
|
2451
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
2452
|
-
const log = gl.getShaderInfoLog(shader);
|
|
2453
|
-
gl.deleteShader(shader);
|
|
2454
|
-
throw new Error(`Gridlines shader compile failed: ${log ?? "(no log)"}`);
|
|
2455
|
-
}
|
|
2456
|
-
return shader;
|
|
2457
|
-
};
|
|
2458
|
-
var linkProgram6 = (gl, vs, fs) => {
|
|
2459
|
-
const program = gl.createProgram();
|
|
2460
|
-
if (!program) {
|
|
2461
|
-
throw new Error("Failed to create WebGL program");
|
|
2462
|
-
}
|
|
2463
|
-
gl.attachShader(program, vs);
|
|
2464
|
-
gl.attachShader(program, fs);
|
|
2465
|
-
gl.linkProgram(program);
|
|
2466
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
2467
|
-
const log = gl.getProgramInfoLog(program);
|
|
2468
|
-
gl.deleteProgram(program);
|
|
2469
|
-
throw new Error(`Gridlines program link failed: ${log ?? "(no log)"}`);
|
|
2470
|
-
}
|
|
2471
|
-
return program;
|
|
2472
|
-
};
|
|
2473
|
-
var rgbaToUniform = (rgba) => {
|
|
2474
|
-
const [r, g, b, a] = rgba;
|
|
2475
|
-
const alpha = a / 255;
|
|
2476
|
-
return [r / 255 * alpha, g / 255 * alpha, b / 255 * alpha, alpha];
|
|
2477
|
-
};
|
|
2478
|
-
var gridlines = createEffect7({
|
|
2479
|
-
type: "remotion/gridlines",
|
|
2480
|
-
label: "gridlines()",
|
|
2481
|
-
documentationLink: "https://www.remotion.dev/docs/effects/gridlines",
|
|
2482
|
-
backend: "webgl2",
|
|
2483
|
-
calculateKey: (params) => {
|
|
2484
|
-
const r = resolve7(params);
|
|
2485
|
-
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
2486
|
-
return `gridlines-${r.gridSize}-${r.lineWidth}-${r.lineColor}-${r.backgroundColor}-${r.rotation}-${r.rotationX}-${r.rotationY}-${r.perspective}-${r.offsetX}-${r.offsetY}${maskSuffix}`;
|
|
2487
|
-
},
|
|
2488
|
-
setup: (target) => {
|
|
2489
|
-
const gl = target.getContext("webgl2", {
|
|
2490
|
-
premultipliedAlpha: true,
|
|
2491
|
-
alpha: true,
|
|
2492
|
-
preserveDrawingBuffer: true
|
|
2493
|
-
});
|
|
2494
|
-
if (!gl) {
|
|
2495
|
-
throw createWebGL2ContextError6("gridlines effect");
|
|
2496
|
-
}
|
|
2497
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
2498
|
-
const vs = compileShader6(gl, gl.VERTEX_SHADER, GRIDLINES_VS);
|
|
2499
|
-
const fs = compileShader6(gl, gl.FRAGMENT_SHADER, GRIDLINES_FS);
|
|
2500
|
-
const program = linkProgram6(gl, vs, fs);
|
|
2501
|
-
gl.deleteShader(vs);
|
|
2502
|
-
gl.deleteShader(fs);
|
|
2503
|
-
const vao = gl.createVertexArray();
|
|
2504
|
-
if (!vao) {
|
|
2505
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
2506
|
-
}
|
|
2507
|
-
gl.bindVertexArray(vao);
|
|
2508
|
-
const data = new Float32Array([
|
|
2509
|
-
-1,
|
|
2510
|
-
-1,
|
|
2511
|
-
0,
|
|
2512
|
-
0,
|
|
2513
|
-
1,
|
|
2514
|
-
-1,
|
|
2515
|
-
1,
|
|
2516
|
-
0,
|
|
2517
|
-
-1,
|
|
2518
|
-
1,
|
|
2519
|
-
0,
|
|
2520
|
-
1,
|
|
2521
|
-
1,
|
|
2522
|
-
1,
|
|
2523
|
-
1,
|
|
2524
|
-
1
|
|
2525
|
-
]);
|
|
2526
|
-
const vbo = gl.createBuffer();
|
|
2527
|
-
if (!vbo) {
|
|
2528
|
-
throw new Error("Failed to create WebGL buffer");
|
|
2529
|
-
}
|
|
2530
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
2531
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
2532
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
2533
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
2534
|
-
gl.enableVertexAttribArray(aPos);
|
|
2535
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
2536
|
-
gl.enableVertexAttribArray(aUv);
|
|
2537
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
2538
|
-
gl.bindVertexArray(null);
|
|
2539
|
-
const texture = gl.createTexture();
|
|
2540
|
-
if (!texture) {
|
|
2541
|
-
throw new Error("Failed to create WebGL texture");
|
|
2542
|
-
}
|
|
2543
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
2544
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
2545
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
2546
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
2547
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
2548
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
2549
|
-
const colorCanvas = document.createElement("canvas");
|
|
2550
|
-
colorCanvas.width = 1;
|
|
2551
|
-
colorCanvas.height = 1;
|
|
2552
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
2553
|
-
if (!colorCtx) {
|
|
2554
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
2555
|
-
}
|
|
2556
|
-
return {
|
|
2557
|
-
gl,
|
|
2558
|
-
program,
|
|
2559
|
-
vao,
|
|
2560
|
-
vbo,
|
|
2561
|
-
texture,
|
|
2562
|
-
uniforms: {
|
|
2563
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
2564
|
-
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
2565
|
-
uGridSize: gl.getUniformLocation(program, "uGridSize"),
|
|
2566
|
-
uLineWidth: gl.getUniformLocation(program, "uLineWidth"),
|
|
2567
|
-
uLineColor: gl.getUniformLocation(program, "uLineColor"),
|
|
2568
|
-
uBackgroundColor: gl.getUniformLocation(program, "uBackgroundColor"),
|
|
2569
|
-
uRotation: gl.getUniformLocation(program, "uRotation"),
|
|
2570
|
-
uRotationX: gl.getUniformLocation(program, "uRotationX"),
|
|
2571
|
-
uRotationY: gl.getUniformLocation(program, "uRotationY"),
|
|
2572
|
-
uPerspective: gl.getUniformLocation(program, "uPerspective"),
|
|
2573
|
-
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
2574
|
-
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
2575
|
-
},
|
|
2576
|
-
colorCtx,
|
|
2577
|
-
cachedLineColorStr: "",
|
|
2578
|
-
cachedLineColorRgba: [255, 255, 255, 255],
|
|
2579
|
-
cachedBackgroundColorStr: "",
|
|
2580
|
-
cachedBackgroundColorRgba: [0, 0, 0, 0]
|
|
2581
|
-
};
|
|
2582
|
-
},
|
|
2583
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
2584
|
-
const r = resolve7(params);
|
|
2585
|
-
const { gl, program, vao, texture, uniforms } = state;
|
|
2586
|
-
if (state.cachedLineColorStr !== r.lineColor) {
|
|
2587
|
-
state.cachedLineColorStr = r.lineColor;
|
|
2588
|
-
state.cachedLineColorRgba = parseColorRgba(state.colorCtx, r.lineColor);
|
|
2589
|
-
}
|
|
2590
|
-
if (state.cachedBackgroundColorStr !== r.backgroundColor) {
|
|
2591
|
-
state.cachedBackgroundColorStr = r.backgroundColor;
|
|
2592
|
-
state.cachedBackgroundColorRgba = parseColorRgba(state.colorCtx, r.backgroundColor);
|
|
2593
|
-
}
|
|
2594
|
-
const [lineR, lineG, lineB, lineA] = rgbaToUniform(state.cachedLineColorRgba);
|
|
2595
|
-
const [bgR, bgG, bgB, bgA] = rgbaToUniform(state.cachedBackgroundColorRgba);
|
|
2596
|
-
gl.viewport(0, 0, width, height);
|
|
2597
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
2598
|
-
gl.clearColor(0, 0, 0, 0);
|
|
2599
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
2600
|
-
gl.useProgram(program);
|
|
2601
|
-
gl.bindVertexArray(vao);
|
|
2602
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
2603
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
2604
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
2605
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
2606
|
-
if (uniforms.uSource)
|
|
2607
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
2608
|
-
if (uniforms.uResolution)
|
|
2609
|
-
gl.uniform2f(uniforms.uResolution, width, height);
|
|
2610
|
-
if (uniforms.uGridSize)
|
|
2611
|
-
gl.uniform1f(uniforms.uGridSize, r.gridSize);
|
|
2612
|
-
if (uniforms.uLineWidth)
|
|
2613
|
-
gl.uniform1f(uniforms.uLineWidth, r.lineWidth);
|
|
2614
|
-
if (uniforms.uLineColor)
|
|
2615
|
-
gl.uniform4f(uniforms.uLineColor, lineR, lineG, lineB, lineA);
|
|
2616
|
-
if (uniforms.uBackgroundColor)
|
|
2617
|
-
gl.uniform4f(uniforms.uBackgroundColor, bgR, bgG, bgB, bgA);
|
|
2618
|
-
if (uniforms.uRotation)
|
|
2619
|
-
gl.uniform1f(uniforms.uRotation, r.rotation * Math.PI / 180);
|
|
2620
|
-
if (uniforms.uRotationX)
|
|
2621
|
-
gl.uniform1f(uniforms.uRotationX, r.rotationX * Math.PI / 180);
|
|
2622
|
-
if (uniforms.uRotationY)
|
|
2623
|
-
gl.uniform1f(uniforms.uRotationY, r.rotationY * Math.PI / 180);
|
|
2624
|
-
if (uniforms.uPerspective)
|
|
2625
|
-
gl.uniform1f(uniforms.uPerspective, r.perspective);
|
|
2626
|
-
if (uniforms.uOffset)
|
|
2627
|
-
gl.uniform2f(uniforms.uOffset, r.offsetX, r.offsetY);
|
|
2628
|
-
if (uniforms.uMaskToSourceAlpha)
|
|
2629
|
-
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
2630
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
2631
|
-
gl.bindVertexArray(null);
|
|
2632
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
2633
|
-
gl.useProgram(null);
|
|
2634
|
-
},
|
|
2635
|
-
cleanup: ({ gl, program, vao, vbo, texture }) => {
|
|
2636
|
-
gl.deleteBuffer(vbo);
|
|
2637
|
-
gl.deleteProgram(program);
|
|
2638
|
-
gl.deleteVertexArray(vao);
|
|
2639
|
-
gl.deleteTexture(texture);
|
|
2640
|
-
},
|
|
2641
|
-
schema: gridlinesSchema,
|
|
2642
|
-
validateParams: validateGridlinesParams
|
|
2643
|
-
});
|
|
2644
|
-
// src/zigzag.ts
|
|
2645
|
-
import { Internals as Internals8 } from "remotion";
|
|
2646
|
-
var { createEffect: createEffect8, createWebGL2ContextError: createWebGL2ContextError7 } = Internals8;
|
|
2647
|
-
var ZIGZAG_DIRECTIONS = ["horizontal", "vertical"];
|
|
2648
|
-
var DEFAULT_COLORS3 = ["#dff4ff", "#7cc6ff"];
|
|
2649
|
-
var DEFAULT_DIRECTION = "horizontal";
|
|
2650
|
-
var DEFAULT_THICKNESS2 = 40;
|
|
2651
|
-
var DEFAULT_GAP4 = 0;
|
|
2652
|
-
var DEFAULT_ANGLE2 = 0;
|
|
2653
|
-
var DEFAULT_OFFSET3 = 0;
|
|
2654
|
-
var DEFAULT_AMPLITUDE = 40;
|
|
2655
|
-
var DEFAULT_WAVELENGTH = 160;
|
|
2656
|
-
var DEFAULT_MASK_TO_SOURCE_ALPHA4 = false;
|
|
2657
|
-
var zigzagSchema = {
|
|
2658
|
-
colors: {
|
|
2659
|
-
type: "array",
|
|
2660
|
-
item: {
|
|
2661
|
-
type: "color"
|
|
2662
|
-
},
|
|
2663
|
-
default: DEFAULT_COLORS3,
|
|
2664
|
-
minLength: 2,
|
|
2665
|
-
newItemDefault: "#ff0000",
|
|
2666
|
-
description: "Colors",
|
|
2667
|
-
keyframable: false
|
|
2668
|
-
},
|
|
2669
|
-
direction: {
|
|
2670
|
-
type: "enum",
|
|
2671
|
-
variants: {
|
|
2672
|
-
horizontal: {},
|
|
2673
|
-
vertical: {}
|
|
2674
|
-
},
|
|
2675
|
-
default: DEFAULT_DIRECTION,
|
|
2676
|
-
description: "Direction"
|
|
2677
|
-
},
|
|
2678
|
-
thickness: {
|
|
2679
|
-
type: "number",
|
|
2680
|
-
min: 0.1,
|
|
2681
|
-
max: 400,
|
|
2682
|
-
step: 0.1,
|
|
2683
|
-
default: DEFAULT_THICKNESS2,
|
|
2684
|
-
description: "Thickness",
|
|
2685
|
-
hiddenFromList: false
|
|
2686
|
-
},
|
|
2687
|
-
gap: {
|
|
2688
|
-
type: "number",
|
|
2689
|
-
min: 0,
|
|
2690
|
-
max: 400,
|
|
2691
|
-
step: 0.1,
|
|
2692
|
-
default: DEFAULT_GAP4,
|
|
2693
|
-
description: "Gap",
|
|
2694
|
-
hiddenFromList: false
|
|
2695
|
-
},
|
|
2696
|
-
angle: {
|
|
2697
|
-
type: "rotation-degrees",
|
|
2698
|
-
step: 1,
|
|
2699
|
-
default: DEFAULT_ANGLE2,
|
|
2700
|
-
description: "Angle"
|
|
2701
|
-
},
|
|
2702
|
-
offset: {
|
|
2703
|
-
type: "number",
|
|
2704
|
-
step: 0.1,
|
|
2705
|
-
default: DEFAULT_OFFSET3,
|
|
2706
|
-
description: "Offset",
|
|
2707
|
-
hiddenFromList: false
|
|
2708
|
-
},
|
|
2709
|
-
amplitude: {
|
|
2710
|
-
type: "number",
|
|
2711
|
-
min: 0,
|
|
2712
|
-
max: 500,
|
|
2713
|
-
step: 0.1,
|
|
2714
|
-
default: DEFAULT_AMPLITUDE,
|
|
2715
|
-
description: "Amplitude",
|
|
2716
|
-
hiddenFromList: false
|
|
2717
|
-
},
|
|
2718
|
-
wavelength: {
|
|
2719
|
-
type: "number",
|
|
2720
|
-
min: 1,
|
|
2721
|
-
max: 2000,
|
|
2722
|
-
step: 1,
|
|
2723
|
-
default: DEFAULT_WAVELENGTH,
|
|
2724
|
-
description: "Wavelength",
|
|
2725
|
-
hiddenFromList: false
|
|
2726
|
-
},
|
|
2727
|
-
maskToSourceAlpha: {
|
|
2728
|
-
type: "boolean",
|
|
2729
|
-
default: DEFAULT_MASK_TO_SOURCE_ALPHA4,
|
|
2730
|
-
description: "Mask to source alpha"
|
|
2731
|
-
}
|
|
2732
|
-
};
|
|
2733
|
-
var resolve8 = (p) => {
|
|
2734
|
-
const thickness = p.thickness ?? DEFAULT_THICKNESS2;
|
|
2735
|
-
const gap = p.gap ?? DEFAULT_GAP4;
|
|
2736
|
-
return {
|
|
2737
|
-
colors: p.colors ?? DEFAULT_COLORS3,
|
|
2738
|
-
direction: p.direction ?? DEFAULT_DIRECTION,
|
|
2739
|
-
thickness,
|
|
2740
|
-
spacing: thickness + gap,
|
|
2741
|
-
angle: p.angle ?? DEFAULT_ANGLE2,
|
|
2742
|
-
offset: p.offset ?? DEFAULT_OFFSET3,
|
|
2743
|
-
amplitude: p.amplitude ?? DEFAULT_AMPLITUDE,
|
|
2744
|
-
wavelength: p.wavelength ?? DEFAULT_WAVELENGTH,
|
|
2745
|
-
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA4
|
|
2746
|
-
};
|
|
2747
|
-
};
|
|
2748
|
-
var formatEnum = (variants) => {
|
|
2749
|
-
if (variants.length === 2) {
|
|
2750
|
-
return `"${variants[0]}" or "${variants[1]}"`;
|
|
2751
|
-
}
|
|
2752
|
-
return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
|
|
2753
|
-
};
|
|
2754
|
-
var validatePositive5 = (value, name) => {
|
|
2755
|
-
if (value <= 0) {
|
|
2756
|
-
throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
|
|
2757
|
-
}
|
|
2758
|
-
};
|
|
2759
|
-
var validateNonNegative5 = (value, name) => {
|
|
2760
|
-
if (value < 0) {
|
|
2761
|
-
throw new TypeError(`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`);
|
|
2762
|
-
}
|
|
2763
|
-
};
|
|
2764
|
-
var validateColors3 = (colors) => {
|
|
2765
|
-
if (colors === undefined) {
|
|
2766
|
-
return;
|
|
2767
|
-
}
|
|
2768
|
-
if (!Array.isArray(colors) || colors.length < 2) {
|
|
2769
|
-
throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
|
|
2770
|
-
}
|
|
2771
|
-
for (let i = 0;i < colors.length; i++) {
|
|
2772
|
-
assertRequiredColor(colors[i], `colors[${i}]`);
|
|
2773
|
-
}
|
|
2774
|
-
};
|
|
2775
|
-
var validateDirection = (direction) => {
|
|
2776
|
-
if (direction === undefined) {
|
|
2777
|
-
return;
|
|
2778
|
-
}
|
|
2779
|
-
if (typeof direction !== "string" || !ZIGZAG_DIRECTIONS.includes(direction)) {
|
|
2780
|
-
throw new TypeError(`"direction" must be ${formatEnum(ZIGZAG_DIRECTIONS)}, but got ${JSON.stringify(direction)}`);
|
|
2781
|
-
}
|
|
2782
|
-
};
|
|
2783
|
-
var validateZigzagParams = (params) => {
|
|
2784
|
-
assertEffectParamsObject(params, "Zigzag");
|
|
2785
|
-
validateColors3(params.colors);
|
|
2786
|
-
validateDirection(params.direction);
|
|
2787
|
-
assertOptionalFiniteNumber(params.thickness, "thickness");
|
|
2788
|
-
assertOptionalFiniteNumber(params.gap, "gap");
|
|
2789
|
-
assertOptionalFiniteNumber(params.angle, "angle");
|
|
2790
|
-
assertOptionalFiniteNumber(params.offset, "offset");
|
|
2791
|
-
assertOptionalFiniteNumber(params.amplitude, "amplitude");
|
|
2792
|
-
assertOptionalFiniteNumber(params.wavelength, "wavelength");
|
|
2793
|
-
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
2794
|
-
const thickness = params.thickness ?? DEFAULT_THICKNESS2;
|
|
2795
|
-
const gap = params.gap ?? DEFAULT_GAP4;
|
|
2796
|
-
const amplitude = params.amplitude ?? DEFAULT_AMPLITUDE;
|
|
2797
|
-
const wavelength = params.wavelength ?? DEFAULT_WAVELENGTH;
|
|
2798
|
-
validatePositive5(thickness, "thickness");
|
|
2799
|
-
validateNonNegative5(gap, "gap");
|
|
2800
|
-
validateNonNegative5(amplitude, "amplitude");
|
|
2801
|
-
validatePositive5(wavelength, "wavelength");
|
|
2802
|
-
};
|
|
2803
|
-
var ZIGZAG_VS = `#version 300 es
|
|
2804
|
-
in vec2 aPos;
|
|
2805
|
-
in vec2 aUv;
|
|
2806
|
-
out vec2 vUv;
|
|
2807
|
-
|
|
2808
|
-
void main() {
|
|
2809
|
-
vUv = aUv;
|
|
2810
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
2811
|
-
}
|
|
2812
|
-
`;
|
|
2813
|
-
var ZIGZAG_FS = `#version 300 es
|
|
2814
|
-
precision highp float;
|
|
2815
|
-
|
|
2816
|
-
in vec2 vUv;
|
|
2817
|
-
out vec4 fragColor;
|
|
2818
|
-
|
|
2819
|
-
uniform sampler2D uSource;
|
|
2820
|
-
uniform sampler2D uPalette;
|
|
2821
|
-
uniform vec2 uResolution;
|
|
2822
|
-
uniform float uNumColors;
|
|
2823
|
-
uniform int uDirection;
|
|
2824
|
-
uniform float uThickness;
|
|
2825
|
-
uniform float uSpacing;
|
|
2826
|
-
uniform float uAngle;
|
|
2827
|
-
uniform float uOffset;
|
|
2828
|
-
uniform float uAmplitude;
|
|
2829
|
-
uniform float uWavelength;
|
|
2830
|
-
uniform bool uMaskToSourceAlpha;
|
|
2831
|
-
|
|
2832
|
-
void main() {
|
|
2833
|
-
vec4 texColor = texture(uSource, vUv);
|
|
2834
|
-
float thickness = max(uThickness, 0.001);
|
|
2835
|
-
float spacing = max(uSpacing, 0.001);
|
|
2836
|
-
float cycle = spacing * uNumColors;
|
|
2837
|
-
vec2 centered = vUv * uResolution - uResolution * 0.5;
|
|
2838
|
-
float s = sin(uAngle);
|
|
2839
|
-
float c = cos(uAngle);
|
|
2840
|
-
vec2 rotated = vec2(
|
|
2841
|
-
centered.x * c - centered.y * s,
|
|
2842
|
-
centered.x * s + centered.y * c
|
|
2843
|
-
);
|
|
2844
|
-
float baseAxis = uDirection == 0 ? rotated.y : rotated.x;
|
|
2845
|
-
float zigzagAxis = uDirection == 0 ? rotated.x : rotated.y;
|
|
2846
|
-
float wavePhase = fract(zigzagAxis / max(uWavelength, 0.001));
|
|
2847
|
-
float zigzagOffset = (1.0 - abs(wavePhase * 2.0 - 1.0) * 2.0) * uAmplitude;
|
|
2848
|
-
float position = mod(baseAxis + zigzagOffset + uOffset, cycle);
|
|
2849
|
-
if (position < 0.0) {
|
|
2850
|
-
position += cycle;
|
|
2851
|
-
}
|
|
2852
|
-
|
|
2853
|
-
float colorIndex = floor(position / spacing);
|
|
2854
|
-
float inStripe = mod(position, spacing);
|
|
2855
|
-
if (inStripe > thickness) {
|
|
2856
|
-
fragColor = texColor;
|
|
2857
|
-
return;
|
|
2858
|
-
}
|
|
2859
|
-
|
|
2860
|
-
float texCoord = (colorIndex + 0.5) / uNumColors;
|
|
2861
|
-
vec4 lineColor = texture(uPalette, vec2(texCoord, 0.5));
|
|
2862
|
-
float lineAlpha = lineColor.a;
|
|
2863
|
-
vec3 premultipliedLine = lineColor.rgb * lineAlpha;
|
|
2864
|
-
|
|
2865
|
-
if (uMaskToSourceAlpha) {
|
|
2866
|
-
fragColor = vec4(
|
|
2867
|
-
premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
|
|
2868
|
-
texColor.a
|
|
2869
|
-
);
|
|
2870
|
-
return;
|
|
2871
|
-
}
|
|
2872
|
-
|
|
2873
|
-
fragColor = vec4(
|
|
2874
|
-
premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
|
|
2875
|
-
lineAlpha + texColor.a * (1.0 - lineAlpha)
|
|
2876
|
-
);
|
|
2877
|
-
}
|
|
2878
|
-
`;
|
|
2879
|
-
var compileShader7 = (gl, type, source) => {
|
|
2880
|
-
const shader = gl.createShader(type);
|
|
2881
|
-
if (!shader) {
|
|
2882
|
-
throw new Error("Failed to create WebGL shader");
|
|
2883
|
-
}
|
|
2884
|
-
gl.shaderSource(shader, source);
|
|
2885
|
-
gl.compileShader(shader);
|
|
2886
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
2887
|
-
const log = gl.getShaderInfoLog(shader);
|
|
2888
|
-
gl.deleteShader(shader);
|
|
2889
|
-
throw new Error(`Zigzag shader compile failed: ${log ?? "(no log)"}`);
|
|
2890
|
-
}
|
|
2891
|
-
return shader;
|
|
2892
|
-
};
|
|
2893
|
-
var linkProgram7 = (gl, vs, fs) => {
|
|
2894
|
-
const program = gl.createProgram();
|
|
2895
|
-
if (!program) {
|
|
2896
|
-
throw new Error("Failed to create WebGL program");
|
|
2897
|
-
}
|
|
2898
|
-
gl.attachShader(program, vs);
|
|
2899
|
-
gl.attachShader(program, fs);
|
|
2900
|
-
gl.linkProgram(program);
|
|
2901
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
2902
|
-
const log = gl.getProgramInfoLog(program);
|
|
2903
|
-
gl.deleteProgram(program);
|
|
2904
|
-
throw new Error(`Zigzag program link failed: ${log ?? "(no log)"}`);
|
|
2905
|
-
}
|
|
2906
|
-
return program;
|
|
2907
|
-
};
|
|
2908
|
-
var createProgram3 = (gl, vertexSource, fragmentSource) => {
|
|
2909
|
-
const vs = compileShader7(gl, gl.VERTEX_SHADER, vertexSource);
|
|
2910
|
-
const fs = compileShader7(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
2911
|
-
const program = linkProgram7(gl, vs, fs);
|
|
2912
|
-
gl.deleteShader(vs);
|
|
2913
|
-
gl.deleteShader(fs);
|
|
2914
|
-
return program;
|
|
2915
|
-
};
|
|
2916
|
-
var createTexture3 = (gl, filter) => {
|
|
2917
|
-
const texture = gl.createTexture();
|
|
2918
|
-
if (!texture) {
|
|
2919
|
-
throw new Error("Failed to create WebGL texture");
|
|
2920
|
-
}
|
|
2921
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
2922
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
2923
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
2924
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
2925
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
2926
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
2927
|
-
return texture;
|
|
2928
|
-
};
|
|
2929
|
-
var setupZigzag = (target) => {
|
|
2930
|
-
const gl = target.getContext("webgl2", {
|
|
2931
|
-
premultipliedAlpha: true,
|
|
2932
|
-
alpha: true,
|
|
2933
|
-
preserveDrawingBuffer: true
|
|
2934
|
-
});
|
|
2935
|
-
if (!gl) {
|
|
2936
|
-
throw createWebGL2ContextError7("zigzag effect");
|
|
2937
|
-
}
|
|
2938
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
2939
|
-
const program = createProgram3(gl, ZIGZAG_VS, ZIGZAG_FS);
|
|
2940
|
-
const vao = gl.createVertexArray();
|
|
2941
|
-
if (!vao) {
|
|
2942
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
2943
|
-
}
|
|
2944
|
-
gl.bindVertexArray(vao);
|
|
2945
|
-
const data = new Float32Array([
|
|
2946
|
-
-1,
|
|
2947
|
-
-1,
|
|
2948
|
-
0,
|
|
2949
|
-
0,
|
|
2950
|
-
1,
|
|
2951
|
-
-1,
|
|
2952
|
-
1,
|
|
2953
|
-
0,
|
|
2954
|
-
-1,
|
|
2955
|
-
1,
|
|
2956
|
-
0,
|
|
2957
|
-
1,
|
|
2958
|
-
1,
|
|
2959
|
-
1,
|
|
2960
|
-
1,
|
|
2961
|
-
1
|
|
2962
|
-
]);
|
|
2963
|
-
const vbo = gl.createBuffer();
|
|
2964
|
-
if (!vbo) {
|
|
2965
|
-
throw new Error("Failed to create WebGL buffer");
|
|
2966
|
-
}
|
|
2967
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
2968
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
2969
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
2970
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
2971
|
-
gl.enableVertexAttribArray(aPos);
|
|
2972
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
2973
|
-
gl.enableVertexAttribArray(aUv);
|
|
2974
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
2975
|
-
gl.bindVertexArray(null);
|
|
2976
|
-
const colorCanvas = document.createElement("canvas");
|
|
2977
|
-
colorCanvas.width = 1;
|
|
2978
|
-
colorCanvas.height = 1;
|
|
2979
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
2980
|
-
if (!colorCtx) {
|
|
2981
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
2982
|
-
}
|
|
2983
|
-
return {
|
|
2984
|
-
gl,
|
|
2985
|
-
program,
|
|
2986
|
-
vao,
|
|
2987
|
-
vbo,
|
|
2988
|
-
sourceTexture: createTexture3(gl, gl.LINEAR),
|
|
2989
|
-
paletteTexture: createTexture3(gl, gl.NEAREST),
|
|
2990
|
-
colorCtx,
|
|
2991
|
-
uniforms: {
|
|
2992
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
2993
|
-
uPalette: gl.getUniformLocation(program, "uPalette"),
|
|
2994
|
-
uResolution: gl.getUniformLocation(program, "uResolution"),
|
|
2995
|
-
uNumColors: gl.getUniformLocation(program, "uNumColors"),
|
|
2996
|
-
uDirection: gl.getUniformLocation(program, "uDirection"),
|
|
2997
|
-
uThickness: gl.getUniformLocation(program, "uThickness"),
|
|
2998
|
-
uSpacing: gl.getUniformLocation(program, "uSpacing"),
|
|
2999
|
-
uAngle: gl.getUniformLocation(program, "uAngle"),
|
|
3000
|
-
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
3001
|
-
uAmplitude: gl.getUniformLocation(program, "uAmplitude"),
|
|
3002
|
-
uWavelength: gl.getUniformLocation(program, "uWavelength"),
|
|
3003
|
-
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
3004
|
-
},
|
|
3005
|
-
cachedPaletteKey: "",
|
|
3006
|
-
palettePixelData: new Uint8Array(0)
|
|
3007
|
-
};
|
|
3008
|
-
};
|
|
3009
|
-
var updatePalette3 = (state, colors) => {
|
|
3010
|
-
const paletteKey = colors.join("|");
|
|
3011
|
-
const paletteDirty = state.cachedPaletteKey !== paletteKey;
|
|
3012
|
-
if (!paletteDirty) {
|
|
3013
|
-
return false;
|
|
3014
|
-
}
|
|
3015
|
-
state.cachedPaletteKey = paletteKey;
|
|
3016
|
-
const len = colors.length * 4;
|
|
3017
|
-
if (state.palettePixelData.length !== len) {
|
|
3018
|
-
state.palettePixelData = new Uint8Array(len);
|
|
3019
|
-
}
|
|
3020
|
-
const { palettePixelData } = state;
|
|
3021
|
-
for (let i = 0;i < colors.length; i++) {
|
|
3022
|
-
const color = parseColorRgba(state.colorCtx, colors[i]);
|
|
3023
|
-
palettePixelData[i * 4] = color[0];
|
|
3024
|
-
palettePixelData[i * 4 + 1] = color[1];
|
|
3025
|
-
palettePixelData[i * 4 + 2] = color[2];
|
|
3026
|
-
palettePixelData[i * 4 + 3] = color[3];
|
|
3027
|
-
}
|
|
3028
|
-
return true;
|
|
3029
|
-
};
|
|
3030
|
-
var zigzag = createEffect8({
|
|
3031
|
-
type: "dev.remotion.effects.zigzag",
|
|
3032
|
-
label: "zigzag()",
|
|
3033
|
-
documentationLink: "https://www.remotion.dev/docs/effects/zigzag",
|
|
3034
|
-
backend: "webgl2",
|
|
3035
|
-
calculateKey: (params) => {
|
|
3036
|
-
const r = resolve8(params);
|
|
3037
|
-
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
3038
|
-
return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}${maskSuffix}`;
|
|
3039
|
-
},
|
|
3040
|
-
setup: (target) => setupZigzag(target),
|
|
3041
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
3042
|
-
const r = resolve8(params);
|
|
3043
|
-
const paletteDirty = updatePalette3(state, r.colors);
|
|
3044
|
-
const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
|
|
3045
|
-
gl.viewport(0, 0, width, height);
|
|
3046
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
3047
|
-
gl.clearColor(0, 0, 0, 0);
|
|
3048
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
3049
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
3050
|
-
gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
|
|
3051
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
3052
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
3053
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
3054
|
-
gl.activeTexture(gl.TEXTURE1);
|
|
3055
|
-
gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
|
|
3056
|
-
if (paletteDirty) {
|
|
3057
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
3058
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
3059
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
|
|
3060
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
3061
|
-
}
|
|
3062
|
-
gl.useProgram(program);
|
|
3063
|
-
if (uniforms.uSource)
|
|
3064
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
3065
|
-
if (uniforms.uPalette)
|
|
3066
|
-
gl.uniform1i(uniforms.uPalette, 1);
|
|
3067
|
-
if (uniforms.uResolution)
|
|
3068
|
-
gl.uniform2f(uniforms.uResolution, width, height);
|
|
3069
|
-
if (uniforms.uNumColors)
|
|
3070
|
-
gl.uniform1f(uniforms.uNumColors, r.colors.length);
|
|
3071
|
-
if (uniforms.uDirection)
|
|
3072
|
-
gl.uniform1i(uniforms.uDirection, r.direction === "horizontal" ? 0 : 1);
|
|
3073
|
-
if (uniforms.uThickness)
|
|
3074
|
-
gl.uniform1f(uniforms.uThickness, r.thickness);
|
|
3075
|
-
if (uniforms.uSpacing)
|
|
3076
|
-
gl.uniform1f(uniforms.uSpacing, r.spacing);
|
|
3077
|
-
if (uniforms.uAngle)
|
|
3078
|
-
gl.uniform1f(uniforms.uAngle, r.angle * Math.PI / 180);
|
|
3079
|
-
if (uniforms.uOffset)
|
|
3080
|
-
gl.uniform1f(uniforms.uOffset, r.offset);
|
|
3081
|
-
if (uniforms.uAmplitude)
|
|
3082
|
-
gl.uniform1f(uniforms.uAmplitude, r.amplitude);
|
|
3083
|
-
if (uniforms.uWavelength)
|
|
3084
|
-
gl.uniform1f(uniforms.uWavelength, r.wavelength);
|
|
3085
|
-
if (uniforms.uMaskToSourceAlpha)
|
|
3086
|
-
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
3087
|
-
gl.bindVertexArray(vao);
|
|
3088
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
3089
|
-
gl.bindVertexArray(null);
|
|
3090
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
3091
|
-
gl.useProgram(null);
|
|
3092
|
-
},
|
|
3093
|
-
cleanup: ({
|
|
3094
|
-
gl,
|
|
3095
|
-
program,
|
|
3096
|
-
vao,
|
|
3097
|
-
vbo,
|
|
3098
|
-
sourceTexture,
|
|
3099
|
-
paletteTexture
|
|
3100
|
-
}) => {
|
|
3101
|
-
gl.deleteTexture(sourceTexture);
|
|
3102
|
-
gl.deleteTexture(paletteTexture);
|
|
3103
|
-
gl.deleteBuffer(vbo);
|
|
3104
|
-
gl.deleteProgram(program);
|
|
3105
|
-
gl.deleteVertexArray(vao);
|
|
3106
|
-
},
|
|
3107
|
-
schema: zigzagSchema,
|
|
3108
|
-
validateParams: validateZigzagParams
|
|
3109
|
-
});
|
|
3110
|
-
// src/linear-gradient.ts
|
|
3111
|
-
import { Internals as Internals9 } from "remotion";
|
|
3112
|
-
var { createEffect: createEffect9, createWebGL2ContextError: createWebGL2ContextError8 } = Internals9;
|
|
3113
|
-
var DEFAULT_START = [0, 0.5];
|
|
3114
|
-
var DEFAULT_END = [1, 0.5];
|
|
3115
|
-
var DEFAULT_START_COLOR = "#000000";
|
|
3116
|
-
var DEFAULT_END_COLOR = "#ffffff";
|
|
3117
|
-
var linearGradientSchema = {
|
|
3118
|
-
start: {
|
|
3119
|
-
type: "uv-coordinate",
|
|
3120
|
-
min: -1,
|
|
3121
|
-
max: 2,
|
|
3122
|
-
step: 0.01,
|
|
3123
|
-
default: DEFAULT_START,
|
|
3124
|
-
description: "Start",
|
|
3125
|
-
visual: {
|
|
3126
|
-
type: "line",
|
|
3127
|
-
to: "end"
|
|
3128
|
-
}
|
|
3129
|
-
},
|
|
3130
|
-
end: {
|
|
3131
|
-
type: "uv-coordinate",
|
|
3132
|
-
min: -1,
|
|
3133
|
-
max: 2,
|
|
3134
|
-
step: 0.01,
|
|
3135
|
-
default: DEFAULT_END,
|
|
3136
|
-
description: "End"
|
|
3137
|
-
},
|
|
3138
|
-
startColor: {
|
|
3139
|
-
type: "color",
|
|
3140
|
-
default: DEFAULT_START_COLOR,
|
|
3141
|
-
description: "Start color"
|
|
3142
|
-
},
|
|
3143
|
-
endColor: {
|
|
3144
|
-
type: "color",
|
|
3145
|
-
default: DEFAULT_END_COLOR,
|
|
3146
|
-
description: "End color"
|
|
3147
|
-
}
|
|
3148
|
-
};
|
|
3149
|
-
var resolve9 = (p) => ({
|
|
3150
|
-
start: [...p.start ?? DEFAULT_START],
|
|
3151
|
-
end: [...p.end ?? DEFAULT_END],
|
|
3152
|
-
startColor: p.startColor ?? DEFAULT_START_COLOR,
|
|
3153
|
-
endColor: p.endColor ?? DEFAULT_END_COLOR
|
|
3154
|
-
});
|
|
3155
|
-
var assertOptionalUvCoordinate2 = (value, name) => {
|
|
3156
|
-
if (value === undefined) {
|
|
3157
|
-
return;
|
|
3158
|
-
}
|
|
3159
|
-
if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
|
|
3160
|
-
throw new TypeError(`"${name}" must be a [number, number] tuple`);
|
|
3161
|
-
}
|
|
3162
|
-
};
|
|
3163
|
-
var validateLinearGradientParams = (params) => {
|
|
3164
|
-
assertEffectParamsObject(params, "Linear gradient");
|
|
3165
|
-
assertOptionalUvCoordinate2(params.start, "start");
|
|
3166
|
-
assertOptionalUvCoordinate2(params.end, "end");
|
|
3167
|
-
assertOptionalColor(params.startColor, "startColor");
|
|
3168
|
-
assertOptionalColor(params.endColor, "endColor");
|
|
3169
|
-
};
|
|
3170
|
-
var VERTEX_SHADER = `#version 300 es
|
|
3171
|
-
in vec2 aPos;
|
|
3172
|
-
in vec2 aUv;
|
|
3173
|
-
out vec2 vUv;
|
|
3174
|
-
|
|
3175
|
-
void main() {
|
|
3176
|
-
vUv = aUv;
|
|
3177
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
3178
|
-
}
|
|
3179
|
-
`;
|
|
3180
|
-
var FRAGMENT_SHADER = `#version 300 es
|
|
3181
|
-
precision highp float;
|
|
3182
|
-
|
|
3183
|
-
in vec2 vUv;
|
|
3184
|
-
out vec4 fragColor;
|
|
3185
|
-
|
|
3186
|
-
uniform vec2 uStart;
|
|
3187
|
-
uniform vec2 uEnd;
|
|
3188
|
-
uniform vec4 uStartColor;
|
|
3189
|
-
uniform vec4 uEndColor;
|
|
3190
|
-
|
|
3191
|
-
float gradientProgress(vec2 uv) {
|
|
3192
|
-
vec2 gradient = uEnd - uStart;
|
|
3193
|
-
float gradientLengthSq = dot(gradient, gradient);
|
|
3194
|
-
if (gradientLengthSq <= 0.0000001) {
|
|
3195
|
-
return 0.0;
|
|
3196
|
-
}
|
|
3197
|
-
|
|
3198
|
-
return clamp(dot(uv - uStart, gradient) / gradientLengthSq, 0.0, 1.0);
|
|
3199
|
-
}
|
|
3200
|
-
|
|
3201
|
-
void main() {
|
|
3202
|
-
vec2 publicUv = vec2(vUv.x, 1.0 - vUv.y);
|
|
3203
|
-
vec4 color = mix(uStartColor, uEndColor, gradientProgress(publicUv));
|
|
3204
|
-
fragColor = vec4(color.rgb * color.a, color.a);
|
|
3205
|
-
}
|
|
3206
|
-
`;
|
|
3207
|
-
var compileShader8 = (gl, type, source) => {
|
|
3208
|
-
const shader = gl.createShader(type);
|
|
3209
|
-
if (!shader) {
|
|
3210
|
-
throw new Error("Failed to create WebGL shader");
|
|
3211
|
-
}
|
|
3212
|
-
gl.shaderSource(shader, source);
|
|
3213
|
-
gl.compileShader(shader);
|
|
3214
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
3215
|
-
const log = gl.getShaderInfoLog(shader);
|
|
3216
|
-
gl.deleteShader(shader);
|
|
3217
|
-
throw new Error(`Linear gradient shader compile failed: ${log ?? "(no log)"}`);
|
|
3218
|
-
}
|
|
3219
|
-
return shader;
|
|
3220
|
-
};
|
|
3221
|
-
var createProgram4 = (gl) => {
|
|
3222
|
-
const vs = compileShader8(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
|
|
3223
|
-
const fs = compileShader8(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
|
|
3224
|
-
const program = gl.createProgram();
|
|
3225
|
-
if (!program) {
|
|
3226
|
-
throw new Error("Failed to create WebGL program");
|
|
3227
|
-
}
|
|
3228
|
-
gl.attachShader(program, vs);
|
|
3229
|
-
gl.attachShader(program, fs);
|
|
3230
|
-
gl.linkProgram(program);
|
|
3231
|
-
gl.deleteShader(vs);
|
|
3232
|
-
gl.deleteShader(fs);
|
|
3233
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
3234
|
-
const log = gl.getProgramInfoLog(program);
|
|
3235
|
-
gl.deleteProgram(program);
|
|
3236
|
-
throw new Error(`Linear gradient program link failed: ${log ?? "(no log)"}`);
|
|
3237
|
-
}
|
|
3238
|
-
return program;
|
|
3239
|
-
};
|
|
3240
|
-
var setupLinearGradient = (target) => {
|
|
3241
|
-
const gl = target.getContext("webgl2", {
|
|
3242
|
-
premultipliedAlpha: true,
|
|
3243
|
-
alpha: true,
|
|
3244
|
-
preserveDrawingBuffer: true
|
|
3245
|
-
});
|
|
3246
|
-
if (!gl) {
|
|
3247
|
-
throw createWebGL2ContextError8("linear gradient effect");
|
|
3248
|
-
}
|
|
3249
|
-
const program = createProgram4(gl);
|
|
3250
|
-
const vao = gl.createVertexArray();
|
|
3251
|
-
if (!vao) {
|
|
3252
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
3253
|
-
}
|
|
3254
|
-
gl.bindVertexArray(vao);
|
|
3255
|
-
const data = new Float32Array([
|
|
3256
|
-
-1,
|
|
3257
|
-
-1,
|
|
3258
|
-
0,
|
|
3259
|
-
0,
|
|
3260
|
-
1,
|
|
3261
|
-
-1,
|
|
3262
|
-
1,
|
|
3263
|
-
0,
|
|
3264
|
-
-1,
|
|
3265
|
-
1,
|
|
3266
|
-
0,
|
|
3267
|
-
1,
|
|
3268
|
-
1,
|
|
3269
|
-
1,
|
|
3270
|
-
1,
|
|
3271
|
-
1
|
|
3272
|
-
]);
|
|
3273
|
-
const vbo = gl.createBuffer();
|
|
3274
|
-
if (!vbo) {
|
|
3275
|
-
throw new Error("Failed to create WebGL buffer");
|
|
3276
|
-
}
|
|
3277
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
3278
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
3279
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
3280
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
3281
|
-
gl.enableVertexAttribArray(aPos);
|
|
3282
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
3283
|
-
gl.enableVertexAttribArray(aUv);
|
|
3284
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
3285
|
-
gl.bindVertexArray(null);
|
|
3286
|
-
const colorCanvas = document.createElement("canvas");
|
|
3287
|
-
colorCanvas.width = 1;
|
|
3288
|
-
colorCanvas.height = 1;
|
|
3289
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
3290
|
-
if (!colorCtx) {
|
|
3291
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
3292
|
-
}
|
|
3293
|
-
return {
|
|
3294
|
-
gl,
|
|
3295
|
-
program,
|
|
3296
|
-
vao,
|
|
3297
|
-
vbo,
|
|
3298
|
-
uniforms: {
|
|
3299
|
-
uStart: gl.getUniformLocation(program, "uStart"),
|
|
3300
|
-
uEnd: gl.getUniformLocation(program, "uEnd"),
|
|
3301
|
-
uStartColor: gl.getUniformLocation(program, "uStartColor"),
|
|
3302
|
-
uEndColor: gl.getUniformLocation(program, "uEndColor")
|
|
3303
|
-
},
|
|
3304
|
-
colorCtx,
|
|
3305
|
-
cachedStartColor: "",
|
|
3306
|
-
cachedStartColorRgba: [0, 0, 0, 255],
|
|
3307
|
-
cachedEndColor: "",
|
|
3308
|
-
cachedEndColorRgba: [255, 255, 255, 255]
|
|
3309
|
-
};
|
|
3310
|
-
};
|
|
3311
|
-
var normalizedRgba = (color) => {
|
|
3312
|
-
return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
|
|
3313
|
-
};
|
|
3314
|
-
var getParsedColors = (state, resolved) => {
|
|
3315
|
-
if (state.cachedStartColor !== resolved.startColor) {
|
|
3316
|
-
state.cachedStartColor = resolved.startColor;
|
|
3317
|
-
state.cachedStartColorRgba = parseColorRgba(state.colorCtx, resolved.startColor);
|
|
3318
|
-
}
|
|
3319
|
-
if (state.cachedEndColor !== resolved.endColor) {
|
|
3320
|
-
state.cachedEndColor = resolved.endColor;
|
|
3321
|
-
state.cachedEndColorRgba = parseColorRgba(state.colorCtx, resolved.endColor);
|
|
3322
|
-
}
|
|
3323
|
-
return {
|
|
3324
|
-
start: state.cachedStartColorRgba,
|
|
3325
|
-
end: state.cachedEndColorRgba
|
|
3326
|
-
};
|
|
3327
|
-
};
|
|
3328
|
-
var linearGradient = createEffect9({
|
|
3329
|
-
type: "dev.remotion.effects.linearGradient",
|
|
3330
|
-
label: "linearGradient()",
|
|
3331
|
-
documentationLink: "https://www.remotion.dev/docs/effects/linear-gradient",
|
|
3332
|
-
backend: "webgl2",
|
|
3333
|
-
calculateKey: (params) => {
|
|
3334
|
-
const r = resolve9(params);
|
|
3335
|
-
return `linear-gradient-${r.start.join(":")}-${r.end.join(":")}-${r.startColor}-${r.endColor}`;
|
|
3336
|
-
},
|
|
3337
|
-
setup: (target) => setupLinearGradient(target),
|
|
3338
|
-
apply: ({ width, height, params, state }) => {
|
|
3339
|
-
const r = resolve9(params);
|
|
3340
|
-
const { start, end } = getParsedColors(state, r);
|
|
3341
|
-
const [sr, sg, sb, sa] = normalizedRgba(start);
|
|
3342
|
-
const [er, eg, eb, ea] = normalizedRgba(end);
|
|
3343
|
-
const { gl, program, uniforms, vao } = state;
|
|
3344
|
-
gl.viewport(0, 0, width, height);
|
|
3345
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
3346
|
-
gl.clearColor(0, 0, 0, 0);
|
|
3347
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
3348
|
-
gl.useProgram(program);
|
|
3349
|
-
if (uniforms.uStart)
|
|
3350
|
-
gl.uniform2f(uniforms.uStart, r.start[0], r.start[1]);
|
|
3351
|
-
if (uniforms.uEnd)
|
|
3352
|
-
gl.uniform2f(uniforms.uEnd, r.end[0], r.end[1]);
|
|
3353
|
-
if (uniforms.uStartColor) {
|
|
3354
|
-
gl.uniform4f(uniforms.uStartColor, sr, sg, sb, sa);
|
|
3355
|
-
}
|
|
3356
|
-
if (uniforms.uEndColor) {
|
|
3357
|
-
gl.uniform4f(uniforms.uEndColor, er, eg, eb, ea);
|
|
3358
|
-
}
|
|
3359
|
-
gl.bindVertexArray(vao);
|
|
3360
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
3361
|
-
gl.bindVertexArray(null);
|
|
3362
|
-
gl.useProgram(null);
|
|
3363
|
-
},
|
|
3364
|
-
cleanup: ({ gl, program, vao, vbo }) => {
|
|
3365
|
-
gl.deleteBuffer(vbo);
|
|
3366
|
-
gl.deleteProgram(program);
|
|
3367
|
-
gl.deleteVertexArray(vao);
|
|
3368
|
-
},
|
|
3369
|
-
schema: linearGradientSchema,
|
|
3370
|
-
validateParams: validateLinearGradientParams
|
|
3371
|
-
});
|
|
3372
|
-
// src/linear-gradient-tint.ts
|
|
3373
|
-
import { Internals as Internals10 } from "remotion";
|
|
3374
|
-
var { createEffect: createEffect10, createWebGL2ContextError: createWebGL2ContextError9 } = Internals10;
|
|
3375
|
-
var DEFAULT_START2 = [0, 0.5];
|
|
3376
|
-
var DEFAULT_END2 = [1, 0.5];
|
|
3377
|
-
var DEFAULT_START_COLOR2 = "#000000";
|
|
3378
|
-
var DEFAULT_END_COLOR2 = "#ffffff";
|
|
3379
|
-
var DEFAULT_AMOUNT2 = 0.5;
|
|
3380
|
-
var linearGradientTintSchema = {
|
|
3381
|
-
start: {
|
|
3382
|
-
type: "uv-coordinate",
|
|
3383
|
-
min: -1,
|
|
3384
|
-
max: 2,
|
|
3385
|
-
step: 0.01,
|
|
3386
|
-
default: DEFAULT_START2,
|
|
3387
|
-
description: "Start",
|
|
3388
|
-
visual: {
|
|
3389
|
-
type: "line",
|
|
3390
|
-
to: "end"
|
|
3391
|
-
}
|
|
3392
|
-
},
|
|
3393
|
-
end: {
|
|
3394
|
-
type: "uv-coordinate",
|
|
3395
|
-
min: -1,
|
|
3396
|
-
max: 2,
|
|
3397
|
-
step: 0.01,
|
|
3398
|
-
default: DEFAULT_END2,
|
|
3399
|
-
description: "End"
|
|
3400
|
-
},
|
|
3401
|
-
startColor: {
|
|
3402
|
-
type: "color",
|
|
3403
|
-
default: DEFAULT_START_COLOR2,
|
|
3404
|
-
description: "Start color"
|
|
3405
|
-
},
|
|
3406
|
-
endColor: {
|
|
3407
|
-
type: "color",
|
|
3408
|
-
default: DEFAULT_END_COLOR2,
|
|
3409
|
-
description: "End color"
|
|
3410
|
-
},
|
|
3411
|
-
amount: {
|
|
3412
|
-
type: "number",
|
|
3413
|
-
min: 0,
|
|
3414
|
-
max: 1,
|
|
3415
|
-
step: 0.01,
|
|
3416
|
-
default: DEFAULT_AMOUNT2,
|
|
3417
|
-
description: "Amount",
|
|
3418
|
-
hiddenFromList: false
|
|
3419
|
-
}
|
|
3420
|
-
};
|
|
3421
|
-
var resolve10 = (p) => ({
|
|
3422
|
-
start: [...p.start ?? DEFAULT_START2],
|
|
3423
|
-
end: [...p.end ?? DEFAULT_END2],
|
|
3424
|
-
startColor: p.startColor ?? DEFAULT_START_COLOR2,
|
|
3425
|
-
endColor: p.endColor ?? DEFAULT_END_COLOR2,
|
|
3426
|
-
amount: p.amount ?? DEFAULT_AMOUNT2
|
|
3427
|
-
});
|
|
3428
|
-
var assertOptionalUvCoordinate3 = (value, name) => {
|
|
3429
|
-
if (value === undefined) {
|
|
3430
|
-
return;
|
|
3431
|
-
}
|
|
3432
|
-
if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
|
|
3433
|
-
throw new TypeError(`"${name}" must be a [number, number] tuple`);
|
|
3434
|
-
}
|
|
3435
|
-
};
|
|
3436
|
-
var validateLinearGradientTintParams = (params) => {
|
|
3437
|
-
assertEffectParamsObject(params, "Linear gradient tint");
|
|
3438
|
-
assertOptionalUvCoordinate3(params.start, "start");
|
|
3439
|
-
assertOptionalUvCoordinate3(params.end, "end");
|
|
3440
|
-
assertOptionalColor(params.startColor, "startColor");
|
|
3441
|
-
assertOptionalColor(params.endColor, "endColor");
|
|
3442
|
-
assertOptionalFiniteNumber(params.amount, "amount");
|
|
3443
|
-
validateUnitInterval(resolve10(params).amount, "amount");
|
|
3444
|
-
};
|
|
3445
|
-
var VERTEX_SHADER2 = `#version 300 es
|
|
3446
|
-
in vec2 aPos;
|
|
3447
|
-
in vec2 aUv;
|
|
3448
|
-
out vec2 vUv;
|
|
3449
|
-
|
|
3450
|
-
void main() {
|
|
3451
|
-
vUv = aUv;
|
|
3452
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
3453
|
-
}
|
|
3454
|
-
`;
|
|
3455
|
-
var FRAGMENT_SHADER2 = `#version 300 es
|
|
3456
|
-
precision highp float;
|
|
3457
|
-
|
|
3458
|
-
in vec2 vUv;
|
|
3459
|
-
out vec4 fragColor;
|
|
3460
|
-
|
|
3461
|
-
uniform sampler2D uSource;
|
|
3462
|
-
uniform vec2 uStart;
|
|
3463
|
-
uniform vec2 uEnd;
|
|
3464
|
-
uniform vec4 uStartColor;
|
|
3465
|
-
uniform vec4 uEndColor;
|
|
3466
|
-
uniform float uAmount;
|
|
3467
|
-
|
|
3468
|
-
float gradientProgress(vec2 uv) {
|
|
3469
|
-
vec2 gradient = uEnd - uStart;
|
|
3470
|
-
float gradientLengthSq = dot(gradient, gradient);
|
|
3471
|
-
if (gradientLengthSq <= 0.0000001) {
|
|
3472
|
-
return 0.0;
|
|
3473
|
-
}
|
|
3474
|
-
|
|
3475
|
-
return clamp(dot(uv - uStart, gradient) / gradientLengthSq, 0.0, 1.0);
|
|
3476
|
-
}
|
|
3477
|
-
|
|
3478
|
-
void main() {
|
|
3479
|
-
vec4 texColor = texture(uSource, vUv);
|
|
3480
|
-
float alpha = texColor.a;
|
|
3481
|
-
|
|
3482
|
-
if (alpha <= 0.001) {
|
|
3483
|
-
fragColor = vec4(0.0);
|
|
3484
|
-
return;
|
|
3485
|
-
}
|
|
3486
|
-
|
|
3487
|
-
vec2 publicUv = vec2(vUv.x, 1.0 - vUv.y);
|
|
3488
|
-
vec4 tintColor = mix(uStartColor, uEndColor, gradientProgress(publicUv));
|
|
3489
|
-
vec3 sourceRgb = texColor.rgb / alpha;
|
|
3490
|
-
vec3 blended = mix(sourceRgb, tintColor.rgb, uAmount * tintColor.a);
|
|
3491
|
-
|
|
3492
|
-
fragColor = vec4(blended * alpha, alpha);
|
|
3493
|
-
}
|
|
3494
|
-
`;
|
|
3495
|
-
var compileShader9 = (gl, type, source) => {
|
|
3496
|
-
const shader = gl.createShader(type);
|
|
3497
|
-
if (!shader) {
|
|
3498
|
-
throw new Error("Failed to create WebGL shader");
|
|
3499
|
-
}
|
|
3500
|
-
gl.shaderSource(shader, source);
|
|
3501
|
-
gl.compileShader(shader);
|
|
3502
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
3503
|
-
const log = gl.getShaderInfoLog(shader);
|
|
3504
|
-
gl.deleteShader(shader);
|
|
3505
|
-
throw new Error(`Linear gradient tint shader compile failed: ${log ?? "(no log)"}`);
|
|
3506
|
-
}
|
|
3507
|
-
return shader;
|
|
3508
|
-
};
|
|
3509
|
-
var createProgram5 = (gl) => {
|
|
3510
|
-
const vs = compileShader9(gl, gl.VERTEX_SHADER, VERTEX_SHADER2);
|
|
3511
|
-
const fs = compileShader9(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER2);
|
|
3512
|
-
const program = gl.createProgram();
|
|
3513
|
-
if (!program) {
|
|
3514
|
-
throw new Error("Failed to create WebGL program");
|
|
3515
|
-
}
|
|
3516
|
-
gl.attachShader(program, vs);
|
|
3517
|
-
gl.attachShader(program, fs);
|
|
3518
|
-
gl.linkProgram(program);
|
|
3519
|
-
gl.deleteShader(vs);
|
|
3520
|
-
gl.deleteShader(fs);
|
|
3521
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
3522
|
-
const log = gl.getProgramInfoLog(program);
|
|
3523
|
-
gl.deleteProgram(program);
|
|
3524
|
-
throw new Error(`Linear gradient tint program link failed: ${log ?? "(no log)"}`);
|
|
3525
|
-
}
|
|
3526
|
-
return program;
|
|
3527
|
-
};
|
|
3528
|
-
var createRgbaTexture = (gl) => {
|
|
3529
|
-
const texture = gl.createTexture();
|
|
3530
|
-
if (!texture) {
|
|
3531
|
-
throw new Error("Failed to create WebGL texture");
|
|
3532
|
-
}
|
|
3533
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
3534
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
3535
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
3536
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
3537
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
3538
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
3539
|
-
return texture;
|
|
3540
|
-
};
|
|
3541
|
-
var setupLinearGradientTint = (target) => {
|
|
3542
|
-
const gl = target.getContext("webgl2", {
|
|
3543
|
-
premultipliedAlpha: true,
|
|
3544
|
-
alpha: true,
|
|
3545
|
-
preserveDrawingBuffer: true
|
|
3546
|
-
});
|
|
3547
|
-
if (!gl) {
|
|
3548
|
-
throw createWebGL2ContextError9("linear gradient tint effect");
|
|
3549
|
-
}
|
|
3550
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
3551
|
-
const program = createProgram5(gl);
|
|
3552
|
-
const vao = gl.createVertexArray();
|
|
3553
|
-
if (!vao) {
|
|
3554
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
3555
|
-
}
|
|
3556
|
-
gl.bindVertexArray(vao);
|
|
3557
|
-
const data = new Float32Array([
|
|
3558
|
-
-1,
|
|
3559
|
-
-1,
|
|
3560
|
-
0,
|
|
3561
|
-
0,
|
|
3562
|
-
1,
|
|
3563
|
-
-1,
|
|
3564
|
-
1,
|
|
3565
|
-
0,
|
|
3566
|
-
-1,
|
|
3567
|
-
1,
|
|
3568
|
-
0,
|
|
3569
|
-
1,
|
|
3570
|
-
1,
|
|
3571
|
-
1,
|
|
3572
|
-
1,
|
|
3573
|
-
1
|
|
3574
|
-
]);
|
|
3575
|
-
const vbo = gl.createBuffer();
|
|
3576
|
-
if (!vbo) {
|
|
3577
|
-
throw new Error("Failed to create WebGL buffer");
|
|
3578
|
-
}
|
|
3579
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
3580
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
3581
|
-
const aPos = gl.getAttribLocation(program, "aPos");
|
|
3582
|
-
const aUv = gl.getAttribLocation(program, "aUv");
|
|
3583
|
-
gl.enableVertexAttribArray(aPos);
|
|
3584
|
-
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
|
|
3585
|
-
gl.enableVertexAttribArray(aUv);
|
|
3586
|
-
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
|
|
3587
|
-
gl.bindVertexArray(null);
|
|
3588
|
-
const textureSource = createRgbaTexture(gl);
|
|
3589
|
-
const colorCanvas = document.createElement("canvas");
|
|
3590
|
-
colorCanvas.width = 1;
|
|
3591
|
-
colorCanvas.height = 1;
|
|
3592
|
-
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
3593
|
-
if (!colorCtx) {
|
|
3594
|
-
throw new Error("Failed to acquire 2D context for color parsing");
|
|
3595
|
-
}
|
|
3596
|
-
return {
|
|
3597
|
-
gl,
|
|
3598
|
-
program,
|
|
3599
|
-
vao,
|
|
3600
|
-
vbo,
|
|
3601
|
-
textureSource,
|
|
3602
|
-
uniforms: {
|
|
3603
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
3604
|
-
uStart: gl.getUniformLocation(program, "uStart"),
|
|
3605
|
-
uEnd: gl.getUniformLocation(program, "uEnd"),
|
|
3606
|
-
uStartColor: gl.getUniformLocation(program, "uStartColor"),
|
|
3607
|
-
uEndColor: gl.getUniformLocation(program, "uEndColor"),
|
|
3608
|
-
uAmount: gl.getUniformLocation(program, "uAmount")
|
|
3609
|
-
},
|
|
3610
|
-
colorCtx,
|
|
3611
|
-
cachedStartColor: "",
|
|
3612
|
-
cachedStartColorRgba: [0, 0, 0, 255],
|
|
3613
|
-
cachedEndColor: "",
|
|
3614
|
-
cachedEndColorRgba: [255, 255, 255, 255]
|
|
3615
|
-
};
|
|
3616
|
-
};
|
|
3617
|
-
var normalizedRgba2 = (color) => {
|
|
3618
|
-
return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
|
|
3619
|
-
};
|
|
3620
|
-
var getParsedColors2 = (state, resolved) => {
|
|
3621
|
-
if (state.cachedStartColor !== resolved.startColor) {
|
|
3622
|
-
state.cachedStartColor = resolved.startColor;
|
|
3623
|
-
state.cachedStartColorRgba = parseColorRgba(state.colorCtx, resolved.startColor);
|
|
3624
|
-
}
|
|
3625
|
-
if (state.cachedEndColor !== resolved.endColor) {
|
|
3626
|
-
state.cachedEndColor = resolved.endColor;
|
|
3627
|
-
state.cachedEndColorRgba = parseColorRgba(state.colorCtx, resolved.endColor);
|
|
3628
|
-
}
|
|
3629
|
-
return {
|
|
3630
|
-
start: state.cachedStartColorRgba,
|
|
3631
|
-
end: state.cachedEndColorRgba
|
|
3632
|
-
};
|
|
3633
|
-
};
|
|
3634
|
-
var linearGradientTint = createEffect10({
|
|
3635
|
-
type: "dev.remotion.effects.linearGradientTint",
|
|
3636
|
-
label: "linearGradientTint()",
|
|
3637
|
-
documentationLink: "https://www.remotion.dev/docs/effects/linear-gradient-tint",
|
|
3638
|
-
backend: "webgl2",
|
|
3639
|
-
calculateKey: (params) => {
|
|
3640
|
-
const r = resolve10(params);
|
|
3641
|
-
return `linear-gradient-tint-${r.start.join(":")}-${r.end.join(":")}-${r.startColor}-${r.endColor}-${r.amount}`;
|
|
3642
|
-
},
|
|
3643
|
-
setup: (target) => setupLinearGradientTint(target),
|
|
3644
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
3645
|
-
const r = resolve10(params);
|
|
3646
|
-
const { start, end } = getParsedColors2(state, r);
|
|
3647
|
-
const [sr, sg, sb, sa] = normalizedRgba2(start);
|
|
3648
|
-
const [er, eg, eb, ea] = normalizedRgba2(end);
|
|
3649
|
-
const { gl, program, textureSource, uniforms, vao } = state;
|
|
3650
|
-
gl.viewport(0, 0, width, height);
|
|
3651
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
3652
|
-
gl.clearColor(0, 0, 0, 0);
|
|
3653
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
3654
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
3655
|
-
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
3656
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
3657
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
3658
|
-
gl.useProgram(program);
|
|
3659
|
-
if (uniforms.uSource)
|
|
3660
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
3661
|
-
if (uniforms.uStart)
|
|
3662
|
-
gl.uniform2f(uniforms.uStart, r.start[0], r.start[1]);
|
|
3663
|
-
if (uniforms.uEnd)
|
|
3664
|
-
gl.uniform2f(uniforms.uEnd, r.end[0], r.end[1]);
|
|
3665
|
-
if (uniforms.uStartColor) {
|
|
3666
|
-
gl.uniform4f(uniforms.uStartColor, sr, sg, sb, sa);
|
|
3667
|
-
}
|
|
3668
|
-
if (uniforms.uEndColor) {
|
|
3669
|
-
gl.uniform4f(uniforms.uEndColor, er, eg, eb, ea);
|
|
3670
|
-
}
|
|
3671
|
-
if (uniforms.uAmount)
|
|
3672
|
-
gl.uniform1f(uniforms.uAmount, r.amount);
|
|
3673
|
-
gl.bindVertexArray(vao);
|
|
3674
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
3675
|
-
gl.bindVertexArray(null);
|
|
3676
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
3677
|
-
gl.useProgram(null);
|
|
3678
|
-
},
|
|
3679
|
-
cleanup: ({ gl, program, vao, vbo, textureSource }) => {
|
|
3680
|
-
gl.deleteTexture(textureSource);
|
|
3681
|
-
gl.deleteBuffer(vbo);
|
|
3682
|
-
gl.deleteProgram(program);
|
|
3683
|
-
gl.deleteVertexArray(vao);
|
|
3684
|
-
},
|
|
3685
|
-
schema: linearGradientTintSchema,
|
|
3686
|
-
validateParams: validateLinearGradientTintParams
|
|
3687
|
-
});
|
|
3688
|
-
// src/corner-pin/index.ts
|
|
3689
|
-
import { Internals as Internals12 } from "remotion";
|
|
3690
|
-
|
|
3691
|
-
// src/corner-pin/corner-pin-runtime.ts
|
|
3692
|
-
import { Internals as Internals11 } from "remotion";
|
|
3693
|
-
|
|
3694
|
-
// src/corner-pin/corner-pin-shaders.ts
|
|
3695
|
-
var CORNER_PIN_VS = `#version 300 es
|
|
3696
|
-
layout(location = 0) in vec2 aPos;
|
|
3697
|
-
layout(location = 1) in vec2 aUv;
|
|
3698
|
-
out vec2 vUv;
|
|
3699
|
-
|
|
3700
|
-
void main() {
|
|
3701
|
-
vUv = aUv;
|
|
3702
|
-
gl_Position = vec4(aPos, 0.0, 1.0);
|
|
3703
|
-
}
|
|
3704
|
-
`;
|
|
3705
|
-
var CORNER_PIN_FS = `#version 300 es
|
|
3706
|
-
precision highp float;
|
|
3707
|
-
|
|
3708
|
-
in vec2 vUv;
|
|
3709
|
-
out vec4 fragColor;
|
|
3710
|
-
|
|
3711
|
-
uniform sampler2D uSource;
|
|
3712
|
-
uniform vec2 uTopLeft;
|
|
3713
|
-
uniform vec2 uTopRight;
|
|
3714
|
-
uniform vec2 uBottomRight;
|
|
3715
|
-
uniform vec2 uBottomLeft;
|
|
3716
|
-
|
|
3717
|
-
bool solveProjectiveInverse(vec2 p, out vec2 uv) {
|
|
3718
|
-
vec2 p0 = uBottomLeft;
|
|
3719
|
-
vec2 p1 = uBottomRight;
|
|
3720
|
-
vec2 p2 = uTopRight;
|
|
3721
|
-
vec2 p3 = uTopLeft;
|
|
3722
|
-
|
|
3723
|
-
vec2 dx1 = p1 - p2;
|
|
3724
|
-
vec2 dx2 = p3 - p2;
|
|
3725
|
-
vec2 dx3 = p0 - p1 + p2 - p3;
|
|
3726
|
-
|
|
3727
|
-
float g = 0.0;
|
|
3728
|
-
float h = 0.0;
|
|
3729
|
-
|
|
3730
|
-
if (abs(dx3.x) > 0.000001 || abs(dx3.y) > 0.000001) {
|
|
3731
|
-
float denominator = dx1.x * dx2.y - dx2.x * dx1.y;
|
|
3732
|
-
if (abs(denominator) < 0.000001) {
|
|
3733
|
-
return false;
|
|
3734
|
-
}
|
|
3735
|
-
|
|
3736
|
-
g = (dx3.x * dx2.y - dx2.x * dx3.y) / denominator;
|
|
3737
|
-
h = (dx1.x * dx3.y - dx3.x * dx1.y) / denominator;
|
|
3738
|
-
}
|
|
3739
|
-
|
|
3740
|
-
float a = p1.x - p0.x + g * p1.x;
|
|
3741
|
-
float b = p3.x - p0.x + h * p3.x;
|
|
3742
|
-
float c = p0.x;
|
|
3743
|
-
float d = p1.y - p0.y + g * p1.y;
|
|
3744
|
-
float e = p3.y - p0.y + h * p3.y;
|
|
3745
|
-
float f = p0.y;
|
|
3746
|
-
|
|
3747
|
-
float inverseX =
|
|
3748
|
-
(e - f * h) * p.x +
|
|
3749
|
-
(c * h - b) * p.y +
|
|
3750
|
-
(b * f - c * e);
|
|
3751
|
-
float inverseY =
|
|
3752
|
-
(f * g - d) * p.x +
|
|
3753
|
-
(a - c * g) * p.y +
|
|
3754
|
-
(c * d - a * f);
|
|
3755
|
-
float inverseW =
|
|
3756
|
-
(d * h - e * g) * p.x +
|
|
3757
|
-
(b * g - a * h) * p.y +
|
|
3758
|
-
(a * e - b * d);
|
|
3759
|
-
|
|
3760
|
-
if (abs(inverseW) < 0.000001) {
|
|
3761
|
-
return false;
|
|
3762
|
-
}
|
|
3763
|
-
|
|
3764
|
-
uv = vec2(inverseX / inverseW, inverseY / inverseW);
|
|
3765
|
-
return true;
|
|
3766
|
-
}
|
|
3767
|
-
|
|
3768
|
-
void main() {
|
|
3769
|
-
vec2 sourceUv;
|
|
3770
|
-
if (!solveProjectiveInverse(vUv, sourceUv)) {
|
|
3771
|
-
fragColor = vec4(0.0);
|
|
3772
|
-
return;
|
|
3773
|
-
}
|
|
3774
|
-
|
|
3775
|
-
if (
|
|
3776
|
-
sourceUv.x < 0.0 ||
|
|
3777
|
-
sourceUv.x > 1.0 ||
|
|
3778
|
-
sourceUv.y < 0.0 ||
|
|
3779
|
-
sourceUv.y > 1.0
|
|
3780
|
-
) {
|
|
3781
|
-
fragColor = vec4(0.0);
|
|
3782
|
-
return;
|
|
3783
|
-
}
|
|
3784
|
-
|
|
3785
|
-
fragColor = texture(uSource, sourceUv);
|
|
3786
|
-
}
|
|
3787
|
-
`;
|
|
3788
|
-
|
|
3789
|
-
// src/corner-pin/corner-pin-runtime.ts
|
|
3790
|
-
var { createWebGL2ContextError: createWebGL2ContextError10 } = Internals11;
|
|
3791
|
-
var compileShader10 = (gl, type, source) => {
|
|
3792
|
-
const shader = gl.createShader(type);
|
|
3793
|
-
if (!shader) {
|
|
3794
|
-
throw new Error("Failed to create WebGL shader");
|
|
3795
|
-
}
|
|
3796
|
-
gl.shaderSource(shader, source);
|
|
3797
|
-
gl.compileShader(shader);
|
|
3798
|
-
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
3799
|
-
const log = gl.getShaderInfoLog(shader);
|
|
3800
|
-
gl.deleteShader(shader);
|
|
3801
|
-
throw new Error(`Shader compile failed: ${log ?? "(no log)"}`);
|
|
3802
|
-
}
|
|
3803
|
-
return shader;
|
|
3804
|
-
};
|
|
3805
|
-
var linkProgram8 = (gl, vs, fs) => {
|
|
3806
|
-
const program = gl.createProgram();
|
|
3807
|
-
if (!program) {
|
|
3808
|
-
throw new Error("Failed to create WebGL program");
|
|
3809
|
-
}
|
|
3810
|
-
gl.attachShader(program, vs);
|
|
3811
|
-
gl.attachShader(program, fs);
|
|
3812
|
-
gl.linkProgram(program);
|
|
3813
|
-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
3814
|
-
const log = gl.getProgramInfoLog(program);
|
|
3815
|
-
gl.deleteProgram(program);
|
|
3816
|
-
throw new Error(`Program link failed: ${log ?? "(no log)"}`);
|
|
3817
|
-
}
|
|
3818
|
-
return program;
|
|
3819
|
-
};
|
|
3820
|
-
var createProgram6 = (gl, vertexSource, fragmentSource) => {
|
|
3821
|
-
const vs = compileShader10(gl, gl.VERTEX_SHADER, vertexSource);
|
|
3822
|
-
const fs = compileShader10(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
|
3823
|
-
const program = linkProgram8(gl, vs, fs);
|
|
3824
|
-
gl.deleteShader(vs);
|
|
3825
|
-
gl.deleteShader(fs);
|
|
3826
|
-
return program;
|
|
3827
|
-
};
|
|
3828
|
-
var createRgbaTexture2 = (gl) => {
|
|
3829
|
-
const texture = gl.createTexture();
|
|
3830
|
-
if (!texture) {
|
|
3831
|
-
throw new Error("Failed to create WebGL texture");
|
|
3832
|
-
}
|
|
3833
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
3834
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
3835
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
3836
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
3837
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
3838
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
3839
|
-
return texture;
|
|
3840
|
-
};
|
|
3841
|
-
var setupCornerPin = (target) => {
|
|
3842
|
-
const gl = target.getContext("webgl2", {
|
|
3843
|
-
premultipliedAlpha: true,
|
|
3844
|
-
alpha: true,
|
|
3845
|
-
preserveDrawingBuffer: true
|
|
3846
|
-
});
|
|
3847
|
-
if (!gl) {
|
|
3848
|
-
throw createWebGL2ContextError10("corner pin effect");
|
|
3849
|
-
}
|
|
3850
|
-
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
3851
|
-
const program = createProgram6(gl, CORNER_PIN_VS, CORNER_PIN_FS);
|
|
3852
|
-
const vao = gl.createVertexArray();
|
|
3853
|
-
if (!vao) {
|
|
3854
|
-
throw new Error("Failed to create WebGL vertex array");
|
|
3855
|
-
}
|
|
3856
|
-
gl.bindVertexArray(vao);
|
|
3857
|
-
const data = new Float32Array([
|
|
3858
|
-
-1,
|
|
3859
|
-
-1,
|
|
3860
|
-
0,
|
|
3861
|
-
0,
|
|
3862
|
-
1,
|
|
3863
|
-
-1,
|
|
3864
|
-
1,
|
|
3865
|
-
0,
|
|
3866
|
-
-1,
|
|
3867
|
-
1,
|
|
3868
|
-
0,
|
|
3869
|
-
1,
|
|
3870
|
-
1,
|
|
3871
|
-
1,
|
|
3872
|
-
1,
|
|
3873
|
-
1
|
|
3874
|
-
]);
|
|
3875
|
-
const vbo = gl.createBuffer();
|
|
3876
|
-
if (!vbo) {
|
|
3877
|
-
throw new Error("Failed to create WebGL buffer");
|
|
3878
|
-
}
|
|
3879
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
3880
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
3881
|
-
gl.enableVertexAttribArray(0);
|
|
3882
|
-
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
|
|
3883
|
-
gl.enableVertexAttribArray(1);
|
|
3884
|
-
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
|
|
3885
|
-
gl.bindVertexArray(null);
|
|
3886
|
-
const textureSource = createRgbaTexture2(gl);
|
|
3887
|
-
return {
|
|
3888
|
-
gl,
|
|
3889
|
-
program,
|
|
3890
|
-
vao,
|
|
3891
|
-
vbo,
|
|
3892
|
-
textureSource,
|
|
3893
|
-
uniforms: {
|
|
3894
|
-
uSource: gl.getUniformLocation(program, "uSource"),
|
|
3895
|
-
uTopLeft: gl.getUniformLocation(program, "uTopLeft"),
|
|
3896
|
-
uTopRight: gl.getUniformLocation(program, "uTopRight"),
|
|
3897
|
-
uBottomRight: gl.getUniformLocation(program, "uBottomRight"),
|
|
3898
|
-
uBottomLeft: gl.getUniformLocation(program, "uBottomLeft")
|
|
3899
|
-
}
|
|
3900
|
-
};
|
|
3901
|
-
};
|
|
3902
|
-
var cleanupCornerPin = (state) => {
|
|
3903
|
-
const { gl, program, vao, vbo, textureSource } = state;
|
|
3904
|
-
gl.deleteTexture(textureSource);
|
|
3905
|
-
gl.deleteBuffer(vbo);
|
|
3906
|
-
gl.deleteProgram(program);
|
|
3907
|
-
gl.deleteVertexArray(vao);
|
|
3908
|
-
};
|
|
3909
|
-
var drawFullscreenQuad = (state) => {
|
|
3910
|
-
const { gl, vao } = state;
|
|
3911
|
-
gl.bindVertexArray(vao);
|
|
3912
|
-
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
3913
|
-
gl.bindVertexArray(null);
|
|
3914
|
-
};
|
|
3915
|
-
var setUvUniform = (gl, location, uv) => {
|
|
3916
|
-
if (!location) {
|
|
3917
|
-
return;
|
|
3918
|
-
}
|
|
3919
|
-
const shaderUv = publicUvToShaderUv(uv);
|
|
3920
|
-
gl.uniform2f(location, shaderUv[0], shaderUv[1]);
|
|
3921
|
-
};
|
|
3922
|
-
var applyCornerPin = ({
|
|
3923
|
-
state,
|
|
3924
|
-
source,
|
|
3925
|
-
width,
|
|
3926
|
-
height,
|
|
3927
|
-
topLeft,
|
|
3928
|
-
topRight,
|
|
3929
|
-
bottomRight,
|
|
3930
|
-
bottomLeft,
|
|
3931
|
-
flipSourceY
|
|
3932
|
-
}) => {
|
|
3933
|
-
const { gl, program, textureSource, uniforms } = state;
|
|
3934
|
-
gl.viewport(0, 0, width, height);
|
|
3935
|
-
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
3936
|
-
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
3937
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
3938
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
3939
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
3940
|
-
gl.clearColor(0, 0, 0, 0);
|
|
3941
|
-
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
3942
|
-
gl.useProgram(program);
|
|
3943
|
-
if (uniforms.uSource)
|
|
3944
|
-
gl.uniform1i(uniforms.uSource, 0);
|
|
3945
|
-
setUvUniform(gl, uniforms.uTopLeft, topLeft);
|
|
3946
|
-
setUvUniform(gl, uniforms.uTopRight, topRight);
|
|
3947
|
-
setUvUniform(gl, uniforms.uBottomRight, bottomRight);
|
|
3948
|
-
setUvUniform(gl, uniforms.uBottomLeft, bottomLeft);
|
|
3949
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
3950
|
-
gl.bindTexture(gl.TEXTURE_2D, textureSource);
|
|
3951
|
-
drawFullscreenQuad(state);
|
|
3952
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
3953
|
-
gl.useProgram(null);
|
|
3954
|
-
};
|
|
3955
|
-
|
|
3956
|
-
// src/corner-pin/index.ts
|
|
3957
|
-
var { createEffect: createEffect11 } = Internals12;
|
|
3958
|
-
var DEFAULT_TOP_LEFT = [0, 0];
|
|
3959
|
-
var DEFAULT_TOP_RIGHT = [1, 0];
|
|
3960
|
-
var DEFAULT_BOTTOM_RIGHT = [1, 1];
|
|
3961
|
-
var DEFAULT_BOTTOM_LEFT = [0, 1];
|
|
3962
|
-
var cornerSchema = (defaultValue) => ({
|
|
3963
|
-
type: "uv-coordinate",
|
|
3964
|
-
min: -1,
|
|
3965
|
-
max: 2,
|
|
3966
|
-
step: 0.01,
|
|
3967
|
-
default: defaultValue,
|
|
3968
|
-
description: "Corner"
|
|
3969
|
-
});
|
|
3970
|
-
var cornerPinSchema = {
|
|
3971
|
-
topLeft: {
|
|
3972
|
-
...cornerSchema(DEFAULT_TOP_LEFT),
|
|
3973
|
-
description: "Top left"
|
|
3974
|
-
},
|
|
3975
|
-
topRight: {
|
|
3976
|
-
...cornerSchema(DEFAULT_TOP_RIGHT),
|
|
3977
|
-
description: "Top right"
|
|
3978
|
-
},
|
|
3979
|
-
bottomRight: {
|
|
3980
|
-
...cornerSchema(DEFAULT_BOTTOM_RIGHT),
|
|
3981
|
-
description: "Bottom right"
|
|
3982
|
-
},
|
|
3983
|
-
bottomLeft: {
|
|
3984
|
-
...cornerSchema(DEFAULT_BOTTOM_LEFT),
|
|
3985
|
-
description: "Bottom left"
|
|
3986
|
-
}
|
|
3987
|
-
};
|
|
3988
|
-
var resolve11 = (p) => ({
|
|
3989
|
-
topLeft: [...p.topLeft ?? DEFAULT_TOP_LEFT],
|
|
3990
|
-
topRight: [...p.topRight ?? DEFAULT_TOP_RIGHT],
|
|
3991
|
-
bottomRight: [
|
|
3992
|
-
...p.bottomRight ?? DEFAULT_BOTTOM_RIGHT
|
|
3993
|
-
],
|
|
3994
|
-
bottomLeft: [
|
|
3995
|
-
...p.bottomLeft ?? DEFAULT_BOTTOM_LEFT
|
|
3996
|
-
]
|
|
3997
|
-
});
|
|
3998
|
-
var assertOptionalUvCoordinate4 = (value, name) => {
|
|
3999
|
-
if (value === undefined) {
|
|
4000
|
-
return;
|
|
4001
|
-
}
|
|
4002
|
-
if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
|
|
4003
|
-
throw new TypeError(`"${name}" must be a [number, number] tuple`);
|
|
4004
|
-
}
|
|
4005
|
-
};
|
|
4006
|
-
var validateCornerPinParams = (params) => {
|
|
4007
|
-
assertEffectParamsObject(params, "Corner pin");
|
|
4008
|
-
assertOptionalUvCoordinate4(params.topLeft, "topLeft");
|
|
4009
|
-
assertOptionalUvCoordinate4(params.topRight, "topRight");
|
|
4010
|
-
assertOptionalUvCoordinate4(params.bottomRight, "bottomRight");
|
|
4011
|
-
assertOptionalUvCoordinate4(params.bottomLeft, "bottomLeft");
|
|
4012
|
-
};
|
|
4013
|
-
var cornerPin = createEffect11({
|
|
4014
|
-
type: "dev.remotion.effects.cornerPin",
|
|
4015
|
-
label: "cornerPin()",
|
|
4016
|
-
documentationLink: "https://www.remotion.dev/docs/effects/corner-pin",
|
|
4017
|
-
backend: "webgl2",
|
|
4018
|
-
calculateKey: (params) => {
|
|
4019
|
-
const r = resolve11(params);
|
|
4020
|
-
return `corner-pin-${r.topLeft.join(":")}-${r.topRight.join(":")}-${r.bottomRight.join(":")}-${r.bottomLeft.join(":")}`;
|
|
4021
|
-
},
|
|
4022
|
-
setup: (target) => setupCornerPin(target),
|
|
4023
|
-
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
4024
|
-
const r = resolve11(params);
|
|
4025
|
-
applyCornerPin({
|
|
4026
|
-
state,
|
|
4027
|
-
source,
|
|
4028
|
-
width,
|
|
4029
|
-
height,
|
|
4030
|
-
topLeft: r.topLeft,
|
|
4031
|
-
topRight: r.topRight,
|
|
4032
|
-
bottomRight: r.bottomRight,
|
|
4033
|
-
bottomLeft: r.bottomLeft,
|
|
4034
|
-
flipSourceY
|
|
4035
|
-
});
|
|
4036
|
-
},
|
|
4037
|
-
cleanup: (state) => cleanupCornerPin(state),
|
|
4038
|
-
schema: cornerPinSchema,
|
|
4039
|
-
validateParams: validateCornerPinParams
|
|
4040
|
-
});
|
|
1
|
+
import {
|
|
2
|
+
checkerboard2
|
|
3
|
+
} from "./index-1m1b1ad7.mjs";
|
|
4
|
+
import {
|
|
5
|
+
pattern2
|
|
6
|
+
} from "./index-cb77qg3g.mjs";
|
|
7
|
+
import"./index-8p04sssx.mjs";
|
|
8
|
+
import {
|
|
9
|
+
tile2
|
|
10
|
+
} from "./index-ysnwfc4t.mjs";
|
|
11
|
+
import {
|
|
12
|
+
rings2
|
|
13
|
+
} from "./index-34fxm3ax.mjs";
|
|
14
|
+
import {
|
|
15
|
+
starburstEffectSchema2,
|
|
16
|
+
starburst2
|
|
17
|
+
} from "./index-18y0zcy2.mjs";
|
|
18
|
+
import {
|
|
19
|
+
lightLeakEffectSchema2,
|
|
20
|
+
lightLeak2
|
|
21
|
+
} from "./index-wy95a41r.mjs";
|
|
22
|
+
import {
|
|
23
|
+
gridlines2
|
|
24
|
+
} from "./index-8agtsbw4.mjs";
|
|
25
|
+
import {
|
|
26
|
+
zigzag2
|
|
27
|
+
} from "./index-afdtmrh2.mjs";
|
|
28
|
+
import {
|
|
29
|
+
linearGradient2
|
|
30
|
+
} from "./index-0w4eqht8.mjs";
|
|
31
|
+
import {
|
|
32
|
+
linearGradientTint2
|
|
33
|
+
} from "./index-6agxdrvr.mjs";
|
|
34
|
+
import {
|
|
35
|
+
cornerPin2
|
|
36
|
+
} from "./index-r0v18b2n.mjs";
|
|
4041
37
|
export {
|
|
4042
|
-
checkerboard,
|
|
4043
|
-
cornerPin,
|
|
4044
|
-
gridlines,
|
|
4045
|
-
lightLeak,
|
|
4046
|
-
lightLeakEffectSchema,
|
|
4047
|
-
linearGradient,
|
|
4048
|
-
linearGradientTint,
|
|
4049
|
-
pattern,
|
|
4050
|
-
rings,
|
|
4051
|
-
starburst,
|
|
4052
|
-
starburstEffectSchema,
|
|
4053
|
-
tile,
|
|
4054
|
-
zigzag
|
|
38
|
+
checkerboard2 as checkerboard,
|
|
39
|
+
cornerPin2 as cornerPin,
|
|
40
|
+
gridlines2 as gridlines,
|
|
41
|
+
lightLeak2 as lightLeak,
|
|
42
|
+
lightLeakEffectSchema2 as lightLeakEffectSchema,
|
|
43
|
+
linearGradient2 as linearGradient,
|
|
44
|
+
linearGradientTint2 as linearGradientTint,
|
|
45
|
+
pattern2 as pattern,
|
|
46
|
+
rings2 as rings,
|
|
47
|
+
starburst2 as starburst,
|
|
48
|
+
starburstEffectSchema2 as starburstEffectSchema,
|
|
49
|
+
tile2 as tile,
|
|
50
|
+
zigzag2 as zigzag
|
|
4055
51
|
};
|