layershift 0.2.2 → 0.4.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 +921 -647
- package/dist/npm/layershift.es.js +3354 -2266
- package/dist/types/components/layershift/global.d.ts +2 -2
- package/dist/types/components/layershift/index.d.ts +5 -1
- package/dist/types/components/layershift/index.d.ts.map +1 -1
- package/dist/types/components/layershift/layershift-element.d.ts +41 -10
- package/dist/types/components/layershift/layershift-element.d.ts.map +1 -1
- package/dist/types/components/layershift/lifecycle.d.ts +6 -0
- package/dist/types/components/layershift/lifecycle.d.ts.map +1 -1
- package/dist/types/components/layershift/portal-element.d.ts +13 -4
- package/dist/types/components/layershift/portal-element.d.ts.map +1 -1
- package/dist/types/components/layershift/types.d.ts +30 -9
- package/dist/types/components/layershift/types.d.ts.map +1 -1
- package/dist/types/depth-analysis.d.ts +10 -6
- package/dist/types/depth-analysis.d.ts.map +1 -1
- package/dist/types/depth-effect-renderer.d.ts +186 -0
- package/dist/types/depth-effect-renderer.d.ts.map +1 -0
- package/dist/types/depth-estimator.d.ts +96 -0
- package/dist/types/depth-estimator.d.ts.map +1 -0
- package/dist/types/input-handler.d.ts +8 -2
- package/dist/types/input-handler.d.ts.map +1 -1
- package/dist/types/jfa-distance-field.d.ts +78 -0
- package/dist/types/jfa-distance-field.d.ts.map +1 -0
- package/dist/types/media-source.d.ts +76 -0
- package/dist/types/media-source.d.ts.map +1 -0
- package/dist/types/portal-renderer.d.ts +65 -66
- package/dist/types/portal-renderer.d.ts.map +1 -1
- package/dist/types/precomputed-depth.d.ts +14 -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.d.ts +171 -0
- package/dist/types/render-pass.d.ts.map +1 -0
- package/dist/types/renderer-base.d.ts +129 -0
- package/dist/types/renderer-base.d.ts.map +1 -0
- package/dist/types/shared/channel-to-renderer.d.ts +72 -0
- package/dist/types/shared/channel-to-renderer.d.ts.map +1 -0
- package/dist/types/shared/filter-config.d.ts +184 -0
- package/dist/types/shared/filter-config.d.ts.map +1 -0
- package/dist/types/video-source.d.ts +0 -1
- package/dist/types/video-source.d.ts.map +1 -1
- package/dist/types/webgl-utils.d.ts +29 -0
- package/dist/types/webgl-utils.d.ts.map +1 -0
- package/package.json +31 -5
- package/dist/types/parallax-renderer.d.ts +0 -175
- package/dist/types/parallax-renderer.d.ts.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-config.d.ts","sourceRoot":"","sources":["../../../src/shared/filter-config.ts"],"names":[],"mappings":"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"}
|
|
@@ -17,7 +17,6 @@ export interface ExtractedFrame {
|
|
|
17
17
|
width: number;
|
|
18
18
|
height: number;
|
|
19
19
|
}
|
|
20
|
-
export declare function createHiddenVideoElement(url: string): Promise<HTMLVideoElement>;
|
|
21
20
|
export declare function createExtractionPlan(video: HTMLVideoElement, options: FrameExtractionOptions): ExtractionPlan;
|
|
22
21
|
export declare function extractFramesBySeeking(video: HTMLVideoElement, plan: ExtractionPlan, onFrame: (frame: ExtractedFrame, totalFrames: number) => Promise<void> | void, onProgress?: (progress: number) => void): Promise<void>;
|
|
23
22
|
//# sourceMappingURL=video-source.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-source.d.ts","sourceRoot":"","sources":["../../src/video-source.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,
|
|
1
|
+
{"version":3,"file":"video-source.d.ts","sourceRoot":"","sources":["../../src/video-source.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,sBAAsB,GAC9B,cAAc,CAehB;AAED,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAC7E,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACtC,OAAO,CAAC,IAAI,CAAC,CAmCf"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared WebGL 2 utilities — compile, link, uniform caching, fullscreen quad.
|
|
3
|
+
*
|
|
4
|
+
* Used by both the parallax renderer and the portal renderer to avoid
|
|
5
|
+
* duplicating boilerplate GL setup code.
|
|
6
|
+
*/
|
|
7
|
+
/** Compile a GLSL shader, throwing on error. */
|
|
8
|
+
export declare function compileShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader;
|
|
9
|
+
/** Link a shader program, throwing on error. */
|
|
10
|
+
export declare function linkProgram(gl: WebGL2RenderingContext, vertShader: WebGLShader, fragShader: WebGLShader): WebGLProgram;
|
|
11
|
+
/**
|
|
12
|
+
* Cache uniform locations for a set of uniform names.
|
|
13
|
+
*
|
|
14
|
+
* Returns a record mapping each name to its `WebGLUniformLocation | null`.
|
|
15
|
+
* Avoids repeated `getUniformLocation` calls per frame.
|
|
16
|
+
*/
|
|
17
|
+
export declare function getUniformLocations(gl: WebGL2RenderingContext, program: WebGLProgram, names: readonly string[]): Record<string, WebGLUniformLocation | null>;
|
|
18
|
+
/**
|
|
19
|
+
* Create a VAO for the standard fullscreen quad.
|
|
20
|
+
*
|
|
21
|
+
* The VAO binds a VBO with 4 clip-space vertices to the `aPosition`
|
|
22
|
+
* attribute (looked up from the given program). Draw with
|
|
23
|
+
* `gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)`.
|
|
24
|
+
*
|
|
25
|
+
* @param gl - WebGL 2 context
|
|
26
|
+
* @param program - Shader program to look up `aPosition` attribute location
|
|
27
|
+
*/
|
|
28
|
+
export declare function createFullscreenQuadVao(gl: WebGL2RenderingContext, program: WebGLProgram): WebGLVertexArrayObject;
|
|
29
|
+
//# sourceMappingURL=webgl-utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webgl-utils.d.ts","sourceRoot":"","sources":["../../src/webgl-utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,gDAAgD;AAChD,wBAAgB,aAAa,CAC3B,EAAE,EAAE,sBAAsB,EAC1B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GACb,WAAW,CAWb;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CACzB,EAAE,EAAE,sBAAsB,EAC1B,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,WAAW,GACtB,YAAY,CAiBd;AAMD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,SAAS,MAAM,EAAE,GACvB,MAAM,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAM7C;AAiBD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CACrC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,GACpB,sBAAsB,CAiBxB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "layershift",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Embeddable video effects as Web Components. Drop-in parallax, depth-aware motion, and more.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/components/layershift.js",
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
"scripts": {
|
|
28
28
|
"dev": "vite",
|
|
29
29
|
"precompute": "npx tsx scripts/precompute-depth.ts",
|
|
30
|
-
"
|
|
30
|
+
"generate:configs": "npx tsx scripts/generate-configs.ts",
|
|
31
|
+
"build": "npm run generate:configs && tsc && vite build",
|
|
31
32
|
"build:component": "vite build --config vite.config.component.ts",
|
|
32
33
|
"build:npm": "vite build --config vite.config.npm.ts",
|
|
33
34
|
"build:types": "tsc -p tsconfig.declarations.json && cp src/components/layershift/global.d.ts dist/types/components/layershift/global.d.ts",
|
|
@@ -35,10 +36,18 @@
|
|
|
35
36
|
"prepublishOnly": "npm run build:package",
|
|
36
37
|
"package": "npx tsx scripts/package-output.ts",
|
|
37
38
|
"preview": "vite preview",
|
|
38
|
-
"test": "vitest run",
|
|
39
|
-
"test:watch": "vitest",
|
|
39
|
+
"test": "vitest run --project=unit",
|
|
40
|
+
"test:watch": "vitest --project=unit",
|
|
41
|
+
"test:storybook": "vitest run --project=storybook",
|
|
40
42
|
"test:e2e": "playwright test",
|
|
41
|
-
"test:all": "vitest run && playwright test"
|
|
43
|
+
"test:all": "vitest run && playwright test",
|
|
44
|
+
"docs:dev": "vitepress dev docs",
|
|
45
|
+
"build:docs": "vitepress build docs",
|
|
46
|
+
"storybook": "storybook dev -p 6006",
|
|
47
|
+
"build:storybook": "storybook build -o dist/storybook",
|
|
48
|
+
"dev:editor": "vite --config vite.config.editor.ts",
|
|
49
|
+
"build:editor": "vite build --config vite.config.editor.ts",
|
|
50
|
+
"build:editor:consumer": "vite build --config vite.config.editor.ts --mode consumer"
|
|
42
51
|
},
|
|
43
52
|
"repository": {
|
|
44
53
|
"type": "git",
|
|
@@ -61,28 +70,45 @@
|
|
|
61
70
|
},
|
|
62
71
|
"homepage": "https://layershift.io",
|
|
63
72
|
"devDependencies": {
|
|
73
|
+
"@chromatic-com/storybook": "^5.0.1",
|
|
64
74
|
"@playwright/test": "^1.58.2",
|
|
75
|
+
"@storybook/addon-a11y": "^10.2.10",
|
|
76
|
+
"@storybook/addon-docs": "^10.2.10",
|
|
77
|
+
"@storybook/addon-vitest": "^10.2.10",
|
|
78
|
+
"@storybook/react-vite": "^10.2.10",
|
|
65
79
|
"@tailwindcss/vite": "^4.2.0",
|
|
80
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
81
|
+
"@testing-library/react": "^16.3.2",
|
|
82
|
+
"@testing-library/user-event": "^14.6.1",
|
|
66
83
|
"@types/jsdom": "^27.0.0",
|
|
67
84
|
"@types/react": "^19.2.14",
|
|
68
85
|
"@types/react-dom": "^19.2.3",
|
|
69
86
|
"@vitejs/plugin-react": "^5.1.4",
|
|
70
87
|
"@vitest/browser": "^4.0.18",
|
|
88
|
+
"@vitest/browser-playwright": "^4.0.18",
|
|
89
|
+
"@vitest/coverage-v8": "^4.0.18",
|
|
90
|
+
"@webgpu/types": "^0.1.69",
|
|
71
91
|
"@xenova/transformers": "^2.17.2",
|
|
72
92
|
"happy-dom": "^20.6.1",
|
|
73
93
|
"jsdom": "^28.1.0",
|
|
94
|
+
"mermaid": "^11.12.3",
|
|
74
95
|
"playwright": "^1.58.2",
|
|
75
96
|
"sharp": "^0.34.5",
|
|
97
|
+
"storybook": "^10.2.10",
|
|
76
98
|
"tailwindcss": "^4.2.0",
|
|
77
99
|
"tsx": "^4.21.0",
|
|
78
100
|
"typescript": "^5.9.3",
|
|
79
101
|
"vite": "^7.3.1",
|
|
102
|
+
"vitepress": "^1.6.4",
|
|
103
|
+
"vitepress-plugin-mermaid": "^2.0.17",
|
|
80
104
|
"vitest": "^4.0.18"
|
|
81
105
|
},
|
|
82
106
|
"dependencies": {
|
|
83
107
|
"class-variance-authority": "^0.7.1",
|
|
84
108
|
"clsx": "^2.1.1",
|
|
109
|
+
"jszip": "^3.10.1",
|
|
85
110
|
"lucide-react": "^0.574.0",
|
|
111
|
+
"onnxruntime-web": "^1.24.2",
|
|
86
112
|
"react": "^19.2.4",
|
|
87
113
|
"react-dom": "^19.2.4",
|
|
88
114
|
"tailwind-merge": "^3.5.0",
|
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Parallax Renderer — GPU-accelerated depth-aware video parallax.
|
|
3
|
-
*
|
|
4
|
-
* Renders a single fullscreen quad textured with the source video
|
|
5
|
-
* and a precomputed depth map using pure WebGL 2. A custom fragment
|
|
6
|
-
* shader displaces UV coordinates per-pixel based on the depth value
|
|
7
|
-
* and current mouse/gyro input, creating a continuous parallax effect
|
|
8
|
-
* with no discrete layer banding.
|
|
9
|
-
*
|
|
10
|
-
* ## Rendering pipeline (per frame)
|
|
11
|
-
*
|
|
12
|
-
* 1. The video element's current frame is uploaded to the GPU via
|
|
13
|
-
* `gl.texImage2D`, providing the color frame at native resolution.
|
|
14
|
-
*
|
|
15
|
-
* 2. The depth interpolator produces a Uint8Array for the current
|
|
16
|
-
* playback time (interpolated between precomputed 5fps keyframes,
|
|
17
|
-
* bilateral-filtered on the CPU, then quantized to 0-255).
|
|
18
|
-
* This is copied into a single-channel R8 texture on the GPU.
|
|
19
|
-
*
|
|
20
|
-
* 3. The InputHandler provides a smoothed {x, y} offset in [-1, 1].
|
|
21
|
-
* This is passed to the shader as the uOffset uniform.
|
|
22
|
-
*
|
|
23
|
-
* 4. The fragment shader samples the depth map at each pixel's UV,
|
|
24
|
-
* computes a UV displacement proportional to (1 - depth) * strength,
|
|
25
|
-
* and samples the video texture at the displaced coordinates.
|
|
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).
|
|
31
|
-
*
|
|
32
|
-
* ## Texture memory
|
|
33
|
-
*
|
|
34
|
-
* Only 2 textures per frame: 1 video texture (uploaded from HTMLVideoElement)
|
|
35
|
-
* + 1 depth texture (R8 format, uploaded only when depth changes at ~5fps).
|
|
36
|
-
*/
|
|
37
|
-
import type { ParallaxInput } from './input-handler';
|
|
38
|
-
/** Configuration subset relevant to the parallax renderer. */
|
|
39
|
-
export interface ParallaxRendererConfig {
|
|
40
|
-
parallaxStrength: number;
|
|
41
|
-
pomEnabled: boolean;
|
|
42
|
-
pomSteps: number;
|
|
43
|
-
overscanPadding: number;
|
|
44
|
-
/**
|
|
45
|
-
* Depth-adaptive shader parameters.
|
|
46
|
-
* When omitted, calibrated defaults matching the current hardcoded values
|
|
47
|
-
* are used. When provided, the explicit value overrides the derived value.
|
|
48
|
-
*/
|
|
49
|
-
contrastLow?: number;
|
|
50
|
-
contrastHigh?: number;
|
|
51
|
-
verticalReduction?: number;
|
|
52
|
-
dofStart?: number;
|
|
53
|
-
dofStrength?: number;
|
|
54
|
-
}
|
|
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
|
-
private gl;
|
|
62
|
-
private program;
|
|
63
|
-
private uniforms;
|
|
64
|
-
private vao;
|
|
65
|
-
private videoTexture;
|
|
66
|
-
private depthTexture;
|
|
67
|
-
private readonly container;
|
|
68
|
-
private depthWidth;
|
|
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;
|
|
88
|
-
/** Resolved config with all optional shader params filled from defaults. */
|
|
89
|
-
private readonly config;
|
|
90
|
-
/**
|
|
91
|
-
* Create the renderer and attach its canvas to the DOM.
|
|
92
|
-
*
|
|
93
|
-
* @param parent - The container element that the WebGL canvas is
|
|
94
|
-
* appended to. The renderer sizes itself to fill this element.
|
|
95
|
-
* @param config - Parallax-specific settings (strength, POM, overscan).
|
|
96
|
-
* Optional shader parameters are merged with calibrated defaults.
|
|
97
|
-
*/
|
|
98
|
-
constructor(parent: HTMLElement, config: ParallaxRendererConfig);
|
|
99
|
-
/**
|
|
100
|
-
* Set up the scene: create video texture, depth texture, and set
|
|
101
|
-
* static shader uniforms.
|
|
102
|
-
*
|
|
103
|
-
* Call this once after the video element and depth data are loaded.
|
|
104
|
-
*
|
|
105
|
-
* @param video - The <video> element to sample color frames from.
|
|
106
|
-
* Must already have metadata loaded (videoWidth/videoHeight set).
|
|
107
|
-
* @param depthWidth - Width of the precomputed depth map (e.g. 512).
|
|
108
|
-
* @param depthHeight - Height of the precomputed depth map (e.g. 512).
|
|
109
|
-
*/
|
|
110
|
-
initialize(video: HTMLVideoElement, depthWidth: number, depthHeight: number): void;
|
|
111
|
-
/**
|
|
112
|
-
* Begin the render loop.
|
|
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.
|
|
117
|
-
*
|
|
118
|
-
* When RVFC is not available, falls back to a single RAF loop that
|
|
119
|
-
* does everything (the pre-RVFC behavior).
|
|
120
|
-
*/
|
|
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
|
-
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
|
-
/**
|
|
138
|
-
* Main render loop — called every animation frame at display refresh rate.
|
|
139
|
-
*
|
|
140
|
-
* When RVFC is active, this only handles:
|
|
141
|
-
* 1. Uploading the current video frame to the GPU texture.
|
|
142
|
-
* 2. Updating the parallax offset uniform from input (buttery smooth).
|
|
143
|
-
* 3. Rendering the fullscreen quad (single draw call).
|
|
144
|
-
*
|
|
145
|
-
* When RVFC is NOT supported, this falls back to the original behavior:
|
|
146
|
-
* depth update + input update + render all in a single RAF tick.
|
|
147
|
-
*/
|
|
148
|
-
private readonly renderLoop;
|
|
149
|
-
/** Upload fresh depth data to the GPU texture. */
|
|
150
|
-
private updateDepthTexture;
|
|
151
|
-
/**
|
|
152
|
-
* Set up a ResizeObserver on the container element and a fallback
|
|
153
|
-
* window resize listener.
|
|
154
|
-
*/
|
|
155
|
-
private setupResizeHandling;
|
|
156
|
-
/** Debounce resize events to avoid expensive layout recalculations. */
|
|
157
|
-
private readonly scheduleResizeRecalculate;
|
|
158
|
-
/**
|
|
159
|
-
* Recalculate the WebGL canvas size and UV transform to match the
|
|
160
|
-
* current container dimensions.
|
|
161
|
-
*
|
|
162
|
-
* Cover-fit + overscan is expressed as a UV-space transform (offset + scale)
|
|
163
|
-
* rather than geometry resize. The fullscreen quad stays fixed at -1 to 1.
|
|
164
|
-
*/
|
|
165
|
-
private recalculateViewportLayout;
|
|
166
|
-
/** Read the container's pixel dimensions, with a minimum of 1x1. */
|
|
167
|
-
private getViewportSize;
|
|
168
|
-
private readonly handleContextLost;
|
|
169
|
-
private readonly handleContextRestored;
|
|
170
|
-
/** Dispose textures only. */
|
|
171
|
-
private disposeTextures;
|
|
172
|
-
/** Dispose the shader program and VAO. */
|
|
173
|
-
private disposeGPUResources;
|
|
174
|
-
}
|
|
175
|
-
//# sourceMappingURL=parallax-renderer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"parallax-renderer.d.ts","sourceRoot":"","sources":["../../src/parallax-renderer.ts"],"names":[],"mappings":"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"}
|