layershift 0.2.2 → 0.3.0
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/README.md +14 -0
- package/dist/components/layershift.js +1783 -654
- package/dist/npm/layershift.es.js +5154 -2569
- package/dist/types/components/layershift/layershift-element.d.ts +2 -1
- package/dist/types/components/layershift/layershift-element.d.ts.map +1 -1
- package/dist/types/components/layershift/portal-element.d.ts +2 -1
- package/dist/types/components/layershift/portal-element.d.ts.map +1 -1
- package/dist/types/components/layershift/types.d.ts +8 -0
- package/dist/types/components/layershift/types.d.ts.map +1 -1
- package/dist/types/gpu-backend.d.ts +37 -0
- package/dist/types/gpu-backend.d.ts.map +1 -0
- package/dist/types/jfa-distance-field.d.ts +78 -0
- package/dist/types/jfa-distance-field.d.ts.map +1 -0
- package/dist/types/parallax-renderer-webgpu.d.ts +103 -0
- package/dist/types/parallax-renderer-webgpu.d.ts.map +1 -0
- package/dist/types/parallax-renderer.d.ts +54 -91
- package/dist/types/parallax-renderer.d.ts.map +1 -1
- package/dist/types/portal-renderer-webgpu.d.ts +199 -0
- package/dist/types/portal-renderer-webgpu.d.ts.map +1 -0
- package/dist/types/portal-renderer.d.ts +63 -65
- package/dist/types/portal-renderer.d.ts.map +1 -1
- package/dist/types/precomputed-depth.d.ts +9 -51
- package/dist/types/precomputed-depth.d.ts.map +1 -1
- package/dist/types/quality.d.ts +95 -0
- package/dist/types/quality.d.ts.map +1 -0
- package/dist/types/render-pass-webgpu.d.ts +76 -0
- package/dist/types/render-pass-webgpu.d.ts.map +1 -0
- package/dist/types/render-pass.d.ts +171 -0
- package/dist/types/render-pass.d.ts.map +1 -0
- package/dist/types/renderer-base.d.ts +124 -0
- package/dist/types/renderer-base.d.ts.map +1 -0
- package/dist/types/webgl-utils.d.ts +29 -0
- package/dist/types/webgl-utils.d.ts.map +1 -0
- package/dist/types/webgpu-utils.d.ts +42 -0
- package/dist/types/webgpu-utils.d.ts.map +1 -0
- package/package.json +24 -4
|
@@ -21,7 +21,6 @@ export declare class LayershiftElement extends HTMLElement implements ManagedEle
|
|
|
21
21
|
private container;
|
|
22
22
|
private renderer;
|
|
23
23
|
private inputHandler;
|
|
24
|
-
private depthWorker;
|
|
25
24
|
private video;
|
|
26
25
|
private loopCount;
|
|
27
26
|
private readonly lifecycle;
|
|
@@ -32,6 +31,8 @@ export declare class LayershiftElement extends HTMLElement implements ManagedEle
|
|
|
32
31
|
private get parallaxY();
|
|
33
32
|
private get parallaxMax();
|
|
34
33
|
private get overscan();
|
|
34
|
+
private get quality();
|
|
35
|
+
private get gpuBackend();
|
|
35
36
|
private get shouldAutoplay();
|
|
36
37
|
private get shouldLoop();
|
|
37
38
|
private get shouldMute();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layershift-element.d.ts","sourceRoot":"","sources":["../../../../src/components/layershift/layershift-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAoBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAkKlD,qBAAa,iBAAkB,SAAQ,WAAY,YAAW,cAAc;IAC1E,MAAM,CAAC,QAAQ,CAAC,QAAQ,yBAAyB;IAEjD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAOxC;IAED,QAAQ,CAAC,gBAAgB,WAAsC;IAE/D,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"layershift-element.d.ts","sourceRoot":"","sources":["../../../../src/components/layershift/layershift-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAoBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAkKlD,qBAAa,iBAAkB,SAAQ,WAAY,YAAW,cAAc;IAC1E,MAAM,CAAC,QAAQ,CAAC,QAAQ,yBAAyB;IAEjD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAOxC;IAED,QAAQ,CAAC,gBAAgB,WAAsC;IAE/D,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,QAAQ,CAA0D;IAC1E,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;;IAU7C,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IASnB,OAAO,KAAK,SAAS,GAA0E;IAC/F,OAAO,KAAK,SAAS,GAA0E;IAC/F,OAAO,KAAK,WAAW,GAA8E;IACrG,OAAO,KAAK,QAAQ,GAAuE;IAC3F,OAAO,KAAK,OAAO,GAIlB;IACD,OAAO,KAAK,UAAU,GAIrB;IACD,OAAO,KAAK,cAAc,GAAuE;IACjG,OAAO,KAAK,UAAU,GAA+D;IACrF,OAAO,KAAK,UAAU,GAAiE;IAIvF;;;;OAIG;IACH,OAAO,CAAC,IAAI;IAUZ;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IA2BjC,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAM1F,cAAc,IAAI,IAAI;IAkChB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;YA6IlC,kBAAkB;IAuChC,SAAS,IAAI,IAAI;CAmBlB"}
|
|
@@ -23,7 +23,6 @@ export declare class LayershiftPortalElement extends HTMLElement implements Mana
|
|
|
23
23
|
private container;
|
|
24
24
|
private renderer;
|
|
25
25
|
private inputHandler;
|
|
26
|
-
private depthWorker;
|
|
27
26
|
private video;
|
|
28
27
|
private mesh;
|
|
29
28
|
private loopCount;
|
|
@@ -38,6 +37,8 @@ export declare class LayershiftPortalElement extends HTMLElement implements Mana
|
|
|
38
37
|
private get parallaxMax();
|
|
39
38
|
private get overscan();
|
|
40
39
|
private get pomSteps();
|
|
40
|
+
private get quality();
|
|
41
|
+
private get gpuBackend();
|
|
41
42
|
private get rimIntensity();
|
|
42
43
|
private get rimWidth();
|
|
43
44
|
private get rimColor();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal-element.d.ts","sourceRoot":"","sources":["../../../../src/components/layershift/portal-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAoBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAmMlD,qBAAa,uBAAwB,SAAQ,WAAY,YAAW,cAAc;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAQ,uBAAuB;IAE/C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"portal-element.d.ts","sourceRoot":"","sources":["../../../../src/components/layershift/portal-element.ts"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,10 @@ export interface LayershiftProps {
|
|
|
7
7
|
parallaxMax?: number;
|
|
8
8
|
layers?: number;
|
|
9
9
|
overscan?: number;
|
|
10
|
+
/** Adaptive quality tier ('auto' | 'high' | 'medium' | 'low'). */
|
|
11
|
+
quality?: 'auto' | 'high' | 'medium' | 'low';
|
|
12
|
+
/** GPU backend preference ('auto' | 'webgpu' | 'webgl2'). Default: 'auto'. */
|
|
13
|
+
gpuBackend?: 'auto' | 'webgpu' | 'webgl2';
|
|
10
14
|
autoplay?: boolean;
|
|
11
15
|
loop?: boolean;
|
|
12
16
|
muted?: boolean;
|
|
@@ -74,6 +78,10 @@ export interface LayershiftPortalProps {
|
|
|
74
78
|
overscan?: number;
|
|
75
79
|
/** POM ray-march step count for interior displacement. */
|
|
76
80
|
pomSteps?: number;
|
|
81
|
+
/** Adaptive quality tier ('auto' | 'high' | 'medium' | 'low'). */
|
|
82
|
+
quality?: 'auto' | 'high' | 'medium' | 'low';
|
|
83
|
+
/** GPU backend preference ('auto' | 'webgpu' | 'webgl2'). Default: 'auto'. */
|
|
84
|
+
gpuBackend?: 'auto' | 'webgpu' | 'webgl2';
|
|
77
85
|
rimIntensity?: number;
|
|
78
86
|
rimColor?: string;
|
|
79
87
|
rimWidth?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layershift/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAMD,8DAA8D;AAC9D,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,sBAAsB,EAAE,YAAY,CAAC;IAC3D,qFAAqF;IACrF,aAAa,CAAC,EAAE,OAAO,sBAAsB,EAAE,qBAAqB,CAAC;CACtE;AAED,uCAAuC;AACvC,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,+BAA+B;AAC/B,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oFAAoF;AACpF,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,sCAAsC;AACtC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,0BAA0B,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,0BAA0B,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;CACjE;AAMD,uDAAuD;AACvD,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layershift/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAMD,8DAA8D;AAC9D,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,sBAAsB,EAAE,YAAY,CAAC;IAC3D,qFAAqF;IACrF,aAAa,CAAC,EAAE,OAAO,sBAAsB,EAAE,qBAAqB,CAAC;CACtE;AAED,uCAAuC;AACvC,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,+BAA+B;AAC/B,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oFAAoF;AACpF,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,sCAAsC;AACtC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,0BAA0B,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,0BAA0B,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,2BAA2B,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;CACjE;AAMD,uDAAuD;AACvD,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAMD,qEAAqE;AACrE,MAAM,WAAW,2BAA2B;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,8CAA8C;AAC9C,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,sCAAsC;AACtC,MAAM,WAAW,2BAA2B;IAC1C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,mDAAmD;AACnD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,4CAA4C;AAC5C,MAAM,WAAW,2BAA2B;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,6CAA6C;AAC7C,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,wBAAwB;IACvC,yBAAyB,EAAE,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACpE,wBAAwB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC;IAClE,yBAAyB,EAAE,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACpE,wBAAwB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC;IAClE,yBAAyB,EAAE,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACpE,yBAAyB,EAAE,WAAW,CAAC,2BAA2B,CAAC,CAAC;CACrE"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GPU Backend Detection — WebGPU / WebGL2 feature detection and selection.
|
|
3
|
+
*
|
|
4
|
+
* Provides async detection with a timeout to gracefully fall back to WebGL2
|
|
5
|
+
* when WebGPU is unavailable or adapter request hangs.
|
|
6
|
+
*
|
|
7
|
+
* Default behavior: auto-detect. WebGPU is used when available, WebGL2 fallback.
|
|
8
|
+
* The `gpu-backend` attribute on Web Components is an optional escape hatch.
|
|
9
|
+
*/
|
|
10
|
+
export type GPUBackendType = 'webgpu' | 'webgl2';
|
|
11
|
+
export interface GPUBackendInfo {
|
|
12
|
+
readonly type: GPUBackendType;
|
|
13
|
+
/** Present only when type === 'webgpu'. */
|
|
14
|
+
readonly adapter?: GPUAdapter;
|
|
15
|
+
/** Present only when type === 'webgpu'. */
|
|
16
|
+
readonly device?: GPUDevice;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Synchronous check for WebGPU API availability.
|
|
20
|
+
*
|
|
21
|
+
* Returns true if `navigator.gpu` exists. Does NOT request an adapter,
|
|
22
|
+
* so this cannot confirm actual WebGPU support — use `detectGPUBackend()`
|
|
23
|
+
* for a definitive answer.
|
|
24
|
+
*/
|
|
25
|
+
export declare function isWebGPUAvailable(): boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Detect the best available GPU backend.
|
|
28
|
+
*
|
|
29
|
+
* 1. If `preference` is 'webgl2', returns WebGL2 immediately.
|
|
30
|
+
* 2. If `preference` is 'webgpu', attempts WebGPU and throws on failure.
|
|
31
|
+
* 3. If `preference` is 'auto' (default), tries WebGPU with a timeout
|
|
32
|
+
* and falls back to WebGL2 silently on any failure.
|
|
33
|
+
*
|
|
34
|
+
* @param preference - 'webgpu' | 'webgl2' | 'auto' (default: 'auto')
|
|
35
|
+
*/
|
|
36
|
+
export declare function detectGPUBackend(preference?: 'webgpu' | 'webgl2' | 'auto'): Promise<GPUBackendInfo>;
|
|
37
|
+
//# sourceMappingURL=gpu-backend.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gpu-backend.d.ts","sourceRoot":"","sources":["../../src/gpu-backend.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAC9B,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B;AAaD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAMD;;;;;;;;;GASG;AACH,wBAAsB,gBAAgB,CACpC,UAAU,GAAE,QAAQ,GAAG,QAAQ,GAAG,MAAe,GAChD,OAAO,CAAC,cAAc,CAAC,CAqCzB"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* JFA Distance Field — Jump Flood Algorithm for screen-space distance fields.
|
|
3
|
+
*
|
|
4
|
+
* Computes a distance field from a binary mask (e.g., logo silhouette) using:
|
|
5
|
+
* 1. Edge seed extraction from the mask
|
|
6
|
+
* 2. Jump Flood iterations to propagate nearest-seed info
|
|
7
|
+
* 3. Distance conversion to a normalized scalar field
|
|
8
|
+
*
|
|
9
|
+
* Extracted from PortalRenderer to share orchestration logic between
|
|
10
|
+
* WebGL2 and WebGPU backends.
|
|
11
|
+
*/
|
|
12
|
+
import type { RenderPass } from './render-pass';
|
|
13
|
+
/** Parameters for computing the distance field each frame. */
|
|
14
|
+
export interface JFAComputeParams {
|
|
15
|
+
/** Mask shader pass (renders logo mesh to binary mask). */
|
|
16
|
+
maskPass: RenderPass;
|
|
17
|
+
/** JFA seed extraction pass. */
|
|
18
|
+
seedPass: RenderPass;
|
|
19
|
+
/** JFA flood iteration pass. */
|
|
20
|
+
floodPass: RenderPass;
|
|
21
|
+
/** JFA distance conversion pass. */
|
|
22
|
+
distPass: RenderPass;
|
|
23
|
+
/** VAO for the logo mesh (used in mask rendering). */
|
|
24
|
+
maskVao: WebGLVertexArrayObject;
|
|
25
|
+
/** Fullscreen quad VAO (used for seed/flood/dist passes). */
|
|
26
|
+
quadVao: WebGLVertexArrayObject;
|
|
27
|
+
/** Mesh scale X in NDC. */
|
|
28
|
+
meshScaleX: number;
|
|
29
|
+
/** Mesh scale Y in NDC. */
|
|
30
|
+
meshScaleY: number;
|
|
31
|
+
/** Number of triangulated indices in the logo mesh. */
|
|
32
|
+
stencilIndexCount: number;
|
|
33
|
+
/** Maximum distance range for normalization (max of bevelWidth, edgeOcclusionWidth). */
|
|
34
|
+
distRange: number;
|
|
35
|
+
}
|
|
36
|
+
export declare class JFADistanceField {
|
|
37
|
+
private readonly gl;
|
|
38
|
+
private readonly hasColorBufferFloat;
|
|
39
|
+
private maskFbo;
|
|
40
|
+
private maskTex;
|
|
41
|
+
private pingFbo;
|
|
42
|
+
private pingTex;
|
|
43
|
+
private pongFbo;
|
|
44
|
+
private pongTex;
|
|
45
|
+
private distFbo;
|
|
46
|
+
private distTex;
|
|
47
|
+
private _width;
|
|
48
|
+
private _height;
|
|
49
|
+
private _dirty;
|
|
50
|
+
constructor(gl: WebGL2RenderingContext, hasColorBufferFloat: boolean);
|
|
51
|
+
get width(): number;
|
|
52
|
+
get height(): number;
|
|
53
|
+
get isDirty(): boolean;
|
|
54
|
+
get distanceTexture(): WebGLTexture | null;
|
|
55
|
+
get maskTexture(): WebGLTexture | null;
|
|
56
|
+
markDirty(): void;
|
|
57
|
+
/**
|
|
58
|
+
* Create (or recreate) all JFA FBO/texture resources at the given canvas
|
|
59
|
+
* dimensions, divided by the quality tier's JFA divisor.
|
|
60
|
+
*/
|
|
61
|
+
createResources(canvasWidth: number, canvasHeight: number, jfaDivisor: number): void;
|
|
62
|
+
/**
|
|
63
|
+
* Compute the distance field from the logo mask.
|
|
64
|
+
*
|
|
65
|
+
* Pipeline: mask render → seed extraction → JFA flood → distance conversion.
|
|
66
|
+
* After completion, `distanceTexture` holds the result and `isDirty` is false.
|
|
67
|
+
*
|
|
68
|
+
* The caller is responsible for restoring the viewport after this call.
|
|
69
|
+
*/
|
|
70
|
+
compute(params: JFAComputeParams): void;
|
|
71
|
+
/**
|
|
72
|
+
* Compute the sequence of JFA step sizes for the given resolution.
|
|
73
|
+
* Steps halve from ceil(maxDim/2) down to 1.
|
|
74
|
+
*/
|
|
75
|
+
static computeFloodIterations(width: number, height: number): number[];
|
|
76
|
+
dispose(): void;
|
|
77
|
+
}
|
|
78
|
+
//# sourceMappingURL=jfa-distance-field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jfa-distance-field.d.ts","sourceRoot":"","sources":["../../src/jfa-distance-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAMhD,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,QAAQ,EAAE,UAAU,CAAC;IACrB,gCAAgC;IAChC,QAAQ,EAAE,UAAU,CAAC;IACrB,gCAAgC;IAChC,SAAS,EAAE,UAAU,CAAC;IACtB,oCAAoC;IACpC,QAAQ,EAAE,UAAU,CAAC;IACrB,sDAAsD;IACtD,OAAO,EAAE,sBAAsB,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,sBAAsB,CAAC;IAChC,2BAA2B;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,wFAAwF;IACxF,SAAS,EAAE,MAAM,CAAC;CACnB;AAMD,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAyB;IAC5C,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAU;IAG9C,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAA6B;IAG5C,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,MAAM,CAAQ;gBAEV,EAAE,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,OAAO;IAOpE,IAAI,KAAK,IAAI,MAAM,CAAwB;IAC3C,IAAI,MAAM,IAAI,MAAM,CAAyB;IAC7C,IAAI,OAAO,IAAI,OAAO,CAAwB;IAC9C,IAAI,eAAe,IAAI,YAAY,GAAG,IAAI,CAAyB;IACnE,IAAI,WAAW,IAAI,YAAY,GAAG,IAAI,CAAyB;IAE/D,SAAS,IAAI,IAAI;IAMjB;;;OAGG;IACH,eAAe,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IA6CpF;;;;;;;OAOG;IACH,OAAO,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI;IAoGvC;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;IAetE,OAAO,IAAI,IAAI;CAchB"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Parallax Renderer (WebGPU) — GPU-accelerated depth-aware video parallax.
|
|
3
|
+
*
|
|
4
|
+
* WebGPU counterpart to `parallax-renderer.ts` (WebGL2). Shares the same
|
|
5
|
+
* `RendererBase` abstract base class and `ParallaxRendererConfig` interface.
|
|
6
|
+
*
|
|
7
|
+
* ## Pipeline
|
|
8
|
+
*
|
|
9
|
+
* 1. **Bilateral filter pass** — edge-preserving depth smoothing.
|
|
10
|
+
* Reads raw depth, writes filtered depth to offscreen r8unorm texture.
|
|
11
|
+
* Runs at RVFC rate (~5fps, only when depth data changes).
|
|
12
|
+
*
|
|
13
|
+
* 2. **Parallax pass** — per-pixel depth-based displacement.
|
|
14
|
+
* Reads video + filtered depth, renders to canvas swap chain texture.
|
|
15
|
+
* Runs at RAF rate (60-120fps).
|
|
16
|
+
*
|
|
17
|
+
* ## Key differences from WebGL2 version
|
|
18
|
+
*
|
|
19
|
+
* - Pipeline state objects bake all config at creation time
|
|
20
|
+
* - Bind groups replace individual uniform calls
|
|
21
|
+
* - Override constants replace #define injection
|
|
22
|
+
* - `copyExternalImageToTexture` for zero-copy video frame import
|
|
23
|
+
* - `writeTexture` for depth data upload
|
|
24
|
+
*/
|
|
25
|
+
import { RendererBase } from './renderer-base';
|
|
26
|
+
import type { ParallaxRendererConfig } from './parallax-renderer';
|
|
27
|
+
export declare class ParallaxRendererWebGPU extends RendererBase {
|
|
28
|
+
private device;
|
|
29
|
+
private context;
|
|
30
|
+
private canvasFormat;
|
|
31
|
+
private readonly config;
|
|
32
|
+
private quadBuffer;
|
|
33
|
+
private linearSampler;
|
|
34
|
+
private bilateralPipeline;
|
|
35
|
+
private bilateralBindGroupLayout;
|
|
36
|
+
private bilateralUniformBuffer;
|
|
37
|
+
private bilateralBindGroup;
|
|
38
|
+
private rawDepthTexture;
|
|
39
|
+
private rawDepthView;
|
|
40
|
+
private filteredDepthTexture;
|
|
41
|
+
private filteredDepthView;
|
|
42
|
+
private parallaxPipeline;
|
|
43
|
+
private parallaxBindGroupLayout;
|
|
44
|
+
private vertexUniformBuffer;
|
|
45
|
+
private fragmentUniformBuffer;
|
|
46
|
+
private parallaxBindGroup;
|
|
47
|
+
private videoTexture;
|
|
48
|
+
private videoTextureView;
|
|
49
|
+
private readonly offsetData;
|
|
50
|
+
private depthFlipBuffer;
|
|
51
|
+
constructor(parent: HTMLElement, config: ParallaxRendererConfig, device: GPUDevice, adapterInfo: GPUAdapterInfo);
|
|
52
|
+
/**
|
|
53
|
+
* Set up textures, write static uniforms, and build bind groups.
|
|
54
|
+
*
|
|
55
|
+
* Call this once after the video element and depth data are loaded.
|
|
56
|
+
*/
|
|
57
|
+
initialize(video: HTMLVideoElement, depthWidth: number, depthHeight: number): void;
|
|
58
|
+
private createBilateralPipeline;
|
|
59
|
+
private createParallaxPipeline;
|
|
60
|
+
private rebuildBilateralBindGroup;
|
|
61
|
+
private rebuildParallaxBindGroup;
|
|
62
|
+
/** Write all static (non per-frame) fragment uniforms. */
|
|
63
|
+
private writeStaticFragmentUniforms;
|
|
64
|
+
/**
|
|
65
|
+
* Flip depth data vertically to match video orientation.
|
|
66
|
+
*
|
|
67
|
+
* WebGPU `writeTexture` has no equivalent to WebGL's `UNPACK_FLIP_Y_WEBGL`.
|
|
68
|
+
* Video frames are imported with `flipY: true` via `copyExternalImageToTexture`,
|
|
69
|
+
* so depth data must also be flipped to maintain spatial alignment.
|
|
70
|
+
*/
|
|
71
|
+
private flipDepthY;
|
|
72
|
+
/**
|
|
73
|
+
* Main render loop — called every animation frame at display refresh rate.
|
|
74
|
+
*
|
|
75
|
+
* 1. Upload current video frame to GPU texture.
|
|
76
|
+
* 2. Update parallax offset from input (buttery smooth at RAF rate).
|
|
77
|
+
* 3. Render fullscreen quad with parallax shader to canvas.
|
|
78
|
+
*/
|
|
79
|
+
protected onRenderFrame(): void;
|
|
80
|
+
/**
|
|
81
|
+
* Upload raw depth data and run the bilateral filter pass.
|
|
82
|
+
*
|
|
83
|
+
* Runs at RVFC rate (~5fps) when supported, or every RAF frame otherwise.
|
|
84
|
+
*/
|
|
85
|
+
protected onDepthUpdate(timeSec: number): void;
|
|
86
|
+
/**
|
|
87
|
+
* Recalculate canvas size and UV transform to match current container.
|
|
88
|
+
*/
|
|
89
|
+
protected recalculateViewportLayout(): void;
|
|
90
|
+
/** Release all GPU resources. */
|
|
91
|
+
protected disposeRenderer(): void;
|
|
92
|
+
/**
|
|
93
|
+
* WebGPU device loss recovery.
|
|
94
|
+
*
|
|
95
|
+
* Device loss is handled via the `device.lost` promise (set in constructor).
|
|
96
|
+
* Full recovery requires re-requesting adapter + device, which is managed
|
|
97
|
+
* at the Web Component level by re-creating the renderer.
|
|
98
|
+
*/
|
|
99
|
+
protected onContextRestored(): void;
|
|
100
|
+
/** Destroy all textures and clear bind groups that reference them. */
|
|
101
|
+
private disposeTextures;
|
|
102
|
+
}
|
|
103
|
+
//# sourceMappingURL=parallax-renderer-webgpu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parallax-renderer-webgpu.d.ts","sourceRoot":"","sources":["../../src/parallax-renderer-webgpu.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAgFlE,qBAAa,sBAAuB,SAAQ,YAAY;IAEtD,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,YAAY,CAAmB;IAGvC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiB;IAGxC,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,aAAa,CAA2B;IAGhD,OAAO,CAAC,iBAAiB,CAAkC;IAC3D,OAAO,CAAC,wBAAwB,CAAmC;IACnE,OAAO,CAAC,sBAAsB,CAA0B;IACxD,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,YAAY,CAA+B;IAGnD,OAAO,CAAC,oBAAoB,CAA2B;IACvD,OAAO,CAAC,iBAAiB,CAA+B;IAGxD,OAAO,CAAC,gBAAgB,CAAkC;IAC1D,OAAO,CAAC,uBAAuB,CAAmC;IAClE,OAAO,CAAC,mBAAmB,CAA0B;IACrD,OAAO,CAAC,qBAAqB,CAA0B;IACvD,OAAO,CAAC,iBAAiB,CAA6B;IACtD,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,gBAAgB,CAA+B;IAGvD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAGlD,OAAO,CAAC,eAAe,CAA2B;gBAGhD,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,sBAAsB,EAC9B,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,cAAc;IAwD7B;;;;OAIG;IACH,UAAU,CACR,KAAK,EAAE,gBAAgB,EACvB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,IAAI;IAgEP,OAAO,CAAC,uBAAuB;IAkC/B,OAAO,CAAC,sBAAsB;IA+C9B,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,wBAAwB;IA2BhC,0DAA0D;IAC1D,OAAO,CAAC,2BAA2B;IA2BnC;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAgBlB;;;;;;OAMG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAoD/B;;;;OAIG;IACH,SAAS,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IA2C9C;;OAEG;IACH,SAAS,CAAC,yBAAyB,IAAI,IAAI;IA8B3C,iCAAiC;IACjC,SAAS,CAAC,eAAe,IAAI,IAAI;IAiCjC;;;;;;OAMG;IACH,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,sEAAsE;IACtE,OAAO,CAAC,eAAe;CAiBxB"}
|
|
@@ -7,40 +7,46 @@
|
|
|
7
7
|
* and current mouse/gyro input, creating a continuous parallax effect
|
|
8
8
|
* with no discrete layer banding.
|
|
9
9
|
*
|
|
10
|
-
* ##
|
|
10
|
+
* ## Multi-pass architecture
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
12
|
+
* The renderer uses a pass-based pipeline where each render pass is a
|
|
13
|
+
* self-contained unit with its own shader program and uniform cache,
|
|
14
|
+
* sharing a single fullscreen quad VAO and depth textures:
|
|
14
15
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* This is copied into a single-channel R8 texture on the GPU.
|
|
16
|
+
* 1. **Bilateral filter pass** — edge-preserving depth smoothing.
|
|
17
|
+
* Reads raw depth (UNIT 2), writes filtered depth (UNIT 1) via FBO.
|
|
18
|
+
* Runs at RVFC rate (~5fps, only when depth data changes).
|
|
19
19
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
20
|
+
* 2. **Parallax pass** — per-pixel depth-based displacement.
|
|
21
|
+
* Reads video (UNIT 0) + filtered depth (UNIT 1), renders to screen.
|
|
22
|
+
* Runs at RAF rate (60-120fps).
|
|
22
23
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* Near objects (depth ≈ 0) move more; far objects (depth ≈ 1) less.
|
|
27
|
-
*
|
|
28
|
-
* 5. When POM is enabled, the shader ray-marches through the depth
|
|
29
|
-
* field to find the correct surface intersection, producing
|
|
30
|
-
* self-occlusion (near objects cover far objects behind them).
|
|
24
|
+
* Each pass is created by a factory function and conforms to a minimal
|
|
25
|
+
* interface. Adding a new post-processing pass requires only a new
|
|
26
|
+
* factory function and wiring it into the render loop.
|
|
31
27
|
*
|
|
32
28
|
* ## Texture memory
|
|
33
29
|
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
30
|
+
* 3 textures total: 1 video (RGBA), 1 raw depth (R8), 1 filtered depth (R8).
|
|
31
|
+
* The raw depth texture is uploaded from CPU when depth changes (~5fps).
|
|
32
|
+
* The filtered depth texture is rendered via FBO bilateral filter pass.
|
|
36
33
|
*/
|
|
37
|
-
import type {
|
|
34
|
+
import type { QualityTier } from './quality';
|
|
35
|
+
import { RendererBase } from './renderer-base';
|
|
38
36
|
/** Configuration subset relevant to the parallax renderer. */
|
|
39
37
|
export interface ParallaxRendererConfig {
|
|
40
38
|
parallaxStrength: number;
|
|
41
39
|
pomEnabled: boolean;
|
|
42
40
|
pomSteps: number;
|
|
43
41
|
overscanPadding: number;
|
|
42
|
+
/**
|
|
43
|
+
* Adaptive quality tier. Controls render resolution, depth resolution,
|
|
44
|
+
* sample counts, and bilateral kernel size.
|
|
45
|
+
* - 'auto' — probe device capabilities and classify automatically.
|
|
46
|
+
* - 'high' / 'medium' / 'low' — use the specified tier directly.
|
|
47
|
+
* - undefined — defaults to 'auto'.
|
|
48
|
+
*/
|
|
49
|
+
quality?: 'auto' | QualityTier;
|
|
44
50
|
/**
|
|
45
51
|
* Depth-adaptive shader parameters.
|
|
46
52
|
* When omitted, calibrated defaults matching the current hardcoded values
|
|
@@ -52,39 +58,15 @@ export interface ParallaxRendererConfig {
|
|
|
52
58
|
dofStart?: number;
|
|
53
59
|
dofStrength?: number;
|
|
54
60
|
}
|
|
55
|
-
export declare class ParallaxRenderer {
|
|
56
|
-
/** Debounce delay for resize events to avoid layout thrashing. */
|
|
57
|
-
private static readonly RESIZE_DEBOUNCE_MS;
|
|
58
|
-
/** Compile-time upper bound for the POM for-loop in GLSL. */
|
|
59
|
-
private static readonly MAX_POM_STEPS;
|
|
60
|
-
private readonly canvas;
|
|
61
|
+
export declare class ParallaxRenderer extends RendererBase {
|
|
61
62
|
private gl;
|
|
62
|
-
private
|
|
63
|
-
private
|
|
64
|
-
private
|
|
65
|
-
private
|
|
66
|
-
private
|
|
67
|
-
private readonly
|
|
68
|
-
private
|
|
69
|
-
private depthHeight;
|
|
70
|
-
private videoAspect;
|
|
71
|
-
private readDepth;
|
|
72
|
-
private readInput;
|
|
73
|
-
private playbackVideo;
|
|
74
|
-
/**
|
|
75
|
-
* Optional callback invoked on each new video frame (from RVFC).
|
|
76
|
-
* The Web Component uses this to dispatch the 'layershift-parallax:frame' event.
|
|
77
|
-
*/
|
|
78
|
-
private onVideoFrame;
|
|
79
|
-
private animationFrameHandle;
|
|
80
|
-
/** requestVideoFrameCallback handle (0 = inactive). */
|
|
81
|
-
private rvfcHandle;
|
|
82
|
-
/** Whether RVFC is supported on the current video element. */
|
|
83
|
-
private rvfcSupported;
|
|
84
|
-
private resizeObserver;
|
|
85
|
-
private resizeTimer;
|
|
86
|
-
private uvOffset;
|
|
87
|
-
private uvScale;
|
|
63
|
+
private quadVao;
|
|
64
|
+
private bilateralPass;
|
|
65
|
+
private parallaxPass;
|
|
66
|
+
private readonly textures;
|
|
67
|
+
private readonly videoSlot;
|
|
68
|
+
private readonly filteredDepthSlot;
|
|
69
|
+
private readonly rawDepthSlot;
|
|
88
70
|
/** Resolved config with all optional shader params filled from defaults. */
|
|
89
71
|
private readonly config;
|
|
90
72
|
/**
|
|
@@ -97,8 +79,8 @@ export declare class ParallaxRenderer {
|
|
|
97
79
|
*/
|
|
98
80
|
constructor(parent: HTMLElement, config: ParallaxRendererConfig);
|
|
99
81
|
/**
|
|
100
|
-
* Set up the scene: create video texture, depth
|
|
101
|
-
* static shader uniforms.
|
|
82
|
+
* Set up the scene: create video texture, depth textures + FBO, and
|
|
83
|
+
* set static shader uniforms.
|
|
102
84
|
*
|
|
103
85
|
* Call this once after the video element and depth data are loaded.
|
|
104
86
|
*
|
|
@@ -109,31 +91,12 @@ export declare class ParallaxRenderer {
|
|
|
109
91
|
*/
|
|
110
92
|
initialize(video: HTMLVideoElement, depthWidth: number, depthHeight: number): void;
|
|
111
93
|
/**
|
|
112
|
-
*
|
|
113
|
-
*
|
|
114
|
-
* When `requestVideoFrameCallback` is available, two loops run:
|
|
115
|
-
* 1. RVFC loop — fires once per new video frame, handles depth update.
|
|
116
|
-
* 2. RAF loop — fires at display refresh rate, handles input + render.
|
|
94
|
+
* Create render passes and shared fullscreen quad VAO.
|
|
117
95
|
*
|
|
118
|
-
*
|
|
119
|
-
*
|
|
96
|
+
* Each pass is a self-contained unit with its own program and uniform
|
|
97
|
+
* cache. They share a single VAO for the fullscreen quad geometry.
|
|
120
98
|
*/
|
|
121
|
-
start(video: HTMLVideoElement, readDepth: (timeSec: number) => Uint8Array, readInput: () => ParallaxInput, onVideoFrame?: (currentTime: number, frameNumber: number) => void): void;
|
|
122
|
-
/** Stop both render loops and release callbacks. */
|
|
123
|
-
stop(): void;
|
|
124
|
-
/** Stop rendering and release all GPU resources. */
|
|
125
|
-
dispose(): void;
|
|
126
|
-
/** Create the shader program, fullscreen quad VAO, and cache uniform locations. */
|
|
127
99
|
private initGPUResources;
|
|
128
|
-
/** Check whether requestVideoFrameCallback is available. */
|
|
129
|
-
private static isRVFCSupported;
|
|
130
|
-
/**
|
|
131
|
-
* RVFC callback — fires only when the browser presents a new video frame.
|
|
132
|
-
*
|
|
133
|
-
* Handles the depth texture update, which only needs to happen
|
|
134
|
-
* when the video frame actually changes (~24-30fps, not 60-120fps).
|
|
135
|
-
*/
|
|
136
|
-
private readonly videoFrameLoop;
|
|
137
100
|
/**
|
|
138
101
|
* Main render loop — called every animation frame at display refresh rate.
|
|
139
102
|
*
|
|
@@ -145,16 +108,16 @@ export declare class ParallaxRenderer {
|
|
|
145
108
|
* When RVFC is NOT supported, this falls back to the original behavior:
|
|
146
109
|
* depth update + input update + render all in a single RAF tick.
|
|
147
110
|
*/
|
|
148
|
-
|
|
149
|
-
/** Upload fresh depth data to the GPU texture. */
|
|
150
|
-
private updateDepthTexture;
|
|
111
|
+
protected onRenderFrame(): void;
|
|
151
112
|
/**
|
|
152
|
-
*
|
|
153
|
-
*
|
|
113
|
+
* Upload raw depth data to the GPU and run the bilateral filter pass.
|
|
114
|
+
*
|
|
115
|
+
* Delegates to the bilateral filter pass object, which encapsulates
|
|
116
|
+
* the upload → FBO bind → draw → FBO unbind → viewport restore sequence.
|
|
117
|
+
*
|
|
118
|
+
* The parallax shader reads from filteredDepthTexture (UNIT 1).
|
|
154
119
|
*/
|
|
155
|
-
|
|
156
|
-
/** Debounce resize events to avoid expensive layout recalculations. */
|
|
157
|
-
private readonly scheduleResizeRecalculate;
|
|
120
|
+
protected onDepthUpdate(timeSec: number): void;
|
|
158
121
|
/**
|
|
159
122
|
* Recalculate the WebGL canvas size and UV transform to match the
|
|
160
123
|
* current container dimensions.
|
|
@@ -162,14 +125,14 @@ export declare class ParallaxRenderer {
|
|
|
162
125
|
* Cover-fit + overscan is expressed as a UV-space transform (offset + scale)
|
|
163
126
|
* rather than geometry resize. The fullscreen quad stays fixed at -1 to 1.
|
|
164
127
|
*/
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
/** Dispose textures
|
|
128
|
+
protected recalculateViewportLayout(): void;
|
|
129
|
+
/** Release all GPU resources. */
|
|
130
|
+
protected disposeRenderer(): void;
|
|
131
|
+
/** Rebuild GPU state after context restoration. */
|
|
132
|
+
protected onContextRestored(): void;
|
|
133
|
+
/** Dispose all textures via the registry (video, rawDepth, filteredDepth). */
|
|
171
134
|
private disposeTextures;
|
|
172
|
-
/** Dispose
|
|
135
|
+
/** Dispose render passes and shared VAO. */
|
|
173
136
|
private disposeGPUResources;
|
|
174
137
|
}
|
|
175
138
|
//# sourceMappingURL=parallax-renderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parallax-renderer.d.ts","sourceRoot":"","sources":["../../src/parallax-renderer.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"parallax-renderer.d.ts","sourceRoot":"","sources":["../../src/parallax-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAUH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAe/C,8DAA8D;AAC9D,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAySD,qBAAa,gBAAiB,SAAQ,YAAY;IAEhD,OAAO,CAAC,EAAE,CAAuC;IACjD,OAAO,CAAC,OAAO,CAAuC;IAGtD,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,YAAY,CAA6B;IAGjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAClD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAc;IACxC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAc;IAChD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAc;IAE3C,4EAA4E;IAC5E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiC;IAExD;;;;;;;OAOG;gBAED,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,sBAAsB;IAoDhC;;;;;;;;;;OAUG;IACH,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IA6DlF;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAsBxB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAwC/B;;;;;;;OAOG;IACH,SAAS,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAqB9C;;;;;;OAMG;IACH,SAAS,CAAC,yBAAyB,IAAI,IAAI;IA0B3C,iCAAiC;IACjC,SAAS,CAAC,eAAe,IAAI,IAAI;IAYjC,mDAAmD;IACnD,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAwBnC,8EAA8E;IAC9E,OAAO,CAAC,eAAe;IAOvB,4CAA4C;IAC5C,OAAO,CAAC,mBAAmB;CAmB5B"}
|