@designcombo/video 0.0.3 → 0.0.4

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.
@@ -0,0 +1,29 @@
1
+ import { Renderer, Texture } from 'pixi.js';
2
+ import { TransitionKey } from './glsl/gl-transition';
3
+ export interface TransitionOptions {
4
+ name: TransitionKey;
5
+ renderer: Renderer;
6
+ }
7
+ export interface TransitionRendererOptions {
8
+ from: VideoFrame | Texture;
9
+ to: VideoFrame | Texture;
10
+ progress: number;
11
+ width: number;
12
+ height: number;
13
+ }
14
+ export interface GLTransition {
15
+ author?: string;
16
+ createdAt?: string;
17
+ glsl?: string;
18
+ fragment?: string;
19
+ license?: string;
20
+ name: string;
21
+ updatedAt?: string;
22
+ defaultParams?: Record<string, any>;
23
+ paramsTypes?: Record<string, any>;
24
+ label?: string;
25
+ uniforms?: Record<string, {
26
+ value: any;
27
+ type: string;
28
+ }>;
29
+ }
@@ -0,0 +1,35 @@
1
+ import { GLTransition } from './types';
2
+ export declare const uniforms: {
3
+ custom: (transition: GLTransition) => {
4
+ [k: string]: {
5
+ value: any;
6
+ type: string;
7
+ };
8
+ };
9
+ basics: {
10
+ _fromR: {
11
+ value: number;
12
+ type: string;
13
+ };
14
+ _toR: {
15
+ value: number;
16
+ type: string;
17
+ };
18
+ ratio: {
19
+ value: number;
20
+ type: string;
21
+ };
22
+ progress: {
23
+ value: number;
24
+ type: string;
25
+ };
26
+ customUniform: {
27
+ value: number;
28
+ type: string;
29
+ };
30
+ center: {
31
+ value: number[];
32
+ type: string;
33
+ };
34
+ };
35
+ };
@@ -0,0 +1 @@
1
+ export declare const vertex = "\n\tin vec2 aPosition;\n\tout vec2 _uv; \n\tuniform mat3 projectionMatrix;\n\tuniform vec4 uInputSize;\n\tuniform vec4 uOutputFrame;\n\tout vec2 vTextureCoord;\n\tuniform vec4 uOutputTexture;\n\n\tvec4 filterVertexPosition( void )\n\t{\n\t\t\tvec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n\n\t\t\tposition.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n\t\t\tposition.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n\t\t\treturn vec4(position, 0.0, 1.0);\n\t}\n\n\tvec2 filterTextureCoord( void )\n\t{\n\treturn aPosition * (uOutputFrame.zw * uInputSize.zw);\n\t}\n\n\tvoid main(void)\n\t{\n\tgl_Position = filterVertexPosition();\n\tvTextureCoord = filterTextureCoord();\n\tvec2 absolute = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n\t_uv = absolute / uOutputTexture.xy;\n\t}\n";
@@ -1,5 +1,5 @@
1
- import { E as p, U as Ne, T as ee, F as je, G as he, v as fe, af as qe, M as P, l as C, d as pe, I as v, t as w, a8 as $, R as N, w as L, H as me, a5 as G, a6 as ge, c as F, B as T, D as j, S as M, y as D, ag as Qe, ah as q, L as Y, ai as U, s as Q, a0 as Je, $ as X, n as xe, q as _e, aa as be, ad as ye, o as Ze, p as et, ab as tt, ac as rt, ae as nt, aj as st, ak as it, al as at, am as H, an as ot, ao as ut, m as ve, ap as te, aq as k, e as b, ar as lt } from "./index-BVO9qrk3.js";
2
- import { c as A, a as ct, b as dt, B as Te } from "./colorToUniform-C2jGzNe1.js";
1
+ import { E as p, U as Ne, T as ee, F as je, G as he, v as fe, M as P, l as C, d as pe, I as v, t as w, a8 as $, R as N, w as L, H as me, a5 as G, a6 as ge, c as F, B as T, D as j, S as M, y as D, af as qe, ag as q, L as Y, ah as U, s as Q, a0 as Qe, $ as X, n as xe, q as _e, aa as be, ad as ye, o as Je, p as Ze, ab as et, ac as tt, ae as rt, ai as nt, aj as st, ak as it, al as H, am as at, an as ot, m as ve, ao as te, ap as k, e as b, aq as ut } from "./index-CZk_O50g.js";
2
+ import { c as z, a as lt, b as ct, B as Te } from "./colorToUniform-C2jGzNe1.js";
3
3
  class Pe {
4
4
  /**
5
5
  * Initialize the plugin with scope of application instance
@@ -86,7 +86,34 @@ class we {
86
86
  }
87
87
  }
88
88
  we.extension = p.Application;
89
- var ht = `in vec2 vTextureCoord;
89
+ var dt = `in vec2 aPosition;
90
+ out vec2 vTextureCoord;
91
+
92
+ uniform vec4 uInputSize;
93
+ uniform vec4 uOutputFrame;
94
+ uniform vec4 uOutputTexture;
95
+
96
+ vec4 filterVertexPosition( void )
97
+ {
98
+ vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
99
+
100
+ position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
101
+ position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
102
+
103
+ return vec4(position, 0.0, 1.0);
104
+ }
105
+
106
+ vec2 filterTextureCoord( void )
107
+ {
108
+ return aPosition * (uOutputFrame.zw * uInputSize.zw);
109
+ }
110
+
111
+ void main(void)
112
+ {
113
+ gl_Position = filterVertexPosition();
114
+ vTextureCoord = filterTextureCoord();
115
+ }
116
+ `, ht = `in vec2 vTextureCoord;
90
117
  out vec4 finalColor;
91
118
  uniform sampler2D uTexture;
92
119
  void main() {
@@ -149,7 +176,7 @@ class ft extends je {
149
176
  fragment: { source: re, entryPoint: "mainFragment" },
150
177
  name: "passthrough-filter"
151
178
  }), t = fe.from({
152
- vertex: qe,
179
+ vertex: dt,
153
180
  fragment: ht,
154
181
  name: "passthrough-filter"
155
182
  });
@@ -729,7 +756,7 @@ class Be {
729
756
  const s = r.customShader || this._adaptor.shader;
730
757
  this.state.blendMode = e.groupBlendMode;
731
758
  const i = s.resources.localUniforms.uniforms;
732
- i.uTransformMatrix = e.groupTransform, i.uRound = t._roundPixels | e._roundPixels, A(
759
+ i.uTransformMatrix = e.groupTransform, i.uRound = t._roundPixels | e._roundPixels, z(
733
760
  e.groupColorAlpha,
734
761
  i.uColor,
735
762
  0
@@ -756,7 +783,7 @@ class Be {
756
783
  _updateBatchesForRenderable(e, t) {
757
784
  const r = e.context, n = this.renderer.graphicsContext.getGpuContext(r), s = this.renderer._roundPixels | e._roundPixels;
758
785
  t.batches = n.batches.map((i) => {
759
- const o = D.get(Qe);
786
+ const o = D.get(qe);
760
787
  return i.copyTo(o), o.renderable = e, o.roundPixels = s, o;
761
788
  });
762
789
  }
@@ -915,7 +942,7 @@ class De {
915
942
  return;
916
943
  e.state.blendMode = q(e.groupBlendMode, e.texture._source);
917
944
  const t = this.localUniforms;
918
- t.uniforms.uTransformMatrix = e.groupTransform, t.uniforms.uRound = this.renderer._roundPixels | e._roundPixels, t.update(), A(
945
+ t.uniforms.uTransformMatrix = e.groupTransform, t.uniforms.uRound = this.renderer._roundPixels | e._roundPixels, t.update(), z(
919
946
  e.groupColorAlpha,
920
947
  t.uniforms.uColor,
921
948
  0
@@ -1235,7 +1262,7 @@ class Ft extends Q {
1235
1262
  // this will be replaced with the local uniforms from the particle container
1236
1263
  uniforms: {
1237
1264
  uTranslationMatrix: { value: new P(), type: "mat3x3<f32>" },
1238
- uColor: { value: new Je(16777215), type: "vec4<f32>" },
1265
+ uColor: { value: new Qe(16777215), type: "vec4<f32>" },
1239
1266
  uRound: { value: 1, type: "f32" },
1240
1267
  uResolution: { value: [0, 0], type: "vec2<f32>" }
1241
1268
  }
@@ -1243,7 +1270,7 @@ class Ft extends Q {
1243
1270
  });
1244
1271
  }
1245
1272
  }
1246
- class Ae {
1273
+ class ze {
1247
1274
  /**
1248
1275
  * @param renderer - The renderer this sprite batch works for.
1249
1276
  * @param adaptor
@@ -1282,7 +1309,7 @@ class Ae {
1282
1309
  const s = this.state;
1283
1310
  n.update(t, e._childrenDirty), e._childrenDirty = !1, s.blendMode = q(e.blendMode, e.texture._source);
1284
1311
  const i = this.localUniforms.uniforms, o = i.uTranslationMatrix;
1285
- e.worldTransform.copyTo(o), o.prepend(r.globalUniforms.globalUniformData.projectionMatrix), i.uResolution = r.globalUniforms.globalUniformData.resolution, i.uRound = r._roundPixels | e._roundPixels, A(
1312
+ e.worldTransform.copyTo(o), o.prepend(r.globalUniforms.globalUniformData.projectionMatrix), i.uResolution = r.globalUniforms.globalUniformData.resolution, i.uRound = r._roundPixels | e._roundPixels, z(
1286
1313
  e.groupColorAlpha,
1287
1314
  i.uColor,
1288
1315
  0
@@ -1293,18 +1320,18 @@ class Ae {
1293
1320
  this.renderer = null, this.defaultShader && (this.defaultShader.destroy(), this.defaultShader = null);
1294
1321
  }
1295
1322
  }
1296
- class ze extends Ae {
1323
+ class Ae extends ze {
1297
1324
  constructor(e) {
1298
1325
  super(e, new yt());
1299
1326
  }
1300
1327
  }
1301
- ze.extension = {
1328
+ Ae.extension = {
1302
1329
  type: [
1303
1330
  p.WebGLPipes
1304
1331
  ],
1305
1332
  name: "particle"
1306
1333
  };
1307
- class ke extends Ae {
1334
+ class ke extends ze {
1308
1335
  constructor(e) {
1309
1336
  super(e, new vt());
1310
1337
  }
@@ -1537,14 +1564,14 @@ class Mt extends Q {
1537
1564
  O ?? (O = xe({
1538
1565
  name: "tiling-sprite-shader",
1539
1566
  bits: [
1540
- ct,
1567
+ lt,
1541
1568
  Bt,
1542
1569
  _e
1543
1570
  ]
1544
1571
  })), I ?? (I = be({
1545
1572
  name: "tiling-sprite-shader",
1546
1573
  bits: [
1547
- dt,
1574
+ ct,
1548
1575
  Gt,
1549
1576
  ye
1550
1577
  ]
@@ -1592,11 +1619,11 @@ class Dt extends J {
1592
1619
  });
1593
1620
  }
1594
1621
  }
1595
- function At(a, e) {
1622
+ function zt(a, e) {
1596
1623
  const t = a.anchor.x, r = a.anchor.y;
1597
1624
  e[0] = -t * a.width, e[1] = -r * a.height, e[2] = (1 - t) * a.width, e[3] = -r * a.height, e[4] = (1 - t) * a.width, e[5] = (1 - r) * a.height, e[6] = -t * a.width, e[7] = (1 - r) * a.height;
1598
1625
  }
1599
- function zt(a, e, t, r) {
1626
+ function At(a, e, t, r) {
1600
1627
  let n = 0;
1601
1628
  const s = a.length / e, i = r.a, o = r.b, u = r.c, c = r.d, h = r.tx, l = r.ty;
1602
1629
  for (t *= e; n < s; ) {
@@ -1609,7 +1636,7 @@ function kt(a, e) {
1609
1636
  let s = 0, i = 0;
1610
1637
  a.applyAnchorToTexture && (s = a.anchor.x, i = a.anchor.y), e[0] = e[6] = -s, e[2] = e[4] = 1 - s, e[1] = e[3] = -i, e[5] = e[7] = 1 - i;
1611
1638
  const o = P.shared;
1612
- o.copyFrom(a._tileTransform.matrix), o.tx /= a.width, o.ty /= a.height, o.invert(), o.scale(a.width / r, a.height / n), zt(e, 2, 0, o);
1639
+ o.copyFrom(a._tileTransform.matrix), o.tx /= a.width, o.ty /= a.height, o.invert(), o.scale(a.width / r, a.height / n), At(e, 2, 0, o);
1613
1640
  }
1614
1641
  const B = new Dt();
1615
1642
  class Ot {
@@ -1656,7 +1683,7 @@ class Ve {
1656
1683
  const { shader: t } = this._getTilingSpriteData(e);
1657
1684
  t.groups[0] = this._renderer.globalUniforms.bindGroup;
1658
1685
  const r = t.resources.localUniforms.uniforms;
1659
- r.uTransformMatrix = e.groupTransform, r.uRound = this._renderer._roundPixels | e._roundPixels, A(
1686
+ r.uTransformMatrix = e.groupTransform, r.uRound = this._renderer._roundPixels | e._roundPixels, z(
1660
1687
  e.groupColorAlpha,
1661
1688
  r.uColor,
1662
1689
  0
@@ -1692,7 +1719,7 @@ class Ve {
1692
1719
  }
1693
1720
  _updateBatchableMesh(e) {
1694
1721
  const t = this._getTilingSpriteData(e), { geometry: r } = t, n = e.texture.source.style;
1695
- n.addressMode !== "repeat" && (n.addressMode = "repeat", n.update()), kt(e, r.uvs), At(e, r.positions);
1722
+ n.addressMode !== "repeat" && (n.addressMode = "repeat", n.update()), kt(e, r.uvs), zt(e, r.positions);
1696
1723
  }
1697
1724
  destroy() {
1698
1725
  this._renderer = null;
@@ -1889,8 +1916,8 @@ class Lt extends Q {
1889
1916
  E ?? (E = xe({
1890
1917
  name: "sdf-shader",
1891
1918
  bits: [
1892
- Ze,
1893
- et(e),
1919
+ Je,
1920
+ Ze(e),
1894
1921
  It,
1895
1922
  Vt,
1896
1923
  _e
@@ -1898,8 +1925,8 @@ class Lt extends Q {
1898
1925
  })), V ?? (V = be({
1899
1926
  name: "sdf-shader",
1900
1927
  bits: [
1901
- tt,
1902
- rt(e),
1928
+ et,
1929
+ tt(e),
1903
1930
  Et,
1904
1931
  Wt,
1905
1932
  ye
@@ -1909,12 +1936,12 @@ class Lt extends Q {
1909
1936
  gpuProgram: E,
1910
1937
  resources: {
1911
1938
  localUniforms: t,
1912
- batchSamplers: nt(e)
1939
+ batchSamplers: rt(e)
1913
1940
  }
1914
1941
  });
1915
1942
  }
1916
1943
  }
1917
- class Yt extends ot {
1944
+ class Yt extends at {
1918
1945
  destroy() {
1919
1946
  this.context.customShader && this.context.customShader.destroy(), super.destroy();
1920
1947
  }
@@ -1936,11 +1963,11 @@ class We {
1936
1963
  de(e, t), this._renderer.renderPipes.graphics.updateRenderable(t), t.context.customShader && this._updateDistanceField(e);
1937
1964
  }
1938
1965
  _updateContext(e, t) {
1939
- const { context: r } = t, n = st.getFont(e.text, e._style);
1966
+ const { context: r } = t, n = nt.getFont(e.text, e._style);
1940
1967
  r.clear(), n.distanceField.type !== "none" && (r.customShader || (r.customShader = new Lt(this._renderer.limits.maxBatchableTextures)));
1941
- const s = it.graphemeSegmenter(e.text), i = e._style;
1968
+ const s = st.graphemeSegmenter(e.text), i = e._style;
1942
1969
  let o = n.baseLineOffset;
1943
- const u = at(s, i, n, !0), c = i.padding, h = u.scale;
1970
+ const u = it(s, i, n, !0), c = i.padding, h = u.scale;
1944
1971
  let l = u.width, d = u.height + u.offsetY;
1945
1972
  i._stroke && (l += i._stroke.width / h, d += i._stroke.width / h), r.translate(-e._anchor._x * l - c, -e._anchor._y * d - c).scale(h, h);
1946
1973
  const f = n.applyFillAsTint ? i._fill.color : 16777215;
@@ -1953,14 +1980,14 @@ class We {
1953
1980
  for (let S = 0; S < y.charPositions.length; S++) {
1954
1981
  const $e = y.chars[S], R = n.chars[$e];
1955
1982
  if (R?.texture) {
1956
- const z = R.texture;
1983
+ const A = R.texture;
1957
1984
  r.texture(
1958
- z,
1985
+ A,
1959
1986
  f || "black",
1960
1987
  Math.round(y.charPositions[S] + R.xOffset),
1961
1988
  Math.round(o + R.yOffset + x),
1962
- z.orig.width,
1963
- z.orig.height
1989
+ A.orig.width,
1990
+ A.orig.height
1964
1991
  );
1965
1992
  }
1966
1993
  }
@@ -2014,7 +2041,7 @@ class Xt extends Te {
2014
2041
  }
2015
2042
  function K(a, e) {
2016
2043
  const { texture: t, bounds: r } = a, n = e._style._getFinalPadding();
2017
- ut(r, e._anchor, t);
2044
+ ot(r, e._anchor, t);
2018
2045
  const s = e._anchor._x * n * 2, i = e._anchor._y * n * 2;
2019
2046
  r.minX -= n - s, r.minY -= n - i, r.maxX -= n - s, r.maxY -= n - i;
2020
2047
  }
@@ -2455,9 +2482,9 @@ Ke.extension = {
2455
2482
  b.add(Pe);
2456
2483
  b.add(we);
2457
2484
  b.add(Be);
2458
- b.add(lt);
2485
+ b.add(ut);
2459
2486
  b.add(De);
2460
- b.add(ze);
2487
+ b.add(Ae);
2461
2488
  b.add(ke);
2462
2489
  b.add(Ke);
2463
2490
  b.add(He);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@designcombo/video",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "description": "Video rendering and processing library",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -27,9 +27,9 @@
27
27
  "types": "dist/index.d.ts",
28
28
  "exports": {
29
29
  ".": {
30
+ "types": "./dist/index.d.ts",
30
31
  "import": "./dist/index.es.js",
31
- "require": "./dist/index.umd.js",
32
- "types": "./dist/index.d.ts"
32
+ "require": "./dist/index.umd.js"
33
33
  }
34
34
  },
35
35
  "scripts": {
@@ -47,6 +47,7 @@
47
47
  },
48
48
  "dependencies": {
49
49
  "@pixi/layout": "^3.2.0",
50
+ "gl-transitions": "^1.43.0",
50
51
  "opfs-tools": "^0.7.2",
51
52
  "pixi.js": "^8.14.3",
52
53
  "wave-resampler": "^1.0.0"