@remotion/effects 4.0.541 → 4.0.542

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.
Files changed (133) hide show
  1. package/THIRD_PARTY_LICENSES.md +10 -0
  2. package/dist/esm/lightning.mjs +603 -0
  3. package/dist/esm/magnify.mjs +403 -0
  4. package/dist/esm/preview/barrel-distortion.mjs +303 -0
  5. package/dist/esm/preview/bevel-alpha.mjs +525 -0
  6. package/dist/esm/preview/blur.mjs +435 -0
  7. package/dist/esm/preview/brightness.mjs +95 -0
  8. package/dist/esm/preview/burlap.mjs +481 -0
  9. package/dist/esm/preview/checkerboard.mjs +8 -0
  10. package/dist/esm/preview/chromatic-aberration.mjs +308 -0
  11. package/dist/esm/preview/color-correction.mjs +522 -0
  12. package/dist/esm/preview/color-key.mjs +440 -0
  13. package/dist/esm/preview/contour-lines.mjs +608 -0
  14. package/dist/esm/preview/contrast.mjs +95 -0
  15. package/dist/esm/preview/corner-pin.mjs +6 -0
  16. package/dist/esm/preview/curves.mjs +357 -0
  17. package/dist/esm/preview/cylinder.mjs +273 -0
  18. package/dist/esm/preview/dot-grid.mjs +333 -0
  19. package/dist/esm/preview/drop-shadow.mjs +607 -0
  20. package/dist/esm/preview/duotone.mjs +344 -0
  21. package/dist/esm/preview/emboss.mjs +479 -0
  22. package/dist/esm/preview/evolve.mjs +485 -0
  23. package/dist/esm/preview/exposure.mjs +264 -0
  24. package/dist/esm/preview/film-burn.mjs +298 -0
  25. package/dist/esm/preview/fisheye.mjs +422 -0
  26. package/dist/esm/preview/flannel.mjs +401 -0
  27. package/dist/esm/preview/fractal-noise.mjs +642 -0
  28. package/dist/esm/preview/glow.mjs +598 -0
  29. package/dist/esm/preview/grayscale.mjs +86 -0
  30. package/dist/esm/preview/gridlines.mjs +8 -0
  31. package/dist/esm/preview/halftone-linear-gradient.mjs +523 -0
  32. package/dist/esm/preview/halftone.mjs +552 -0
  33. package/dist/esm/preview/hue.mjs +83 -0
  34. package/dist/esm/preview/index-00v3hr66.mjs +299 -0
  35. package/dist/esm/preview/index-0w4eqht8.mjs +351 -0
  36. package/dist/esm/preview/index-18y0zcy2.mjs +440 -0
  37. package/dist/esm/preview/index-1m1b1ad7.mjs +520 -0
  38. package/dist/esm/preview/index-34fxm3ax.mjs +518 -0
  39. package/dist/esm/preview/index-4fvp93ps.mjs +32 -0
  40. package/dist/esm/preview/index-4scpn12x.mjs +224 -0
  41. package/dist/esm/preview/index-4z6pt3ka.mjs +104 -0
  42. package/dist/esm/preview/index-618ky75w.mjs +51 -0
  43. package/dist/esm/preview/index-6agxdrvr.mjs +411 -0
  44. package/dist/esm/preview/index-6jkps947.mjs +120 -0
  45. package/dist/esm/preview/index-8agtsbw4.mjs +617 -0
  46. package/dist/esm/preview/index-8jx11jyn.mjs +29 -0
  47. package/dist/esm/preview/index-8p04sssx.mjs +123 -0
  48. package/dist/esm/preview/index-afdtmrh2.mjs +596 -0
  49. package/dist/esm/preview/index-b86qstcs.mjs +18 -0
  50. package/dist/esm/preview/index-cb77qg3g.mjs +587 -0
  51. package/dist/esm/preview/index-cdp7tr8x.mjs +122 -0
  52. package/dist/esm/preview/index-evy8hyah.mjs +55 -0
  53. package/dist/esm/preview/index-gnsce796.mjs +6 -0
  54. package/dist/esm/preview/index-kkvzt8b7.mjs +199 -0
  55. package/dist/esm/preview/index-r0v18b2n.mjs +425 -0
  56. package/dist/esm/preview/index-rswpzmm5.mjs +926 -0
  57. package/dist/esm/preview/index-s9mrx750.mjs +97 -0
  58. package/dist/esm/preview/index-tvfexb7s.mjs +164 -0
  59. package/dist/esm/preview/index-vp56k1gj.mjs +215 -0
  60. package/dist/esm/preview/index-wxhvgv2s.mjs +79 -0
  61. package/dist/esm/preview/index-wy95a41r.mjs +407 -0
  62. package/dist/esm/preview/index-ysnwfc4t.mjs +306 -0
  63. package/dist/esm/preview/index.mjs +51 -0
  64. package/dist/esm/preview/invert.mjs +84 -0
  65. package/dist/esm/preview/iris-wipe.mjs +315 -0
  66. package/dist/esm/preview/lens-blur.mjs +563 -0
  67. package/dist/esm/preview/levels.mjs +400 -0
  68. package/dist/esm/preview/light-leak.mjs +8 -0
  69. package/dist/esm/preview/light-trail.mjs +516 -0
  70. package/dist/esm/preview/lightning.mjs +603 -0
  71. package/dist/esm/preview/linear-gradient-tint.mjs +6 -0
  72. package/dist/esm/preview/linear-gradient.mjs +6 -0
  73. package/dist/esm/preview/linear-progressive-blur.mjs +516 -0
  74. package/dist/esm/preview/linear-progressive-pixelate.mjs +176 -0
  75. package/dist/esm/preview/lines.mjs +536 -0
  76. package/dist/esm/preview/liquid-contours.mjs +512 -0
  77. package/dist/esm/preview/long-shadows.mjs +437 -0
  78. package/dist/esm/preview/lut.mjs +601 -0
  79. package/dist/esm/preview/magnify.mjs +403 -0
  80. package/dist/esm/preview/mirror.mjs +341 -0
  81. package/dist/esm/preview/noise-displacement.mjs +584 -0
  82. package/dist/esm/preview/noise.mjs +318 -0
  83. package/dist/esm/preview/outline.mjs +725 -0
  84. package/dist/esm/preview/page-turn.mjs +302 -0
  85. package/dist/esm/preview/paper.mjs +1249 -0
  86. package/dist/esm/preview/pattern.mjs +6 -0
  87. package/dist/esm/preview/pixel-dissolve.mjs +360 -0
  88. package/dist/esm/preview/pixelate.mjs +249 -0
  89. package/dist/esm/preview/radial-progressive-blur.mjs +582 -0
  90. package/dist/esm/preview/radial-progressive-pixelate.mjs +220 -0
  91. package/dist/esm/preview/radial-wipe.mjs +224 -0
  92. package/dist/esm/preview/rain-fall.mjs +114 -0
  93. package/dist/esm/preview/region-blur.mjs +500 -0
  94. package/dist/esm/preview/rings.mjs +8 -0
  95. package/dist/esm/preview/roughen-edges.mjs +590 -0
  96. package/dist/esm/preview/saturation.mjs +86 -0
  97. package/dist/esm/preview/scale.mjs +109 -0
  98. package/dist/esm/preview/scanlines.mjs +362 -0
  99. package/dist/esm/preview/shadows-highlights.mjs +284 -0
  100. package/dist/esm/preview/shatter.mjs +868 -0
  101. package/dist/esm/preview/shine.mjs +368 -0
  102. package/dist/esm/preview/shrinkwrap.mjs +769 -0
  103. package/dist/esm/preview/skew.mjs +300 -0
  104. package/dist/esm/preview/snow-fall.mjs +170 -0
  105. package/dist/esm/preview/speckle.mjs +356 -0
  106. package/dist/esm/preview/sphere.mjs +252 -0
  107. package/dist/esm/preview/starburst.mjs +8 -0
  108. package/dist/esm/preview/tear.mjs +375 -0
  109. package/dist/esm/preview/thermal-vision.mjs +387 -0
  110. package/dist/esm/preview/tile.mjs +7 -0
  111. package/dist/esm/preview/tint.mjs +125 -0
  112. package/dist/esm/preview/translate.mjs +151 -0
  113. package/dist/esm/preview/turbulent-displace.mjs +613 -0
  114. package/dist/esm/preview/tv-signal-off.mjs +308 -0
  115. package/dist/esm/preview/venetian-blinds.mjs +341 -0
  116. package/dist/esm/preview/vibrance.mjs +254 -0
  117. package/dist/esm/preview/vignette.mjs +458 -0
  118. package/dist/esm/preview/wave.mjs +384 -0
  119. package/dist/esm/preview/waves.mjs +599 -0
  120. package/dist/esm/preview/white-balance.mjs +280 -0
  121. package/dist/esm/preview/white-noise.mjs +244 -0
  122. package/dist/esm/preview/zigzag.mjs +8 -0
  123. package/dist/esm/preview/zoom-blur.mjs +389 -0
  124. package/dist/lightning/geometry.d.ts +10 -0
  125. package/dist/lightning/index.d.ts +4 -0
  126. package/dist/lightning/mask.d.ts +2 -0
  127. package/dist/lightning/params.d.ts +259 -0
  128. package/dist/lightning/shaders.d.ts +2 -0
  129. package/dist/lightning.d.ts +2 -0
  130. package/dist/magnify/shader.d.ts +1 -0
  131. package/dist/magnify/webgpu-shader.d.ts +1 -0
  132. package/dist/magnify.d.ts +28 -0
  133. package/package.json +30 -6
