@remotion/effects 4.0.473 → 4.0.475
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/barrel-distortion.mjs +8 -0
- package/dist/esm/blur.mjs +8 -0
- package/dist/esm/brightness.mjs +8 -0
- package/dist/esm/chromatic-aberration.mjs +8 -0
- package/dist/esm/color-key.mjs +8 -0
- package/dist/esm/contrast.mjs +8 -0
- package/dist/esm/dot-grid.mjs +10 -2
- package/dist/esm/drop-shadow.mjs +8 -0
- package/dist/esm/duotone.mjs +8 -0
- package/dist/esm/evolve.mjs +8 -0
- package/dist/esm/fisheye.mjs +8 -0
- package/dist/esm/glow.mjs +8 -0
- package/dist/esm/grayscale.mjs +8 -0
- package/dist/esm/halftone-linear-gradient.mjs +35 -3
- package/dist/esm/halftone.mjs +8 -8
- package/dist/esm/hue.mjs +8 -0
- package/dist/esm/index.mjs +56 -6
- package/dist/esm/invert.mjs +8 -0
- package/dist/esm/linear-progressive-blur.mjs +8 -0
- package/dist/esm/lines.mjs +32 -3
- package/dist/esm/mirror.mjs +8 -0
- package/dist/esm/noise-displacement.mjs +578 -0
- package/dist/esm/noise.mjs +10 -2
- package/dist/esm/pixel-dissolve.mjs +8 -0
- package/dist/esm/rings.mjs +32 -3
- package/dist/esm/saturation.mjs +8 -0
- package/dist/esm/scale.mjs +8 -0
- package/dist/esm/scanlines.mjs +10 -2
- package/dist/esm/shine.mjs +8 -0
- package/dist/esm/speckle.mjs +8 -0
- package/dist/esm/tint.mjs +8 -0
- package/dist/esm/translate.mjs +8 -0
- package/dist/esm/vignette.mjs +8 -0
- package/dist/esm/wave.mjs +8 -0
- package/dist/esm/waves.mjs +32 -3
- package/dist/esm/white-noise.mjs +8 -0
- package/dist/esm/zigzag.mjs +32 -3
- package/dist/halftone-linear-gradient.d.ts +9 -0
- package/dist/lines.d.ts +7 -0
- package/dist/noise-displacement.d.ts +26 -0
- package/dist/rings.d.ts +7 -0
- package/dist/validate-effect-param.d.ts +1 -0
- package/dist/waves.d.ts +7 -0
- package/dist/zigzag.d.ts +7 -0
- package/package.json +11 -3
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/blur.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/blur/blur-runtime.ts
|
|
28
36
|
import { Internals } from "remotion";
|
package/dist/esm/brightness.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/color-key.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/contrast.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/dot-grid.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -133,7 +141,7 @@ var resolve = (p) => ({
|
|
|
133
141
|
gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
|
|
134
142
|
invert: p.invert ?? DEFAULT_INVERT
|
|
135
143
|
});
|
|
136
|
-
var
|
|
144
|
+
var assertOptionalBoolean2 = (value, name) => {
|
|
137
145
|
if (value === undefined) {
|
|
138
146
|
return;
|
|
139
147
|
}
|
|
@@ -150,7 +158,7 @@ var validateDotGridParams = (params) => {
|
|
|
150
158
|
assertEffectParamsObject(params, "Dot grid");
|
|
151
159
|
assertOptionalFiniteNumber(params.dotSize, "dotSize");
|
|
152
160
|
assertOptionalFiniteNumber(params.gridSize, "gridSize");
|
|
153
|
-
|
|
161
|
+
assertOptionalBoolean2(params.invert, "invert");
|
|
154
162
|
if (params.dotSize !== undefined) {
|
|
155
163
|
validateNonNegative(params.dotSize, "dotSize");
|
|
156
164
|
}
|
package/dist/esm/drop-shadow.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/duotone.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/evolve.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/fisheye.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/glow.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/grayscale.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -107,6 +115,7 @@ var DEFAULT_FIRST_STOP_POSITION = [0, 0.5];
|
|
|
107
115
|
var DEFAULT_SECOND_STOP_POSITION = [1, 0.5];
|
|
108
116
|
var DEFAULT_GRID_SIZE = 24;
|
|
109
117
|
var DEFAULT_DOT_COLOR = "black";
|
|
118
|
+
var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
|
|
110
119
|
var halftoneLinearGradientSchema = {
|
|
111
120
|
firstStopDotSize: {
|
|
112
121
|
type: "number",
|
|
@@ -166,6 +175,11 @@ var halftoneLinearGradientSchema = {
|
|
|
166
175
|
},
|
|
167
176
|
source: {}
|
|
168
177
|
}
|
|
178
|
+
},
|
|
179
|
+
maskToSourceAlpha: {
|
|
180
|
+
type: "boolean",
|
|
181
|
+
default: DEFAULT_MASK_TO_SOURCE_ALPHA,
|
|
182
|
+
description: "Mask to source alpha"
|
|
169
183
|
}
|
|
170
184
|
};
|
|
171
185
|
var formatEnum = (variants) => {
|
|
@@ -193,7 +207,8 @@ var resolve = (p) => ({
|
|
|
193
207
|
],
|
|
194
208
|
gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
|
|
195
209
|
colorMode: p.colorMode ?? "solid",
|
|
196
|
-
dotColor: "dotColor" in p ? p.dotColor ?? DEFAULT_DOT_COLOR : DEFAULT_DOT_COLOR
|
|
210
|
+
dotColor: "dotColor" in p ? p.dotColor ?? DEFAULT_DOT_COLOR : DEFAULT_DOT_COLOR,
|
|
211
|
+
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
|
|
197
212
|
});
|
|
198
213
|
var validateNonNegative2 = (value, name) => {
|
|
199
214
|
if (value < 0) {
|
|
@@ -220,6 +235,7 @@ var validateHalftoneLinearGradientParams = (params) => {
|
|
|
220
235
|
assertOptionalUvCoordinate(params.firstStopPosition, "firstStopPosition");
|
|
221
236
|
assertOptionalUvCoordinate(params.secondStopPosition, "secondStopPosition");
|
|
222
237
|
assertOptionalFiniteNumber(params.gridSize, "gridSize");
|
|
238
|
+
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
223
239
|
assertOptionalEnum(params.colorMode, "colorMode", HALFTONE_LINEAR_GRADIENT_COLOR_MODES);
|
|
224
240
|
if (params.colorMode === "source" && "dotColor" in params) {
|
|
225
241
|
throw new TypeError('"dotColor" can only be set when "colorMode" is "solid"');
|
|
@@ -259,6 +275,7 @@ uniform vec2 uSecondStopPosition;
|
|
|
259
275
|
uniform float uGridSize;
|
|
260
276
|
uniform vec4 uColor;
|
|
261
277
|
uniform bool uUseSourceColor;
|
|
278
|
+
uniform bool uMaskToSourceAlpha;
|
|
262
279
|
|
|
263
280
|
float gradientProgress(vec2 uv) {
|
|
264
281
|
vec2 stopVector = uSecondStopPosition - uFirstStopPosition;
|
|
@@ -274,6 +291,13 @@ vec4 sourceOver(vec4 backdrop, vec4 overlay) {
|
|
|
274
291
|
return overlay + backdrop * (1.0 - overlay.a);
|
|
275
292
|
}
|
|
276
293
|
|
|
294
|
+
vec4 sourceAtop(vec4 backdrop, vec4 overlay) {
|
|
295
|
+
return vec4(
|
|
296
|
+
overlay.rgb * backdrop.a + backdrop.rgb * (1.0 - overlay.a),
|
|
297
|
+
backdrop.a
|
|
298
|
+
);
|
|
299
|
+
}
|
|
300
|
+
|
|
277
301
|
void main() {
|
|
278
302
|
vec2 fragPos = vUv * uResolution;
|
|
279
303
|
vec2 center = uResolution * 0.5;
|
|
@@ -302,7 +326,11 @@ void main() {
|
|
|
302
326
|
vec2 sampleUv = clamp(centerUv, vec2(0.0), vec2(1.0));
|
|
303
327
|
vec4 texColor = texture(uSource, sampleUv);
|
|
304
328
|
vec4 dotColor = (uUseSourceColor ? texColor : uColor) * coverage;
|
|
305
|
-
fragColor = uUseSourceColor
|
|
329
|
+
fragColor = uUseSourceColor
|
|
330
|
+
? dotColor
|
|
331
|
+
: uMaskToSourceAlpha
|
|
332
|
+
? sourceAtop(texColor, dotColor)
|
|
333
|
+
: sourceOver(texColor, dotColor);
|
|
306
334
|
}
|
|
307
335
|
`;
|
|
308
336
|
var compileShader = (gl, type, source) => {
|
|
@@ -341,7 +369,8 @@ var halftoneLinearGradient = createEffect({
|
|
|
341
369
|
backend: "webgl2",
|
|
342
370
|
calculateKey: (params) => {
|
|
343
371
|
const r = resolve(params);
|
|
344
|
-
|
|
372
|
+
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
373
|
+
return `halftone-linear-gradient-${r.firstStopDotSize}-${r.secondStopDotSize}-${r.firstStopPosition.join(":")}-${r.secondStopPosition.join(":")}-${r.gridSize}-${r.colorMode}-${r.dotColor}${maskSuffix}`;
|
|
345
374
|
},
|
|
346
375
|
setup: (target) => {
|
|
347
376
|
const gl = target.getContext("webgl2", {
|
|
@@ -426,6 +455,7 @@ var halftoneLinearGradient = createEffect({
|
|
|
426
455
|
uGridSize: gl.getUniformLocation(program, "uGridSize"),
|
|
427
456
|
uColor: gl.getUniformLocation(program, "uColor"),
|
|
428
457
|
uUseSourceColor: gl.getUniformLocation(program, "uUseSourceColor"),
|
|
458
|
+
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha"),
|
|
429
459
|
colorCtx,
|
|
430
460
|
cachedColorStr: "",
|
|
431
461
|
cachedColorRgba: [0, 0, 0, 255]
|
|
@@ -467,6 +497,8 @@ var halftoneLinearGradient = createEffect({
|
|
|
467
497
|
gl.uniform4f(state.uColor, cr / 255 * caNormalized, cg / 255 * caNormalized, cb / 255 * caNormalized, caNormalized);
|
|
468
498
|
if (state.uUseSourceColor)
|
|
469
499
|
gl.uniform1i(state.uUseSourceColor, r.colorMode === "source" ? 1 : 0);
|
|
500
|
+
if (state.uMaskToSourceAlpha)
|
|
501
|
+
gl.uniform1i(state.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
470
502
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
471
503
|
gl.bindVertexArray(null);
|
|
472
504
|
gl.bindTexture(gl.TEXTURE_2D, null);
|
package/dist/esm/halftone.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -187,14 +195,6 @@ var assertOptionalEnum = (value, name, variants) => {
|
|
|
187
195
|
throw new TypeError(`"${name}" must be ${formatEnum(variants)}`);
|
|
188
196
|
}
|
|
189
197
|
};
|
|
190
|
-
var assertOptionalBoolean = (value, name) => {
|
|
191
|
-
if (value === undefined) {
|
|
192
|
-
return;
|
|
193
|
-
}
|
|
194
|
-
if (typeof value !== "boolean") {
|
|
195
|
-
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
196
|
-
}
|
|
197
|
-
};
|
|
198
198
|
var resolve = (p) => ({
|
|
199
199
|
shape: p.shape ?? "circle",
|
|
200
200
|
dotSize: p.dotSize ?? 20,
|
package/dist/esm/hue.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -105,6 +113,7 @@ var DEFAULT_CENTER = [0.5, 0.5];
|
|
|
105
113
|
var DEFAULT_THICKNESS = 40;
|
|
106
114
|
var DEFAULT_GAP = 0;
|
|
107
115
|
var DEFAULT_OFFSET = 0;
|
|
116
|
+
var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
|
|
108
117
|
var ringsSchema = {
|
|
109
118
|
center: {
|
|
110
119
|
type: "uv-coordinate",
|
|
@@ -138,6 +147,11 @@ var ringsSchema = {
|
|
|
138
147
|
default: DEFAULT_OFFSET,
|
|
139
148
|
description: "Offset",
|
|
140
149
|
hiddenFromList: false
|
|
150
|
+
},
|
|
151
|
+
maskToSourceAlpha: {
|
|
152
|
+
type: "boolean",
|
|
153
|
+
default: DEFAULT_MASK_TO_SOURCE_ALPHA,
|
|
154
|
+
description: "Mask to source alpha"
|
|
141
155
|
}
|
|
142
156
|
};
|
|
143
157
|
var resolve = (p) => {
|
|
@@ -148,7 +162,8 @@ var resolve = (p) => {
|
|
|
148
162
|
center: [...p.center ?? DEFAULT_CENTER],
|
|
149
163
|
thickness,
|
|
150
164
|
spacing: thickness + gap,
|
|
151
|
-
offset: p.offset ?? DEFAULT_OFFSET
|
|
165
|
+
offset: p.offset ?? DEFAULT_OFFSET,
|
|
166
|
+
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
|
|
152
167
|
};
|
|
153
168
|
};
|
|
154
169
|
var validatePositive = (value, name) => {
|
|
@@ -189,6 +204,7 @@ var validateRingsParams = (params) => {
|
|
|
189
204
|
assertOptionalFiniteNumber(params.thickness, "thickness");
|
|
190
205
|
assertOptionalFiniteNumber(params.gap, "gap");
|
|
191
206
|
assertOptionalFiniteNumber(params.offset, "offset");
|
|
207
|
+
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
192
208
|
const thickness = params.thickness ?? DEFAULT_THICKNESS;
|
|
193
209
|
const gap = params.gap ?? DEFAULT_GAP;
|
|
194
210
|
validatePositive(thickness, "thickness");
|
|
@@ -218,6 +234,7 @@ uniform vec2 uCenter;
|
|
|
218
234
|
uniform float uThickness;
|
|
219
235
|
uniform float uSpacing;
|
|
220
236
|
uniform float uOffset;
|
|
237
|
+
uniform bool uMaskToSourceAlpha;
|
|
221
238
|
|
|
222
239
|
void main() {
|
|
223
240
|
vec4 texColor = texture(uSource, vUv);
|
|
@@ -244,6 +261,14 @@ void main() {
|
|
|
244
261
|
float ringAlpha = ringColor.a;
|
|
245
262
|
vec3 premultipliedRing = ringColor.rgb * ringAlpha;
|
|
246
263
|
|
|
264
|
+
if (uMaskToSourceAlpha) {
|
|
265
|
+
fragColor = vec4(
|
|
266
|
+
premultipliedRing * texColor.a + texColor.rgb * (1.0 - ringAlpha),
|
|
267
|
+
texColor.a
|
|
268
|
+
);
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
|
|
247
272
|
fragColor = vec4(
|
|
248
273
|
premultipliedRing + texColor.rgb * (1.0 - ringAlpha),
|
|
249
274
|
ringAlpha + texColor.a * (1.0 - ringAlpha)
|
|
@@ -370,7 +395,8 @@ var setupRings = (target) => {
|
|
|
370
395
|
uCenter: gl.getUniformLocation(program, "uCenter"),
|
|
371
396
|
uThickness: gl.getUniformLocation(program, "uThickness"),
|
|
372
397
|
uSpacing: gl.getUniformLocation(program, "uSpacing"),
|
|
373
|
-
uOffset: gl.getUniformLocation(program, "uOffset")
|
|
398
|
+
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
399
|
+
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
374
400
|
},
|
|
375
401
|
cachedPaletteKey: "",
|
|
376
402
|
palettePixelData: new Uint8Array(0)
|
|
@@ -404,7 +430,8 @@ var rings = createEffect({
|
|
|
404
430
|
backend: "webgl2",
|
|
405
431
|
calculateKey: (params) => {
|
|
406
432
|
const r = resolve(params);
|
|
407
|
-
|
|
433
|
+
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
434
|
+
return `rings-${r.colors.join("|")}-${r.center.join(":")}-${r.thickness}-${r.spacing}-${r.offset}${maskSuffix}`;
|
|
408
435
|
},
|
|
409
436
|
setup: (target) => setupRings(target),
|
|
410
437
|
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
@@ -445,6 +472,8 @@ var rings = createEffect({
|
|
|
445
472
|
gl.uniform1f(uniforms.uSpacing, r.spacing);
|
|
446
473
|
if (uniforms.uOffset)
|
|
447
474
|
gl.uniform1f(uniforms.uOffset, r.offset);
|
|
475
|
+
if (uniforms.uMaskToSourceAlpha)
|
|
476
|
+
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
448
477
|
gl.bindVertexArray(vao);
|
|
449
478
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
450
479
|
gl.bindVertexArray(null);
|
|
@@ -474,6 +503,7 @@ var DEFAULT_ANGLE = 0;
|
|
|
474
503
|
var DEFAULT_OFFSET2 = 0;
|
|
475
504
|
var DEFAULT_AMPLITUDE = 40;
|
|
476
505
|
var DEFAULT_WAVELENGTH = 160;
|
|
506
|
+
var DEFAULT_MASK_TO_SOURCE_ALPHA2 = false;
|
|
477
507
|
var zigzagSchema = {
|
|
478
508
|
direction: {
|
|
479
509
|
type: "enum",
|
|
@@ -532,6 +562,11 @@ var zigzagSchema = {
|
|
|
532
562
|
default: DEFAULT_WAVELENGTH,
|
|
533
563
|
description: "Wavelength",
|
|
534
564
|
hiddenFromList: false
|
|
565
|
+
},
|
|
566
|
+
maskToSourceAlpha: {
|
|
567
|
+
type: "boolean",
|
|
568
|
+
default: DEFAULT_MASK_TO_SOURCE_ALPHA2,
|
|
569
|
+
description: "Mask to source alpha"
|
|
535
570
|
}
|
|
536
571
|
};
|
|
537
572
|
var resolve2 = (p) => {
|
|
@@ -545,7 +580,8 @@ var resolve2 = (p) => {
|
|
|
545
580
|
angle: p.angle ?? DEFAULT_ANGLE,
|
|
546
581
|
offset: p.offset ?? DEFAULT_OFFSET2,
|
|
547
582
|
amplitude: p.amplitude ?? DEFAULT_AMPLITUDE,
|
|
548
|
-
wavelength: p.wavelength ?? DEFAULT_WAVELENGTH
|
|
583
|
+
wavelength: p.wavelength ?? DEFAULT_WAVELENGTH,
|
|
584
|
+
maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA2
|
|
549
585
|
};
|
|
550
586
|
};
|
|
551
587
|
var formatEnum = (variants) => {
|
|
@@ -593,6 +629,7 @@ var validateZigzagParams = (params) => {
|
|
|
593
629
|
assertOptionalFiniteNumber(params.offset, "offset");
|
|
594
630
|
assertOptionalFiniteNumber(params.amplitude, "amplitude");
|
|
595
631
|
assertOptionalFiniteNumber(params.wavelength, "wavelength");
|
|
632
|
+
assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
|
|
596
633
|
const thickness = params.thickness ?? DEFAULT_THICKNESS2;
|
|
597
634
|
const gap = params.gap ?? DEFAULT_GAP2;
|
|
598
635
|
const amplitude = params.amplitude ?? DEFAULT_AMPLITUDE;
|
|
@@ -629,6 +666,7 @@ uniform float uAngle;
|
|
|
629
666
|
uniform float uOffset;
|
|
630
667
|
uniform float uAmplitude;
|
|
631
668
|
uniform float uWavelength;
|
|
669
|
+
uniform bool uMaskToSourceAlpha;
|
|
632
670
|
|
|
633
671
|
void main() {
|
|
634
672
|
vec4 texColor = texture(uSource, vUv);
|
|
@@ -663,6 +701,14 @@ void main() {
|
|
|
663
701
|
float lineAlpha = lineColor.a;
|
|
664
702
|
vec3 premultipliedLine = lineColor.rgb * lineAlpha;
|
|
665
703
|
|
|
704
|
+
if (uMaskToSourceAlpha) {
|
|
705
|
+
fragColor = vec4(
|
|
706
|
+
premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
|
|
707
|
+
texColor.a
|
|
708
|
+
);
|
|
709
|
+
return;
|
|
710
|
+
}
|
|
711
|
+
|
|
666
712
|
fragColor = vec4(
|
|
667
713
|
premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
|
|
668
714
|
lineAlpha + texColor.a * (1.0 - lineAlpha)
|
|
@@ -792,7 +838,8 @@ var setupZigzag = (target) => {
|
|
|
792
838
|
uAngle: gl.getUniformLocation(program, "uAngle"),
|
|
793
839
|
uOffset: gl.getUniformLocation(program, "uOffset"),
|
|
794
840
|
uAmplitude: gl.getUniformLocation(program, "uAmplitude"),
|
|
795
|
-
uWavelength: gl.getUniformLocation(program, "uWavelength")
|
|
841
|
+
uWavelength: gl.getUniformLocation(program, "uWavelength"),
|
|
842
|
+
uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
|
|
796
843
|
},
|
|
797
844
|
cachedPaletteKey: "",
|
|
798
845
|
palettePixelData: new Uint8Array(0)
|
|
@@ -826,7 +873,8 @@ var zigzag = createEffect2({
|
|
|
826
873
|
backend: "webgl2",
|
|
827
874
|
calculateKey: (params) => {
|
|
828
875
|
const r = resolve2(params);
|
|
829
|
-
|
|
876
|
+
const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
|
|
877
|
+
return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}${maskSuffix}`;
|
|
830
878
|
},
|
|
831
879
|
setup: (target) => setupZigzag(target),
|
|
832
880
|
apply: ({ source, width, height, params, state, flipSourceY }) => {
|
|
@@ -873,6 +921,8 @@ var zigzag = createEffect2({
|
|
|
873
921
|
gl.uniform1f(uniforms.uAmplitude, r.amplitude);
|
|
874
922
|
if (uniforms.uWavelength)
|
|
875
923
|
gl.uniform1f(uniforms.uWavelength, r.wavelength);
|
|
924
|
+
if (uniforms.uMaskToSourceAlpha)
|
|
925
|
+
gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
|
|
876
926
|
gl.bindVertexArray(vao);
|
|
877
927
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
878
928
|
gl.bindVertexArray(null);
|
package/dist/esm/invert.mjs
CHANGED
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|
|
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
|
|
|
23
23
|
}
|
|
24
24
|
assertRequiredColor(value, name);
|
|
25
25
|
};
|
|
26
|
+
var assertOptionalBoolean = (value, name) => {
|
|
27
|
+
if (value === undefined) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value !== "boolean") {
|
|
31
|
+
throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
26
34
|
|
|
27
35
|
// src/color-utils.ts
|
|
28
36
|
var DEFAULT_AMOUNT = 1;
|