@@ -0,0 +1,868 @@
1
+ import {
2
+ setupWebGpuMesh,
3
+ cleanupWebGpuMesh,
4
+ applyWebGpuMesh
5
+ } from "./index-4scpn12x.mjs";
6
+ import {
7
+ assertOptionalFiniteNumber,
8
+ validateUnitInterval,
9
+ validateNonNegative
10
+ } from "./index-wxhvgv2s.mjs";
11
+ import {
12
+ assertEffectParamsObject
13
+ } from "./index-4fvp93ps.mjs";
14
+
15
+ // src/shatter/index.ts
16
+ import { Internals } from "remotion";
17
+
18
+ // src/shatter/geometry.ts
19
+ var signedTriangleArea = (a, b, c) => (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
20
+ var hash = (x, y, seed) => {
21
+ let h = Math.imul(x, 2376512323) ^ Math.imul(y, 3625334849) ^ Math.imul(seed, 3407524639);
22
+ h ^= h >>> 13;
23
+ h = Math.imul(h, 1540483477);
24
+ h ^= h >>> 15;
25
+ return (h & 16777215) / 16777216;
26
+ };
27
+ function* patternCells(pattern, cell, x0, y0, x1, y1, seed) {
28
+ const i0 = Math.floor(x0 / cell) - 1;
29
+ const i1 = Math.ceil(x1 / cell) + 1;
30
+ const j0 = Math.floor(y0 / cell) - 1;
31
+ const j1 = Math.ceil(y1 / cell) + 1;
32
+ if (pattern === "bricks") {
33
+ const brickHeight = cell / 2;
34
+ const row0 = Math.floor(y0 / brickHeight) - 1;
35
+ const row1 = Math.ceil(y1 / brickHeight) + 1;
36
+ for (let row = row0;row <= row1; row++) {
37
+ const shift = Math.abs(row % 2) * cell * 0.5;
38
+ for (let i = i0;i <= i1; i++) {
39
+ const x = i * cell + shift;
40
+ const y = row * brickHeight;
41
+ yield [
42
+ [x, y],
43
+ [x + cell * 0.5, y],
44
+ [x + cell, y],
45
+ [x + cell, y + brickHeight],
46
+ [x + cell * 0.5, y + brickHeight],
47
+ [x, y + brickHeight]
48
+ ];
49
+ }
50
+ }
51
+ return;
52
+ }
53
+ if (pattern === "hexagons") {
54
+ const radius = cell / Math.sqrt(3);
55
+ const dx = 1.5 * radius;
56
+ const col0 = Math.floor(x0 / dx) - 1;
57
+ const col1 = Math.ceil(x1 / dx) + 1;
58
+ for (let col = col0;col <= col1; col++) {
59
+ for (let row = j0;row <= j1; row++) {
60
+ const cx = col * dx;
61
+ const cy = (row + Math.abs(col % 2) * 0.5) * cell;
62
+ yield Array.from({ length: 6 }, (_, k) => {
63
+ const angle = k * Math.PI / 3;
64
+ return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)];
65
+ });
66
+ }
67
+ }
68
+ return;
69
+ }
70
+ const jitter = (i, j) => [
71
+ i * cell + (hash(i, j + 17, seed) * 2 - 1) * cell * 0.35,
72
+ j * cell + (hash(i, j + 91, seed) * 2 - 1) * cell * 0.35
73
+ ];
74
+ for (let j = j0;j <= j1; j++) {
75
+ for (let i = i0;i <= i1; i++) {
76
+ const x = i * cell;
77
+ const y = j * cell;
78
+ const a = pattern === "glass" ? jitter(i, j) : [x, y];
79
+ const b = pattern === "glass" ? jitter(i + 1, j) : [x + cell, y];
80
+ const c = pattern === "glass" ? jitter(i + 1, j + 1) : [x + cell, y + cell];
81
+ const d = pattern === "glass" ? jitter(i, j + 1) : [x, y + cell];
82
+ const acValid = signedTriangleArea(a, b, c) > 0 && signedTriangleArea(a, c, d) > 0;
83
+ const bdValid = signedTriangleArea(a, b, d) > 0 && signedTriangleArea(b, c, d) > 0;
84
+ if (pattern === "squares") {
85
+ yield [a, b, c, d];
86
+ } else if (pattern === "glass" ? acValid && (!bdValid || hash(i, j, seed ^ 85) < 0.5) : Math.abs((i + j) % 2) === 1) {
87
+ yield [a, b, c];
88
+ yield [a, c, d];
89
+ } else {
90
+ yield [a, b, d];
91
+ yield [b, c, d];
92
+ }
93
+ }
94
+ }
95
+ }
96
+ var clipPolygon = (input, width, height) => {
97
+ let polygon = input;
98
+ for (let boundary = 0;boundary < 4; boundary++) {
99
+ const axis = boundary < 2 ? 0 : 1;
100
+ const limit = boundary % 2 === 0 ? 0 : axis === 0 ? width : height;
101
+ const sign = boundary % 2 === 0 ? 1 : -1;
102
+ const output = [];
103
+ for (let i = 0;i < polygon.length; i++) {
104
+ const a = polygon[i];
105
+ const b = polygon[(i + 1) % polygon.length];
106
+ const aInside = (a[axis] - limit) * sign >= 0;
107
+ const bInside = (b[axis] - limit) * sign >= 0;
108
+ if (aInside) {
109
+ output.push(a);
110
+ }
111
+ if (aInside !== bInside) {
112
+ const fraction = (limit - a[axis]) / (b[axis] - a[axis]);
113
+ const intersection = [
114
+ a[0] + (b[0] - a[0]) * fraction,
115
+ a[1] + (b[1] - a[1]) * fraction
116
+ ];
117
+ intersection[axis] = limit;
118
+ output.push(intersection);
119
+ }
120
+ }
121
+ polygon = output;
122
+ }
123
+ return polygon;
124
+ };
125
+ var createShatterGeometry = (width, height, params) => {
126
+ const identity = new Float32Array([
127
+ 0,
128
+ 0,
129
+ 0,
130
+ 0,
131
+ 0,
132
+ 1,
133
+ 0,
134
+ width,
135
+ 0,
136
+ 0,
137
+ 1,
138
+ 0,
139
+ 1,
140
+ 0,
141
+ width,
142
+ height,
143
+ 0,
144
+ 1,
145
+ 1,
146
+ 1,
147
+ 0,
148
+ 0,
149
+ 0,
150
+ 0,
151
+ 0,
152
+ 0,
153
+ 1,
154
+ 0,
155
+ width,
156
+ height,
157
+ 0,
158
+ 1,
159
+ 1,
160
+ 1,
161
+ 0,
162
+ 0,
163
+ height,
164
+ 0,
165
+ 0,
166
+ 1,
167
+ 1,
168
+ 0
169
+ ]);
170
+ if (params.time === 0 || params.radius <= Math.abs(params.depth) || params.strength === 0 && params.randomness === 0 && params.gravity === 0) {
171
+ return identity;
172
+ }
173
+ const direction = params.direction % 360 * Math.PI / 180;
174
+ const sin = Math.sin(direction);
175
+ const cos = Math.cos(direction);
176
+ const originX = (Math.abs(params.origin[0]) > 1e6 ? params.origin[0] % 1 : params.origin[0]) * width;
177
+ const originY = (Math.abs(params.origin[1]) > 1e6 ? params.origin[1] % 1 : params.origin[1]) * height;
178
+ const corners = [
179
+ [0, 0],
180
+ [width, 0],
181
+ [width, height],
182
+ [0, height]
183
+ ].map(([x, y]) => [
184
+ (x - originX) * cos + (y - originY) * sin,
185
+ -(x - originX) * sin + (y - originY) * cos
186
+ ]);
187
+ const x0 = Math.min(...corners.map((point) => point[0]));
188
+ const x1 = Math.max(...corners.map((point) => point[0]));
189
+ const y0 = Math.min(...corners.map((point) => point[1]));
190
+ const y1 = Math.max(...corners.map((point) => point[1]));
191
+ let cell = Math.max(width / params.repetitions, Math.sqrt((x1 - x0) * (y1 - y0) / 20000), Math.max(x1 - x0, y1 - y0) / 1e4);
192
+ while (2 * (Math.ceil((x1 - x0) / cell) + 5) * (Math.ceil((y1 - y0) / cell) + 5) > 50000) {
193
+ cell *= 1.1;
194
+ }
195
+ const seed = Math.imul(params.seed, 2654435761);
196
+ const unit = width * 0.1;
197
+ const drag = params.viscosity * 5;
198
+ const { time } = params;
199
+ const velocityFactor = drag < 0.000001 ? time : -Math.expm1(-drag * time) / drag;
200
+ const gravityFactor = drag < 0.000001 ? time * time / 2 : drag * time < 0.001 ? time * time * (0.5 - drag * time / 6 + (drag * time) ** 2 / 24) : (time - velocityFactor) / drag;
201
+ const radius = params.radius * width;
202
+ const depth = params.depth * width;
203
+ const centerX = params.center[0] * width;
204
+ const centerY = params.center[1] * height;
205
+ const extrusion = params.extrusionDepth * cell;
206
+ const cameraDistance = Math.max(width, height) * 2;
207
+ const faces = [];
208
+ let key = 0;
209
+ let anyMoving = false;
210
+ for (const patternPolygon of patternCells(params.pattern, cell, x0, y0, x1, y1, seed)) {
211
+ const index = key++;
212
+ const sourcePolygon = patternPolygon.map(([x, y]) => [
213
+ originX + x * cos - y * sin,
214
+ originY + x * sin + y * cos
215
+ ]);
216
+ const polygon = clipPolygon(sourcePolygon, width, height);
217
+ if (polygon.length < 3) {
218
+ continue;
219
+ }
220
+ const cx = sourcePolygon.reduce((sum, point) => sum + point[0], 0) / sourcePolygon.length;
221
+ const cy = sourcePolygon.reduce((sum, point) => sum + point[1], 0) / sourcePolygon.length;
222
+ const dx = cx - centerX;
223
+ const dy = cy - centerY;
224
+ const distance = Math.hypot(dx, dy, depth);
225
+ const broken = distance < radius;
226
+ let px = cx;
227
+ let py = cy;
228
+ let pz = 0;
229
+ let rotation = [1, 0, 0, 0, 1, 0, 0, 0, 1];
230
+ if (broken) {
231
+ const force = params.strength * (1 - distance / radius) * unit / Math.max(distance, 0.000001);
232
+ const mass = Math.max(0.001, 1 + params.massVariance * (hash(index, 1, seed) * 2 - 1));
233
+ const vx = dx * force / mass + params.randomness * unit * (hash(index, 2, seed) * 2 - 1) * 2;
234
+ const vy = dy * force / mass + params.randomness * unit * (hash(index, 3, seed) * 2 - 1) * 2;
235
+ const vz = depth * force / mass + params.randomness * unit * (hash(index, 4, seed) * 2 - 1) * 2;
236
+ px += vx * velocityFactor;
237
+ py += vy * velocityFactor + params.gravity * unit * gravityFactor;
238
+ pz += vz * velocityFactor;
239
+ const axis = [
240
+ hash(index, 6, seed) * 2 - 1,
241
+ hash(index, 7, seed) * 2 - 1,
242
+ hash(index, 8, seed) * 2 - 1
243
+ ];
244
+ const axisLength = Math.hypot(...axis);
245
+ const speed = Math.min(10, Math.hypot(vx, vy, vz) / unit);
246
+ const angle = params.rotationSpeed * Math.PI * 2 * (0.5 + hash(index, 9, seed)) * speed * velocityFactor;
247
+ if (axisLength > 0.000000000001 && angle !== 0) {
248
+ const [x, y, z] = axis.map((value) => value / axisLength);
249
+ const s = Math.sin(angle);
250
+ const c = Math.cos(angle);
251
+ const t = 1 - c;
252
+ rotation = [
253
+ t * x * x + c,
254
+ t * x * y - s * z,
255
+ t * x * z + s * y,
256
+ t * x * y + s * z,
257
+ t * y * y + c,
258
+ t * y * z - s * x,
259
+ t * x * z - s * y,
260
+ t * y * z + s * x,
261
+ t * z * z + c
262
+ ];
263
+ }
264
+ }
265
+ const moving = px !== cx || py !== cy || pz !== 0 || rotation.some((value, axisIndex) => value !== (axisIndex % 4 === 0 ? 1 : 0));
266
+ anyMoving ||= moving;
267
+ const shade = moving ? 0.25 + 0.75 * Math.abs(rotation[8]) : 1;
268
+ const vertices = polygon.map(([x, y]) => [
269
+ px + rotation[0] * (x - cx) + rotation[1] * (y - cy),
270
+ py + rotation[3] * (x - cx) + rotation[4] * (y - cy),
271
+ pz + rotation[6] * (x - cx) + rotation[7] * (y - cy),
272
+ x / width,
273
+ y / height,
274
+ shade,
275
+ 0
276
+ ]);
277
+ if (vertices.some((vertex) => vertex.some((value) => !Number.isFinite(value) || Math.abs(value) > 1000000000000000000000000000000))) {
278
+ continue;
279
+ }
280
+ faces.push({
281
+ depth: vertices.reduce((sum, vertex) => sum + vertex[2], 0) / vertices.length,
282
+ vertices
283
+ });
284
+ if (!moving || extrusion === 0) {
285
+ continue;
286
+ }
287
+ for (let edge = 0;edge < polygon.length; edge++) {
288
+ const a = polygon[edge];
289
+ const b = polygon[(edge + 1) % polygon.length];
290
+ const edgeX = b[0] - a[0];
291
+ const edgeY = b[1] - a[1];
292
+ const length = Math.hypot(edgeX, edgeY);
293
+ if (length < 0.000001) {
294
+ continue;
295
+ }
296
+ const nx = (rotation[0] * edgeY - rotation[1] * edgeX) / length;
297
+ const ny = (rotation[3] * edgeY - rotation[4] * edgeX) / length;
298
+ const nz = (rotation[6] * edgeY - rotation[7] * edgeX) / length;
299
+ const frontA = vertices[edge];
300
+ const frontB = vertices[(edge + 1) % vertices.length];
301
+ const mx = (frontA[0] + frontB[0] + rotation[2] * extrusion) / 2;
302
+ const my = (frontA[1] + frontB[1] + rotation[5] * extrusion) / 2;
303
+ const mz = (frontA[2] + frontB[2] + rotation[8] * extrusion) / 2;
304
+ if (nx * (width / 2 - mx) + ny * (height / 2 - my) + nz * (-cameraDistance - mz) <= 0) {
305
+ continue;
306
+ }
307
+ const au = a[0] / width;
308
+ const av = a[1] / height;
309
+ const bu = b[0] / width;
310
+ const bv = b[1] / height;
311
+ const sideShade = 0.25 + 0.75 * Math.abs(nz);
312
+ const sideVertices = [
313
+ [frontA[0], frontA[1], frontA[2], au, av, sideShade, 1],
314
+ [frontB[0], frontB[1], frontB[2], bu, bv, sideShade, 1],
315
+ [
316
+ frontB[0] + rotation[2] * extrusion,
317
+ frontB[1] + rotation[5] * extrusion,
318
+ frontB[2] + rotation[8] * extrusion,
319
+ bu,
320
+ bv,
321
+ sideShade,
322
+ 1
323
+ ],
324
+ [
325
+ frontA[0] + rotation[2] * extrusion,
326
+ frontA[1] + rotation[5] * extrusion,
327
+ frontA[2] + rotation[8] * extrusion,
328
+ au,
329
+ av,
330
+ sideShade,
331
+ 1
332
+ ]
333
+ ];
334
+ if (sideVertices.every((vertex) => vertex.every((value) => Number.isFinite(value) && Math.abs(value) < 1000000000000000000000000000000))) {
335
+ faces.push({ depth: mz, vertices: sideVertices });
336
+ }
337
+ }
338
+ }
339
+ if (!anyMoving) {
340
+ return identity;
341
+ }
342
+ faces.sort((a, b) => b.depth - a.depth);
343
+ const floatCount = faces.reduce((sum, face) => {
344
+ const centered = params.pattern === "bricks" && face.vertices[0][6] === 0;
345
+ return sum + (face.vertices.length - (centered ? 0 : 2)) * 3 * 7;
346
+ }, 0);
347
+ const output = new Float32Array(floatCount);
348
+ let offset = 0;
349
+ for (const face of faces) {
350
+ const centered = params.pattern === "bricks" && face.vertices[0][6] === 0;
351
+ const center = centered ? face.vertices[0].map((_, component) => face.vertices.reduce((sum, vertex) => sum + vertex[component], 0) / face.vertices.length) : face.vertices[0];
352
+ const triangleCount = face.vertices.length - (centered ? 0 : 2);
353
+ for (let i = 0;i < triangleCount; i++) {
354
+ const start = centered ? i : i + 1;
355
+ for (const vertex of [
356
+ center,
357
+ face.vertices[start],
358
+ face.vertices[(start + 1) % face.vertices.length]
359
+ ]) {
360
+ output.set(vertex, offset);
361
+ offset += 7;
362
+ }
363
+ }
364
+ }
365
+ return output;
366
+ };
367
+
368
+ // src/shatter/runtime.ts
369
+ var VERTEX_SHADER = `#version 300 es
370
+ layout(location = 0) in vec3 aPosition;
371
+ layout(location = 1) in vec2 aUv;
372
+ layout(location = 2) in float aShade;
373
+ layout(location = 3) in float aSide;
374
+
375
+ uniform vec2 uResolution;
376
+
377
+ out vec2 vUv;
378
+ out float vShade;
379
+ out float vSide;
380
+
381
+ void main() {
382
+ float distance = max(uResolution.x, uResolution.y) * 2.0;
383
+ float near = distance * 0.05;
384
+ float w = distance + aPosition.z;
385
+ vec2 position = vec2(
386
+ (aPosition.x - uResolution.x * 0.5) * 2.0 / uResolution.x,
387
+ (uResolution.y * 0.5 - aPosition.y) * 2.0 / uResolution.y
388
+ );
389
+ // Keep homogeneous coordinates so WebGL clips shards at the near plane
390
+ // and interpolates their texture coordinates with perspective correction.
391
+ gl_Position = vec4(position * distance, w - 2.0 * near, w);
392
+ vUv = vec2(aUv.x, 1.0 - aUv.y);
393
+ vShade = aShade;
394
+ vSide = aSide;
395
+ }
396
+ `;
397
+ var FRAGMENT_SHADER = `#version 300 es
398
+ precision highp float;
399
+
400
+ uniform sampler2D uSource;
401
+
402
+ in vec2 vUv;
403
+ in float vShade;
404
+ in float vSide;
405
+ out vec4 fragColor;
406
+
407
+ void main() {
408
+ vec4 source = texture(uSource, vUv);
409
+ // The sides inherit the source alpha at the shard edge. A transparent
410
+ // image must not acquire opaque geometry when extrusion is enabled.
411
+ vec3 color = mix(source.rgb, vec3(source.a), vSide);
412
+ fragColor = vec4(color * vShade, source.a);
413
+ }
414
+ `;
415
+ var compileShader = (gl, type, source) => {
416
+ const shader = gl.createShader(type);
417
+ if (!shader) {
418
+ throw new Error("Failed to create Shatter shader");
419
+ }
420
+ gl.shaderSource(shader, source);
421
+ gl.compileShader(shader);
422
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
423
+ const log = gl.getShaderInfoLog(shader);
424
+ gl.deleteShader(shader);
425
+ throw new Error(`Shatter shader compile failed: ${log ?? "(no log)"}`);
426
+ }
427
+ return shader;
428
+ };
429
+ var setupShatter = (gl) => {
430
+ const program = gl.createProgram();
431
+ const vao = gl.createVertexArray();
432
+ const vbo = gl.createBuffer();
433
+ const texture = gl.createTexture();
434
+ const shaders = [];
435
+ try {
436
+ if (!program || !vao || !vbo || !texture) {
437
+ throw new Error("Failed to create Shatter WebGL resources");
438
+ }
439
+ shaders.push(compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER));
440
+ shaders.push(compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
441
+ for (const shader of shaders) {
442
+ gl.attachShader(program, shader);
443
+ }
444
+ gl.linkProgram(program);
445
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
446
+ throw new Error(`Shatter program link failed: ${gl.getProgramInfoLog(program) ?? "(no log)"}`);
447
+ }
448
+ gl.bindVertexArray(vao);
449
+ gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
450
+ gl.enableVertexAttribArray(0);
451
+ gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 28, 0);
452
+ gl.enableVertexAttribArray(1);
453
+ gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 28, 12);
454
+ gl.enableVertexAttribArray(2);
455
+ gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 28, 20);
456
+ gl.enableVertexAttribArray(3);
457
+ gl.vertexAttribPointer(3, 1, gl.FLOAT, false, 28, 24);
458
+ gl.bindVertexArray(null);
459
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
460
+ gl.bindTexture(gl.TEXTURE_2D, texture);
461
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
462
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
463
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
464
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
465
+ gl.bindTexture(gl.TEXTURE_2D, null);
466
+ return {
467
+ gl,
468
+ program,
469
+ vao,
470
+ vbo,
471
+ texture,
472
+ uSource: gl.getUniformLocation(program, "uSource"),
473
+ uResolution: gl.getUniformLocation(program, "uResolution")
474
+ };
475
+ } catch (error) {
476
+ gl.deleteTexture(texture);
477
+ gl.deleteBuffer(vbo);
478
+ gl.deleteVertexArray(vao);
479
+ gl.deleteProgram(program);
480
+ throw error;
481
+ } finally {
482
+ for (const shader of shaders) {
483
+ gl.deleteShader(shader);
484
+ }
485
+ }
486
+ };
487
+ var drawShatter = ({
488
+ state,
489
+ source,
490
+ width,
491
+ height,
492
+ flipSourceY,
493
+ vertices
494
+ }) => {
495
+ const { gl, program, vao, vbo, texture, uSource, uResolution } = state;
496
+ gl.viewport(0, 0, width, height);
497
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
498
+ gl.disable(gl.DEPTH_TEST);
499
+ gl.disable(gl.CULL_FACE);
500
+ gl.clearColor(0, 0, 0, 0);
501
+ gl.clear(gl.COLOR_BUFFER_BIT);
502
+ gl.enable(gl.BLEND);
503
+ try {
504
+ gl.blendEquation(gl.FUNC_ADD);
505
+ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
506
+ gl.useProgram(program);
507
+ gl.bindVertexArray(vao);
508
+ gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
509
+ gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
510
+ gl.activeTexture(gl.TEXTURE0);
511
+ gl.bindTexture(gl.TEXTURE_2D, texture);
512
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
513
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
514
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
515
+ gl.uniform1i(uSource, 0);
516
+ gl.uniform2f(uResolution, width, height);
517
+ gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 7);
518
+ gl.bindVertexArray(null);
519
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
520
+ gl.bindTexture(gl.TEXTURE_2D, null);
521
+ gl.useProgram(null);
522
+ } finally {
523
+ gl.disable(gl.BLEND);
524
+ }
525
+ };
526
+ var cleanupShatter = ({
527
+ gl,
528
+ program,
529
+ vao,
530
+ vbo,
531
+ texture
532
+ }) => {
533
+ gl.deleteTexture(texture);
534
+ gl.deleteBuffer(vbo);
535
+ gl.deleteVertexArray(vao);
536
+ gl.deleteProgram(program);
537
+ };
538
+
539
+ // src/shatter/webgpu-shader.ts
540
+ var SHATTER_WEBGPU_SHADER = `
541
+ struct Params {resolution: vec2f,}
542
+ struct VertexOutput {
543
+ @builtin(position) position: vec4f,
544
+ @location(0) uv: vec2f,
545
+ @location(1) shade: f32,
546
+ @location(2) side: f32,
547
+ }
548
+ @group(0) @binding(0) var source: texture_2d<f32>;
549
+ @group(0) @binding(1) var sourceSampler: sampler;
550
+ @group(0) @binding(2) var<uniform> params: Params;
551
+ @group(0) @binding(3) var<storage, read> vertices: array<f32>;
552
+ @vertex fn vertex(@builtin(vertex_index) index: u32) -> VertexOutput {
553
+ let offset=index*7u;
554
+ let point=vec3f(vertices[offset],vertices[offset+1u],vertices[offset+2u]);
555
+ let distance=max(params.resolution.x,params.resolution.y)*2.0;
556
+ let near=distance*0.05;
557
+ let w=distance+point.z;
558
+ let position=vec2f((point.x-params.resolution.x*0.5)*2.0/params.resolution.x,(params.resolution.y*0.5-point.y)*2.0/params.resolution.y);
559
+ var output: VertexOutput;
560
+ // WebGPU's clip depth is [0,w], corresponding to WebGL's [-w,w].
561
+ output.position=vec4f(position*vec2f(1,-1)*distance,w-near,w);
562
+ output.uv=vec2f(vertices[offset+3u],vertices[offset+4u]);
563
+ output.shade=vertices[offset+5u];output.side=vertices[offset+6u];
564
+ return output;
565
+ }
566
+ @fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
567
+ let color=textureSample(source,sourceSampler,input.uv);
568
+ return vec4f(mix(color.rgb,vec3f(color.a),input.side)*input.shade,color.a);
569
+ }
570
+ `;
571
+
572
+ // src/shatter/index.ts
573
+ var { createEffect, createWebGL2ContextError } = Internals;
574
+ var DEFAULT_TIME = 0.5;
575
+ var DEFAULT_PATTERN = "bricks";
576
+ var DEFAULT_REPETITIONS = 10;
577
+ var DEFAULT_DIRECTION = 0;
578
+ var DEFAULT_ORIGIN = [0.5, 0.5];
579
+ var DEFAULT_CENTER = [0.5, 0.5];
580
+ var DEFAULT_RADIUS = 0.4;
581
+ var DEFAULT_DEPTH = 0.1;
582
+ var DEFAULT_STRENGTH = 5;
583
+ var DEFAULT_ROTATION_SPEED = 0.2;
584
+ var DEFAULT_RANDOMNESS = 0.1;
585
+ var DEFAULT_VISCOSITY = 0.1;
586
+ var DEFAULT_MASS_VARIANCE = 0.3;
587
+ var DEFAULT_GRAVITY = 3;
588
+ var DEFAULT_SEED = 0;
589
+ var DEFAULT_EXTRUSION_DEPTH = 0.05;
590
+ var shatterSchema = {
591
+ time: {
592
+ type: "number",
593
+ min: 0,
594
+ max: 5,
595
+ step: 0.01,
596
+ default: DEFAULT_TIME,
597
+ description: "Time",
598
+ hiddenFromList: false
599
+ },
600
+ pattern: {
601
+ type: "enum",
602
+ variants: { bricks: {}, glass: {}, hexagons: {}, squares: {}, triangles: {} },
603
+ default: DEFAULT_PATTERN,
604
+ description: "Pattern"
605
+ },
606
+ repetitions: {
607
+ type: "number",
608
+ min: 1,
609
+ max: 100,
610
+ step: 1,
611
+ default: DEFAULT_REPETITIONS,
612
+ description: "Repetitions",
613
+ hiddenFromList: false
614
+ },
615
+ direction: {
616
+ type: "rotation-degrees",
617
+ step: 1,
618
+ default: DEFAULT_DIRECTION,
619
+ description: "Pattern direction"
620
+ },
621
+ origin: {
622
+ type: "uv-coordinate",
623
+ step: 0.01,
624
+ default: DEFAULT_ORIGIN,
625
+ description: "Pattern origin"
626
+ },
627
+ center: {
628
+ type: "uv-coordinate",
629
+ step: 0.01,
630
+ default: DEFAULT_CENTER,
631
+ description: "Force center"
632
+ },
633
+ radius: {
634
+ type: "number",
635
+ min: 0,
636
+ max: 2,
637
+ step: 0.01,
638
+ default: DEFAULT_RADIUS,
639
+ description: "Force radius",
640
+ hiddenFromList: false
641
+ },
642
+ depth: {
643
+ type: "number",
644
+ min: -1,
645
+ max: 1,
646
+ step: 0.01,
647
+ default: DEFAULT_DEPTH,
648
+ description: "Force depth",
649
+ hiddenFromList: false
650
+ },
651
+ strength: {
652
+ type: "number",
653
+ min: -20,
654
+ max: 20,
655
+ step: 0.1,
656
+ default: DEFAULT_STRENGTH,
657
+ description: "Force strength",
658
+ hiddenFromList: false
659
+ },
660
+ rotationSpeed: {
661
+ type: "number",
662
+ min: 0,
663
+ max: 5,
664
+ step: 0.01,
665
+ default: DEFAULT_ROTATION_SPEED,
666
+ description: "Rotation speed",
667
+ hiddenFromList: false
668
+ },
669
+ randomness: {
670
+ type: "number",
671
+ min: 0,
672
+ max: 1,
673
+ step: 0.01,
674
+ default: DEFAULT_RANDOMNESS,
675
+ description: "Randomness",
676
+ hiddenFromList: false
677
+ },
678
+ viscosity: {
679
+ type: "number",
680
+ min: 0,
681
+ max: 1,
682
+ step: 0.01,
683
+ default: DEFAULT_VISCOSITY,
684
+ description: "Viscosity",
685
+ hiddenFromList: false
686
+ },
687
+ massVariance: {
688
+ type: "number",
689
+ min: 0,
690
+ max: 1,
691
+ step: 0.01,
692
+ default: DEFAULT_MASS_VARIANCE,
693
+ description: "Mass variance",
694
+ hiddenFromList: false
695
+ },
696
+ gravity: {
697
+ type: "number",
698
+ min: 0,
699
+ max: 10,
700
+ step: 0.1,
701
+ default: DEFAULT_GRAVITY,
702
+ description: "Gravity",
703
+ hiddenFromList: false
704
+ },
705
+ seed: {
706
+ type: "number",
707
+ integer: true,
708
+ min: 0,
709
+ max: 4294967295,
710
+ step: 1,
711
+ default: DEFAULT_SEED,
712
+ description: "Random seed",
713
+ hiddenFromList: false
714
+ },
715
+ extrusionDepth: {
716
+ type: "number",
717
+ min: 0,
718
+ max: 1,
719
+ step: 0.01,
720
+ default: DEFAULT_EXTRUSION_DEPTH,
721
+ description: "Extrusion depth",
722
+ hiddenFromList: false
723
+ }
724
+ };
725
+ var resolve = (params) => ({
726
+ time: params.time ?? DEFAULT_TIME,
727
+ pattern: params.pattern ?? DEFAULT_PATTERN,
728
+ repetitions: params.repetitions ?? DEFAULT_REPETITIONS,
729
+ direction: params.direction ?? DEFAULT_DIRECTION,
730
+ origin: params.origin ?? DEFAULT_ORIGIN,
731
+ center: params.center ?? DEFAULT_CENTER,
732
+ radius: params.radius ?? DEFAULT_RADIUS,
733
+ depth: params.depth ?? DEFAULT_DEPTH,
734
+ strength: params.strength ?? DEFAULT_STRENGTH,
735
+ rotationSpeed: params.rotationSpeed ?? DEFAULT_ROTATION_SPEED,
736
+ randomness: params.randomness ?? DEFAULT_RANDOMNESS,
737
+ viscosity: params.viscosity ?? DEFAULT_VISCOSITY,
738
+ massVariance: params.massVariance ?? DEFAULT_MASS_VARIANCE,
739
+ gravity: params.gravity ?? DEFAULT_GRAVITY,
740
+ seed: params.seed ?? DEFAULT_SEED,
741
+ extrusionDepth: params.extrusionDepth ?? DEFAULT_EXTRUSION_DEPTH
742
+ });
743
+ var shatter = createEffect({
744
+ type: "remotion/shatter",
745
+ label: "shatter()",
746
+ documentationLink: "https://www.remotion.dev/docs/effects/shatter",
747
+ schema: shatterSchema,
748
+ validateParams: (params) => {
749
+ assertEffectParamsObject(params, "Shatter");
750
+ for (const name of [
751
+ "time",
752
+ "repetitions",
753
+ "direction",
754
+ "radius",
755
+ "depth",
756
+ "strength",
757
+ "rotationSpeed",
758
+ "randomness",
759
+ "viscosity",
760
+ "massVariance",
761
+ "gravity",
762
+ "seed",
763
+ "extrusionDepth"
764
+ ]) {
765
+ assertOptionalFiniteNumber(params[name], name);
766
+ }
767
+ for (const name of ["origin", "center"]) {
768
+ const value = params[name];
769
+ if (value !== undefined && (!Array.isArray(value) || value.length !== 2 || !Number.isFinite(value[0]) || !Number.isFinite(value[1]))) {
770
+ throw new TypeError(`"${name}" must contain two finite numbers`);
771
+ }
772
+ }
773
+ const r = resolve(params);
774
+ if (params.pattern !== undefined && (typeof params.pattern !== "string" || !Object.hasOwn(shatterSchema.pattern.variants, params.pattern))) {
775
+ throw new TypeError('"pattern" must be "bricks", "glass", "hexagons", "squares", or "triangles"');
776
+ }
777
+ if (r.repetitions < 1 || r.repetitions > 100) {
778
+ throw new TypeError('"repetitions" must be between 1 and 100');
779
+ }
780
+ for (const name of [
781
+ "time",
782
+ "radius",
783
+ "rotationSpeed",
784
+ "gravity"
785
+ ]) {
786
+ validateNonNegative(r[name], name);
787
+ }
788
+ for (const name of [
789
+ "randomness",
790
+ "viscosity",
791
+ "massVariance",
792
+ "extrusionDepth"
793
+ ]) {
794
+ validateUnitInterval(r[name], name);
795
+ }
796
+ if (!Number.isInteger(r.seed) || r.seed < 0 || r.seed > 4294967295) {
797
+ throw new TypeError('"seed" must be an integer from 0 to 4294967295');
798
+ }
799
+ },
800
+ calculateKey: (params) => `shatter-${JSON.stringify(resolve(params))}`,
801
+ implementations: {
802
+ webgpu: Internals.createEffectImplementation({
803
+ setup: (target) => ({
804
+ ...setupWebGpuMesh(target, "shatter"),
805
+ geometryKey: null,
806
+ vertices: null
807
+ }),
808
+ apply: ({ source, width, height, params, state, gpuDevice }) => {
809
+ if (!gpuDevice)
810
+ throw new Error("A WebGPU device is required for shatter");
811
+ const r = resolve(params);
812
+ const geometryKey = `${width}:${height}:${JSON.stringify(r)}`;
813
+ if (state.geometryKey !== geometryKey || state.vertices === null) {
814
+ state.vertices = createShatterGeometry(width, height, r);
815
+ state.geometryKey = geometryKey;
816
+ }
817
+ applyWebGpuMesh({
818
+ state,
819
+ source,
820
+ width,
821
+ height,
822
+ vertices: state.vertices,
823
+ shader: SHATTER_WEBGPU_SHADER,
824
+ uniformData: new Float32Array([width, height, 0, 0]),
825
+ topology: "triangle-list",
826
+ blend: true,
827
+ vertexCount: state.vertices.length / 7,
828
+ instanceCount: 1,
829
+ device: gpuDevice
830
+ });
831
+ },
832
+ cleanup: cleanupWebGpuMesh
833
+ }),
834
+ webgl2: Internals.createEffectImplementation({
835
+ setup: (target) => {
836
+ const gl = target.getContext("webgl2", {
837
+ premultipliedAlpha: true,
838
+ alpha: true,
839
+ preserveDrawingBuffer: true
840
+ });
841
+ if (!gl) {
842
+ throw createWebGL2ContextError("shatter effect");
843
+ }
844
+ return { ...setupShatter(gl), geometryKey: null, vertices: null };
845
+ },
846
+ apply: ({ source, width, height, params, state, flipSourceY }) => {
847
+ const r = resolve(params);
848
+ const geometryKey = `${width}:${height}:${JSON.stringify(r)}`;
849
+ if (state.geometryKey !== geometryKey || state.vertices === null) {
850
+ state.vertices = createShatterGeometry(width, height, r);
851
+ state.geometryKey = geometryKey;
852
+ }
853
+ drawShatter({
854
+ state,
855
+ source,
856
+ width,
857
+ height,
858
+ flipSourceY,
859
+ vertices: state.vertices
860
+ });
861
+ },
862
+ cleanup: cleanupShatter
863
+ })
864
+ }
865
+ });
866
+ export {
867
+ shatter
868
+ };