layershift 0.5.0 → 0.6.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 +30 -9
- package/dist/components/layershift.js +88 -46
- package/dist/npm/layershift.es.js +1151 -990
- package/dist/types/components/layershift/global.d.ts +3 -1
- package/dist/types/components/layershift/index.d.ts +2 -2
- package/dist/types/components/layershift/index.d.ts.map +1 -1
- package/dist/types/components/layershift/layershift-element.d.ts +1 -2
- package/dist/types/components/layershift/layershift-element.d.ts.map +1 -1
- package/dist/types/components/layershift/lifecycle.d.ts +1 -1
- package/dist/types/components/layershift/portal-element.d.ts +1 -2
- package/dist/types/components/layershift/portal-element.d.ts.map +1 -1
- package/dist/types/components/layershift/types.d.ts +8 -4
- package/dist/types/components/layershift/types.d.ts.map +1 -1
- package/dist/types/depth/depth-analysis.d.ts.map +1 -0
- package/dist/types/{depth-estimator.d.ts → depth/depth-estimator.d.ts} +4 -15
- package/dist/types/depth/depth-estimator.d.ts.map +1 -0
- package/dist/types/depth/depth-preprocess.d.ts +26 -0
- package/dist/types/depth/depth-preprocess.d.ts.map +1 -0
- package/dist/types/{precomputed-depth.d.ts → depth/precomputed-depth.d.ts} +4 -8
- package/dist/types/depth/precomputed-depth.d.ts.map +1 -0
- package/dist/types/depth/workers/preprocess-worker.d.ts +36 -0
- package/dist/types/depth/workers/preprocess-worker.d.ts.map +1 -0
- package/dist/types/{quality.d.ts → gpu/quality.d.ts} +4 -4
- package/dist/types/gpu/quality.d.ts.map +1 -0
- package/dist/types/gpu/webgl-utils.d.ts.map +1 -0
- package/dist/types/media/input-handler.d.ts.map +1 -0
- package/dist/types/media/input-helpers.d.ts.map +1 -0
- package/dist/types/media/media-source.d.ts.map +1 -0
- package/dist/types/{depth-effect-renderer.d.ts → renderers/depth-effect-renderer.d.ts} +21 -4
- package/dist/types/renderers/depth-effect-renderer.d.ts.map +1 -0
- package/dist/types/renderers/jfa-distance-field.d.ts.map +1 -0
- package/dist/types/{portal-renderer.d.ts → renderers/portal-renderer.d.ts} +4 -3
- package/dist/types/renderers/portal-renderer.d.ts.map +1 -0
- package/dist/types/renderers/render-pass.d.ts.map +1 -0
- package/dist/types/{renderer-base.d.ts → renderers/renderer-base.d.ts} +3 -3
- package/dist/types/renderers/renderer-base.d.ts.map +1 -0
- package/dist/types/renderers/shape-generator.d.ts.map +1 -0
- package/dist/types/shared/filter-config.d.ts +0 -1
- package/dist/types/shared/filter-config.d.ts.map +1 -1
- package/package.json +18 -5
- package/dist/types/depth-analysis.d.ts.map +0 -1
- package/dist/types/depth-effect-renderer.d.ts.map +0 -1
- package/dist/types/depth-estimator.d.ts.map +0 -1
- package/dist/types/input-handler.d.ts.map +0 -1
- package/dist/types/input-helpers.d.ts.map +0 -1
- package/dist/types/jfa-distance-field.d.ts.map +0 -1
- package/dist/types/media-source.d.ts.map +0 -1
- package/dist/types/portal-renderer.d.ts.map +0 -1
- package/dist/types/precomputed-depth.d.ts.map +0 -1
- package/dist/types/quality.d.ts.map +0 -1
- package/dist/types/render-pass.d.ts.map +0 -1
- package/dist/types/renderer-base.d.ts.map +0 -1
- package/dist/types/shape-generator.d.ts.map +0 -1
- package/dist/types/video-source.d.ts +0 -22
- package/dist/types/video-source.d.ts.map +0 -1
- package/dist/types/webgl-utils.d.ts.map +0 -1
- /package/dist/types/{depth-analysis.d.ts → depth/depth-analysis.d.ts} +0 -0
- /package/dist/types/{webgl-utils.d.ts → gpu/webgl-utils.d.ts} +0 -0
- /package/dist/types/{input-handler.d.ts → media/input-handler.d.ts} +0 -0
- /package/dist/types/{input-helpers.d.ts → media/input-helpers.d.ts} +0 -0
- /package/dist/types/{media-source.d.ts → media/media-source.d.ts} +0 -0
- /package/dist/types/{jfa-distance-field.d.ts → renderers/jfa-distance-field.d.ts} +0 -0
- /package/dist/types/{render-pass.d.ts → renderers/render-pass.d.ts} +0 -0
- /package/dist/types/{shape-generator.d.ts → renderers/shape-generator.d.ts} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
class
|
|
1
|
+
class Vt {
|
|
2
2
|
constructor(t) {
|
|
3
3
|
this.depthData = t;
|
|
4
|
-
const e = t.
|
|
4
|
+
const e = t.width * t.height;
|
|
5
5
|
this.uint8Output = new Uint8Array(e);
|
|
6
6
|
}
|
|
7
7
|
uint8Output;
|
|
@@ -10,38 +10,22 @@ class Bt {
|
|
|
10
10
|
lastNextFrameIndex = -1;
|
|
11
11
|
lastLerpFactor = -1;
|
|
12
12
|
sample(t) {
|
|
13
|
-
const e =
|
|
14
|
-
if (!
|
|
13
|
+
const e = ne(t * this.depthData.fps, 0, this.depthData.frameCount - 1), n = Math.floor(e), i = Math.min(n + 1, this.depthData.frameCount - 1), r = e - n, o = n !== this.lastFrameIndex || i !== this.lastNextFrameIndex, l = Math.abs(r - this.lastLerpFactor) > 1e-3;
|
|
14
|
+
if (!o && !l)
|
|
15
15
|
return this.uint8Output;
|
|
16
16
|
this.lastFrameIndex = n, this.lastNextFrameIndex = i, this.lastLerpFactor = r;
|
|
17
|
-
const
|
|
17
|
+
const a = 1 - r, h = this.depthData.frames[n], c = this.depthData.frames[i];
|
|
18
18
|
for (let f = 0; f < this.uint8Output.length; f += 1)
|
|
19
|
-
this.uint8Output[f] =
|
|
19
|
+
this.uint8Output[f] = h[f] * a + c[f] * r + 0.5 | 0;
|
|
20
20
|
return this.uint8Output;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
async function
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
te(o)
|
|
27
|
-
]);
|
|
28
|
-
return ee(i, n);
|
|
23
|
+
async function kt(s, t = 512, e = 512, n = 5, i) {
|
|
24
|
+
const r = await te(s);
|
|
25
|
+
return ee(r, t, e, n);
|
|
29
26
|
}
|
|
30
|
-
async function
|
|
31
|
-
const
|
|
32
|
-
if (!t.ok)
|
|
33
|
-
throw new Error(`Failed to fetch depth metadata (${t.status} ${t.statusText}).`);
|
|
34
|
-
const e = await t.json();
|
|
35
|
-
return ne(e), {
|
|
36
|
-
frameCount: e.frameCount,
|
|
37
|
-
fps: e.fps,
|
|
38
|
-
width: e.width,
|
|
39
|
-
height: e.height,
|
|
40
|
-
sourceFps: e.sourceFps
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
async function te(o, t) {
|
|
44
|
-
const e = await fetch(o);
|
|
27
|
+
async function te(s, t) {
|
|
28
|
+
const e = await fetch(s);
|
|
45
29
|
if (!e.ok)
|
|
46
30
|
throw new Error(`Failed to fetch depth data (${e.status} ${e.statusText}).`);
|
|
47
31
|
e.headers.get("content-length");
|
|
@@ -50,55 +34,48 @@ async function te(o, t) {
|
|
|
50
34
|
return new Uint8Array(await e.arrayBuffer());
|
|
51
35
|
const i = [];
|
|
52
36
|
let r = 0;
|
|
53
|
-
const
|
|
37
|
+
const o = n.getReader();
|
|
54
38
|
for (; ; ) {
|
|
55
|
-
const { done:
|
|
56
|
-
if (
|
|
39
|
+
const { done: h, value: c } = await o.read();
|
|
40
|
+
if (h)
|
|
57
41
|
break;
|
|
58
|
-
|
|
42
|
+
c && (i.push(c), r += c.byteLength);
|
|
59
43
|
}
|
|
60
|
-
const
|
|
61
|
-
let
|
|
62
|
-
for (const
|
|
63
|
-
|
|
64
|
-
return
|
|
65
|
-
}
|
|
66
|
-
function ee(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (
|
|
71
|
-
throw new Error(
|
|
72
|
-
`Depth data byte length mismatch. Expected ${r} bytes, received ${o.byteLength}.`
|
|
73
|
-
);
|
|
74
|
-
if (n !== t.frameCount)
|
|
44
|
+
const l = new Uint8Array(r);
|
|
45
|
+
let a = 0;
|
|
46
|
+
for (const h of i)
|
|
47
|
+
l.set(h, a), a += h.byteLength;
|
|
48
|
+
return l;
|
|
49
|
+
}
|
|
50
|
+
function ee(s, t, e, n) {
|
|
51
|
+
const i = t * e;
|
|
52
|
+
if (i === 0)
|
|
53
|
+
throw new Error("Depth frame dimensions must be non-zero.");
|
|
54
|
+
if (s.byteLength % i !== 0)
|
|
75
55
|
throw new Error(
|
|
76
|
-
`Depth
|
|
56
|
+
`Depth data byte length (${s.byteLength}) is not evenly divisible by frame size (${i} = ${t}×${e}).`
|
|
77
57
|
);
|
|
78
|
-
const
|
|
79
|
-
for (let l = 0; l <
|
|
80
|
-
const
|
|
81
|
-
|
|
58
|
+
const r = s.byteLength / i, o = new Array(r);
|
|
59
|
+
for (let l = 0; l < r; l += 1) {
|
|
60
|
+
const a = l * i;
|
|
61
|
+
o[l] = s.subarray(a, a + i);
|
|
82
62
|
}
|
|
83
|
-
return {
|
|
84
|
-
}
|
|
85
|
-
function ne(o) {
|
|
86
|
-
if (!o || typeof o.frameCount != "number" || typeof o.fps != "number" || typeof o.width != "number" || typeof o.height != "number" || typeof o.sourceFps != "number")
|
|
87
|
-
throw new Error("Depth metadata is malformed.");
|
|
88
|
-
if (!Number.isFinite(o.frameCount) || !Number.isFinite(o.fps) || !Number.isFinite(o.width) || !Number.isFinite(o.height) || !Number.isFinite(o.sourceFps) || o.frameCount <= 0 || o.fps <= 0 || o.width <= 0 || o.height <= 0 || o.sourceFps <= 0)
|
|
89
|
-
throw new Error("Depth metadata contains invalid numeric values.");
|
|
63
|
+
return { width: t, height: e, fps: n, frameCount: r, frames: o };
|
|
90
64
|
}
|
|
91
|
-
function
|
|
92
|
-
const e = new Uint8Array(
|
|
65
|
+
function X(s, t) {
|
|
66
|
+
const e = new Uint8Array(s * t);
|
|
93
67
|
return e.fill(128), {
|
|
94
|
-
|
|
68
|
+
width: s,
|
|
69
|
+
height: t,
|
|
70
|
+
fps: 1,
|
|
71
|
+
frameCount: 1,
|
|
95
72
|
frames: [e]
|
|
96
73
|
};
|
|
97
74
|
}
|
|
98
|
-
function
|
|
99
|
-
return Math.min(e, Math.max(t,
|
|
75
|
+
function ne(s, t, e) {
|
|
76
|
+
return Math.min(e, Math.max(t, s));
|
|
100
77
|
}
|
|
101
|
-
const
|
|
78
|
+
const ie = {
|
|
102
79
|
parallaxStrength: 0.05,
|
|
103
80
|
contrastLow: 0.05,
|
|
104
81
|
contrastHigh: 0.95,
|
|
@@ -108,29 +85,29 @@ const re = {
|
|
|
108
85
|
pomSteps: 16,
|
|
109
86
|
overscanPadding: 0.08
|
|
110
87
|
};
|
|
111
|
-
function
|
|
88
|
+
function re(s, t, e) {
|
|
112
89
|
const n = new Float32Array(256);
|
|
113
|
-
if (
|
|
90
|
+
if (s.length === 0 || t <= 0 || e <= 0)
|
|
114
91
|
return Pt(n);
|
|
115
|
-
const i =
|
|
116
|
-
let
|
|
117
|
-
const
|
|
92
|
+
const i = oe(s.length), r = t * e;
|
|
93
|
+
let o = 0;
|
|
94
|
+
const l = new Uint32Array(256);
|
|
118
95
|
for (const m of i) {
|
|
119
|
-
const T =
|
|
96
|
+
const T = s[m], w = Math.min(T.length, r);
|
|
120
97
|
for (let A = 0; A < w; A += 1)
|
|
121
|
-
|
|
122
|
-
|
|
98
|
+
l[T[A]] += 1;
|
|
99
|
+
o += w;
|
|
123
100
|
}
|
|
124
|
-
if (
|
|
101
|
+
if (o === 0)
|
|
125
102
|
return Pt(n);
|
|
126
|
-
const
|
|
103
|
+
const a = 1 / o;
|
|
127
104
|
for (let m = 0; m < 256; m += 1)
|
|
128
|
-
n[m] =
|
|
129
|
-
const
|
|
130
|
-
|
|
105
|
+
n[m] = l[m] * a;
|
|
106
|
+
const h = new Float32Array(256);
|
|
107
|
+
h[0] = n[0];
|
|
131
108
|
for (let m = 1; m < 256; m += 1)
|
|
132
|
-
|
|
133
|
-
const
|
|
109
|
+
h[m] = h[m - 1] + n[m];
|
|
110
|
+
const c = nt(h, 0.05), f = nt(h, 0.25), u = nt(h, 0.5), x = nt(h, 0.75), p = nt(h, 0.95);
|
|
134
111
|
let d = 0;
|
|
135
112
|
for (let m = 0; m < 256; m += 1)
|
|
136
113
|
d += m / 255 * n[m];
|
|
@@ -139,92 +116,92 @@ function oe(o, t, e) {
|
|
|
139
116
|
const T = m / 255 - d;
|
|
140
117
|
y += n[m] * T * T;
|
|
141
118
|
}
|
|
142
|
-
const
|
|
119
|
+
const b = Math.sqrt(y), E = p - c, g = x - f, v = ae(n);
|
|
143
120
|
return {
|
|
144
121
|
mean: d,
|
|
145
|
-
stdDev:
|
|
146
|
-
p5:
|
|
122
|
+
stdDev: b,
|
|
123
|
+
p5: c,
|
|
147
124
|
p25: f,
|
|
148
|
-
median:
|
|
125
|
+
median: u,
|
|
149
126
|
p75: x,
|
|
150
|
-
p95:
|
|
151
|
-
effectiveRange:
|
|
152
|
-
iqr:
|
|
127
|
+
p95: p,
|
|
128
|
+
effectiveRange: E,
|
|
129
|
+
iqr: g,
|
|
153
130
|
bimodality: v,
|
|
154
131
|
histogram: n
|
|
155
132
|
};
|
|
156
133
|
}
|
|
157
|
-
function se(
|
|
158
|
-
if (
|
|
159
|
-
return { ...
|
|
160
|
-
const t =
|
|
134
|
+
function se(s) {
|
|
135
|
+
if (s.effectiveRange < 0.05 || s.stdDev < 0.02)
|
|
136
|
+
return { ...ie };
|
|
137
|
+
const t = s.effectiveRange - 0.5, e = s.bimodality - 0.4, n = H(
|
|
161
138
|
0.05 - t * 0.03 + e * 0.01,
|
|
162
139
|
0.035,
|
|
163
140
|
0.065
|
|
164
|
-
), i =
|
|
141
|
+
), i = H(s.p5 - 0.03, 0, 0.25), r = H(s.p95 + 0.03, 0.75, 1), o = H((n - 0.03) / 0.05, 0, 1), l = H(0.6 - o * 0.25, 0.35, 0.6), a = H(0.6 - t * 0.2, 0.5, 0.7), h = H(0.4 + t * 0.2, 0.25, 0.5), c = 16, f = H(n + 0.03, 0.06, 0.1);
|
|
165
142
|
return {
|
|
166
143
|
parallaxStrength: n,
|
|
167
144
|
contrastLow: i,
|
|
168
145
|
contrastHigh: r,
|
|
169
|
-
verticalReduction:
|
|
170
|
-
dofStart:
|
|
171
|
-
dofStrength:
|
|
172
|
-
pomSteps:
|
|
146
|
+
verticalReduction: l,
|
|
147
|
+
dofStart: a,
|
|
148
|
+
dofStrength: h,
|
|
149
|
+
pomSteps: c,
|
|
173
150
|
overscanPadding: f
|
|
174
151
|
};
|
|
175
152
|
}
|
|
176
|
-
function
|
|
177
|
-
if (
|
|
178
|
-
if (
|
|
179
|
-
const t =
|
|
153
|
+
function oe(s) {
|
|
154
|
+
if (s <= 0) return [];
|
|
155
|
+
if (s === 1) return [0];
|
|
156
|
+
const t = s - 1, e = [
|
|
180
157
|
0,
|
|
181
|
-
Math.floor(
|
|
182
|
-
Math.floor(
|
|
183
|
-
Math.floor(3 *
|
|
158
|
+
Math.floor(s / 4),
|
|
159
|
+
Math.floor(s / 2),
|
|
160
|
+
Math.floor(3 * s / 4),
|
|
184
161
|
t
|
|
185
162
|
], n = /* @__PURE__ */ new Set(), i = [];
|
|
186
163
|
for (const r of e)
|
|
187
164
|
n.has(r) || (n.add(r), i.push(r));
|
|
188
165
|
return i;
|
|
189
166
|
}
|
|
190
|
-
function
|
|
167
|
+
function nt(s, t) {
|
|
191
168
|
for (let e = 0; e < 256; e += 1)
|
|
192
|
-
if (
|
|
169
|
+
if (s[e] >= t)
|
|
193
170
|
return e / 255;
|
|
194
171
|
return 1;
|
|
195
172
|
}
|
|
196
|
-
function
|
|
173
|
+
function ae(s) {
|
|
197
174
|
const t = new Float32Array(256);
|
|
198
|
-
for (let
|
|
199
|
-
let x = 0,
|
|
200
|
-
for (let d =
|
|
201
|
-
d >= 0 && d < 256 && (x +=
|
|
202
|
-
t[
|
|
175
|
+
for (let u = 0; u < 256; u += 1) {
|
|
176
|
+
let x = 0, p = 0;
|
|
177
|
+
for (let d = u - 2; d <= u + 2; d += 1)
|
|
178
|
+
d >= 0 && d < 256 && (x += s[d], p += 1);
|
|
179
|
+
t[u] = x / p;
|
|
203
180
|
}
|
|
204
181
|
let e = 0;
|
|
205
|
-
for (let
|
|
206
|
-
e += t[
|
|
182
|
+
for (let u = 0; u < 256; u += 1)
|
|
183
|
+
e += t[u];
|
|
207
184
|
e /= 256;
|
|
208
185
|
const n = e * 2, i = 25, r = [];
|
|
209
|
-
for (let
|
|
210
|
-
t[
|
|
211
|
-
if (t[0] > t[1] && t[0] >= n && r.push({ bin: 0, height: t[0] }), t[255] > t[254] && t[255] >= n && r.push({ bin: 255, height: t[255] }), r.sort((
|
|
212
|
-
const
|
|
213
|
-
let
|
|
214
|
-
for (let
|
|
215
|
-
if (Math.abs(r[
|
|
216
|
-
|
|
186
|
+
for (let u = 1; u < 255; u += 1)
|
|
187
|
+
t[u] > t[u - 1] && t[u] > t[u + 1] && t[u] >= n && r.push({ bin: u, height: t[u] });
|
|
188
|
+
if (t[0] > t[1] && t[0] >= n && r.push({ bin: 0, height: t[0] }), t[255] > t[254] && t[255] >= n && r.push({ bin: 255, height: t[255] }), r.sort((u, x) => x.height - u.height), r.length < 2) return 0;
|
|
189
|
+
const o = r[0];
|
|
190
|
+
let l = null;
|
|
191
|
+
for (let u = 1; u < r.length; u += 1)
|
|
192
|
+
if (Math.abs(r[u].bin - o.bin) >= i) {
|
|
193
|
+
l = r[u];
|
|
217
194
|
break;
|
|
218
195
|
}
|
|
219
|
-
if (!
|
|
220
|
-
const
|
|
221
|
-
let
|
|
222
|
-
for (let
|
|
223
|
-
t[
|
|
224
|
-
const f = Math.min(
|
|
225
|
-
return f <= 0 ? 0 :
|
|
226
|
-
}
|
|
227
|
-
function Pt(
|
|
196
|
+
if (!l) return 0;
|
|
197
|
+
const a = Math.min(o.bin, l.bin), h = Math.max(o.bin, l.bin);
|
|
198
|
+
let c = 1 / 0;
|
|
199
|
+
for (let u = a; u <= h; u += 1)
|
|
200
|
+
t[u] < c && (c = t[u]);
|
|
201
|
+
const f = Math.min(o.height, l.height);
|
|
202
|
+
return f <= 0 ? 0 : H(1 - c / f, 0, 1);
|
|
203
|
+
}
|
|
204
|
+
function Pt(s) {
|
|
228
205
|
return {
|
|
229
206
|
mean: 0,
|
|
230
207
|
stdDev: 0,
|
|
@@ -236,39 +213,39 @@ function Pt(o) {
|
|
|
236
213
|
effectiveRange: 0,
|
|
237
214
|
iqr: 0,
|
|
238
215
|
bimodality: 0,
|
|
239
|
-
histogram:
|
|
216
|
+
histogram: s
|
|
240
217
|
};
|
|
241
218
|
}
|
|
242
|
-
function
|
|
243
|
-
return Math.min(e, Math.max(t,
|
|
219
|
+
function H(s, t, e) {
|
|
220
|
+
return Math.min(e, Math.max(t, s));
|
|
244
221
|
}
|
|
245
|
-
function
|
|
246
|
-
const n =
|
|
222
|
+
function G(s, t, e) {
|
|
223
|
+
const n = s.createShader(t);
|
|
247
224
|
if (!n) throw new Error("Failed to create shader.");
|
|
248
|
-
if (
|
|
249
|
-
const i =
|
|
250
|
-
throw
|
|
225
|
+
if (s.shaderSource(n, e), s.compileShader(n), !s.getShaderParameter(n, s.COMPILE_STATUS)) {
|
|
226
|
+
const i = s.getShaderInfoLog(n) ?? "";
|
|
227
|
+
throw s.deleteShader(n), new Error(`Shader compilation failed:
|
|
251
228
|
${i}`);
|
|
252
229
|
}
|
|
253
230
|
return n;
|
|
254
231
|
}
|
|
255
|
-
function
|
|
256
|
-
const n =
|
|
232
|
+
function mt(s, t, e) {
|
|
233
|
+
const n = s.createProgram();
|
|
257
234
|
if (!n) throw new Error("Failed to create program.");
|
|
258
|
-
if (
|
|
259
|
-
const i =
|
|
260
|
-
throw
|
|
235
|
+
if (s.attachShader(n, t), s.attachShader(n, e), s.linkProgram(n), !s.getProgramParameter(n, s.LINK_STATUS)) {
|
|
236
|
+
const i = s.getProgramInfoLog(n) ?? "";
|
|
237
|
+
throw s.deleteProgram(n), new Error(`Program linking failed:
|
|
261
238
|
${i}`);
|
|
262
239
|
}
|
|
263
|
-
return
|
|
240
|
+
return s.detachShader(n, t), s.detachShader(n, e), s.deleteShader(t), s.deleteShader(e), n;
|
|
264
241
|
}
|
|
265
|
-
function
|
|
242
|
+
function pt(s, t, e) {
|
|
266
243
|
const n = {};
|
|
267
244
|
for (const i of e)
|
|
268
|
-
n[i] =
|
|
245
|
+
n[i] = s.getUniformLocation(t, i);
|
|
269
246
|
return n;
|
|
270
247
|
}
|
|
271
|
-
const
|
|
248
|
+
const le = new Float32Array([
|
|
272
249
|
-1,
|
|
273
250
|
-1,
|
|
274
251
|
1,
|
|
@@ -278,16 +255,16 @@ const ue = new Float32Array([
|
|
|
278
255
|
1,
|
|
279
256
|
1
|
|
280
257
|
]);
|
|
281
|
-
function Ot(
|
|
282
|
-
const e =
|
|
258
|
+
function Ot(s, t) {
|
|
259
|
+
const e = s.createVertexArray();
|
|
283
260
|
if (!e) throw new Error("Failed to create VAO.");
|
|
284
|
-
|
|
285
|
-
const n =
|
|
286
|
-
|
|
287
|
-
const i =
|
|
288
|
-
return
|
|
261
|
+
s.bindVertexArray(e);
|
|
262
|
+
const n = s.createBuffer();
|
|
263
|
+
s.bindBuffer(s.ARRAY_BUFFER, n), s.bufferData(s.ARRAY_BUFFER, le, s.STATIC_DRAW);
|
|
264
|
+
const i = s.getAttribLocation(t, "aPosition");
|
|
265
|
+
return s.enableVertexAttribArray(i), s.vertexAttribPointer(i, 2, s.FLOAT, !1, 0, 0), s.bindVertexArray(null), e;
|
|
289
266
|
}
|
|
290
|
-
class
|
|
267
|
+
class Ht {
|
|
291
268
|
slots = /* @__PURE__ */ new Map();
|
|
292
269
|
nextUnit = 0;
|
|
293
270
|
/**
|
|
@@ -323,18 +300,56 @@ class kt {
|
|
|
323
300
|
return this.slots.size;
|
|
324
301
|
}
|
|
325
302
|
}
|
|
326
|
-
function
|
|
327
|
-
const r =
|
|
303
|
+
function O(s, t, e, n, i) {
|
|
304
|
+
const r = G(s, s.VERTEX_SHADER, e), o = G(s, s.FRAGMENT_SHADER, n), l = mt(s, r, o), a = pt(s, l, i);
|
|
328
305
|
return {
|
|
306
|
+
name: t,
|
|
307
|
+
program: l,
|
|
308
|
+
uniforms: a,
|
|
309
|
+
dispose(h) {
|
|
310
|
+
h.deleteProgram(l);
|
|
311
|
+
}
|
|
312
|
+
};
|
|
313
|
+
}
|
|
314
|
+
function Dt(s, t, e, n, i, r) {
|
|
315
|
+
const o = G(s, s.VERTEX_SHADER, e), l = G(s, s.FRAGMENT_SHADER, n), a = mt(s, o, l), h = pt(s, a, i), c = {
|
|
316
|
+
texture: null,
|
|
317
|
+
unit: r.textureUnit,
|
|
318
|
+
attachment: s.COLOR_ATTACHMENT0
|
|
319
|
+
}, f = {
|
|
329
320
|
name: t,
|
|
330
321
|
program: a,
|
|
331
|
-
uniforms:
|
|
332
|
-
|
|
333
|
-
|
|
322
|
+
uniforms: h,
|
|
323
|
+
fbo: null,
|
|
324
|
+
outputs: [c],
|
|
325
|
+
width: 0,
|
|
326
|
+
height: 0,
|
|
327
|
+
resize(u, x, p) {
|
|
328
|
+
f.fbo && u.deleteFramebuffer(f.fbo), c.texture && u.deleteTexture(c.texture), f.width = x, f.height = p, c.texture = u.createTexture(), u.activeTexture(u.TEXTURE0 + c.unit), u.bindTexture(u.TEXTURE_2D, c.texture), u.texParameteri(u.TEXTURE_2D, u.TEXTURE_MIN_FILTER, u.LINEAR), u.texParameteri(u.TEXTURE_2D, u.TEXTURE_MAG_FILTER, u.LINEAR), u.texParameteri(u.TEXTURE_2D, u.TEXTURE_WRAP_S, u.CLAMP_TO_EDGE), u.texParameteri(u.TEXTURE_2D, u.TEXTURE_WRAP_T, u.CLAMP_TO_EDGE), u.texImage2D(
|
|
329
|
+
u.TEXTURE_2D,
|
|
330
|
+
0,
|
|
331
|
+
r.internalFormat,
|
|
332
|
+
x,
|
|
333
|
+
p,
|
|
334
|
+
0,
|
|
335
|
+
r.format,
|
|
336
|
+
r.type,
|
|
337
|
+
null
|
|
338
|
+
), f.fbo = u.createFramebuffer(), u.bindFramebuffer(u.FRAMEBUFFER, f.fbo), u.framebufferTexture2D(
|
|
339
|
+
u.FRAMEBUFFER,
|
|
340
|
+
u.COLOR_ATTACHMENT0,
|
|
341
|
+
u.TEXTURE_2D,
|
|
342
|
+
c.texture,
|
|
343
|
+
0
|
|
344
|
+
), u.bindFramebuffer(u.FRAMEBUFFER, null);
|
|
345
|
+
},
|
|
346
|
+
dispose(u) {
|
|
347
|
+
f.fbo && (u.deleteFramebuffer(f.fbo), f.fbo = null), c.texture && (u.deleteTexture(c.texture), c.texture = null), u.deleteProgram(a);
|
|
334
348
|
}
|
|
335
349
|
};
|
|
350
|
+
return r.width > 0 && r.height > 0 && f.resize(s, r.width, r.height), f;
|
|
336
351
|
}
|
|
337
|
-
const
|
|
352
|
+
const ue = {
|
|
338
353
|
high: {
|
|
339
354
|
dprCap: 2,
|
|
340
355
|
depthMaxDim: 512,
|
|
@@ -344,8 +359,8 @@ const ce = {
|
|
|
344
359
|
},
|
|
345
360
|
medium: {
|
|
346
361
|
dprCap: 1.5,
|
|
347
|
-
depthMaxDim:
|
|
348
|
-
pomSteps:
|
|
362
|
+
depthMaxDim: 384,
|
|
363
|
+
pomSteps: 12,
|
|
349
364
|
bilateralRadius: 2,
|
|
350
365
|
jfaDivisor: 2
|
|
351
366
|
},
|
|
@@ -357,22 +372,22 @@ const ce = {
|
|
|
357
372
|
jfaDivisor: 4
|
|
358
373
|
}
|
|
359
374
|
};
|
|
360
|
-
function
|
|
375
|
+
function ce(s) {
|
|
361
376
|
let t = "unknown";
|
|
362
|
-
const e =
|
|
363
|
-
e && (t =
|
|
364
|
-
const n =
|
|
377
|
+
const e = s.getExtension("WEBGL_debug_renderer_info");
|
|
378
|
+
e && (t = s.getParameter(e.UNMASKED_RENDERER_WEBGL) || "unknown");
|
|
379
|
+
const n = s.getParameter(s.MAX_TEXTURE_SIZE), i = typeof navigator < "u" && navigator.hardwareConcurrency || 0, r = typeof navigator < "u" && navigator.deviceMemory || 0, o = typeof window < "u" && window.devicePixelRatio || 1, l = typeof screen < "u" ? (screen.width || 0) * (screen.height || 0) : 0, a = typeof navigator < "u" && ("ontouchstart" in window || navigator.maxTouchPoints > 0), h = l > 0 && l < 1920 * 1080;
|
|
365
380
|
return {
|
|
366
381
|
gpuRenderer: t,
|
|
367
382
|
maxTextureSize: n,
|
|
368
383
|
hardwareConcurrency: i,
|
|
369
384
|
deviceMemory: r,
|
|
370
|
-
devicePixelRatio:
|
|
371
|
-
screenPixels:
|
|
372
|
-
isMobile:
|
|
385
|
+
devicePixelRatio: o,
|
|
386
|
+
screenPixels: l,
|
|
387
|
+
isMobile: a && h
|
|
373
388
|
};
|
|
374
389
|
}
|
|
375
|
-
const
|
|
390
|
+
const he = [
|
|
376
391
|
"mali-4",
|
|
377
392
|
"mali-t",
|
|
378
393
|
"adreno 3",
|
|
@@ -385,7 +400,7 @@ const fe = [
|
|
|
385
400
|
"llvmpipe",
|
|
386
401
|
"swiftshader",
|
|
387
402
|
"software"
|
|
388
|
-
],
|
|
403
|
+
], fe = [
|
|
389
404
|
"nvidia",
|
|
390
405
|
"geforce",
|
|
391
406
|
"radeon rx",
|
|
@@ -397,16 +412,16 @@ const fe = [
|
|
|
397
412
|
"mali-g7",
|
|
398
413
|
"mali-g6"
|
|
399
414
|
];
|
|
400
|
-
function
|
|
415
|
+
function de(s) {
|
|
401
416
|
let t = 0;
|
|
402
|
-
const e =
|
|
403
|
-
return n && (t -= 30), i && (t += 20),
|
|
417
|
+
const e = s.gpuRenderer.toLowerCase(), n = he.some((r) => e.includes(r)), i = fe.some((r) => e.includes(r));
|
|
418
|
+
return n && (t -= 30), i && (t += 20), s.maxTextureSize >= 16384 ? t += 10 : s.maxTextureSize >= 8192 ? t += 5 : s.maxTextureSize <= 4096 && (t -= 15), s.hardwareConcurrency >= 8 ? t += 5 : s.hardwareConcurrency >= 4 ? t += 0 : s.hardwareConcurrency > 0 && s.hardwareConcurrency < 4 && (t -= 10), s.deviceMemory >= 8 ? t += 5 : s.deviceMemory >= 4 ? t += 0 : s.deviceMemory > 0 && s.deviceMemory < 4 && (t -= 15), s.isMobile && (t -= 10), t >= 0 ? "high" : t >= -25 ? "medium" : "low";
|
|
404
419
|
}
|
|
405
|
-
function Xt(
|
|
406
|
-
const e = t && t !== "auto" ? t :
|
|
407
|
-
return { tier: e, ...
|
|
420
|
+
function Xt(s, t) {
|
|
421
|
+
const e = t && t !== "auto" ? t : de(ce(s));
|
|
422
|
+
return { tier: e, ...ue[e] };
|
|
408
423
|
}
|
|
409
|
-
class
|
|
424
|
+
class gt {
|
|
410
425
|
static RESIZE_DEBOUNCE_MS = 100;
|
|
411
426
|
// ---- Canvas + container ----
|
|
412
427
|
canvas;
|
|
@@ -449,7 +464,7 @@ class mt {
|
|
|
449
464
|
/** Adaptive quality parameters. Set by subclass constructor after GL init. */
|
|
450
465
|
qualityParams;
|
|
451
466
|
constructor(t) {
|
|
452
|
-
this.container = t, this.canvas = document.createElement("canvas"), this.container.appendChild(this.canvas), this.canvas.addEventListener("webglcontextlost", this._handleContextLost), this.canvas.addEventListener("webglcontextrestored", this._handleContextRestored);
|
|
467
|
+
this.container = t, this.canvas = document.createElement("canvas"), this.canvas.style.display = "block", this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.container.appendChild(this.canvas), this.canvas.addEventListener("webglcontextlost", this._handleContextLost), this.canvas.addEventListener("webglcontextrestored", this._handleContextRestored);
|
|
453
468
|
}
|
|
454
469
|
/** The underlying canvas element. */
|
|
455
470
|
get canvasElement() {
|
|
@@ -531,7 +546,7 @@ class mt {
|
|
|
531
546
|
scheduleResizeRecalculate = () => {
|
|
532
547
|
this.resizeTimer !== null && window.clearTimeout(this.resizeTimer), this.resizeTimer = window.setTimeout(() => {
|
|
533
548
|
this.resizeTimer = null, this.recalculateViewportLayout();
|
|
534
|
-
},
|
|
549
|
+
}, gt.RESIZE_DEBOUNCE_MS);
|
|
535
550
|
};
|
|
536
551
|
/** Read the container's pixel dimensions, with a minimum of 1x1. */
|
|
537
552
|
getViewportSize() {
|
|
@@ -549,8 +564,8 @@ class mt {
|
|
|
549
564
|
this.sourceDepthWidth = t, this.sourceDepthHeight = e;
|
|
550
565
|
let i = t, r = e;
|
|
551
566
|
if (i > n || r > n) {
|
|
552
|
-
const
|
|
553
|
-
i = Math.max(1, Math.round(i *
|
|
567
|
+
const o = n / Math.max(i, r);
|
|
568
|
+
i = Math.max(1, Math.round(i * o)), r = Math.max(1, Math.round(r * o));
|
|
554
569
|
}
|
|
555
570
|
this.depthWidth = i, this.depthHeight = r, i !== t || r !== e ? this.depthSubsampleBuffer = new Uint8Array(i * r) : this.depthSubsampleBuffer = null;
|
|
556
571
|
}
|
|
@@ -563,11 +578,11 @@ class mt {
|
|
|
563
578
|
subsampleDepth(t) {
|
|
564
579
|
if (!this.depthSubsampleBuffer) return t;
|
|
565
580
|
const e = this.depthSubsampleBuffer, n = this.sourceDepthWidth, i = this.depthWidth, r = this.depthHeight;
|
|
566
|
-
for (let
|
|
567
|
-
const
|
|
568
|
-
for (let
|
|
569
|
-
const f = Math.min(Math.round(
|
|
570
|
-
e[
|
|
581
|
+
for (let o = 0; o < r; o++) {
|
|
582
|
+
const a = Math.min(Math.round(o * this.sourceDepthHeight / r), this.sourceDepthHeight - 1) * n, h = o * i;
|
|
583
|
+
for (let c = 0; c < i; c++) {
|
|
584
|
+
const f = Math.min(Math.round(c * n / i), n - 1);
|
|
585
|
+
e[h + c] = t[a + f];
|
|
571
586
|
}
|
|
572
587
|
}
|
|
573
588
|
return e;
|
|
@@ -583,14 +598,14 @@ class mt {
|
|
|
583
598
|
* Updates `this.uvOffset` and `this.uvScale`.
|
|
584
599
|
*/
|
|
585
600
|
computeCoverFitUV(t, e) {
|
|
586
|
-
const { width: n, height: i } = this.getViewportSize(), r = n / i,
|
|
587
|
-
let
|
|
588
|
-
r > this.videoAspect ?
|
|
589
|
-
const
|
|
590
|
-
|
|
601
|
+
const { width: n, height: i } = this.getViewportSize(), r = n / i, o = t + e;
|
|
602
|
+
let l = 1, a = 1;
|
|
603
|
+
r > this.videoAspect ? a = this.videoAspect / r : l = r / this.videoAspect;
|
|
604
|
+
const h = 1 + o * 2;
|
|
605
|
+
l /= h, a /= h, this.uvOffset = [(1 - l) / 2, (1 - a) / 2], this.uvScale = [l, a], this.isCameraSource && (this.uvOffset[0] += this.uvScale[0], this.uvScale[0] = -this.uvScale[0]);
|
|
591
606
|
}
|
|
592
607
|
}
|
|
593
|
-
const
|
|
608
|
+
const me = `#version 300 es
|
|
594
609
|
in vec2 aPosition;
|
|
595
610
|
|
|
596
611
|
// UV coordinates for cover-fit + overscan.
|
|
@@ -611,7 +626,7 @@ void main() {
|
|
|
611
626
|
vScreenUv = baseUv;
|
|
612
627
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
613
628
|
}
|
|
614
|
-
`,
|
|
629
|
+
`, bt = `#version 300 es
|
|
615
630
|
in vec2 aPosition;
|
|
616
631
|
out vec2 vUv;
|
|
617
632
|
|
|
@@ -619,7 +634,7 @@ void main() {
|
|
|
619
634
|
vUv = aPosition * 0.5 + 0.5;
|
|
620
635
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
621
636
|
}
|
|
622
|
-
`,
|
|
637
|
+
`, pe = `#version 300 es
|
|
623
638
|
precision highp float;
|
|
624
639
|
|
|
625
640
|
// BILATERAL_RADIUS is injected as a #define at compile time.
|
|
@@ -657,7 +672,7 @@ void main() {
|
|
|
657
672
|
|
|
658
673
|
fragColor = vec4(totalDepth / totalWeight, 0.0, 0.0, 1.0);
|
|
659
674
|
}
|
|
660
|
-
`,
|
|
675
|
+
`, ge = `#version 300 es
|
|
661
676
|
precision highp float;
|
|
662
677
|
|
|
663
678
|
// ---- Uniforms ----
|
|
@@ -773,6 +788,9 @@ uniform float uGlowRadius;
|
|
|
773
788
|
/** Glow edge softness — controls blending of the glow mask. */
|
|
774
789
|
uniform float uGlowSoftness;
|
|
775
790
|
|
|
791
|
+
/** Pre-blurred glow mask from separable blur passes (R channel). */
|
|
792
|
+
uniform sampler2D uGlowBlurred;
|
|
793
|
+
|
|
776
794
|
/**
|
|
777
795
|
* Color-shift curve LUT — 256×1 R8 texture.
|
|
778
796
|
* Maps depth → color-shift intensity [0,1].
|
|
@@ -921,6 +939,8 @@ vec2 pomDisplace(vec2 uv) {
|
|
|
921
939
|
return mix(uv, hitUV, fade);
|
|
922
940
|
}
|
|
923
941
|
|
|
942
|
+
if (abs(currentLayerDepth - depthAtUV) < 0.001) break;
|
|
943
|
+
|
|
924
944
|
currentUV += deltaUV;
|
|
925
945
|
currentLayerDepth += layerDepth;
|
|
926
946
|
}
|
|
@@ -994,27 +1014,12 @@ void main() {
|
|
|
994
1014
|
}
|
|
995
1015
|
|
|
996
1016
|
// ---- Glow pass ----
|
|
997
|
-
//
|
|
998
|
-
//
|
|
999
|
-
// The glow is additive: it brightens pixels without replacing color.
|
|
1017
|
+
// Reads the pre-blurred glow mask (computed via separable blur at RVFC rate)
|
|
1018
|
+
// and the direct glow curve. Blending via softness controls sharp vs spread.
|
|
1000
1019
|
if (uGlowEnabled) {
|
|
1001
1020
|
float glowDepth = texture(uDepth, displaced).r;
|
|
1002
1021
|
float glowMask = texture(uGlowCurve, vec2(glowDepth, 0.5)).r;
|
|
1003
|
-
|
|
1004
|
-
// Spread glow to neighbors for a soft halo effect
|
|
1005
|
-
float spreadMask = 0.0;
|
|
1006
|
-
float spreadSamples = 0.0;
|
|
1007
|
-
for (int x = -3; x <= 3; x++) {
|
|
1008
|
-
for (int y = -3; y <= 3; y++) {
|
|
1009
|
-
vec2 sampleOffset = vec2(float(x), float(y)) * uImageTexelSize * uGlowRadius * 100.0;
|
|
1010
|
-
float d = texture(uDepth, displaced + sampleOffset).r;
|
|
1011
|
-
spreadMask += texture(uGlowCurve, vec2(d, 0.5)).r;
|
|
1012
|
-
spreadSamples += 1.0;
|
|
1013
|
-
}
|
|
1014
|
-
}
|
|
1015
|
-
spreadMask /= spreadSamples;
|
|
1016
|
-
|
|
1017
|
-
// Combine direct glow mask with spread, apply softness
|
|
1022
|
+
float spreadMask = texture(uGlowBlurred, displaced).r;
|
|
1018
1023
|
float finalGlow = mix(spreadMask * 0.5, glowMask, uGlowSoftness);
|
|
1019
1024
|
color.rgb += uGlowColor * finalGlow;
|
|
1020
1025
|
}
|
|
@@ -1054,6 +1059,57 @@ void main() {
|
|
|
1054
1059
|
|
|
1055
1060
|
fragColor = color;
|
|
1056
1061
|
}
|
|
1062
|
+
`, Ft = `#version 300 es
|
|
1063
|
+
precision highp float;
|
|
1064
|
+
|
|
1065
|
+
// Separable glow blur — 7-tap box filter.
|
|
1066
|
+
// Compile with #define PASS_HORIZONTAL for the H pass;
|
|
1067
|
+
// without it, runs as the vertical pass reading from the H result.
|
|
1068
|
+
|
|
1069
|
+
in vec2 vUv;
|
|
1070
|
+
out vec4 fragColor;
|
|
1071
|
+
|
|
1072
|
+
#ifdef PASS_HORIZONTAL
|
|
1073
|
+
/** Single-channel depth map (filtered, unit 1). */
|
|
1074
|
+
uniform sampler2D uDepth;
|
|
1075
|
+
|
|
1076
|
+
/** Glow curve LUT — maps depth → glow intensity (unit 5). */
|
|
1077
|
+
uniform sampler2D uGlowCurve;
|
|
1078
|
+
#else
|
|
1079
|
+
/** Horizontal pass output (unit 7). */
|
|
1080
|
+
uniform sampler2D uHorizResult;
|
|
1081
|
+
#endif
|
|
1082
|
+
|
|
1083
|
+
/** Texel size of the depth texture (1.0 / depthDimension). */
|
|
1084
|
+
uniform vec2 uTexelSize;
|
|
1085
|
+
|
|
1086
|
+
/** Glow spread radius multiplier. */
|
|
1087
|
+
uniform float uGlowRadius;
|
|
1088
|
+
|
|
1089
|
+
/** Blur direction: (1,0) for horizontal, (0,1) for vertical. */
|
|
1090
|
+
uniform vec2 uBlurDir;
|
|
1091
|
+
|
|
1092
|
+
void main() {
|
|
1093
|
+
float accum = 0.0;
|
|
1094
|
+
vec2 step = uBlurDir * uTexelSize * uGlowRadius * 100.0;
|
|
1095
|
+
|
|
1096
|
+
for (int i = -3; i <= 3; i++) {
|
|
1097
|
+
vec2 sampleUV = vUv + float(i) * step;
|
|
1098
|
+
sampleUV = clamp(sampleUV, vec2(0.0), vec2(1.0));
|
|
1099
|
+
|
|
1100
|
+
#ifdef PASS_HORIZONTAL
|
|
1101
|
+
// Sample depth → look up glow curve
|
|
1102
|
+
float d = texture(uDepth, sampleUV).r;
|
|
1103
|
+
accum += texture(uGlowCurve, vec2(d, 0.5)).r;
|
|
1104
|
+
#else
|
|
1105
|
+
// Sample the horizontal blur result
|
|
1106
|
+
accum += texture(uHorizResult, sampleUV).r;
|
|
1107
|
+
#endif
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1110
|
+
accum /= 7.0;
|
|
1111
|
+
fragColor = vec4(accum, 0.0, 0.0, 1.0);
|
|
1112
|
+
}
|
|
1057
1113
|
`, B = {
|
|
1058
1114
|
contrastLow: 0.05,
|
|
1059
1115
|
contrastHigh: 0.95,
|
|
@@ -1068,58 +1124,58 @@ void main() {
|
|
|
1068
1124
|
tiltHalfTanFov: Math.tan(50 * Math.PI / 360),
|
|
1069
1125
|
tiltTransitionWidth: 0.3 * 4.5,
|
|
1070
1126
|
tiltPeakIntensity: 0.8
|
|
1071
|
-
},
|
|
1127
|
+
}, ve = ["uRawDepth", "uTexelSize", "uSpatialSigma2"], xe = {
|
|
1072
1128
|
2: 2.25,
|
|
1073
1129
|
// 1.5²
|
|
1074
1130
|
1: 0.5625
|
|
1075
1131
|
// 0.75²
|
|
1076
1132
|
};
|
|
1077
|
-
function
|
|
1078
|
-
const e =
|
|
1133
|
+
function Te(s, t) {
|
|
1134
|
+
const e = pe.replace(
|
|
1079
1135
|
"#version 300 es",
|
|
1080
1136
|
`#version 300 es
|
|
1081
1137
|
#define BILATERAL_RADIUS ${t}`
|
|
1082
|
-
), n =
|
|
1083
|
-
let
|
|
1084
|
-
const
|
|
1138
|
+
), n = G(s, s.VERTEX_SHADER, bt), i = G(s, s.FRAGMENT_SHADER, e), r = mt(s, n, i), o = pt(s, r, ve), l = xe[t] ?? 2.25;
|
|
1139
|
+
let a = null;
|
|
1140
|
+
const h = {
|
|
1085
1141
|
name: "bilateral-filter",
|
|
1086
1142
|
program: r,
|
|
1087
|
-
uniforms:
|
|
1143
|
+
uniforms: o,
|
|
1088
1144
|
fbo: null,
|
|
1089
1145
|
outputs: [],
|
|
1090
1146
|
width: 0,
|
|
1091
1147
|
height: 0,
|
|
1092
|
-
resize(
|
|
1148
|
+
resize(c, f, u) {
|
|
1093
1149
|
},
|
|
1094
|
-
initFBO(
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1150
|
+
initFBO(c, f, u, x) {
|
|
1151
|
+
a && c.deleteFramebuffer(a), h.width = u, h.height = x, a = c.createFramebuffer(), h.fbo = a, c.bindFramebuffer(c.FRAMEBUFFER, a), c.framebufferTexture2D(
|
|
1152
|
+
c.FRAMEBUFFER,
|
|
1153
|
+
c.COLOR_ATTACHMENT0,
|
|
1154
|
+
c.TEXTURE_2D,
|
|
1099
1155
|
f,
|
|
1100
1156
|
0
|
|
1101
|
-
),
|
|
1157
|
+
), c.bindFramebuffer(c.FRAMEBUFFER, null), c.useProgram(r), c.uniform1i(o.uRawDepth, 2), c.uniform2f(o.uTexelSize, 1 / u, 1 / x), c.uniform1f(o.uSpatialSigma2, l);
|
|
1102
1158
|
},
|
|
1103
|
-
execute(
|
|
1104
|
-
|
|
1105
|
-
|
|
1159
|
+
execute(c, f, u, x, p, d, y, b) {
|
|
1160
|
+
a && (c.activeTexture(c.TEXTURE2), c.bindTexture(c.TEXTURE_2D, u), c.texSubImage2D(
|
|
1161
|
+
c.TEXTURE_2D,
|
|
1106
1162
|
0,
|
|
1107
1163
|
0,
|
|
1108
1164
|
0,
|
|
1109
|
-
|
|
1165
|
+
p,
|
|
1110
1166
|
d,
|
|
1111
|
-
|
|
1112
|
-
|
|
1167
|
+
c.RED,
|
|
1168
|
+
c.UNSIGNED_BYTE,
|
|
1113
1169
|
x
|
|
1114
|
-
),
|
|
1170
|
+
), c.bindFramebuffer(c.FRAMEBUFFER, a), c.viewport(0, 0, p, d), c.useProgram(r), c.bindVertexArray(f), c.drawArrays(c.TRIANGLE_STRIP, 0, 4), c.bindFramebuffer(c.FRAMEBUFFER, null), c.viewport(0, 0, y, b));
|
|
1115
1171
|
},
|
|
1116
|
-
dispose(
|
|
1117
|
-
|
|
1172
|
+
dispose(c) {
|
|
1173
|
+
a && (c.deleteFramebuffer(a), a = null, h.fbo = null), c.deleteProgram(r);
|
|
1118
1174
|
}
|
|
1119
1175
|
};
|
|
1120
|
-
return
|
|
1176
|
+
return h;
|
|
1121
1177
|
}
|
|
1122
|
-
const
|
|
1178
|
+
const Ee = [
|
|
1123
1179
|
"uImage",
|
|
1124
1180
|
"uDepth",
|
|
1125
1181
|
"uOffset",
|
|
@@ -1144,6 +1200,7 @@ const ye = [
|
|
|
1144
1200
|
"uGlowColor",
|
|
1145
1201
|
"uGlowRadius",
|
|
1146
1202
|
"uGlowSoftness",
|
|
1203
|
+
"uGlowBlurred",
|
|
1147
1204
|
"uColorShiftCurve",
|
|
1148
1205
|
"uColorShiftEnabled",
|
|
1149
1206
|
"uColorShiftHue",
|
|
@@ -1157,29 +1214,29 @@ const ye = [
|
|
|
1157
1214
|
"uTiltPeakIntensity",
|
|
1158
1215
|
"uTiltPlaneNormal",
|
|
1159
1216
|
"uTiltPlaneD"
|
|
1160
|
-
],
|
|
1161
|
-
function
|
|
1162
|
-
const t =
|
|
1217
|
+
], be = 64;
|
|
1218
|
+
function Se(s) {
|
|
1219
|
+
const t = ge.replace(
|
|
1163
1220
|
"#version 300 es",
|
|
1164
1221
|
`#version 300 es
|
|
1165
|
-
#define MAX_POM_STEPS ${
|
|
1166
|
-
), e =
|
|
1222
|
+
#define MAX_POM_STEPS ${be}`
|
|
1223
|
+
), e = G(s, s.VERTEX_SHADER, me), n = G(s, s.FRAGMENT_SHADER, t), i = mt(s, e, n), r = pt(s, i, Ee);
|
|
1167
1224
|
return {
|
|
1168
1225
|
name: "depth-effect",
|
|
1169
1226
|
program: i,
|
|
1170
1227
|
uniforms: r,
|
|
1171
|
-
setStaticUniforms(
|
|
1172
|
-
|
|
1228
|
+
setStaticUniforms(o, l, a, h) {
|
|
1229
|
+
o.useProgram(i), o.uniform1i(r.uImage, 0), o.uniform1i(r.uDepth, 1), o.uniform1f(r.uStrength, l.parallaxStrength), o.uniform1i(r.uPomEnabled, l.pomEnabled ? 1 : 0), o.uniform1i(r.uPomSteps, l.pomSteps), o.uniform1f(r.uContrastLow, l.contrastLow), o.uniform1f(r.uContrastHigh, l.contrastHigh), o.uniform1f(r.uVerticalReduction, l.verticalReduction), o.uniform1f(r.uDofStart, l.dofStart), o.uniform1f(r.uDofStrength, l.dofStrength), o.uniform2f(r.uImageTexelSize, 1 / a, 1 / h), o.uniform1i(r.uDisplacementCurve, 3), o.uniform1i(r.uBlurCurve, 4), o.uniform1i(r.uCurvesEnabled, 0), o.uniform1f(r.uBlurRadius, l.blurRadius), o.uniform1f(r.uFocalBandOffset, 0), o.uniform1i(r.uGlowCurve, 5), o.uniform1i(r.uGlowEnabled, 0), o.uniform3f(r.uGlowColor, l.glowColor[0], l.glowColor[1], l.glowColor[2]), o.uniform1f(r.uGlowRadius, l.glowRadius), o.uniform1f(r.uGlowSoftness, l.glowSoftness), o.uniform1i(r.uGlowBlurred, 8), o.uniform1i(r.uColorShiftCurve, 6), o.uniform1i(r.uColorShiftEnabled, 0), o.uniform1f(r.uColorShiftHue, 0), o.uniform1f(r.uColorShiftSaturation, 1), o.uniform1f(r.uColorShiftBrightness, 1), o.uniform1f(r.uColorShiftTintStrength, 0), o.uniform3f(r.uColorShiftTintColor, 0.7, 0.8, 0.9), o.uniform1i(r.uTiltEnabled, l.tiltEnabled ? 1 : 0), o.uniform1f(r.uTiltHalfTanFov, l.tiltHalfTanFov), o.uniform1f(r.uTiltTransitionWidth, l.tiltTransitionWidth), o.uniform1f(r.uTiltPeakIntensity, l.tiltPeakIntensity), o.uniform3f(r.uTiltPlaneNormal, 0, 0, 1), o.uniform1f(r.uTiltPlaneD, 2.75);
|
|
1173
1230
|
},
|
|
1174
|
-
updateUvTransform(
|
|
1175
|
-
|
|
1231
|
+
updateUvTransform(o, l, a) {
|
|
1232
|
+
o.useProgram(i), o.uniform2f(r.uUvOffset, l[0], l[1]), o.uniform2f(r.uUvScale, a[0], a[1]);
|
|
1176
1233
|
},
|
|
1177
|
-
dispose(
|
|
1178
|
-
|
|
1234
|
+
dispose(o) {
|
|
1235
|
+
o.deleteProgram(i);
|
|
1179
1236
|
}
|
|
1180
1237
|
};
|
|
1181
1238
|
}
|
|
1182
|
-
class
|
|
1239
|
+
class ye extends gt {
|
|
1183
1240
|
// ---- Shared GPU resources ----
|
|
1184
1241
|
gl = null;
|
|
1185
1242
|
quadVao = null;
|
|
@@ -1187,7 +1244,7 @@ class Ae extends mt {
|
|
|
1187
1244
|
bilateralPass = null;
|
|
1188
1245
|
effectPass = null;
|
|
1189
1246
|
// ---- Texture registry (init-time allocation, zero per-frame overhead) ----
|
|
1190
|
-
textures = new
|
|
1247
|
+
textures = new Ht();
|
|
1191
1248
|
videoSlot;
|
|
1192
1249
|
filteredDepthSlot;
|
|
1193
1250
|
rawDepthSlot;
|
|
@@ -1195,6 +1252,12 @@ class Ae extends mt {
|
|
|
1195
1252
|
blurLutSlot;
|
|
1196
1253
|
glowLutSlot;
|
|
1197
1254
|
colorShiftLutSlot;
|
|
1255
|
+
glowBlurHorizSlot;
|
|
1256
|
+
glowBlurResultSlot;
|
|
1257
|
+
// ---- Glow blur passes ----
|
|
1258
|
+
glowBlurHPass = null;
|
|
1259
|
+
glowBlurVPass = null;
|
|
1260
|
+
glowEnabled = !1;
|
|
1198
1261
|
/** Resolved config with all optional shader params filled from defaults. */
|
|
1199
1262
|
config;
|
|
1200
1263
|
/**
|
|
@@ -1206,7 +1269,7 @@ class Ae extends mt {
|
|
|
1206
1269
|
* Optional shader parameters are merged with calibrated defaults.
|
|
1207
1270
|
*/
|
|
1208
1271
|
constructor(t, e) {
|
|
1209
|
-
super(t), this.videoSlot = this.textures.register("video"), this.filteredDepthSlot = this.textures.register("filteredDepth"), this.rawDepthSlot = this.textures.register("rawDepth"), this.displacementLutSlot = this.textures.register("displacementLut"), this.blurLutSlot = this.textures.register("blurLut"), this.glowLutSlot = this.textures.register("glowLut"), this.colorShiftLutSlot = this.textures.register("colorShiftLut"), this.config = {
|
|
1272
|
+
super(t), this.videoSlot = this.textures.register("video"), this.filteredDepthSlot = this.textures.register("filteredDepth"), this.rawDepthSlot = this.textures.register("rawDepth"), this.displacementLutSlot = this.textures.register("displacementLut"), this.blurLutSlot = this.textures.register("blurLut"), this.glowLutSlot = this.textures.register("glowLut"), this.colorShiftLutSlot = this.textures.register("colorShiftLut"), this.glowBlurHorizSlot = this.textures.register("glowBlurHoriz"), this.glowBlurResultSlot = this.textures.register("glowBlurResult"), this.config = {
|
|
1210
1273
|
parallaxStrength: e.parallaxStrength,
|
|
1211
1274
|
pomEnabled: e.pomEnabled,
|
|
1212
1275
|
pomSteps: e.pomSteps,
|
|
@@ -1247,7 +1310,13 @@ class Ae extends mt {
|
|
|
1247
1310
|
*/
|
|
1248
1311
|
initialize(t, e, n) {
|
|
1249
1312
|
const i = this.gl;
|
|
1250
|
-
|
|
1313
|
+
if (i) {
|
|
1314
|
+
if (this.disposeTextures(), this.isCameraSource = t.type === "camera", this.videoAspect = t.width / t.height, this.clampDepthDimensions(e, n, this.qualityParams.depthMaxDim), this.videoSlot.texture = i.createTexture(), i.activeTexture(i.TEXTURE0 + this.videoSlot.unit), i.bindTexture(i.TEXTURE_2D, this.videoSlot.texture), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_S, i.CLAMP_TO_EDGE), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_T, i.CLAMP_TO_EDGE), this.rawDepthSlot.texture = i.createTexture(), i.activeTexture(i.TEXTURE0 + this.rawDepthSlot.unit), i.bindTexture(i.TEXTURE_2D, this.rawDepthSlot.texture), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_S, i.CLAMP_TO_EDGE), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_T, i.CLAMP_TO_EDGE), i.texStorage2D(i.TEXTURE_2D, 1, i.R8, e, n), this.filteredDepthSlot.texture = i.createTexture(), i.activeTexture(i.TEXTURE0 + this.filteredDepthSlot.unit), i.bindTexture(i.TEXTURE_2D, this.filteredDepthSlot.texture), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_S, i.CLAMP_TO_EDGE), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_T, i.CLAMP_TO_EDGE), i.texStorage2D(i.TEXTURE_2D, 1, i.R8, e, n), this.bilateralPass && this.filteredDepthSlot.texture && this.bilateralPass.initFBO(i, this.filteredDepthSlot.texture, e, n), this.glowBlurHPass && this.glowBlurVPass) {
|
|
1315
|
+
const r = this.depthWidth, o = this.depthHeight;
|
|
1316
|
+
this.glowBlurHPass.resize(i, r, o), this.glowBlurVPass.resize(i, r, o), this.glowBlurHorizSlot.texture = this.glowBlurHPass.outputs[0].texture, this.glowBlurResultSlot.texture = this.glowBlurVPass.outputs[0].texture, i.useProgram(this.glowBlurHPass.program), i.uniform1i(this.glowBlurHPass.uniforms.uDepth, this.filteredDepthSlot.unit), i.uniform1i(this.glowBlurHPass.uniforms.uGlowCurve, this.glowLutSlot.unit), i.uniform2f(this.glowBlurHPass.uniforms.uBlurDir, 1, 0), i.uniform2f(this.glowBlurHPass.uniforms.uTexelSize, 1 / r, 1 / o), i.uniform1f(this.glowBlurHPass.uniforms.uGlowRadius, this.config.glowRadius), i.useProgram(this.glowBlurVPass.program), i.uniform1i(this.glowBlurVPass.uniforms.uHorizResult, this.glowBlurHorizSlot.unit), i.uniform2f(this.glowBlurVPass.uniforms.uBlurDir, 0, 1), i.uniform2f(this.glowBlurVPass.uniforms.uTexelSize, 1 / r, 1 / o), i.uniform1f(this.glowBlurVPass.uniforms.uGlowRadius, this.config.glowRadius);
|
|
1317
|
+
}
|
|
1318
|
+
this.effectPass && this.effectPass.setStaticUniforms(i, this.config, t.width, t.height), this.recalculateViewportLayout();
|
|
1319
|
+
}
|
|
1251
1320
|
}
|
|
1252
1321
|
/**
|
|
1253
1322
|
* Update shader parameters at runtime without re-creating the renderer.
|
|
@@ -1262,29 +1331,31 @@ class Ae extends mt {
|
|
|
1262
1331
|
if (!e || !this.effectPass) return;
|
|
1263
1332
|
t.parallaxStrength !== void 0 && (this.config.parallaxStrength = t.parallaxStrength), t.pomEnabled !== void 0 && (this.config.pomEnabled = t.pomEnabled), t.pomSteps !== void 0 && (this.config.pomSteps = t.pomSteps), t.overscanPadding !== void 0 && (this.config.overscanPadding = t.overscanPadding), t.contrastLow !== void 0 && (this.config.contrastLow = t.contrastLow), t.contrastHigh !== void 0 && (this.config.contrastHigh = t.contrastHigh), t.verticalReduction !== void 0 && (this.config.verticalReduction = t.verticalReduction), t.dofStart !== void 0 && (this.config.dofStart = t.dofStart), t.dofStrength !== void 0 && (this.config.dofStrength = t.dofStrength), t.blurRadius !== void 0 && (this.config.blurRadius = t.blurRadius), t.glowColor !== void 0 && (this.config.glowColor = t.glowColor), t.glowRadius !== void 0 && (this.config.glowRadius = t.glowRadius), t.glowSoftness !== void 0 && (this.config.glowSoftness = t.glowSoftness), t.tiltEnabled !== void 0 && (this.config.tiltEnabled = t.tiltEnabled), t.tiltHalfTanFov !== void 0 && (this.config.tiltHalfTanFov = t.tiltHalfTanFov), t.tiltTransitionWidth !== void 0 && (this.config.tiltTransitionWidth = t.tiltTransitionWidth), t.tiltPeakIntensity !== void 0 && (this.config.tiltPeakIntensity = t.tiltPeakIntensity);
|
|
1264
1333
|
const { uniforms: n, program: i } = this.effectPass;
|
|
1265
|
-
e.useProgram(i), e.uniform1f(n.uStrength, this.config.parallaxStrength), e.uniform1i(n.uPomEnabled, this.config.pomEnabled ? 1 : 0), e.uniform1i(n.uPomSteps, this.config.pomSteps), e.uniform1f(n.uContrastLow, this.config.contrastLow), e.uniform1f(n.uContrastHigh, this.config.contrastHigh), e.uniform1f(n.uVerticalReduction, this.config.verticalReduction), e.uniform1f(n.uDofStart, this.config.dofStart), e.uniform1f(n.uDofStrength, this.config.dofStrength), e.uniform1f(n.uBlurRadius, this.config.blurRadius), e.uniform3f(n.uGlowColor, this.config.glowColor[0], this.config.glowColor[1], this.config.glowColor[2]), e.uniform1f(n.uGlowRadius, this.config.glowRadius), e.uniform1f(n.uGlowSoftness, this.config.glowSoftness), e.uniform1i(n.uTiltEnabled, this.config.tiltEnabled ? 1 : 0), e.uniform1f(n.uTiltHalfTanFov, this.config.tiltHalfTanFov), e.uniform1f(n.uTiltTransitionWidth, this.config.tiltTransitionWidth), e.uniform1f(n.uTiltPeakIntensity, this.config.tiltPeakIntensity), (t.parallaxStrength !== void 0 || t.overscanPadding !== void 0) && this.recalculateViewportLayout();
|
|
1334
|
+
e.useProgram(i), e.uniform1f(n.uStrength, this.config.parallaxStrength), e.uniform1i(n.uPomEnabled, this.config.pomEnabled ? 1 : 0), e.uniform1i(n.uPomSteps, this.config.pomSteps), e.uniform1f(n.uContrastLow, this.config.contrastLow), e.uniform1f(n.uContrastHigh, this.config.contrastHigh), e.uniform1f(n.uVerticalReduction, this.config.verticalReduction), e.uniform1f(n.uDofStart, this.config.dofStart), e.uniform1f(n.uDofStrength, this.config.dofStrength), e.uniform1f(n.uBlurRadius, this.config.blurRadius), e.uniform3f(n.uGlowColor, this.config.glowColor[0], this.config.glowColor[1], this.config.glowColor[2]), e.uniform1f(n.uGlowRadius, this.config.glowRadius), e.uniform1f(n.uGlowSoftness, this.config.glowSoftness), e.uniform1i(n.uTiltEnabled, this.config.tiltEnabled ? 1 : 0), e.uniform1f(n.uTiltHalfTanFov, this.config.tiltHalfTanFov), e.uniform1f(n.uTiltTransitionWidth, this.config.tiltTransitionWidth), e.uniform1f(n.uTiltPeakIntensity, this.config.tiltPeakIntensity), t.glowRadius !== void 0 && (this.glowBlurHPass && (e.useProgram(this.glowBlurHPass.program), e.uniform1f(this.glowBlurHPass.uniforms.uGlowRadius, this.config.glowRadius)), this.glowBlurVPass && (e.useProgram(this.glowBlurVPass.program), e.uniform1f(this.glowBlurVPass.uniforms.uGlowRadius, this.config.glowRadius)), this.refreshGlowBlur()), (t.parallaxStrength !== void 0 || t.overscanPadding !== void 0) && this.recalculateViewportLayout();
|
|
1266
1335
|
}
|
|
1267
1336
|
/**
|
|
1268
1337
|
* Upload new curve LUT data to the GPU.
|
|
1269
1338
|
* Call this whenever the curve editor changes.
|
|
1270
1339
|
*/
|
|
1271
1340
|
updateCurveLUTs(t, e, n, i, r) {
|
|
1272
|
-
const
|
|
1273
|
-
if (!
|
|
1274
|
-
const
|
|
1275
|
-
|
|
1341
|
+
const o = this.gl;
|
|
1342
|
+
if (!o || !this.effectPass) return;
|
|
1343
|
+
const l = !!(t || e), a = !!n, h = !!i;
|
|
1344
|
+
t && this.uploadLUT(this.displacementLutSlot, t), e && this.uploadLUT(this.blurLutSlot, e), n && this.uploadLUT(this.glowLutSlot, n), i && this.uploadLUT(this.colorShiftLutSlot, i), o.useProgram(this.effectPass.program), o.uniform1i(
|
|
1276
1345
|
this.effectPass.uniforms.uCurvesEnabled,
|
|
1277
|
-
a ? 1 : 0
|
|
1278
|
-
), s.uniform1i(
|
|
1279
|
-
this.effectPass.uniforms.uGlowEnabled,
|
|
1280
1346
|
l ? 1 : 0
|
|
1281
|
-
),
|
|
1347
|
+
), o.uniform1i(
|
|
1348
|
+
this.effectPass.uniforms.uGlowEnabled,
|
|
1349
|
+
a ? 1 : 0
|
|
1350
|
+
), o.uniform1i(
|
|
1282
1351
|
this.effectPass.uniforms.uColorShiftEnabled,
|
|
1283
|
-
|
|
1284
|
-
)
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1352
|
+
h ? 1 : 0
|
|
1353
|
+
);
|
|
1354
|
+
const c = this.glowEnabled !== a;
|
|
1355
|
+
if (this.glowEnabled = a, a && (c || n) && this.refreshGlowBlur(), h && r) {
|
|
1356
|
+
const f = this.effectPass.uniforms;
|
|
1357
|
+
o.uniform1f(f.uColorShiftHue, r.hueShift * (Math.PI / 180)), o.uniform1f(f.uColorShiftSaturation, r.saturation), o.uniform1f(f.uColorShiftBrightness, r.brightness), o.uniform1f(f.uColorShiftTintStrength, r.tintStrength), o.uniform3f(
|
|
1358
|
+
f.uColorShiftTintColor,
|
|
1288
1359
|
r.tintColor[0],
|
|
1289
1360
|
r.tintColor[1],
|
|
1290
1361
|
r.tintColor[2]
|
|
@@ -1302,7 +1373,49 @@ class Ae extends mt {
|
|
|
1302
1373
|
*/
|
|
1303
1374
|
initGPUResources() {
|
|
1304
1375
|
const t = this.gl;
|
|
1305
|
-
|
|
1376
|
+
if (!t) return;
|
|
1377
|
+
this.bilateralPass = Te(t, this.qualityParams.bilateralRadius), this.effectPass = Se(t);
|
|
1378
|
+
const e = Ft.replace(
|
|
1379
|
+
"#version 300 es",
|
|
1380
|
+
`#version 300 es
|
|
1381
|
+
#define PASS_HORIZONTAL`
|
|
1382
|
+
), n = [
|
|
1383
|
+
"uDepth",
|
|
1384
|
+
"uGlowCurve",
|
|
1385
|
+
"uHorizResult",
|
|
1386
|
+
"uTexelSize",
|
|
1387
|
+
"uGlowRadius",
|
|
1388
|
+
"uBlurDir"
|
|
1389
|
+
];
|
|
1390
|
+
this.glowBlurHPass = Dt(
|
|
1391
|
+
t,
|
|
1392
|
+
"glow-blur-h",
|
|
1393
|
+
bt,
|
|
1394
|
+
e,
|
|
1395
|
+
n,
|
|
1396
|
+
{
|
|
1397
|
+
internalFormat: t.R8,
|
|
1398
|
+
format: t.RED,
|
|
1399
|
+
type: t.UNSIGNED_BYTE,
|
|
1400
|
+
textureUnit: this.glowBlurHorizSlot.unit,
|
|
1401
|
+
width: 0,
|
|
1402
|
+
height: 0
|
|
1403
|
+
}
|
|
1404
|
+
), this.glowBlurVPass = Dt(
|
|
1405
|
+
t,
|
|
1406
|
+
"glow-blur-v",
|
|
1407
|
+
bt,
|
|
1408
|
+
Ft,
|
|
1409
|
+
n,
|
|
1410
|
+
{
|
|
1411
|
+
internalFormat: t.R8,
|
|
1412
|
+
format: t.RED,
|
|
1413
|
+
type: t.UNSIGNED_BYTE,
|
|
1414
|
+
textureUnit: this.glowBlurResultSlot.unit,
|
|
1415
|
+
width: 0,
|
|
1416
|
+
height: 0
|
|
1417
|
+
}
|
|
1418
|
+
), this.quadVao = Ot(t, this.effectPass.program), t.disable(t.DEPTH_TEST);
|
|
1306
1419
|
}
|
|
1307
1420
|
// -----------------------------------------------------------------------
|
|
1308
1421
|
// Curve LUT texture management
|
|
@@ -1368,7 +1481,24 @@ class Ae extends mt {
|
|
|
1368
1481
|
this.depthHeight,
|
|
1369
1482
|
this.canvas.width,
|
|
1370
1483
|
this.canvas.height
|
|
1371
|
-
);
|
|
1484
|
+
), this.glowEnabled && this.executeGlowBlur(e);
|
|
1485
|
+
}
|
|
1486
|
+
/**
|
|
1487
|
+
* Execute the 2-pass separable glow blur (H then V).
|
|
1488
|
+
* Runs at depth resolution into R8 FBOs.
|
|
1489
|
+
*/
|
|
1490
|
+
executeGlowBlur(t) {
|
|
1491
|
+
if (!this.glowBlurHPass?.fbo || !this.glowBlurVPass?.fbo || !this.quadVao) return;
|
|
1492
|
+
const e = this.depthWidth, n = this.depthHeight;
|
|
1493
|
+
t.bindFramebuffer(t.FRAMEBUFFER, this.glowBlurHPass.fbo), t.viewport(0, 0, e, n), t.useProgram(this.glowBlurHPass.program), t.bindVertexArray(this.quadVao), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindFramebuffer(t.FRAMEBUFFER, this.glowBlurVPass.fbo), t.useProgram(this.glowBlurVPass.program), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindFramebuffer(t.FRAMEBUFFER, null), t.viewport(0, 0, this.canvas.width, this.canvas.height);
|
|
1494
|
+
}
|
|
1495
|
+
/**
|
|
1496
|
+
* Re-execute glow blur on demand (when glow LUT or radius changes).
|
|
1497
|
+
* Only runs if depth data has been uploaded at least once.
|
|
1498
|
+
*/
|
|
1499
|
+
refreshGlowBlur() {
|
|
1500
|
+
const t = this.gl;
|
|
1501
|
+
!t || !this.glowEnabled || this.depthWidth === 0 || this.executeGlowBlur(t);
|
|
1372
1502
|
}
|
|
1373
1503
|
/**
|
|
1374
1504
|
* Recalculate the WebGL canvas size and UV transform to match the
|
|
@@ -1380,8 +1510,8 @@ class Ae extends mt {
|
|
|
1380
1510
|
recalculateViewportLayout() {
|
|
1381
1511
|
const t = this.gl;
|
|
1382
1512
|
if (!t) return;
|
|
1383
|
-
const { width: e, height: n } = this.getViewportSize(), i = Math.min(window.devicePixelRatio, this.qualityParams.dprCap), r = Math.round(e * i),
|
|
1384
|
-
(this.canvas.width !== r || this.canvas.height !==
|
|
1513
|
+
const { width: e, height: n } = this.getViewportSize(), i = Math.min(window.devicePixelRatio, this.qualityParams.dprCap), r = Math.round(e * i), o = Math.round(n * i);
|
|
1514
|
+
(this.canvas.width !== r || this.canvas.height !== o) && (this.canvas.width = r, this.canvas.height = o, t.viewport(0, 0, r, o)), this.computeCoverFitUV(this.config.parallaxStrength, this.config.overscanPadding), this.effectPass && this.effectPass.updateUvTransform(t, this.uvOffset, this.uvScale);
|
|
1385
1515
|
}
|
|
1386
1516
|
/** Release all GPU resources. */
|
|
1387
1517
|
disposeRenderer() {
|
|
@@ -1403,18 +1533,18 @@ class Ae extends mt {
|
|
|
1403
1533
|
/** Dispose render passes and shared VAO. */
|
|
1404
1534
|
disposeGPUResources() {
|
|
1405
1535
|
const t = this.gl;
|
|
1406
|
-
t && (this.bilateralPass && (this.bilateralPass.dispose(t), this.bilateralPass = null), this.effectPass && (this.effectPass.dispose(t), this.effectPass = null), this.quadVao && (t.deleteVertexArray(this.quadVao), this.quadVao = null));
|
|
1536
|
+
t && (this.bilateralPass && (this.bilateralPass.dispose(t), this.bilateralPass = null), this.effectPass && (this.effectPass.dispose(t), this.effectPass = null), this.glowBlurHPass && (this.glowBlurHPass.dispose(t), this.glowBlurHPass = null), this.glowBlurVPass && (this.glowBlurVPass.dispose(t), this.glowBlurVPass = null), this.quadVao && (t.deleteVertexArray(this.quadVao), this.quadVao = null));
|
|
1407
1537
|
}
|
|
1408
1538
|
}
|
|
1409
|
-
async function
|
|
1539
|
+
async function ht(s, t = {}) {
|
|
1410
1540
|
const {
|
|
1411
1541
|
parent: e = document.body,
|
|
1412
1542
|
loop: n = !0,
|
|
1413
1543
|
muted: i = !0
|
|
1414
1544
|
} = t, r = document.createElement("video");
|
|
1415
|
-
return r.crossOrigin = "anonymous", r.setAttribute("crossorigin", "anonymous"), r.playsInline = !0, r.setAttribute("playsinline", ""), r.setAttribute("webkit-playsinline", "true"), r.muted = i, r.defaultMuted = i, i && r.setAttribute("muted", ""), r.loop = n, r.preload = "auto", r.style.display = "none", r.src =
|
|
1545
|
+
return r.crossOrigin = "anonymous", r.setAttribute("crossorigin", "anonymous"), r.playsInline = !0, r.setAttribute("playsinline", ""), r.setAttribute("webkit-playsinline", "true"), r.muted = i, r.defaultMuted = i, i && r.setAttribute("muted", ""), r.loop = n, r.preload = "auto", r.style.display = "none", r.src = s, e.appendChild(r), await Gt(r), new we(r);
|
|
1416
1546
|
}
|
|
1417
|
-
class
|
|
1547
|
+
class we {
|
|
1418
1548
|
constructor(t) {
|
|
1419
1549
|
this.video = t;
|
|
1420
1550
|
}
|
|
@@ -1460,17 +1590,17 @@ class Re {
|
|
|
1460
1590
|
this.video.pause(), this.video.removeAttribute("src"), this.video.load(), this.video.remove();
|
|
1461
1591
|
}
|
|
1462
1592
|
}
|
|
1463
|
-
async function
|
|
1593
|
+
async function ft(s, t = {}) {
|
|
1464
1594
|
const e = new Image();
|
|
1465
|
-
return e.crossOrigin = "anonymous", e.src =
|
|
1595
|
+
return e.crossOrigin = "anonymous", e.src = s, await new Promise((n, i) => {
|
|
1466
1596
|
if (e.complete && e.naturalWidth > 0) {
|
|
1467
1597
|
n();
|
|
1468
1598
|
return;
|
|
1469
1599
|
}
|
|
1470
|
-
e.addEventListener("load", () => n(), { once: !0 }), e.addEventListener("error", () => i(new Error(`Failed to load image: ${
|
|
1471
|
-
}), new
|
|
1600
|
+
e.addEventListener("load", () => n(), { once: !0 }), e.addEventListener("error", () => i(new Error(`Failed to load image: ${s}`)), { once: !0 });
|
|
1601
|
+
}), new Re(e);
|
|
1472
1602
|
}
|
|
1473
|
-
class
|
|
1603
|
+
class Re {
|
|
1474
1604
|
constructor(t) {
|
|
1475
1605
|
this.img = t;
|
|
1476
1606
|
}
|
|
@@ -1492,11 +1622,11 @@ class De {
|
|
|
1492
1622
|
this.img.removeAttribute("src");
|
|
1493
1623
|
}
|
|
1494
1624
|
}
|
|
1495
|
-
async function Nt(
|
|
1496
|
-
const { parent: e = document.body } = t, n = await navigator.mediaDevices.getUserMedia(
|
|
1497
|
-
return i.playsInline = !0, i.setAttribute("playsinline", ""), i.muted = !0, i.defaultMuted = !0, i.style.display = "none", i.srcObject = n, e.appendChild(i), await
|
|
1625
|
+
async function Nt(s = { video: !0 }, t = {}) {
|
|
1626
|
+
const { parent: e = document.body } = t, n = await navigator.mediaDevices.getUserMedia(s), i = document.createElement("video");
|
|
1627
|
+
return i.playsInline = !0, i.setAttribute("playsinline", ""), i.muted = !0, i.defaultMuted = !0, i.style.display = "none", i.srcObject = n, e.appendChild(i), await Gt(i), await i.play(), new Ae(i, n);
|
|
1498
1628
|
}
|
|
1499
|
-
class
|
|
1629
|
+
class Ae {
|
|
1500
1630
|
constructor(t, e) {
|
|
1501
1631
|
this.video = t, this.stream = e;
|
|
1502
1632
|
}
|
|
@@ -1542,23 +1672,23 @@ class Pe {
|
|
|
1542
1672
|
t.stop();
|
|
1543
1673
|
}
|
|
1544
1674
|
}
|
|
1545
|
-
async function
|
|
1546
|
-
|
|
1675
|
+
async function Gt(s) {
|
|
1676
|
+
s.readyState >= HTMLMediaElement.HAVE_METADATA || await new Promise((t, e) => {
|
|
1547
1677
|
const n = () => {
|
|
1548
1678
|
r(), t();
|
|
1549
1679
|
}, i = () => {
|
|
1550
1680
|
r(), e(new Error("Failed to load video metadata."));
|
|
1551
1681
|
}, r = () => {
|
|
1552
|
-
|
|
1682
|
+
s.removeEventListener("loadedmetadata", n), s.removeEventListener("error", i);
|
|
1553
1683
|
};
|
|
1554
|
-
|
|
1684
|
+
s.addEventListener("loadedmetadata", n), s.addEventListener("error", i), s.load();
|
|
1555
1685
|
});
|
|
1556
1686
|
}
|
|
1557
|
-
const
|
|
1558
|
-
async function
|
|
1687
|
+
const Z = 518;
|
|
1688
|
+
async function Pe() {
|
|
1559
1689
|
return await import("onnxruntime-web/webgpu");
|
|
1560
1690
|
}
|
|
1561
|
-
class
|
|
1691
|
+
class De {
|
|
1562
1692
|
constructor(t, e) {
|
|
1563
1693
|
this.depthWidth = t, this.depthHeight = e;
|
|
1564
1694
|
const n = t * e;
|
|
@@ -1583,6 +1713,8 @@ class Ce {
|
|
|
1583
1713
|
// Frame capture canvas (reused)
|
|
1584
1714
|
captureCanvas = null;
|
|
1585
1715
|
captureCtx = null;
|
|
1716
|
+
// Preprocessing worker (offloads ImageNet norm + depth quantisation)
|
|
1717
|
+
preprocessWorker = null;
|
|
1586
1718
|
disposed = !1;
|
|
1587
1719
|
// -----------------------------------------------------------------------
|
|
1588
1720
|
// Initialisation
|
|
@@ -1595,25 +1727,32 @@ class Ce {
|
|
|
1595
1727
|
* (GPU-accelerated on main thread), falls back to WASM EP.
|
|
1596
1728
|
*/
|
|
1597
1729
|
async init(t, e) {
|
|
1598
|
-
const n = await
|
|
1599
|
-
if (this.ort = n, this.captureCanvas = document.createElement("canvas"), this.captureCanvas.width =
|
|
1730
|
+
const n = await Pe();
|
|
1731
|
+
if (this.ort = n, this.captureCanvas = document.createElement("canvas"), this.captureCanvas.width = Z, this.captureCanvas.height = Z, this.captureCtx = this.captureCanvas.getContext("2d", {
|
|
1600
1732
|
willReadFrequently: !0
|
|
1601
1733
|
}), !this.captureCtx)
|
|
1602
1734
|
throw new Error("[DepthEstimator] Failed to create 2D canvas context.");
|
|
1603
1735
|
e?.({ receivedBytes: 0, totalBytes: null, fraction: 0, label: "Downloading depth model…" });
|
|
1604
|
-
const i = await
|
|
1736
|
+
const i = await Fe(t, e);
|
|
1605
1737
|
e?.({ receivedBytes: i.byteLength, totalBytes: i.byteLength, fraction: 1, label: "Initialising depth model…" });
|
|
1606
1738
|
let r;
|
|
1607
1739
|
try {
|
|
1608
1740
|
r = await n.InferenceSession.create(i, {
|
|
1609
1741
|
executionProviders: ["webgpu"]
|
|
1610
1742
|
}), console.log("[DepthEstimator] Using WebGPU execution provider");
|
|
1611
|
-
} catch (
|
|
1612
|
-
console.warn("[DepthEstimator] WebGPU EP unavailable, falling back to WASM:",
|
|
1743
|
+
} catch (o) {
|
|
1744
|
+
console.warn("[DepthEstimator] WebGPU EP unavailable, falling back to WASM:", o), n.env.wasm.proxy = !0, r = await n.InferenceSession.create(i, {
|
|
1613
1745
|
executionProviders: ["wasm"]
|
|
1614
1746
|
}), console.log("[DepthEstimator] Using WASM execution provider (proxy worker)");
|
|
1615
1747
|
}
|
|
1616
|
-
this.session = r, this.inputName = r.inputNames[0], this.outputName = r.outputNames[0], this.
|
|
1748
|
+
this.session = r, this.inputName = r.inputNames[0], this.outputName = r.outputNames[0], this.preprocessWorker = new Worker(
|
|
1749
|
+
new URL(
|
|
1750
|
+
/* @vite-ignore */
|
|
1751
|
+
"/assets/preprocess-worker-wra-uI6w.js",
|
|
1752
|
+
import.meta.url
|
|
1753
|
+
),
|
|
1754
|
+
{ type: "module" }
|
|
1755
|
+
), this.readyResolve?.(), this.readyResolve = null;
|
|
1617
1756
|
}
|
|
1618
1757
|
/** Wait for model loading and session creation to complete. */
|
|
1619
1758
|
waitUntilReady() {
|
|
@@ -1651,28 +1790,28 @@ class Ce {
|
|
|
1651
1790
|
// Cleanup
|
|
1652
1791
|
// -----------------------------------------------------------------------
|
|
1653
1792
|
dispose() {
|
|
1654
|
-
this.disposed = !0, this.session?.release(), this.session = null, this.ort = null, this.captureCanvas = null, this.captureCtx = null;
|
|
1793
|
+
this.disposed = !0, this.session?.release(), this.session = null, this.ort = null, this.captureCanvas = null, this.captureCtx = null, this.preprocessWorker?.terminate(), this.preprocessWorker = null;
|
|
1655
1794
|
}
|
|
1656
1795
|
// -----------------------------------------------------------------------
|
|
1657
1796
|
// Internal inference pipeline
|
|
1658
1797
|
// -----------------------------------------------------------------------
|
|
1659
1798
|
async runInference(t) {
|
|
1660
1799
|
try {
|
|
1661
|
-
if (!this.session || !this.captureCtx || !this.ort) return;
|
|
1800
|
+
if (!this.session || !this.captureCtx || !this.ort || !this.preprocessWorker) return;
|
|
1662
1801
|
this.captureCtx.drawImage(
|
|
1663
1802
|
t,
|
|
1664
1803
|
0,
|
|
1665
1804
|
0,
|
|
1666
|
-
|
|
1667
|
-
|
|
1805
|
+
Z,
|
|
1806
|
+
Z
|
|
1668
1807
|
);
|
|
1669
1808
|
const e = this.captureCtx.getImageData(
|
|
1670
1809
|
0,
|
|
1671
1810
|
0,
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
), n = this.
|
|
1675
|
-
this.
|
|
1811
|
+
Z,
|
|
1812
|
+
Z
|
|
1813
|
+
), n = await this.workerPreprocess(e.data.buffer, e.width, e.height), i = new this.ort.Tensor("float32", new Float32Array(n), [1, 3, e.height, e.width]), o = (await this.session.run({ [this.inputName]: i }))[this.outputName], l = o.data, a = o.dims, h = a.length === 3 ? a[1] : a[2], c = a.length === 3 ? a[2] : a[3], f = await this.workerPostprocess(l.slice(0).buffer, c, h);
|
|
1814
|
+
this.backBuffer.set(new Uint8Array(f));
|
|
1676
1815
|
const u = this.frontBuffer;
|
|
1677
1816
|
this.frontBuffer = this.backBuffer, this.backBuffer = u;
|
|
1678
1817
|
} catch (e) {
|
|
@@ -1681,47 +1820,47 @@ class Ce {
|
|
|
1681
1820
|
this.inferenceInFlight = !1;
|
|
1682
1821
|
}
|
|
1683
1822
|
}
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
const
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1823
|
+
workerPreprocess(t, e, n) {
|
|
1824
|
+
return new Promise((i, r) => {
|
|
1825
|
+
if (!this.preprocessWorker) {
|
|
1826
|
+
r(new Error("Worker not ready"));
|
|
1827
|
+
return;
|
|
1828
|
+
}
|
|
1829
|
+
const o = (a) => {
|
|
1830
|
+
this.preprocessWorker?.removeEventListener("message", o), a.data.type === "preprocessed" ? i(a.data.float32) : a.data.type === "error" && r(new Error(a.data.message));
|
|
1831
|
+
};
|
|
1832
|
+
this.preprocessWorker.addEventListener("message", o);
|
|
1833
|
+
const l = t.slice(0);
|
|
1834
|
+
this.preprocessWorker.postMessage(
|
|
1835
|
+
{ type: "preprocess", pixels: l, width: e, height: n },
|
|
1836
|
+
[l]
|
|
1837
|
+
);
|
|
1838
|
+
});
|
|
1694
1839
|
}
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
* higher raw values = closer to camera. This matches the convention used
|
|
1701
|
-
* by the precompute pipeline (`normalizeToUint8` in scripts/precompute-depth.ts),
|
|
1702
|
-
* so no inversion is applied: 255 = nearest, 0 = farthest.
|
|
1703
|
-
*/
|
|
1704
|
-
postProcess(t, e, n) {
|
|
1705
|
-
const { depthWidth: i, depthHeight: r } = this;
|
|
1706
|
-
let s = 1 / 0, a = -1 / 0;
|
|
1707
|
-
for (let f = 0; f < t.length; f++) {
|
|
1708
|
-
const h = t[f];
|
|
1709
|
-
h < s && (s = h), h > a && (a = h);
|
|
1710
|
-
}
|
|
1711
|
-
const l = a - s || 1, c = e / i, u = n / r;
|
|
1712
|
-
for (let f = 0; f < r; f++)
|
|
1713
|
-
for (let h = 0; h < i; h++) {
|
|
1714
|
-
const x = h * c, g = f * u, d = Math.floor(x), y = Math.floor(g), E = Math.min(d + 1, e - 1), b = Math.min(y + 1, n - 1), p = x - d, v = g - y, m = t[y * e + d], T = t[y * e + E], w = t[b * e + d], A = t[b * e + E], P = (m * (1 - p) * (1 - v) + T * p * (1 - v) + w * (1 - p) * v + A * p * v - s) / l;
|
|
1715
|
-
this.backBuffer[f * i + h] = P * 255 + 0.5 | 0;
|
|
1840
|
+
workerPostprocess(t, e, n) {
|
|
1841
|
+
return new Promise((i, r) => {
|
|
1842
|
+
if (!this.preprocessWorker) {
|
|
1843
|
+
r(new Error("Worker not ready"));
|
|
1844
|
+
return;
|
|
1716
1845
|
}
|
|
1846
|
+
const o = (a) => {
|
|
1847
|
+
this.preprocessWorker?.removeEventListener("message", o), a.data.type === "postprocessed" ? i(a.data.depth) : a.data.type === "error" && r(new Error(a.data.message));
|
|
1848
|
+
};
|
|
1849
|
+
this.preprocessWorker.addEventListener("message", o);
|
|
1850
|
+
const l = t.slice(0);
|
|
1851
|
+
this.preprocessWorker.postMessage(
|
|
1852
|
+
{ type: "postprocess", depthFloat: l, srcW: e, srcH: n, dstW: this.depthWidth, dstH: this.depthHeight },
|
|
1853
|
+
[l]
|
|
1854
|
+
);
|
|
1855
|
+
});
|
|
1717
1856
|
}
|
|
1718
1857
|
}
|
|
1719
|
-
async function
|
|
1720
|
-
const i = new
|
|
1721
|
-
return await i.init(
|
|
1858
|
+
async function dt(s, t, e, n) {
|
|
1859
|
+
const i = new De(t, e);
|
|
1860
|
+
return await i.init(s, n), i;
|
|
1722
1861
|
}
|
|
1723
|
-
async function
|
|
1724
|
-
const e = await fetch(
|
|
1862
|
+
async function Fe(s, t) {
|
|
1863
|
+
const e = await fetch(s);
|
|
1725
1864
|
if (!e.ok)
|
|
1726
1865
|
throw new Error(`[DepthEstimator] Failed to fetch model (${e.status} ${e.statusText}).`);
|
|
1727
1866
|
const n = e.headers.get("content-length"), i = n ? Number(n) : null, r = e.body;
|
|
@@ -1734,73 +1873,73 @@ async function Ue(o, t) {
|
|
|
1734
1873
|
label: "Downloading depth model…"
|
|
1735
1874
|
}), f;
|
|
1736
1875
|
}
|
|
1737
|
-
const
|
|
1738
|
-
let
|
|
1739
|
-
const
|
|
1876
|
+
const o = [];
|
|
1877
|
+
let l = 0;
|
|
1878
|
+
const a = r.getReader();
|
|
1740
1879
|
for (; ; ) {
|
|
1741
|
-
const { done: f, value:
|
|
1880
|
+
const { done: f, value: u } = await a.read();
|
|
1742
1881
|
if (f) break;
|
|
1743
|
-
|
|
1744
|
-
receivedBytes:
|
|
1882
|
+
u && (o.push(u), l += u.byteLength, t?.({
|
|
1883
|
+
receivedBytes: l,
|
|
1745
1884
|
totalBytes: i,
|
|
1746
|
-
fraction: i ? Math.min(
|
|
1885
|
+
fraction: i ? Math.min(l / i, 1) : 0,
|
|
1747
1886
|
label: "Downloading depth model…"
|
|
1748
1887
|
}));
|
|
1749
1888
|
}
|
|
1750
|
-
const
|
|
1751
|
-
let
|
|
1752
|
-
for (const f of
|
|
1753
|
-
|
|
1754
|
-
return
|
|
1889
|
+
const h = new Uint8Array(l);
|
|
1890
|
+
let c = 0;
|
|
1891
|
+
for (const f of o)
|
|
1892
|
+
h.set(f, c), c += f.byteLength;
|
|
1893
|
+
return h.buffer;
|
|
1755
1894
|
}
|
|
1756
|
-
const
|
|
1895
|
+
const Ct = {
|
|
1757
1896
|
sensitivityX: 0.4,
|
|
1758
1897
|
sensitivityY: 1,
|
|
1759
1898
|
lerpFactor: 0.08
|
|
1760
1899
|
};
|
|
1761
|
-
function
|
|
1762
|
-
const e =
|
|
1900
|
+
function St(s, t) {
|
|
1901
|
+
const e = s.points;
|
|
1763
1902
|
if (e.length === 0) return 0;
|
|
1764
1903
|
if (e.length === 1 || t <= e[0].x) return e[0].y;
|
|
1765
1904
|
if (t >= e[e.length - 1].x) return e[e.length - 1].y;
|
|
1766
1905
|
let n = 0;
|
|
1767
1906
|
for (; n < e.length - 1 && e[n + 1].x < t; ) n++;
|
|
1768
|
-
const i = e[n], r = e[n + 1],
|
|
1769
|
-
switch (
|
|
1907
|
+
const i = e[n], r = e[n + 1], o = (t - i.x) / (r.x - i.x);
|
|
1908
|
+
switch (s.interpolation) {
|
|
1770
1909
|
case "step":
|
|
1771
1910
|
return i.y;
|
|
1772
1911
|
case "linear":
|
|
1773
|
-
return i.y + (r.y - i.y) *
|
|
1912
|
+
return i.y + (r.y - i.y) * o;
|
|
1774
1913
|
case "smooth": {
|
|
1775
|
-
const
|
|
1776
|
-
return i.y + (r.y - i.y) *
|
|
1914
|
+
const l = o * o * (3 - 2 * o);
|
|
1915
|
+
return i.y + (r.y - i.y) * l;
|
|
1777
1916
|
}
|
|
1778
1917
|
default:
|
|
1779
|
-
return i.y + (r.y - i.y) *
|
|
1918
|
+
return i.y + (r.y - i.y) * o;
|
|
1780
1919
|
}
|
|
1781
1920
|
}
|
|
1782
|
-
function
|
|
1921
|
+
function lt(s, t = 256) {
|
|
1783
1922
|
const e = new Uint8Array(t);
|
|
1784
1923
|
for (let n = 0; n < t; n++) {
|
|
1785
1924
|
const i = n / (t - 1);
|
|
1786
|
-
e[n] = Math.round(
|
|
1925
|
+
e[n] = Math.round(St(s, i) * 255);
|
|
1787
1926
|
}
|
|
1788
1927
|
return e;
|
|
1789
1928
|
}
|
|
1790
|
-
function
|
|
1791
|
-
return
|
|
1929
|
+
function q(s, t) {
|
|
1930
|
+
return s.find((e) => e.channel === t && e.enabled);
|
|
1792
1931
|
}
|
|
1793
|
-
function
|
|
1794
|
-
const e =
|
|
1795
|
-
let
|
|
1932
|
+
function Ut(s, t) {
|
|
1933
|
+
const e = q(s, "displacement"), n = q(s, "blur"), i = q(s, "glow"), r = e?.params;
|
|
1934
|
+
let o = 0.6, l = 0;
|
|
1796
1935
|
if (n) {
|
|
1797
|
-
const
|
|
1798
|
-
for (let
|
|
1799
|
-
if (
|
|
1800
|
-
|
|
1936
|
+
const a = n.curve;
|
|
1937
|
+
for (let h = 0; h <= 1; h += 0.01)
|
|
1938
|
+
if (St(a, h) > 0.01) {
|
|
1939
|
+
o = h;
|
|
1801
1940
|
break;
|
|
1802
1941
|
}
|
|
1803
|
-
|
|
1942
|
+
l = St(a, 1);
|
|
1804
1943
|
}
|
|
1805
1944
|
return {
|
|
1806
1945
|
parallaxStrength: r?.strength ?? 0.05,
|
|
@@ -1809,8 +1948,8 @@ function Ct(o, t) {
|
|
|
1809
1948
|
contrastLow: t.contrastLow,
|
|
1810
1949
|
contrastHigh: t.contrastHigh,
|
|
1811
1950
|
verticalReduction: t.verticalReduction,
|
|
1812
|
-
dofStart:
|
|
1813
|
-
dofStrength:
|
|
1951
|
+
dofStart: o,
|
|
1952
|
+
dofStrength: l,
|
|
1814
1953
|
blurRadius: n?.params?.maxRadius ?? 0.01,
|
|
1815
1954
|
glowColor: i?.params?.color ?? [1, 0.95, 0.85],
|
|
1816
1955
|
glowRadius: i?.params?.radius ?? 0.02,
|
|
@@ -1821,13 +1960,13 @@ function Ct(o, t) {
|
|
|
1821
1960
|
tiltPeakIntensity: n?.params?.peakIntensity ?? 0.8
|
|
1822
1961
|
};
|
|
1823
1962
|
}
|
|
1824
|
-
function
|
|
1825
|
-
const t =
|
|
1963
|
+
function Lt(s) {
|
|
1964
|
+
const t = q(s, "displacement"), e = q(s, "blur"), n = q(s, "glow"), i = q(s, "color-shift"), r = i?.params;
|
|
1826
1965
|
return {
|
|
1827
|
-
displacementLUT: t ?
|
|
1828
|
-
blurLUT: e ?
|
|
1829
|
-
glowLUT: n ?
|
|
1830
|
-
colorShiftLUT: i ?
|
|
1966
|
+
displacementLUT: t ? lt(t.curve) : null,
|
|
1967
|
+
blurLUT: e ? lt(e.curve) : null,
|
|
1968
|
+
glowLUT: n ? lt(n.curve) : null,
|
|
1969
|
+
colorShiftLUT: i ? lt(i.curve) : null,
|
|
1831
1970
|
colorShiftParams: r ? {
|
|
1832
1971
|
hueShift: r.hueShift ?? 0,
|
|
1833
1972
|
saturation: r.saturation ?? 1,
|
|
@@ -1837,7 +1976,7 @@ function Ut(o) {
|
|
|
1837
1976
|
} : null
|
|
1838
1977
|
};
|
|
1839
1978
|
}
|
|
1840
|
-
class
|
|
1979
|
+
class Wt {
|
|
1841
1980
|
abortController = null;
|
|
1842
1981
|
initialized = !1;
|
|
1843
1982
|
initializing = !1;
|
|
@@ -1887,7 +2026,7 @@ class Gt {
|
|
|
1887
2026
|
this.abortController?.abort(), this.abortController = null, this.initializing = !1;
|
|
1888
2027
|
}
|
|
1889
2028
|
}
|
|
1890
|
-
const
|
|
2029
|
+
const z = {
|
|
1891
2030
|
parallaxX: 0.4,
|
|
1892
2031
|
parallaxY: 1,
|
|
1893
2032
|
parallaxMax: 30,
|
|
@@ -1895,14 +2034,16 @@ const G = {
|
|
|
1895
2034
|
autoplay: !0,
|
|
1896
2035
|
loop: !0,
|
|
1897
2036
|
muted: !0
|
|
1898
|
-
},
|
|
2037
|
+
}, $ = 512, K = 512;
|
|
1899
2038
|
class xt extends HTMLElement {
|
|
1900
2039
|
static TAG_NAME = "layershift-effect";
|
|
1901
2040
|
static get observedAttributes() {
|
|
1902
2041
|
return [
|
|
1903
2042
|
"src",
|
|
1904
2043
|
"depth-src",
|
|
1905
|
-
"depth-
|
|
2044
|
+
"depth-width",
|
|
2045
|
+
"depth-height",
|
|
2046
|
+
"depth-fps",
|
|
1906
2047
|
"depth-model",
|
|
1907
2048
|
"source-type",
|
|
1908
2049
|
"config",
|
|
@@ -1918,10 +2059,10 @@ class xt extends HTMLElement {
|
|
|
1918
2059
|
"muted"
|
|
1919
2060
|
];
|
|
1920
2061
|
}
|
|
1921
|
-
reinitAttributes = ["src", "depth-src", "depth-
|
|
2062
|
+
reinitAttributes = ["src", "depth-src", "depth-width", "depth-height", "depth-fps", "depth-model", "source-type", "config"];
|
|
1922
2063
|
canInit() {
|
|
1923
2064
|
if (this.sourceType === "camera") return !0;
|
|
1924
|
-
const t = !!this.getAttribute("src"), e = !!this.getAttribute("depth-src")
|
|
2065
|
+
const t = !!this.getAttribute("src"), e = !!this.getAttribute("depth-src"), n = !!this.getAttribute("depth-model");
|
|
1925
2066
|
return t && (e || n);
|
|
1926
2067
|
}
|
|
1927
2068
|
shadow;
|
|
@@ -1939,7 +2080,7 @@ class xt extends HTMLElement {
|
|
|
1939
2080
|
*/
|
|
1940
2081
|
depthFallback = null;
|
|
1941
2082
|
constructor() {
|
|
1942
|
-
super(), this.shadow = this.attachShadow({ mode: "open" }), this.lifecycle = new
|
|
2083
|
+
super(), this.shadow = this.attachShadow({ mode: "open" }), this.lifecycle = new Wt(this);
|
|
1943
2084
|
}
|
|
1944
2085
|
/** The current input offset. Set this externally to drive the effect. */
|
|
1945
2086
|
get input() {
|
|
@@ -1961,16 +2102,16 @@ class xt extends HTMLElement {
|
|
|
1961
2102
|
return !(n === "false" || n === "0");
|
|
1962
2103
|
}
|
|
1963
2104
|
get parallaxX() {
|
|
1964
|
-
return this.getAttrFloat("parallax-x",
|
|
2105
|
+
return this.getAttrFloat("parallax-x", z.parallaxX);
|
|
1965
2106
|
}
|
|
1966
2107
|
get parallaxY() {
|
|
1967
|
-
return this.getAttrFloat("parallax-y",
|
|
2108
|
+
return this.getAttrFloat("parallax-y", z.parallaxY);
|
|
1968
2109
|
}
|
|
1969
2110
|
get parallaxMax() {
|
|
1970
|
-
return this.getAttrFloat("parallax-max",
|
|
2111
|
+
return this.getAttrFloat("parallax-max", z.parallaxMax);
|
|
1971
2112
|
}
|
|
1972
2113
|
get overscan() {
|
|
1973
|
-
return this.getAttrFloat("overscan",
|
|
2114
|
+
return this.getAttrFloat("overscan", z.overscan);
|
|
1974
2115
|
}
|
|
1975
2116
|
get quality() {
|
|
1976
2117
|
const t = this.getAttribute("quality");
|
|
@@ -1988,13 +2129,13 @@ class xt extends HTMLElement {
|
|
|
1988
2129
|
return this.getAttribute("depth-model");
|
|
1989
2130
|
}
|
|
1990
2131
|
get shouldAutoplay() {
|
|
1991
|
-
return this.getAttrBool("autoplay",
|
|
2132
|
+
return this.getAttrBool("autoplay", z.autoplay);
|
|
1992
2133
|
}
|
|
1993
2134
|
get shouldLoop() {
|
|
1994
|
-
return this.getAttrBool("loop",
|
|
2135
|
+
return this.getAttrBool("loop", z.loop);
|
|
1995
2136
|
}
|
|
1996
2137
|
get shouldMute() {
|
|
1997
|
-
return this.getAttrBool("muted",
|
|
2138
|
+
return this.getAttrBool("muted", z.muted);
|
|
1998
2139
|
}
|
|
1999
2140
|
// --- Event dispatching ---
|
|
2000
2141
|
/**
|
|
@@ -2081,7 +2222,7 @@ class xt extends HTMLElement {
|
|
|
2081
2222
|
const i = await n.json();
|
|
2082
2223
|
return {
|
|
2083
2224
|
channels: i.channels ?? [],
|
|
2084
|
-
motion: i.motion ??
|
|
2225
|
+
motion: i.motion ?? Ct,
|
|
2085
2226
|
overscanPadding: i.overscanPadding ?? 0.05,
|
|
2086
2227
|
quality: i.quality ?? "auto"
|
|
2087
2228
|
};
|
|
@@ -2112,8 +2253,8 @@ class xt extends HTMLElement {
|
|
|
2112
2253
|
if (!this.container) return;
|
|
2113
2254
|
const e = this.sourceType === "camera", n = this.depthModel;
|
|
2114
2255
|
try {
|
|
2115
|
-
let i, r,
|
|
2116
|
-
const
|
|
2256
|
+
let i, r, o = null;
|
|
2257
|
+
const l = (m) => {
|
|
2117
2258
|
this.emit("layershift-effect:model-progress", m);
|
|
2118
2259
|
};
|
|
2119
2260
|
if (e) {
|
|
@@ -2125,91 +2266,99 @@ class xt extends HTMLElement {
|
|
|
2125
2266
|
return;
|
|
2126
2267
|
}
|
|
2127
2268
|
if (n) {
|
|
2128
|
-
if (
|
|
2129
|
-
|
|
2269
|
+
if (o = await dt(n, $, K, l), t.aborted) {
|
|
2270
|
+
o.dispose(), i.dispose();
|
|
2130
2271
|
return;
|
|
2131
2272
|
}
|
|
2132
|
-
r =
|
|
2273
|
+
r = X($, K);
|
|
2133
2274
|
} else
|
|
2134
|
-
r =
|
|
2275
|
+
r = X(i.width, i.height);
|
|
2135
2276
|
} else {
|
|
2136
|
-
const m = this.getAttribute("src"), T = this.getAttribute("depth-src"), w =
|
|
2137
|
-
if (
|
|
2138
|
-
const [P,
|
|
2139
|
-
|
|
2277
|
+
const m = this.getAttribute("src"), T = this.getAttribute("depth-src"), w = !!T, A = this.sourceType === "image" || /\.(jpe?g|png|webp|gif|avif|bmp)(\?|$)/i.test(m);
|
|
2278
|
+
if (w) {
|
|
2279
|
+
const [P, F] = await Promise.all([
|
|
2280
|
+
A ? ft(m) : ht(m, {
|
|
2140
2281
|
parent: this.shadow,
|
|
2141
2282
|
loop: this.shouldLoop,
|
|
2142
2283
|
muted: this.shouldMute
|
|
2143
2284
|
}),
|
|
2144
|
-
|
|
2285
|
+
kt(
|
|
2286
|
+
T,
|
|
2287
|
+
this.getAttrFloat("depth-width", 512),
|
|
2288
|
+
this.getAttrFloat("depth-height", 512),
|
|
2289
|
+
this.getAttrFloat("depth-fps", 5)
|
|
2290
|
+
)
|
|
2145
2291
|
]);
|
|
2146
2292
|
if (t.aborted) {
|
|
2147
2293
|
P.dispose();
|
|
2148
2294
|
return;
|
|
2149
2295
|
}
|
|
2150
|
-
i = P, r =
|
|
2296
|
+
i = P, r = F;
|
|
2151
2297
|
} else if (n) {
|
|
2152
|
-
const [P,
|
|
2153
|
-
|
|
2298
|
+
const [P, F] = await Promise.all([
|
|
2299
|
+
A ? ft(m) : ht(m, {
|
|
2154
2300
|
parent: this.shadow,
|
|
2155
2301
|
loop: this.shouldLoop,
|
|
2156
2302
|
muted: this.shouldMute
|
|
2157
2303
|
}),
|
|
2158
|
-
|
|
2304
|
+
dt(n, $, K, l)
|
|
2159
2305
|
]);
|
|
2160
2306
|
if (t.aborted) {
|
|
2161
|
-
P.dispose(),
|
|
2307
|
+
P.dispose(), F.dispose();
|
|
2162
2308
|
return;
|
|
2163
2309
|
}
|
|
2164
|
-
if (i = P,
|
|
2165
|
-
const
|
|
2166
|
-
if (
|
|
2167
|
-
const
|
|
2310
|
+
if (i = P, o = F, A || !i.isLive) {
|
|
2311
|
+
const _ = i.getImageSource();
|
|
2312
|
+
if (_) {
|
|
2313
|
+
const I = await o.submitFrameAndWait(_);
|
|
2168
2314
|
r = {
|
|
2169
|
-
|
|
2170
|
-
|
|
2315
|
+
width: $,
|
|
2316
|
+
height: K,
|
|
2317
|
+
fps: 1,
|
|
2318
|
+
frameCount: 1,
|
|
2319
|
+
frames: [I]
|
|
2171
2320
|
};
|
|
2172
2321
|
} else
|
|
2173
|
-
r =
|
|
2322
|
+
r = X($, K);
|
|
2174
2323
|
} else
|
|
2175
|
-
r =
|
|
2324
|
+
r = X($, K);
|
|
2176
2325
|
} else
|
|
2177
|
-
throw new Error("Either depth-src
|
|
2326
|
+
throw new Error("Either depth-src or depth-model must be provided.");
|
|
2178
2327
|
}
|
|
2179
|
-
this.source = i, this.depthEstimator =
|
|
2180
|
-
const
|
|
2328
|
+
this.source = i, this.depthEstimator = o, this.loopCount = 0, this.attachSourceEventListeners(i);
|
|
2329
|
+
const a = re(
|
|
2181
2330
|
r.frames,
|
|
2182
|
-
r.
|
|
2183
|
-
r.
|
|
2184
|
-
),
|
|
2331
|
+
r.width,
|
|
2332
|
+
r.height
|
|
2333
|
+
), h = se(a);
|
|
2185
2334
|
this.depthFallback = {
|
|
2186
|
-
contrastLow:
|
|
2187
|
-
contrastHigh:
|
|
2188
|
-
verticalReduction:
|
|
2335
|
+
contrastLow: h.contrastLow,
|
|
2336
|
+
contrastHigh: h.contrastHigh,
|
|
2337
|
+
verticalReduction: h.verticalReduction
|
|
2189
2338
|
};
|
|
2190
|
-
let
|
|
2191
|
-
if (
|
|
2192
|
-
|
|
2339
|
+
let c;
|
|
2340
|
+
if (o)
|
|
2341
|
+
c = () => o.getLatestDepth();
|
|
2193
2342
|
else {
|
|
2194
|
-
const m = new
|
|
2195
|
-
|
|
2343
|
+
const m = new Vt(r);
|
|
2344
|
+
c = (T) => m.sample(T);
|
|
2196
2345
|
}
|
|
2197
2346
|
if (t.aborted) return;
|
|
2198
|
-
let f,
|
|
2199
|
-
const
|
|
2347
|
+
let f, u = null, x = Ct;
|
|
2348
|
+
const p = await this.fetchFilterConfig(t);
|
|
2200
2349
|
if (t.aborted) return;
|
|
2201
|
-
if (
|
|
2202
|
-
const m =
|
|
2203
|
-
contrastLow:
|
|
2204
|
-
contrastHigh:
|
|
2205
|
-
verticalReduction:
|
|
2350
|
+
if (p && p.channels.length > 0) {
|
|
2351
|
+
const m = Ut(p.channels, {
|
|
2352
|
+
contrastLow: h.contrastLow,
|
|
2353
|
+
contrastHigh: h.contrastHigh,
|
|
2354
|
+
verticalReduction: h.verticalReduction
|
|
2206
2355
|
});
|
|
2207
2356
|
f = {
|
|
2208
2357
|
parallaxStrength: m.parallaxStrength,
|
|
2209
2358
|
pomEnabled: m.pomEnabled,
|
|
2210
2359
|
pomSteps: m.pomSteps,
|
|
2211
|
-
overscanPadding:
|
|
2212
|
-
quality:
|
|
2360
|
+
overscanPadding: p.overscanPadding,
|
|
2361
|
+
quality: p.quality,
|
|
2213
2362
|
contrastLow: m.contrastLow,
|
|
2214
2363
|
contrastHigh: m.contrastHigh,
|
|
2215
2364
|
verticalReduction: m.verticalReduction,
|
|
@@ -2223,28 +2372,28 @@ class xt extends HTMLElement {
|
|
|
2223
2372
|
tiltHalfTanFov: m.tiltHalfTanFov,
|
|
2224
2373
|
tiltTransitionWidth: m.tiltTransitionWidth,
|
|
2225
2374
|
tiltPeakIntensity: m.tiltPeakIntensity
|
|
2226
|
-
},
|
|
2375
|
+
}, u = Lt(p.channels), x = p.motion;
|
|
2227
2376
|
} else
|
|
2228
|
-
f = this.buildLegacyConfig(
|
|
2229
|
-
this.renderer = new
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2377
|
+
f = this.buildLegacyConfig(h, i.width);
|
|
2378
|
+
this.renderer = new ye(this.container, f), this.renderer.initialize(i, r.width, r.height), u && this.renderer.updateCurveLUTs(
|
|
2379
|
+
u.displacementLUT,
|
|
2380
|
+
u.blurLUT,
|
|
2381
|
+
u.glowLUT,
|
|
2382
|
+
u.colorShiftLUT,
|
|
2383
|
+
u.colorShiftParams ?? void 0
|
|
2235
2384
|
);
|
|
2236
|
-
const d = x.tiltPlaneInput ?? !1, y = x.tiltPitchSensitivity ?? 0.35,
|
|
2385
|
+
const d = x.tiltPlaneInput ?? !1, y = x.tiltPitchSensitivity ?? 0.35, b = x.tiltYawSensitivity ?? 0.15, g = p?.channels.find((m) => m.channel === "blur" && m.enabled)?.params?.focalCenter ?? 0.5, v = o;
|
|
2237
2386
|
if (this.renderer.start(
|
|
2238
2387
|
i,
|
|
2239
|
-
|
|
2388
|
+
c,
|
|
2240
2389
|
() => {
|
|
2241
2390
|
const m = this._input;
|
|
2242
2391
|
if (d) {
|
|
2243
|
-
const A = m.y * y,
|
|
2392
|
+
const A = m.y * y, P = m.x * b, F = Math.cos(A), _ = Math.sin(A), I = Math.cos(P), S = Math.sin(P) * F, D = -_, U = I * F, M = 0.5 + g * (5 - 0.5);
|
|
2244
2393
|
return {
|
|
2245
2394
|
x: m.x * 0.3,
|
|
2246
2395
|
y: m.y * 0.3,
|
|
2247
|
-
tiltPlaneNormal: [S,
|
|
2396
|
+
tiltPlaneNormal: [S, D, U],
|
|
2248
2397
|
tiltPlaneD: U * M
|
|
2249
2398
|
};
|
|
2250
2399
|
}
|
|
@@ -2270,8 +2419,8 @@ class xt extends HTMLElement {
|
|
|
2270
2419
|
videoWidth: i.width,
|
|
2271
2420
|
videoHeight: i.height,
|
|
2272
2421
|
duration: i.duration,
|
|
2273
|
-
depthProfile:
|
|
2274
|
-
derivedParams:
|
|
2422
|
+
depthProfile: a,
|
|
2423
|
+
derivedParams: h,
|
|
2275
2424
|
motionConfig: x
|
|
2276
2425
|
});
|
|
2277
2426
|
} catch (i) {
|
|
@@ -2295,9 +2444,9 @@ class xt extends HTMLElement {
|
|
|
2295
2444
|
contrastLow: 0.05,
|
|
2296
2445
|
contrastHigh: 0.95,
|
|
2297
2446
|
verticalReduction: 0.5
|
|
2298
|
-
}, n =
|
|
2447
|
+
}, n = Ut(t, e);
|
|
2299
2448
|
this.renderer.updateConfig(n);
|
|
2300
|
-
const i =
|
|
2449
|
+
const i = Lt(t);
|
|
2301
2450
|
this.renderer.updateCurveLUTs(
|
|
2302
2451
|
i.displacementLUT,
|
|
2303
2452
|
i.blurLUT,
|
|
@@ -2359,15 +2508,15 @@ class Rt {
|
|
|
2359
2508
|
createResources(t, e, n) {
|
|
2360
2509
|
const i = this.gl;
|
|
2361
2510
|
this.dispose();
|
|
2362
|
-
const r = Math.max(1, Math.round(t / n)),
|
|
2363
|
-
this._width = r, this._height =
|
|
2364
|
-
const
|
|
2511
|
+
const r = Math.max(1, Math.round(t / n)), o = Math.max(1, Math.round(e / n));
|
|
2512
|
+
this._width = r, this._height = o;
|
|
2513
|
+
const l = (h, c, f, u) => {
|
|
2365
2514
|
const x = i.createFramebuffer();
|
|
2366
|
-
return i.bindFramebuffer(i.FRAMEBUFFER, x), i.bindTexture(i.TEXTURE_2D,
|
|
2515
|
+
return i.bindFramebuffer(i.FRAMEBUFFER, x), i.bindTexture(i.TEXTURE_2D, h), i.texStorage2D(i.TEXTURE_2D, 1, c, f, u), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_S, i.CLAMP_TO_EDGE), i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_T, i.CLAMP_TO_EDGE), i.framebufferTexture2D(i.FRAMEBUFFER, i.COLOR_ATTACHMENT0, i.TEXTURE_2D, h, 0), i.bindFramebuffer(i.FRAMEBUFFER, null), x;
|
|
2367
2516
|
};
|
|
2368
|
-
this.maskTex = i.createTexture(), this.maskFbo =
|
|
2369
|
-
const
|
|
2370
|
-
this.pingTex = i.createTexture(), this.pingFbo =
|
|
2517
|
+
this.maskTex = i.createTexture(), this.maskFbo = l(this.maskTex, i.R8, r, o);
|
|
2518
|
+
const a = this.hasColorBufferFloat ? i.RG16F : i.RGBA8;
|
|
2519
|
+
this.pingTex = i.createTexture(), this.pingFbo = l(this.pingTex, a, r, o), this.pongTex = i.createTexture(), this.pongFbo = l(this.pongTex, a, r, o), this.distTex = i.createTexture(), this.distFbo = l(this.distTex, i.RGBA8, r, o), this._dirty = !0;
|
|
2371
2520
|
}
|
|
2372
2521
|
// -----------------------------------------------------------------------
|
|
2373
2522
|
// Distance field computation
|
|
@@ -2388,14 +2537,14 @@ class Rt {
|
|
|
2388
2537
|
e.viewport(0, 0, n, i), e.disable(e.STENCIL_TEST), e.disable(e.BLEND), e.bindFramebuffer(e.FRAMEBUFFER, this.maskFbo), e.clearColor(0, 0, 0, 1), e.clear(e.COLOR_BUFFER_BIT), e.useProgram(t.maskPass.program), e.uniform2f(t.maskPass.uniforms.uMeshScale, t.meshScaleX, t.meshScaleY), e.bindVertexArray(t.maskVao), e.drawElements(e.TRIANGLES, t.stencilIndexCount, e.UNSIGNED_SHORT, 0), e.bindFramebuffer(e.FRAMEBUFFER, this.pingFbo), e.clearColor(-1, -1, 0, 0), e.clear(e.COLOR_BUFFER_BIT), e.useProgram(t.seedPass.program), e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D, this.maskTex), e.uniform1i(t.seedPass.uniforms.uMask, 5), e.uniform2f(t.seedPass.uniforms.uTexelSize, 1 / n, 1 / i), e.bindVertexArray(t.quadVao), e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
|
|
2389
2538
|
const r = Rt.computeFloodIterations(n, i);
|
|
2390
2539
|
e.useProgram(t.floodPass.program);
|
|
2391
|
-
let
|
|
2392
|
-
for (let
|
|
2393
|
-
const
|
|
2394
|
-
e.bindFramebuffer(e.FRAMEBUFFER,
|
|
2395
|
-
const f =
|
|
2396
|
-
|
|
2540
|
+
let o = this.pingTex, l = this.pongFbo, a = this.pongTex;
|
|
2541
|
+
for (let h = 0; h < r.length; h++) {
|
|
2542
|
+
const c = r[h] / Math.max(n, i);
|
|
2543
|
+
e.bindFramebuffer(e.FRAMEBUFFER, l), e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D, o), e.uniform1i(t.floodPass.uniforms.uSeedTex, 5), e.uniform1f(t.floodPass.uniforms.uStepSize, c), e.bindVertexArray(t.quadVao), e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
|
|
2544
|
+
const f = o, u = l;
|
|
2545
|
+
o = a, l = u === this.pongFbo ? this.pingFbo : this.pongFbo, a = f;
|
|
2397
2546
|
}
|
|
2398
|
-
e.bindFramebuffer(e.FRAMEBUFFER, this.distFbo), e.clearColor(0, 0, 0, 1), e.clear(e.COLOR_BUFFER_BIT), e.useProgram(t.distPass.program), e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D,
|
|
2547
|
+
e.bindFramebuffer(e.FRAMEBUFFER, this.distFbo), e.clearColor(0, 0, 0, 1), e.clear(e.COLOR_BUFFER_BIT), e.useProgram(t.distPass.program), e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D, o), e.uniform1i(t.distPass.uniforms.uSeedTex, 5), e.activeTexture(e.TEXTURE6), e.bindTexture(e.TEXTURE_2D, this.maskTex), e.uniform1i(t.distPass.uniforms.uMask, 6), e.uniform1f(t.distPass.uniforms.uBevelWidth, t.distRange), e.bindVertexArray(t.quadVao), e.drawArrays(e.TRIANGLE_STRIP, 0, 4), e.activeTexture(e.TEXTURE4), e.bindTexture(e.TEXTURE_2D, this.distTex), e.bindFramebuffer(e.FRAMEBUFFER, null), this._dirty = !1;
|
|
2399
2548
|
}
|
|
2400
2549
|
// -----------------------------------------------------------------------
|
|
2401
2550
|
// Flood iteration planning (shared between backends)
|
|
@@ -2419,34 +2568,34 @@ class Rt {
|
|
|
2419
2568
|
this.maskTex && (t.deleteTexture(this.maskTex), this.maskTex = null), this.maskFbo && (t.deleteFramebuffer(this.maskFbo), this.maskFbo = null), this.pingTex && (t.deleteTexture(this.pingTex), this.pingTex = null), this.pingFbo && (t.deleteFramebuffer(this.pingFbo), this.pingFbo = null), this.pongTex && (t.deleteTexture(this.pongTex), this.pongTex = null), this.pongFbo && (t.deleteFramebuffer(this.pongFbo), this.pongFbo = null), this.distTex && (t.deleteTexture(this.distTex), this.distTex = null), this.distFbo && (t.deleteFramebuffer(this.distFbo), this.distFbo = null), this._width = 0, this._height = 0, this._dirty = !0;
|
|
2420
2569
|
}
|
|
2421
2570
|
}
|
|
2422
|
-
const
|
|
2571
|
+
const Ce = `#version 300 es
|
|
2423
2572
|
in vec2 aPosition;
|
|
2424
2573
|
uniform vec2 uMeshScale;
|
|
2425
2574
|
void main() {
|
|
2426
2575
|
gl_Position = vec4(aPosition * uMeshScale, 0.0, 1.0);
|
|
2427
2576
|
}
|
|
2428
|
-
`,
|
|
2577
|
+
`, Ue = `#version 300 es
|
|
2429
2578
|
precision lowp float;
|
|
2430
2579
|
out vec4 fragColor;
|
|
2431
2580
|
void main() { fragColor = vec4(0.0); }
|
|
2432
|
-
`,
|
|
2581
|
+
`, Le = `#version 300 es
|
|
2433
2582
|
in vec2 aPosition;
|
|
2434
2583
|
uniform vec2 uMeshScale;
|
|
2435
2584
|
void main() {
|
|
2436
2585
|
gl_Position = vec4(aPosition * uMeshScale, 0.0, 1.0);
|
|
2437
2586
|
}
|
|
2438
|
-
`,
|
|
2587
|
+
`, _e = `#version 300 es
|
|
2439
2588
|
precision lowp float;
|
|
2440
2589
|
out vec4 fragColor;
|
|
2441
2590
|
void main() { fragColor = vec4(1.0); }
|
|
2442
|
-
`,
|
|
2591
|
+
`, Ie = `#version 300 es
|
|
2443
2592
|
in vec2 aPosition;
|
|
2444
2593
|
out vec2 vUv;
|
|
2445
2594
|
void main() {
|
|
2446
2595
|
vUv = aPosition * 0.5 + 0.5;
|
|
2447
2596
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2448
2597
|
}
|
|
2449
|
-
`,
|
|
2598
|
+
`, Me = `#version 300 es
|
|
2450
2599
|
precision highp float;
|
|
2451
2600
|
uniform sampler2D uMask;
|
|
2452
2601
|
uniform vec2 uTexelSize;
|
|
@@ -2471,14 +2620,14 @@ void main() {
|
|
|
2471
2620
|
fragSeed = vec2(-1.0);
|
|
2472
2621
|
}
|
|
2473
2622
|
}
|
|
2474
|
-
`,
|
|
2623
|
+
`, Be = `#version 300 es
|
|
2475
2624
|
in vec2 aPosition;
|
|
2476
2625
|
out vec2 vUv;
|
|
2477
2626
|
void main() {
|
|
2478
2627
|
vUv = aPosition * 0.5 + 0.5;
|
|
2479
2628
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2480
2629
|
}
|
|
2481
|
-
`,
|
|
2630
|
+
`, Ve = `#version 300 es
|
|
2482
2631
|
precision highp float;
|
|
2483
2632
|
uniform sampler2D uSeedTex;
|
|
2484
2633
|
uniform float uStepSize;
|
|
@@ -2507,14 +2656,14 @@ void main() {
|
|
|
2507
2656
|
|
|
2508
2657
|
fragSeed = bestSeed;
|
|
2509
2658
|
}
|
|
2510
|
-
`,
|
|
2659
|
+
`, ke = `#version 300 es
|
|
2511
2660
|
in vec2 aPosition;
|
|
2512
2661
|
out vec2 vUv;
|
|
2513
2662
|
void main() {
|
|
2514
2663
|
vUv = aPosition * 0.5 + 0.5;
|
|
2515
2664
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2516
2665
|
}
|
|
2517
|
-
`,
|
|
2666
|
+
`, Oe = `#version 300 es
|
|
2518
2667
|
precision highp float;
|
|
2519
2668
|
uniform sampler2D uSeedTex;
|
|
2520
2669
|
uniform sampler2D uMask;
|
|
@@ -2551,7 +2700,7 @@ void main() {
|
|
|
2551
2700
|
vScreenUv = baseUv;
|
|
2552
2701
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2553
2702
|
}
|
|
2554
|
-
`,
|
|
2703
|
+
`, Xe = `#version 300 es
|
|
2555
2704
|
precision highp float;
|
|
2556
2705
|
|
|
2557
2706
|
#define MAX_POM_STEPS 32
|
|
@@ -2682,14 +2831,14 @@ void main() {
|
|
|
2682
2831
|
// Write lens-transformed depth to second attachment for boundary effects
|
|
2683
2832
|
fragDepth = vec4(lensD, 0.0, 0.0, 1.0);
|
|
2684
2833
|
}
|
|
2685
|
-
`,
|
|
2834
|
+
`, Ne = `#version 300 es
|
|
2686
2835
|
in vec2 aPosition;
|
|
2687
2836
|
out vec2 vUv;
|
|
2688
2837
|
void main() {
|
|
2689
2838
|
vUv = aPosition * 0.5 + 0.5;
|
|
2690
2839
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2691
2840
|
}
|
|
2692
|
-
`,
|
|
2841
|
+
`, Ge = `#version 300 es
|
|
2693
2842
|
precision highp float;
|
|
2694
2843
|
uniform sampler2D uInteriorColor;
|
|
2695
2844
|
uniform sampler2D uDistField;
|
|
@@ -2719,7 +2868,7 @@ void main() {
|
|
|
2719
2868
|
|
|
2720
2869
|
fragColor = vec4(toSRGB(linear), color.a);
|
|
2721
2870
|
}
|
|
2722
|
-
`,
|
|
2871
|
+
`, We = `#version 300 es
|
|
2723
2872
|
in vec2 aPosition;
|
|
2724
2873
|
in vec2 aNormal;
|
|
2725
2874
|
uniform float uRimWidth;
|
|
@@ -2742,7 +2891,7 @@ void main() {
|
|
|
2742
2891
|
|
|
2743
2892
|
gl_Position = vec4(pos, 0.0, 1.0);
|
|
2744
2893
|
}
|
|
2745
|
-
`,
|
|
2894
|
+
`, ze = `#version 300 es
|
|
2746
2895
|
precision highp float;
|
|
2747
2896
|
|
|
2748
2897
|
uniform sampler2D uInteriorColor;
|
|
@@ -2844,7 +2993,7 @@ void main() {
|
|
|
2844
2993
|
|
|
2845
2994
|
fragColor = vec4(color * alpha, alpha);
|
|
2846
2995
|
}
|
|
2847
|
-
`,
|
|
2996
|
+
`, qe = `#version 300 es
|
|
2848
2997
|
in vec2 aPosition;
|
|
2849
2998
|
in vec3 aNormal3;
|
|
2850
2999
|
in float aLerpT; // 0 = inner (at silhouette), 1 = outer edge
|
|
@@ -2860,7 +3009,7 @@ void main() {
|
|
|
2860
3009
|
vLerpT = aLerpT;
|
|
2861
3010
|
gl_Position = vec4(sp, 0.0, 1.0);
|
|
2862
3011
|
}
|
|
2863
|
-
`,
|
|
3012
|
+
`, Ye = `#version 300 es
|
|
2864
3013
|
precision highp float;
|
|
2865
3014
|
uniform vec3 uLightDir3;
|
|
2866
3015
|
uniform vec3 uChamferColor;
|
|
@@ -2928,38 +3077,38 @@ void main() {
|
|
|
2928
3077
|
fragColor = vec4(toSRGB(lit), 1.0);
|
|
2929
3078
|
}
|
|
2930
3079
|
`;
|
|
2931
|
-
function
|
|
3080
|
+
function je(s) {
|
|
2932
3081
|
const t = [];
|
|
2933
3082
|
let e = 0;
|
|
2934
|
-
for (let n = 0; n <
|
|
2935
|
-
const i =
|
|
2936
|
-
if (
|
|
2937
|
-
const f = -
|
|
3083
|
+
for (let n = 0; n < s.length - 2; n += 2) {
|
|
3084
|
+
const i = s[n], r = s[n + 1], o = s[n + 2], l = s[n + 3], a = o - i, h = l - r, c = Math.sqrt(a * a + h * h);
|
|
3085
|
+
if (c < 1e-6) continue;
|
|
3086
|
+
const f = -h / c, u = a / c;
|
|
2938
3087
|
t.push(
|
|
2939
3088
|
i,
|
|
2940
3089
|
r,
|
|
2941
3090
|
f,
|
|
2942
|
-
|
|
3091
|
+
u,
|
|
2943
3092
|
i,
|
|
2944
3093
|
r,
|
|
2945
3094
|
-f,
|
|
2946
|
-
-
|
|
2947
|
-
|
|
2948
|
-
|
|
3095
|
+
-u,
|
|
3096
|
+
o,
|
|
3097
|
+
l,
|
|
2949
3098
|
f,
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
3099
|
+
u,
|
|
3100
|
+
o,
|
|
3101
|
+
l,
|
|
2953
3102
|
f,
|
|
2954
|
-
|
|
3103
|
+
u,
|
|
2955
3104
|
i,
|
|
2956
3105
|
r,
|
|
2957
3106
|
-f,
|
|
2958
|
-
-
|
|
2959
|
-
|
|
2960
|
-
|
|
3107
|
+
-u,
|
|
3108
|
+
o,
|
|
3109
|
+
l,
|
|
2961
3110
|
-f,
|
|
2962
|
-
-
|
|
3111
|
+
-u
|
|
2963
3112
|
), e += 6;
|
|
2964
3113
|
}
|
|
2965
3114
|
return {
|
|
@@ -2967,43 +3116,43 @@ function $e(o) {
|
|
|
2967
3116
|
count: e
|
|
2968
3117
|
};
|
|
2969
3118
|
}
|
|
2970
|
-
function
|
|
3119
|
+
function Ze(s, t, e, n, i) {
|
|
2971
3120
|
if (n <= 0)
|
|
2972
3121
|
return { vertices: new Float32Array(0), count: 0 };
|
|
2973
|
-
const r = i * Math.PI / 180,
|
|
2974
|
-
let
|
|
2975
|
-
for (let
|
|
2976
|
-
const f = t[
|
|
2977
|
-
if (
|
|
2978
|
-
const d =
|
|
3122
|
+
const r = i * Math.PI / 180, o = -Math.cos(r), l = Math.sin(r), a = [];
|
|
3123
|
+
let h = 0;
|
|
3124
|
+
for (let c = 0; c < t.length; c++) {
|
|
3125
|
+
const f = t[c], p = ((c + 1 < t.length ? t[c + 1] : s.length) - f) / 2;
|
|
3126
|
+
if (p < 3) continue;
|
|
3127
|
+
const d = p - 1;
|
|
2979
3128
|
let y = 0;
|
|
2980
3129
|
for (let T = 0; T < d; T++) {
|
|
2981
|
-
const w = f + T * 2, A =
|
|
2982
|
-
y += A * _ -
|
|
3130
|
+
const w = f + T * 2, A = s[w], P = s[w + 1], F = s[w + 2], _ = s[w + 3];
|
|
3131
|
+
y += A * _ - F * P;
|
|
2983
3132
|
}
|
|
2984
|
-
const
|
|
3133
|
+
const b = y >= 0 ? 1 : -1, E = [], g = [];
|
|
2985
3134
|
for (let T = 0; T < d; T++) {
|
|
2986
|
-
const w = f + T * 2, A =
|
|
2987
|
-
|
|
3135
|
+
const w = f + T * 2, A = s[w + 2] - s[w], P = s[w + 3] - s[w + 1], F = Math.sqrt(A * A + P * P);
|
|
3136
|
+
F < 1e-8 ? (E.push(T > 0 ? E[T - 1] : 0), g.push(T > 0 ? g[T - 1] : 0)) : (E.push(-P / F * b), g.push(A / F * b));
|
|
2988
3137
|
}
|
|
2989
3138
|
const v = [], m = [];
|
|
2990
3139
|
for (let T = 0; T < d; T++) {
|
|
2991
3140
|
const w = (T - 1 + d) % d;
|
|
2992
|
-
let A =
|
|
2993
|
-
const
|
|
2994
|
-
|
|
3141
|
+
let A = E[w] + E[T], P = g[w] + g[T];
|
|
3142
|
+
const F = Math.sqrt(A * A + P * P);
|
|
3143
|
+
F > 1e-8 ? (A /= F, P /= F) : (A = E[T], P = g[T]), v.push(A), m.push(P);
|
|
2995
3144
|
}
|
|
2996
3145
|
for (let T = 0; T < d; T++) {
|
|
2997
|
-
const w = T, A = (T + 1) % d,
|
|
2998
|
-
|
|
3146
|
+
const w = T, A = (T + 1) % d, P = f + T * 2, F = f + (T + 1) % d * 2, _ = s[P], I = s[P + 1], C = s[F], S = s[F + 1], D = v[w] * l, U = m[w] * l, M = o, k = v[A] * l, j = m[A] * l, et = o, at = _ + v[w] * n, At = I + m[w] * n, Jt = C + v[A] * n, Qt = S + m[A] * n;
|
|
3147
|
+
a.push(_, I, D, U, M, 0), a.push(at, At, D, U, M, 1), a.push(C, S, k, j, et, 0), a.push(C, S, k, j, et, 0), a.push(at, At, D, U, M, 1), a.push(Jt, Qt, k, j, et, 1), h += 6;
|
|
2999
3148
|
}
|
|
3000
3149
|
}
|
|
3001
3150
|
return {
|
|
3002
|
-
vertices: new Float32Array(
|
|
3003
|
-
count:
|
|
3151
|
+
vertices: new Float32Array(a),
|
|
3152
|
+
count: h
|
|
3004
3153
|
};
|
|
3005
3154
|
}
|
|
3006
|
-
class
|
|
3155
|
+
class $e extends gt {
|
|
3007
3156
|
gl = null;
|
|
3008
3157
|
// Render passes (each owns its program + cached uniforms)
|
|
3009
3158
|
stencilPass = null;
|
|
@@ -3025,7 +3174,7 @@ class Je extends mt {
|
|
|
3025
3174
|
chamferVao = null;
|
|
3026
3175
|
chamferVertexCount = 0;
|
|
3027
3176
|
// Source textures (via TextureRegistry — init-time allocation)
|
|
3028
|
-
textures = new
|
|
3177
|
+
textures = new Ht();
|
|
3029
3178
|
videoSlot;
|
|
3030
3179
|
depthSlot;
|
|
3031
3180
|
// Interior FBO (units 2, 3)
|
|
@@ -3052,7 +3201,7 @@ class Je extends mt {
|
|
|
3052
3201
|
this.lightDirX = Math.cos(n), this.lightDirY = Math.sin(n);
|
|
3053
3202
|
const i = this.config.lightDirection, r = Math.sqrt(i[0] * i[0] + i[1] * i[1] + i[2] * i[2]);
|
|
3054
3203
|
r > 1e-6 && (this.lightDir3 = [i[0] / r, i[1] / r, i[2] / r]);
|
|
3055
|
-
const
|
|
3204
|
+
const o = this.canvas.getContext("webgl2", {
|
|
3056
3205
|
antialias: !0,
|
|
3057
3206
|
alpha: !0,
|
|
3058
3207
|
premultipliedAlpha: !0,
|
|
@@ -3060,8 +3209,8 @@ class Je extends mt {
|
|
|
3060
3209
|
desynchronized: !0,
|
|
3061
3210
|
powerPreference: "high-performance"
|
|
3062
3211
|
});
|
|
3063
|
-
if (!
|
|
3064
|
-
this.gl =
|
|
3212
|
+
if (!o) throw new Error("WebGL 2 is not supported.");
|
|
3213
|
+
this.gl = o, this.qualityParams = Xt(o, e.quality), "drawingBufferColorSpace" in o && (o.drawingBufferColorSpace = "srgb"), this.hasColorBufferFloat = !!o.getExtension("EXT_color_buffer_float"), o.clearColor(0, 0, 0, 0), o.pixelStorei(o.UNPACK_FLIP_Y_WEBGL, !0), this.initGPUResources(), this.setupResizeHandling();
|
|
3065
3214
|
}
|
|
3066
3215
|
initialize(t, e, n, i) {
|
|
3067
3216
|
const r = this.gl;
|
|
@@ -3095,20 +3244,20 @@ class Je extends mt {
|
|
|
3095
3244
|
uploadBoundaryMesh(t) {
|
|
3096
3245
|
const e = this.gl;
|
|
3097
3246
|
if (!e || !this.boundaryPass) return;
|
|
3098
|
-
const n =
|
|
3247
|
+
const n = je(t.edgeVertices);
|
|
3099
3248
|
if (n.count === 0) return;
|
|
3100
3249
|
this.boundaryVao = e.createVertexArray(), e.bindVertexArray(this.boundaryVao);
|
|
3101
3250
|
const i = e.createBuffer();
|
|
3102
3251
|
e.bindBuffer(e.ARRAY_BUFFER, i), e.bufferData(e.ARRAY_BUFFER, n.vertices, e.STATIC_DRAW);
|
|
3103
|
-
const r = 16,
|
|
3104
|
-
e.enableVertexAttribArray(
|
|
3105
|
-
const
|
|
3106
|
-
|
|
3252
|
+
const r = 16, o = e.getAttribLocation(this.boundaryPass.program, "aPosition");
|
|
3253
|
+
e.enableVertexAttribArray(o), e.vertexAttribPointer(o, 2, e.FLOAT, !1, r, 0);
|
|
3254
|
+
const l = e.getAttribLocation(this.boundaryPass.program, "aNormal");
|
|
3255
|
+
l >= 0 && (e.enableVertexAttribArray(l), e.vertexAttribPointer(l, 2, e.FLOAT, !1, r, 8)), this.boundaryVertexCount = n.count, e.bindVertexArray(null);
|
|
3107
3256
|
}
|
|
3108
3257
|
uploadChamferMesh(t) {
|
|
3109
3258
|
const e = this.gl;
|
|
3110
3259
|
if (!e || !this.chamferPass || this.config.chamferWidth <= 0) return;
|
|
3111
|
-
const n =
|
|
3260
|
+
const n = Ze(
|
|
3112
3261
|
t.edgeVertices,
|
|
3113
3262
|
t.contourOffsets,
|
|
3114
3263
|
t.contourIsHole,
|
|
@@ -3119,12 +3268,12 @@ class Je extends mt {
|
|
|
3119
3268
|
this.chamferVao = e.createVertexArray(), e.bindVertexArray(this.chamferVao);
|
|
3120
3269
|
const i = e.createBuffer();
|
|
3121
3270
|
e.bindBuffer(e.ARRAY_BUFFER, i), e.bufferData(e.ARRAY_BUFFER, n.vertices, e.STATIC_DRAW);
|
|
3122
|
-
const r = 24,
|
|
3123
|
-
e.enableVertexAttribArray(
|
|
3124
|
-
const
|
|
3125
|
-
|
|
3126
|
-
const
|
|
3127
|
-
|
|
3271
|
+
const r = 24, o = e.getAttribLocation(this.chamferPass.program, "aPosition");
|
|
3272
|
+
e.enableVertexAttribArray(o), e.vertexAttribPointer(o, 2, e.FLOAT, !1, r, 0);
|
|
3273
|
+
const l = e.getAttribLocation(this.chamferPass.program, "aNormal3");
|
|
3274
|
+
l >= 0 && (e.enableVertexAttribArray(l), e.vertexAttribPointer(l, 3, e.FLOAT, !1, r, 8));
|
|
3275
|
+
const a = e.getAttribLocation(this.chamferPass.program, "aLerpT");
|
|
3276
|
+
a >= 0 && (e.enableVertexAttribArray(a), e.vertexAttribPointer(a, 1, e.FLOAT, !1, r, 20)), this.chamferVertexCount = n.count, e.bindVertexArray(null);
|
|
3128
3277
|
}
|
|
3129
3278
|
disposeChamferGeometry() {
|
|
3130
3279
|
const t = this.gl;
|
|
@@ -3166,7 +3315,7 @@ class Je extends mt {
|
|
|
3166
3315
|
// -----------------------------------------------------------------------
|
|
3167
3316
|
initGPUResources() {
|
|
3168
3317
|
const t = this.gl;
|
|
3169
|
-
t && (this.stencilPass =
|
|
3318
|
+
t && (this.stencilPass = O(t, "stencil", Ce, Ue, ["uMeshScale"]), this.maskPass = O(t, "mask", Le, _e, ["uMeshScale"]), this.jfaSeedPass = O(t, "jfa-seed", Ie, Me, ["uMask", "uTexelSize"]), this.jfaFloodPass = O(t, "jfa-flood", Be, Ve, ["uSeedTex", "uStepSize"]), this.jfaDistPass = O(t, "jfa-dist", ke, Oe, ["uSeedTex", "uMask", "uBevelWidth"]), this.interiorPass = O(t, "interior", He, Xe, [
|
|
3170
3319
|
"uImage",
|
|
3171
3320
|
"uDepth",
|
|
3172
3321
|
"uOffset",
|
|
@@ -3187,12 +3336,12 @@ class Je extends mt {
|
|
|
3187
3336
|
"uBrightnessBias",
|
|
3188
3337
|
"uUvOffset",
|
|
3189
3338
|
"uUvScale"
|
|
3190
|
-
]), this.compositePass =
|
|
3339
|
+
]), this.compositePass = O(t, "composite", Ne, Ge, [
|
|
3191
3340
|
"uInteriorColor",
|
|
3192
3341
|
"uDistField",
|
|
3193
3342
|
"uEdgeOcclusionWidth",
|
|
3194
3343
|
"uEdgeOcclusionStrength"
|
|
3195
|
-
]), this.boundaryPass =
|
|
3344
|
+
]), this.boundaryPass = O(t, "boundary", We, ze, [
|
|
3196
3345
|
"uInteriorColor",
|
|
3197
3346
|
"uInteriorDepth",
|
|
3198
3347
|
"uDistField",
|
|
@@ -3209,7 +3358,7 @@ class Je extends mt {
|
|
|
3209
3358
|
"uEdgeColor",
|
|
3210
3359
|
"uLightDir",
|
|
3211
3360
|
"uBevelIntensity"
|
|
3212
|
-
]), this.chamferPass =
|
|
3361
|
+
]), this.chamferPass = O(t, "chamfer", qe, Ye, [
|
|
3213
3362
|
"uMeshScale",
|
|
3214
3363
|
"uLightDir3",
|
|
3215
3364
|
"uChamferColor",
|
|
@@ -3234,11 +3383,15 @@ class Je extends mt {
|
|
|
3234
3383
|
if (!t || !this.interiorPass || !this.quadVao) return;
|
|
3235
3384
|
const n = e?.getImageSource();
|
|
3236
3385
|
if (!n || !this.interiorFbo || !this.interiorColorTex || !this.interiorDepthTex) return;
|
|
3237
|
-
this.jfa?.isDirty && this.maskVao
|
|
3386
|
+
if (this.jfa?.isDirty && this.maskVao) {
|
|
3387
|
+
const o = this.qualityParams.jfaDivisor, l = Math.max(1, Math.round(this.canvas.width / o)), a = Math.max(1, Math.round(this.canvas.height / o));
|
|
3388
|
+
(this.jfa.width !== l || this.jfa.height !== a) && this.createJFAResources(this.canvas.width, this.canvas.height), this.computeDistanceField(), t.viewport(0, 0, this.canvas.width, this.canvas.height);
|
|
3389
|
+
}
|
|
3390
|
+
t.activeTexture(t.TEXTURE0 + this.videoSlot.unit), t.bindTexture(t.TEXTURE_2D, this.videoSlot.texture), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, n), this.rvfcSupported || this.onDepthUpdate(e.currentTime);
|
|
3238
3391
|
let i = 0, r = 0;
|
|
3239
3392
|
if (this.readInput) {
|
|
3240
|
-
const
|
|
3241
|
-
i = -
|
|
3393
|
+
const o = this.readInput();
|
|
3394
|
+
i = -o.x, r = o.y;
|
|
3242
3395
|
}
|
|
3243
3396
|
if (t.bindFramebuffer(t.FRAMEBUFFER, this.interiorFbo), t.checkFramebufferStatus(t.FRAMEBUFFER) !== t.FRAMEBUFFER_COMPLETE) {
|
|
3244
3397
|
t.bindFramebuffer(t.FRAMEBUFFER, null);
|
|
@@ -3264,7 +3417,7 @@ class Je extends mt {
|
|
|
3264
3417
|
e.RED,
|
|
3265
3418
|
e.UNSIGNED_BYTE,
|
|
3266
3419
|
n
|
|
3267
|
-
);
|
|
3420
|
+
), this.jfa && this.jfa.markDirty();
|
|
3268
3421
|
}
|
|
3269
3422
|
// -----------------------------------------------------------------------
|
|
3270
3423
|
// Resize handling
|
|
@@ -3272,12 +3425,10 @@ class Je extends mt {
|
|
|
3272
3425
|
recalculateViewportLayout() {
|
|
3273
3426
|
const t = this.gl;
|
|
3274
3427
|
if (!t) return;
|
|
3275
|
-
const { width: e, height: n } = this.getViewportSize(), i = Math.min(window.devicePixelRatio, this.qualityParams.dprCap), r = Math.round(e * i),
|
|
3276
|
-
(this.canvas.width !== r || this.canvas.height !==
|
|
3277
|
-
const
|
|
3278
|
-
|
|
3279
|
-
const u = e / n, f = 0.65;
|
|
3280
|
-
this.meshScaleX = f, this.meshScaleY = f, u > this.meshAspect ? this.meshScaleX = f * (this.meshAspect / u) : this.meshScaleY = f * (u / this.meshAspect), this.stencilPass && (t.useProgram(this.stencilPass.program), t.uniform2f(this.stencilPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY)), this.boundaryPass && (t.useProgram(this.boundaryPass.program), t.uniform2f(this.boundaryPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY), t.uniform1f(this.boundaryPass.uniforms.uRimWidth, this.config.rimLightWidth), t.uniform2f(this.boundaryPass.uniforms.uTexelSize, 1 / r, 1 / s)), this.chamferPass && (t.useProgram(this.chamferPass.program), t.uniform2f(this.chamferPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY)), this.jfa && this.jfa.markDirty();
|
|
3428
|
+
const { width: e, height: n } = this.getViewportSize(), i = Math.min(window.devicePixelRatio, this.qualityParams.dprCap), r = Math.round(e * i), o = Math.round(n * i);
|
|
3429
|
+
(this.canvas.width !== r || this.canvas.height !== o) && (this.canvas.width = r, this.canvas.height = o, t.viewport(0, 0, r, o)), (this.fboWidth !== r || this.fboHeight !== o) && this.createFBO(r, o), this.jfa || this.createJFAResources(r, o), this.computeCoverFitUV(this.config.parallaxStrength, this.config.overscanPadding), this.interiorPass && (t.useProgram(this.interiorPass.program), t.uniform2f(this.interiorPass.uniforms.uUvOffset, this.uvOffset[0], this.uvOffset[1]), t.uniform2f(this.interiorPass.uniforms.uUvScale, this.uvScale[0], this.uvScale[1]));
|
|
3430
|
+
const l = e / n, a = 0.65;
|
|
3431
|
+
this.meshScaleX = a, this.meshScaleY = a, l > this.meshAspect ? this.meshScaleX = a * (this.meshAspect / l) : this.meshScaleY = a * (l / this.meshAspect), this.stencilPass && (t.useProgram(this.stencilPass.program), t.uniform2f(this.stencilPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY)), this.boundaryPass && (t.useProgram(this.boundaryPass.program), t.uniform2f(this.boundaryPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY), t.uniform1f(this.boundaryPass.uniforms.uRimWidth, this.config.rimLightWidth), t.uniform2f(this.boundaryPass.uniforms.uTexelSize, 1 / r, 1 / o)), this.chamferPass && (t.useProgram(this.chamferPass.program), t.uniform2f(this.chamferPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY));
|
|
3281
3432
|
}
|
|
3282
3433
|
// -----------------------------------------------------------------------
|
|
3283
3434
|
// Context loss
|
|
@@ -3335,336 +3486,336 @@ class Je extends mt {
|
|
|
3335
3486
|
this.stencilPass = null, this.maskPass = null, this.jfaSeedPass = null, this.jfaFloodPass = null, this.jfaDistPass = null, this.interiorPass = null, this.compositePass = null, this.boundaryPass = null, this.chamferPass = null, this.quadVao && (t.deleteVertexArray(this.quadVao), this.quadVao = null);
|
|
3336
3487
|
}
|
|
3337
3488
|
}
|
|
3338
|
-
async function Tt(
|
|
3339
|
-
const t = await fetch(
|
|
3489
|
+
async function Tt(s) {
|
|
3490
|
+
const t = await fetch(s);
|
|
3340
3491
|
if (!t.ok)
|
|
3341
3492
|
throw new Error(`Failed to fetch SVG: ${t.status} ${t.statusText}`);
|
|
3342
3493
|
const e = await t.text();
|
|
3343
|
-
return
|
|
3494
|
+
return Ke(e);
|
|
3344
3495
|
}
|
|
3345
|
-
function
|
|
3346
|
-
const n = new DOMParser().parseFromString(
|
|
3496
|
+
function Ke(s) {
|
|
3497
|
+
const n = new DOMParser().parseFromString(s, "image/svg+xml").querySelector("svg");
|
|
3347
3498
|
if (!n)
|
|
3348
3499
|
throw new Error("No <svg> element found in document.");
|
|
3349
|
-
const i =
|
|
3500
|
+
const i = Je(n);
|
|
3350
3501
|
if (i.length === 0)
|
|
3351
3502
|
throw new Error("No path data found in SVG.");
|
|
3352
|
-
let r = 1 / 0,
|
|
3503
|
+
let r = 1 / 0, o = 1 / 0, l = -1 / 0, a = -1 / 0;
|
|
3353
3504
|
for (const C of i)
|
|
3354
3505
|
for (let S = 0; S < C.length; S += 2)
|
|
3355
|
-
r = Math.min(r, C[S]),
|
|
3356
|
-
const
|
|
3506
|
+
r = Math.min(r, C[S]), l = Math.max(l, C[S]), o = Math.min(o, C[S + 1]), a = Math.max(a, C[S + 1]);
|
|
3507
|
+
const h = l - r, c = a - o, f = (r + l) / 2, u = (o + a) / 2, x = 2 / Math.max(h, c), p = h / c, d = i.map((C) => {
|
|
3357
3508
|
const S = [];
|
|
3358
|
-
for (let
|
|
3359
|
-
S.push((C[
|
|
3509
|
+
for (let D = 0; D < C.length; D += 2)
|
|
3510
|
+
S.push((C[D] - f) * x), S.push(-((C[D + 1] - u) * x));
|
|
3360
3511
|
return S;
|
|
3361
|
-
}), y =
|
|
3512
|
+
}), y = an(d), b = [], E = [];
|
|
3362
3513
|
for (const C of y) {
|
|
3363
|
-
const { flatCoords: S, holeIndices:
|
|
3364
|
-
for (const
|
|
3365
|
-
|
|
3366
|
-
for (const
|
|
3367
|
-
|
|
3514
|
+
const { flatCoords: S, holeIndices: D } = on(C), U = ln(S, D), M = b.length / 2;
|
|
3515
|
+
for (const k of U)
|
|
3516
|
+
E.push(k + M);
|
|
3517
|
+
for (const k of S)
|
|
3518
|
+
b.push(k);
|
|
3368
3519
|
}
|
|
3369
|
-
const
|
|
3520
|
+
const g = b, v = E, m = [], T = [], w = [], A = zt(d);
|
|
3370
3521
|
for (let C = 0; C < d.length; C++) {
|
|
3371
3522
|
const S = d[C];
|
|
3372
3523
|
T.push(m.length), w.push(A[C]);
|
|
3373
|
-
for (let
|
|
3374
|
-
m.push(S[
|
|
3524
|
+
for (let D = 0; D < S.length; D++)
|
|
3525
|
+
m.push(S[D]);
|
|
3375
3526
|
S.length >= 2 && m.push(S[0], S[1]);
|
|
3376
3527
|
}
|
|
3377
|
-
let
|
|
3378
|
-
for (let C = 0; C <
|
|
3379
|
-
|
|
3528
|
+
let P = 1 / 0, F = 1 / 0, _ = -1 / 0, I = -1 / 0;
|
|
3529
|
+
for (let C = 0; C < g.length; C += 2)
|
|
3530
|
+
P = Math.min(P, g[C]), _ = Math.max(_, g[C]), F = Math.min(F, g[C + 1]), I = Math.max(I, g[C + 1]);
|
|
3380
3531
|
return {
|
|
3381
|
-
vertices: new Float32Array(
|
|
3532
|
+
vertices: new Float32Array(g),
|
|
3382
3533
|
indices: new Uint16Array(v),
|
|
3383
3534
|
edgeVertices: new Float32Array(m),
|
|
3384
3535
|
contourOffsets: T,
|
|
3385
3536
|
contourIsHole: w,
|
|
3386
|
-
bounds: { minX:
|
|
3387
|
-
aspect:
|
|
3537
|
+
bounds: { minX: P, maxX: _, minY: F, maxY: I },
|
|
3538
|
+
aspect: p
|
|
3388
3539
|
};
|
|
3389
3540
|
}
|
|
3390
|
-
function
|
|
3541
|
+
function Je(s) {
|
|
3391
3542
|
const t = [];
|
|
3392
|
-
return
|
|
3393
|
-
const
|
|
3394
|
-
if (!
|
|
3395
|
-
const
|
|
3396
|
-
t.push(...
|
|
3397
|
-
}),
|
|
3398
|
-
const
|
|
3399
|
-
if (!
|
|
3400
|
-
const
|
|
3401
|
-
|
|
3402
|
-
}),
|
|
3403
|
-
const
|
|
3404
|
-
if (!
|
|
3405
|
-
const
|
|
3406
|
-
|
|
3407
|
-
}),
|
|
3408
|
-
const
|
|
3409
|
-
f > 0 &&
|
|
3410
|
-
}),
|
|
3411
|
-
const
|
|
3412
|
-
f > 0 && t.push(
|
|
3413
|
-
}),
|
|
3414
|
-
const
|
|
3415
|
-
f > 0 &&
|
|
3543
|
+
return s.querySelectorAll("path").forEach((a) => {
|
|
3544
|
+
const h = a.getAttribute("d");
|
|
3545
|
+
if (!h) return;
|
|
3546
|
+
const c = en(h);
|
|
3547
|
+
t.push(...c);
|
|
3548
|
+
}), s.querySelectorAll("polygon").forEach((a) => {
|
|
3549
|
+
const h = a.getAttribute("points");
|
|
3550
|
+
if (!h) return;
|
|
3551
|
+
const c = _t(h);
|
|
3552
|
+
c.length >= 6 && t.push(c);
|
|
3553
|
+
}), s.querySelectorAll("polyline").forEach((a) => {
|
|
3554
|
+
const h = a.getAttribute("points");
|
|
3555
|
+
if (!h) return;
|
|
3556
|
+
const c = _t(h);
|
|
3557
|
+
c.length >= 6 && t.push(c);
|
|
3558
|
+
}), s.querySelectorAll("rect").forEach((a) => {
|
|
3559
|
+
const h = parseFloat(a.getAttribute("x") || "0"), c = parseFloat(a.getAttribute("y") || "0"), f = parseFloat(a.getAttribute("width") || "0"), u = parseFloat(a.getAttribute("height") || "0");
|
|
3560
|
+
f > 0 && u > 0 && t.push([h, c, h + f, c, h + f, c + u, h, c + u]);
|
|
3561
|
+
}), s.querySelectorAll("circle").forEach((a) => {
|
|
3562
|
+
const h = parseFloat(a.getAttribute("cx") || "0"), c = parseFloat(a.getAttribute("cy") || "0"), f = parseFloat(a.getAttribute("r") || "0");
|
|
3563
|
+
f > 0 && t.push(Qe(h, c, f));
|
|
3564
|
+
}), s.querySelectorAll("ellipse").forEach((a) => {
|
|
3565
|
+
const h = parseFloat(a.getAttribute("cx") || "0"), c = parseFloat(a.getAttribute("cy") || "0"), f = parseFloat(a.getAttribute("rx") || "0"), u = parseFloat(a.getAttribute("ry") || "0");
|
|
3566
|
+
f > 0 && u > 0 && t.push(tn(h, c, f, u));
|
|
3416
3567
|
}), t;
|
|
3417
3568
|
}
|
|
3418
|
-
function
|
|
3419
|
-
const t = [], e =
|
|
3569
|
+
function _t(s) {
|
|
3570
|
+
const t = [], e = s.trim().split(/[\s,]+/);
|
|
3420
3571
|
for (let n = 0; n < e.length - 1; n += 2) {
|
|
3421
3572
|
const i = parseFloat(e[n]), r = parseFloat(e[n + 1]);
|
|
3422
3573
|
Number.isFinite(i) && Number.isFinite(r) && t.push(i, r);
|
|
3423
3574
|
}
|
|
3424
3575
|
return t;
|
|
3425
3576
|
}
|
|
3426
|
-
function
|
|
3577
|
+
function Qe(s, t, e, n = 64) {
|
|
3427
3578
|
const i = [];
|
|
3428
3579
|
for (let r = 0; r < n; r++) {
|
|
3429
|
-
const
|
|
3430
|
-
i.push(
|
|
3580
|
+
const o = 2 * Math.PI * r / n;
|
|
3581
|
+
i.push(s + e * Math.cos(o), t + e * Math.sin(o));
|
|
3431
3582
|
}
|
|
3432
3583
|
return i;
|
|
3433
3584
|
}
|
|
3434
|
-
function
|
|
3585
|
+
function tn(s, t, e, n, i = 64) {
|
|
3435
3586
|
const r = [];
|
|
3436
|
-
for (let
|
|
3437
|
-
const
|
|
3438
|
-
r.push(
|
|
3587
|
+
for (let o = 0; o < i; o++) {
|
|
3588
|
+
const l = 2 * Math.PI * o / i;
|
|
3589
|
+
r.push(s + e * Math.cos(l), t + n * Math.sin(l));
|
|
3439
3590
|
}
|
|
3440
3591
|
return r;
|
|
3441
3592
|
}
|
|
3442
|
-
function
|
|
3593
|
+
function en(s) {
|
|
3443
3594
|
const t = [];
|
|
3444
|
-
let e = [], n = 0, i = 0, r = 0,
|
|
3445
|
-
const
|
|
3595
|
+
let e = [], n = 0, i = 0, r = 0, o = 0, l = 0, a = 0, h = "";
|
|
3596
|
+
const c = nn(s);
|
|
3446
3597
|
let f = 0;
|
|
3447
|
-
function
|
|
3448
|
-
return f >=
|
|
3449
|
-
}
|
|
3450
|
-
for (; f <
|
|
3451
|
-
const x =
|
|
3452
|
-
let
|
|
3453
|
-
/^[a-zA-Z]$/.test(x) ? (
|
|
3454
|
-
const d =
|
|
3455
|
-
switch (
|
|
3598
|
+
function u() {
|
|
3599
|
+
return f >= c.length ? 0 : parseFloat(c[f++]);
|
|
3600
|
+
}
|
|
3601
|
+
for (; f < c.length; ) {
|
|
3602
|
+
const x = c[f];
|
|
3603
|
+
let p;
|
|
3604
|
+
/^[a-zA-Z]$/.test(x) ? (p = x, f++) : p = h === "M" ? "L" : h === "m" ? "l" : h;
|
|
3605
|
+
const d = p === p.toLowerCase();
|
|
3606
|
+
switch (p.toUpperCase()) {
|
|
3456
3607
|
case "M": {
|
|
3457
3608
|
e.length > 0 && t.push(e), e = [];
|
|
3458
|
-
const
|
|
3459
|
-
n =
|
|
3609
|
+
const b = u() + (d ? n : 0), E = u() + (d ? i : 0);
|
|
3610
|
+
n = b, i = E, r = b, o = E, e.push(n, i), l = n, a = i;
|
|
3460
3611
|
break;
|
|
3461
3612
|
}
|
|
3462
3613
|
case "L": {
|
|
3463
|
-
n =
|
|
3614
|
+
n = u() + (d ? n : 0), i = u() + (d ? i : 0), e.push(n, i), l = n, a = i;
|
|
3464
3615
|
break;
|
|
3465
3616
|
}
|
|
3466
3617
|
case "H": {
|
|
3467
|
-
n =
|
|
3618
|
+
n = u() + (d ? n : 0), e.push(n, i), l = n, a = i;
|
|
3468
3619
|
break;
|
|
3469
3620
|
}
|
|
3470
3621
|
case "V": {
|
|
3471
|
-
i =
|
|
3622
|
+
i = u() + (d ? i : 0), e.push(n, i), l = n, a = i;
|
|
3472
3623
|
break;
|
|
3473
3624
|
}
|
|
3474
3625
|
case "C": {
|
|
3475
|
-
const
|
|
3476
|
-
|
|
3626
|
+
const b = u() + (d ? n : 0), E = u() + (d ? i : 0), g = u() + (d ? n : 0), v = u() + (d ? i : 0), m = u() + (d ? n : 0), T = u() + (d ? i : 0);
|
|
3627
|
+
it(e, n, i, b, E, g, v, m, T), n = m, i = T, l = g, a = v;
|
|
3477
3628
|
break;
|
|
3478
3629
|
}
|
|
3479
3630
|
case "S": {
|
|
3480
|
-
const
|
|
3481
|
-
|
|
3631
|
+
const b = 2 * n - l, E = 2 * i - a, g = u() + (d ? n : 0), v = u() + (d ? i : 0), m = u() + (d ? n : 0), T = u() + (d ? i : 0);
|
|
3632
|
+
it(e, n, i, b, E, g, v, m, T), n = m, i = T, l = g, a = v;
|
|
3482
3633
|
break;
|
|
3483
3634
|
}
|
|
3484
3635
|
case "Q": {
|
|
3485
|
-
const
|
|
3486
|
-
|
|
3636
|
+
const b = u() + (d ? n : 0), E = u() + (d ? i : 0), g = u() + (d ? n : 0), v = u() + (d ? i : 0);
|
|
3637
|
+
It(e, n, i, b, E, g, v), n = g, i = v, l = b, a = E;
|
|
3487
3638
|
break;
|
|
3488
3639
|
}
|
|
3489
3640
|
case "T": {
|
|
3490
|
-
const
|
|
3491
|
-
|
|
3641
|
+
const b = 2 * n - l, E = 2 * i - a, g = u() + (d ? n : 0), v = u() + (d ? i : 0);
|
|
3642
|
+
It(e, n, i, b, E, g, v), n = g, i = v, l = b, a = E;
|
|
3492
3643
|
break;
|
|
3493
3644
|
}
|
|
3494
3645
|
case "A": {
|
|
3495
|
-
const
|
|
3496
|
-
|
|
3646
|
+
const b = u(), E = u(), g = u(), v = u(), m = u(), T = u() + (d ? n : 0), w = u() + (d ? i : 0);
|
|
3647
|
+
sn(e, n, i, b, E, g, !!v, !!m, T, w), n = T, i = w, l = n, a = i;
|
|
3497
3648
|
break;
|
|
3498
3649
|
}
|
|
3499
3650
|
case "Z": {
|
|
3500
|
-
n = r, i =
|
|
3651
|
+
n = r, i = o, e.length > 0 && t.push(e), e = [], l = n, a = i;
|
|
3501
3652
|
break;
|
|
3502
3653
|
}
|
|
3503
3654
|
default:
|
|
3504
3655
|
f++;
|
|
3505
3656
|
break;
|
|
3506
3657
|
}
|
|
3507
|
-
|
|
3658
|
+
h = p;
|
|
3508
3659
|
}
|
|
3509
3660
|
return e.length >= 6 && t.push(e), t;
|
|
3510
3661
|
}
|
|
3511
|
-
function
|
|
3662
|
+
function nn(s) {
|
|
3512
3663
|
const t = [], e = /([a-zA-Z])|([+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?)/g;
|
|
3513
3664
|
let n;
|
|
3514
|
-
for (; (n = e.exec(
|
|
3665
|
+
for (; (n = e.exec(s)) !== null; )
|
|
3515
3666
|
t.push(n[0]);
|
|
3516
3667
|
return t;
|
|
3517
3668
|
}
|
|
3518
|
-
const
|
|
3519
|
-
function
|
|
3520
|
-
if (
|
|
3521
|
-
|
|
3669
|
+
const rn = 0.5;
|
|
3670
|
+
function it(s, t, e, n, i, r, o, l, a, h = 0) {
|
|
3671
|
+
if (h > 12) {
|
|
3672
|
+
s.push(l, a);
|
|
3522
3673
|
return;
|
|
3523
3674
|
}
|
|
3524
|
-
const
|
|
3525
|
-
if (
|
|
3526
|
-
|
|
3675
|
+
const c = l - t, f = a - e, u = Math.sqrt(c * c + f * f);
|
|
3676
|
+
if (u < 1e-6) {
|
|
3677
|
+
s.push(l, a);
|
|
3527
3678
|
return;
|
|
3528
3679
|
}
|
|
3529
|
-
const x = Math.abs((n -
|
|
3530
|
-
if (x +
|
|
3531
|
-
|
|
3680
|
+
const x = Math.abs((n - l) * f - (i - a) * c) / u, p = Math.abs((r - l) * f - (o - a) * c) / u;
|
|
3681
|
+
if (x + p < rn) {
|
|
3682
|
+
s.push(l, a);
|
|
3532
3683
|
return;
|
|
3533
3684
|
}
|
|
3534
|
-
const d = (t + n) / 2, y = (e + i) / 2,
|
|
3535
|
-
|
|
3685
|
+
const d = (t + n) / 2, y = (e + i) / 2, b = (n + r) / 2, E = (i + o) / 2, g = (r + l) / 2, v = (o + a) / 2, m = (d + b) / 2, T = (y + E) / 2, w = (b + g) / 2, A = (E + v) / 2, P = (m + w) / 2, F = (T + A) / 2;
|
|
3686
|
+
it(s, t, e, d, y, m, T, P, F, h + 1), it(s, P, F, w, A, g, v, l, a, h + 1);
|
|
3536
3687
|
}
|
|
3537
|
-
function
|
|
3538
|
-
const
|
|
3539
|
-
|
|
3688
|
+
function It(s, t, e, n, i, r, o) {
|
|
3689
|
+
const l = t + 0.6666666666666666 * (n - t), a = e + 2 / 3 * (i - e), h = r + 2 / 3 * (n - r), c = o + 2 / 3 * (i - o);
|
|
3690
|
+
it(s, t, e, l, a, h, c, r, o);
|
|
3540
3691
|
}
|
|
3541
|
-
function
|
|
3692
|
+
function sn(s, t, e, n, i, r, o, l, a, h) {
|
|
3542
3693
|
if (n === 0 || i === 0) {
|
|
3543
|
-
|
|
3694
|
+
s.push(a, h);
|
|
3544
3695
|
return;
|
|
3545
3696
|
}
|
|
3546
|
-
let
|
|
3547
|
-
const
|
|
3548
|
-
let
|
|
3549
|
-
if (
|
|
3550
|
-
const U = Math.sqrt(
|
|
3551
|
-
|
|
3697
|
+
let c = Math.abs(n), f = Math.abs(i);
|
|
3698
|
+
const u = r * Math.PI / 180, x = Math.cos(u), p = Math.sin(u), d = (t - a) / 2, y = (e - h) / 2, b = x * d + p * y, E = -p * d + x * y;
|
|
3699
|
+
let g = b * b / (c * c) + E * E / (f * f);
|
|
3700
|
+
if (g > 1) {
|
|
3701
|
+
const U = Math.sqrt(g);
|
|
3702
|
+
c *= U, f *= U, g = 1;
|
|
3552
3703
|
}
|
|
3553
|
-
const v =
|
|
3704
|
+
const v = c * c, m = f * f, T = b * b, w = E * E;
|
|
3554
3705
|
let A = Math.max(0, (v * m - v * w - m * T) / (v * w + m * T));
|
|
3555
|
-
A = Math.sqrt(A),
|
|
3556
|
-
const
|
|
3557
|
-
let S =
|
|
3558
|
-
(
|
|
3559
|
-
(
|
|
3560
|
-
(-
|
|
3561
|
-
(-
|
|
3706
|
+
A = Math.sqrt(A), o === l && (A = -A);
|
|
3707
|
+
const P = A * (c * E) / f, F = A * -(f * b) / c, _ = x * P - p * F + (t + a) / 2, I = p * P + x * F + (e + h) / 2, C = Mt(1, 0, (b - P) / c, (E - F) / f);
|
|
3708
|
+
let S = Mt(
|
|
3709
|
+
(b - P) / c,
|
|
3710
|
+
(E - F) / f,
|
|
3711
|
+
(-b - P) / c,
|
|
3712
|
+
(-E - F) / f
|
|
3562
3713
|
);
|
|
3563
|
-
!
|
|
3564
|
-
const
|
|
3565
|
-
for (let U = 1; U <=
|
|
3566
|
-
const M = C + U /
|
|
3567
|
-
|
|
3714
|
+
!l && S > 0 && (S -= 2 * Math.PI), l && S < 0 && (S += 2 * Math.PI);
|
|
3715
|
+
const D = Math.max(4, Math.ceil(Math.abs(S) / (Math.PI / 16)));
|
|
3716
|
+
for (let U = 1; U <= D; U++) {
|
|
3717
|
+
const M = C + U / D * S, k = Math.cos(M), j = Math.sin(M), et = x * c * k - p * f * j + _, at = p * c * k + x * f * j + I;
|
|
3718
|
+
s.push(et, at);
|
|
3568
3719
|
}
|
|
3569
3720
|
}
|
|
3570
|
-
function
|
|
3571
|
-
const i =
|
|
3572
|
-
return i * Math.acos(Math.max(-1, Math.min(1,
|
|
3721
|
+
function Mt(s, t, e, n) {
|
|
3722
|
+
const i = s * n - t * e < 0 ? -1 : 1, r = s * e + t * n, o = Math.sqrt(s * s + t * t), l = Math.sqrt(e * e + n * n), a = r / (o * l);
|
|
3723
|
+
return i * Math.acos(Math.max(-1, Math.min(1, a)));
|
|
3573
3724
|
}
|
|
3574
|
-
function
|
|
3725
|
+
function on(s) {
|
|
3575
3726
|
const t = [], e = [];
|
|
3576
|
-
for (let n = 0; n <
|
|
3727
|
+
for (let n = 0; n < s.length; n++) {
|
|
3577
3728
|
n > 0 && e.push(t.length / 2);
|
|
3578
|
-
for (const i of
|
|
3729
|
+
for (const i of s[n])
|
|
3579
3730
|
t.push(i);
|
|
3580
3731
|
}
|
|
3581
3732
|
return { flatCoords: t, holeIndices: e };
|
|
3582
3733
|
}
|
|
3583
|
-
function
|
|
3584
|
-
const t =
|
|
3734
|
+
function zt(s) {
|
|
3735
|
+
const t = s.length, e = s.map((i) => Math.abs(qt(i))), n = new Array(t).fill(!1);
|
|
3585
3736
|
for (let i = 0; i < t; i++) {
|
|
3586
3737
|
let r = 0;
|
|
3587
|
-
const
|
|
3588
|
-
for (let
|
|
3589
|
-
i !==
|
|
3738
|
+
const o = s[i][0], l = s[i][1];
|
|
3739
|
+
for (let a = 0; a < t; a++)
|
|
3740
|
+
i !== a && e[a] > e[i] && Yt(o, l, s[a]) && r++;
|
|
3590
3741
|
n[i] = r % 2 === 1;
|
|
3591
3742
|
}
|
|
3592
3743
|
return n;
|
|
3593
3744
|
}
|
|
3594
|
-
function
|
|
3595
|
-
if (
|
|
3596
|
-
return [
|
|
3597
|
-
const t =
|
|
3598
|
-
const
|
|
3599
|
-
return { index:
|
|
3600
|
-
}), n = e.filter((
|
|
3745
|
+
function an(s) {
|
|
3746
|
+
if (s.length <= 1)
|
|
3747
|
+
return [s];
|
|
3748
|
+
const t = zt(s), e = s.map((o, l) => {
|
|
3749
|
+
const a = qt(o);
|
|
3750
|
+
return { index: l, contour: o, area: a, isOuter: !t[l] };
|
|
3751
|
+
}), n = e.filter((o) => o.isOuter), i = e.filter((o) => !o.isOuter);
|
|
3601
3752
|
if (n.length === 0)
|
|
3602
|
-
return
|
|
3603
|
-
const r = n.map((
|
|
3604
|
-
outer:
|
|
3753
|
+
return s.map((o) => [o]);
|
|
3754
|
+
const r = n.map((o) => ({
|
|
3755
|
+
outer: o.contour,
|
|
3605
3756
|
holes: []
|
|
3606
3757
|
}));
|
|
3607
|
-
for (const
|
|
3608
|
-
const
|
|
3609
|
-
let
|
|
3758
|
+
for (const o of i) {
|
|
3759
|
+
const l = o.contour[0], a = o.contour[1];
|
|
3760
|
+
let h = -1, c = 1 / 0;
|
|
3610
3761
|
for (let f = 0; f < n.length; f++)
|
|
3611
|
-
if (
|
|
3612
|
-
const
|
|
3613
|
-
|
|
3762
|
+
if (Yt(l, a, n[f].contour)) {
|
|
3763
|
+
const u = Math.abs(n[f].area);
|
|
3764
|
+
u < c && (c = u, h = f);
|
|
3614
3765
|
}
|
|
3615
|
-
|
|
3766
|
+
h >= 0 ? r[h].holes.push(o.contour) : r.push({ outer: o.contour, holes: [] });
|
|
3616
3767
|
}
|
|
3617
|
-
return r.map((
|
|
3768
|
+
return r.map((o) => [o.outer, ...o.holes]);
|
|
3618
3769
|
}
|
|
3619
|
-
function
|
|
3770
|
+
function qt(s) {
|
|
3620
3771
|
let t = 0;
|
|
3621
|
-
const e =
|
|
3772
|
+
const e = s.length;
|
|
3622
3773
|
for (let n = 0; n < e; n += 2) {
|
|
3623
|
-
const i =
|
|
3624
|
-
t += i *
|
|
3774
|
+
const i = s[n], r = s[n + 1], o = s[(n + 2) % e], l = s[(n + 3) % e];
|
|
3775
|
+
t += i * l - o * r;
|
|
3625
3776
|
}
|
|
3626
3777
|
return t / 2;
|
|
3627
3778
|
}
|
|
3628
|
-
function
|
|
3779
|
+
function Yt(s, t, e) {
|
|
3629
3780
|
let n = !1;
|
|
3630
3781
|
const i = e.length;
|
|
3631
|
-
for (let r = 0,
|
|
3632
|
-
const
|
|
3633
|
-
|
|
3782
|
+
for (let r = 0, o = i - 2; r < i; o = r, r += 2) {
|
|
3783
|
+
const l = e[r], a = e[r + 1], h = e[o], c = e[o + 1];
|
|
3784
|
+
a > t != c > t && s < (h - l) * (t - a) / (c - a) + l && (n = !n);
|
|
3634
3785
|
}
|
|
3635
3786
|
return n;
|
|
3636
3787
|
}
|
|
3637
|
-
function
|
|
3638
|
-
const n = t && t.length > 0, i = n ? t[0] * e :
|
|
3639
|
-
let r =
|
|
3640
|
-
const
|
|
3641
|
-
if (!r || r.next === r.prev) return
|
|
3642
|
-
n && (r =
|
|
3643
|
-
let
|
|
3644
|
-
if (
|
|
3645
|
-
for (let
|
|
3646
|
-
const x =
|
|
3647
|
-
x <
|
|
3788
|
+
function ln(s, t, e = 2) {
|
|
3789
|
+
const n = t && t.length > 0, i = n ? t[0] * e : s.length;
|
|
3790
|
+
let r = jt(s, 0, i, e, !0);
|
|
3791
|
+
const o = [];
|
|
3792
|
+
if (!r || r.next === r.prev) return o;
|
|
3793
|
+
n && (r = dn(s, t, r, e));
|
|
3794
|
+
let l = 1 / 0, a = 1 / 0, h = -1 / 0, c = -1 / 0, f = 0;
|
|
3795
|
+
if (s.length > 80 * e) {
|
|
3796
|
+
for (let u = 0; u < i; u += e) {
|
|
3797
|
+
const x = s[u], p = s[u + 1];
|
|
3798
|
+
x < l && (l = x), p < a && (a = p), x > h && (h = x), p > c && (c = p);
|
|
3648
3799
|
}
|
|
3649
|
-
f = Math.max(
|
|
3800
|
+
f = Math.max(h - l, c - a), f = f !== 0 ? 32767 / f : 0;
|
|
3650
3801
|
}
|
|
3651
|
-
return
|
|
3802
|
+
return rt(r, o, e, l, a, f, 0), o;
|
|
3652
3803
|
}
|
|
3653
|
-
function
|
|
3804
|
+
function jt(s, t, e, n, i) {
|
|
3654
3805
|
let r = null;
|
|
3655
|
-
if (i ===
|
|
3656
|
-
for (let
|
|
3657
|
-
r =
|
|
3806
|
+
if (i === yn(s, t, e, n) > 0)
|
|
3807
|
+
for (let o = t; o < e; o += n)
|
|
3808
|
+
r = Bt(o, s[o], s[o + 1], r);
|
|
3658
3809
|
else
|
|
3659
|
-
for (let
|
|
3660
|
-
r =
|
|
3661
|
-
return r &&
|
|
3810
|
+
for (let o = e - n; o >= t; o -= n)
|
|
3811
|
+
r = Bt(o, s[o], s[o + 1], r);
|
|
3812
|
+
return r && vt(r, r.next) && (ot(r), r = r.next), r ? (r.next.prev = r, r.prev.next = r, r.next) : null;
|
|
3662
3813
|
}
|
|
3663
|
-
function
|
|
3664
|
-
t || (t =
|
|
3665
|
-
let e =
|
|
3814
|
+
function Y(s, t) {
|
|
3815
|
+
t || (t = s);
|
|
3816
|
+
let e = s, n;
|
|
3666
3817
|
do
|
|
3667
|
-
if (n = !1, !e.steiner && (
|
|
3818
|
+
if (n = !1, !e.steiner && (vt(e, e.next) || L(e.prev, e, e.next) === 0)) {
|
|
3668
3819
|
if (ot(e), e = t = e.prev, e === e.next) break;
|
|
3669
3820
|
n = !0;
|
|
3670
3821
|
} else
|
|
@@ -3672,215 +3823,215 @@ function z(o, t) {
|
|
|
3672
3823
|
while (n || e !== t);
|
|
3673
3824
|
return t;
|
|
3674
3825
|
}
|
|
3675
|
-
function
|
|
3676
|
-
if (!
|
|
3677
|
-
!
|
|
3678
|
-
let
|
|
3679
|
-
for (;
|
|
3680
|
-
if (
|
|
3681
|
-
t.push(
|
|
3826
|
+
function rt(s, t, e, n, i, r, o) {
|
|
3827
|
+
if (!s) return;
|
|
3828
|
+
!o && r && vn(s, n, i, r);
|
|
3829
|
+
let l = s, a, h;
|
|
3830
|
+
for (; s.prev !== s.next; ) {
|
|
3831
|
+
if (a = s.prev, h = s.next, r ? cn(s, n, i, r) : un(s)) {
|
|
3832
|
+
t.push(a.i / e, s.i / e, h.i / e), ot(s), s = h.next, l = h.next;
|
|
3682
3833
|
continue;
|
|
3683
3834
|
}
|
|
3684
|
-
if (
|
|
3685
|
-
|
|
3835
|
+
if (s = h, s === l) {
|
|
3836
|
+
o ? o === 1 ? (s = hn(Y(s), t, e), rt(s, t, e, n, i, r, 2)) : o === 2 && fn(s, t, e, n, i, r) : rt(Y(s), t, e, n, i, r, 1);
|
|
3686
3837
|
break;
|
|
3687
3838
|
}
|
|
3688
3839
|
}
|
|
3689
3840
|
}
|
|
3690
|
-
function
|
|
3691
|
-
const t =
|
|
3841
|
+
function un(s) {
|
|
3842
|
+
const t = s.prev, e = s, n = s.next;
|
|
3692
3843
|
if (L(t, e, n) >= 0) return !1;
|
|
3693
|
-
const i = t.x, r = e.x,
|
|
3694
|
-
let
|
|
3695
|
-
for (;
|
|
3696
|
-
if (
|
|
3844
|
+
const i = t.x, r = e.x, o = n.x, l = t.y, a = e.y, h = n.y, c = i < r ? i < o ? i : o : r < o ? r : o, f = l < a ? l < h ? l : h : a < h ? a : h, u = i > r ? i > o ? i : o : r > o ? r : o, x = l > a ? l > h ? l : h : a > h ? a : h;
|
|
3845
|
+
let p = n.next;
|
|
3846
|
+
for (; p !== t; ) {
|
|
3847
|
+
if (p.x >= c && p.x <= u && p.y >= f && p.y <= x && tt(i, l, r, a, o, h, p.x, p.y) && L(p.prev, p, p.next) >= 0)
|
|
3697
3848
|
return !1;
|
|
3698
|
-
|
|
3849
|
+
p = p.next;
|
|
3699
3850
|
}
|
|
3700
3851
|
return !0;
|
|
3701
3852
|
}
|
|
3702
|
-
function
|
|
3703
|
-
const i =
|
|
3704
|
-
if (L(i, r,
|
|
3705
|
-
const
|
|
3706
|
-
let
|
|
3707
|
-
for (;
|
|
3708
|
-
if (
|
|
3853
|
+
function cn(s, t, e, n) {
|
|
3854
|
+
const i = s.prev, r = s, o = s.next;
|
|
3855
|
+
if (L(i, r, o) >= 0) return !1;
|
|
3856
|
+
const l = i.x, a = r.x, h = o.x, c = i.y, f = r.y, u = o.y, x = l < a ? l < h ? l : h : a < h ? a : h, p = c < f ? c < u ? c : u : f < u ? f : u, d = l > a ? l > h ? l : h : a > h ? a : h, y = c > f ? c > u ? c : u : f > u ? f : u, b = yt(x, p, t, e, n), E = yt(d, y, t, e, n);
|
|
3857
|
+
let g = s.prevZ, v = s.nextZ;
|
|
3858
|
+
for (; g && g.z >= b && v && v.z <= E; ) {
|
|
3859
|
+
if (g.x >= x && g.x <= d && g.y >= p && g.y <= y && g !== i && g !== o && tt(l, c, a, f, h, u, g.x, g.y) && L(g.prev, g, g.next) >= 0 || (g = g.prevZ, v.x >= x && v.x <= d && v.y >= p && v.y <= y && v !== i && v !== o && tt(l, c, a, f, h, u, v.x, v.y) && L(v.prev, v, v.next) >= 0)) return !1;
|
|
3709
3860
|
v = v.nextZ;
|
|
3710
3861
|
}
|
|
3711
|
-
for (;
|
|
3712
|
-
if (
|
|
3713
|
-
|
|
3862
|
+
for (; g && g.z >= b; ) {
|
|
3863
|
+
if (g.x >= x && g.x <= d && g.y >= p && g.y <= y && g !== i && g !== o && tt(l, c, a, f, h, u, g.x, g.y) && L(g.prev, g, g.next) >= 0) return !1;
|
|
3864
|
+
g = g.prevZ;
|
|
3714
3865
|
}
|
|
3715
|
-
for (; v && v.z <=
|
|
3716
|
-
if (v.x >= x && v.x <= d && v.y >=
|
|
3866
|
+
for (; v && v.z <= E; ) {
|
|
3867
|
+
if (v.x >= x && v.x <= d && v.y >= p && v.y <= y && v !== i && v !== o && tt(l, c, a, f, h, u, v.x, v.y) && L(v.prev, v, v.next) >= 0) return !1;
|
|
3717
3868
|
v = v.nextZ;
|
|
3718
3869
|
}
|
|
3719
3870
|
return !0;
|
|
3720
3871
|
}
|
|
3721
|
-
function
|
|
3722
|
-
let n =
|
|
3872
|
+
function hn(s, t, e) {
|
|
3873
|
+
let n = s;
|
|
3723
3874
|
do {
|
|
3724
3875
|
const i = n.prev, r = n.next.next;
|
|
3725
|
-
!
|
|
3726
|
-
} while (n !==
|
|
3727
|
-
return
|
|
3876
|
+
!vt(i, r) && Zt(i, n, n.next, r) && st(i, r) && st(r, i) && (t.push(i.i / e, n.i / e, r.i / e), ot(n), ot(n.next), n = s = r), n = n.next;
|
|
3877
|
+
} while (n !== s);
|
|
3878
|
+
return Y(n);
|
|
3728
3879
|
}
|
|
3729
|
-
function
|
|
3730
|
-
let
|
|
3880
|
+
function fn(s, t, e, n, i, r) {
|
|
3881
|
+
let o = s;
|
|
3731
3882
|
do {
|
|
3732
|
-
let
|
|
3733
|
-
for (;
|
|
3734
|
-
if (
|
|
3735
|
-
let
|
|
3736
|
-
|
|
3883
|
+
let l = o.next.next;
|
|
3884
|
+
for (; l !== o.prev; ) {
|
|
3885
|
+
if (o.i !== l.i && En(o, l)) {
|
|
3886
|
+
let a = $t(o, l);
|
|
3887
|
+
o = Y(o, o.next), a = Y(a, a.next), rt(o, t, e, n, i, r, 0), rt(a, t, e, n, i, r, 0);
|
|
3737
3888
|
return;
|
|
3738
3889
|
}
|
|
3739
|
-
|
|
3890
|
+
l = l.next;
|
|
3740
3891
|
}
|
|
3741
|
-
|
|
3742
|
-
} while (
|
|
3892
|
+
o = o.next;
|
|
3893
|
+
} while (o !== s);
|
|
3743
3894
|
}
|
|
3744
|
-
function
|
|
3895
|
+
function dn(s, t, e, n) {
|
|
3745
3896
|
const i = [];
|
|
3746
3897
|
for (let r = 0; r < t.length; r++) {
|
|
3747
|
-
const
|
|
3748
|
-
|
|
3898
|
+
const o = t[r] * n, l = r < t.length - 1 ? t[r + 1] * n : s.length, a = jt(s, o, l, n, !1);
|
|
3899
|
+
a && (a === a.next && (a.steiner = !0), i.push(Tn(a)));
|
|
3749
3900
|
}
|
|
3750
|
-
i.sort((r,
|
|
3901
|
+
i.sort((r, o) => r.x - o.x);
|
|
3751
3902
|
for (const r of i)
|
|
3752
|
-
e =
|
|
3903
|
+
e = mn(r, e);
|
|
3753
3904
|
return e;
|
|
3754
3905
|
}
|
|
3755
|
-
function
|
|
3756
|
-
const e =
|
|
3906
|
+
function mn(s, t) {
|
|
3907
|
+
const e = pn(s, t);
|
|
3757
3908
|
if (!e) return t;
|
|
3758
|
-
const n =
|
|
3759
|
-
return
|
|
3909
|
+
const n = $t(e, s);
|
|
3910
|
+
return Y(n, n.next), Y(e, e.next);
|
|
3760
3911
|
}
|
|
3761
|
-
function
|
|
3912
|
+
function pn(s, t) {
|
|
3762
3913
|
let e = t;
|
|
3763
|
-
const n =
|
|
3764
|
-
let r = -1 / 0,
|
|
3914
|
+
const n = s.x, i = s.y;
|
|
3915
|
+
let r = -1 / 0, o = null;
|
|
3765
3916
|
do {
|
|
3766
3917
|
if (i <= e.y && i >= e.next.y && e.next.y !== e.y) {
|
|
3767
3918
|
const f = e.x + (i - e.y) / (e.next.y - e.y) * (e.next.x - e.x);
|
|
3768
|
-
if (f <= n && f > r && (r = f,
|
|
3769
|
-
return
|
|
3919
|
+
if (f <= n && f > r && (r = f, o = e.x < e.next.x ? e : e.next, f === n))
|
|
3920
|
+
return o;
|
|
3770
3921
|
}
|
|
3771
3922
|
e = e.next;
|
|
3772
3923
|
} while (e !== t);
|
|
3773
|
-
if (!
|
|
3774
|
-
const
|
|
3775
|
-
let
|
|
3776
|
-
e =
|
|
3924
|
+
if (!o) return null;
|
|
3925
|
+
const l = o, a = o.x, h = o.y;
|
|
3926
|
+
let c = 1 / 0;
|
|
3927
|
+
e = o;
|
|
3777
3928
|
do {
|
|
3778
|
-
if (n >= e.x && e.x >=
|
|
3929
|
+
if (n >= e.x && e.x >= a && n !== e.x && tt(i < h ? n : r, i, a, h, i < h ? r : n, i, e.x, e.y)) {
|
|
3779
3930
|
const f = Math.abs(i - e.y) / (n - e.x);
|
|
3780
|
-
|
|
3931
|
+
st(e, s) && (f < c || f === c && (e.x > o.x || gn(o, e))) && (o = e, c = f);
|
|
3781
3932
|
}
|
|
3782
3933
|
e = e.next;
|
|
3783
|
-
} while (e !==
|
|
3784
|
-
return
|
|
3934
|
+
} while (e !== l);
|
|
3935
|
+
return o;
|
|
3785
3936
|
}
|
|
3786
|
-
function
|
|
3787
|
-
return L(
|
|
3937
|
+
function gn(s, t) {
|
|
3938
|
+
return L(s.prev, s, t.prev) < 0 && L(t.next, s, s.next) < 0;
|
|
3788
3939
|
}
|
|
3789
|
-
function
|
|
3790
|
-
let i =
|
|
3940
|
+
function vn(s, t, e, n) {
|
|
3941
|
+
let i = s;
|
|
3791
3942
|
do
|
|
3792
3943
|
i.z === 0 && (i.z = yt(i.x, i.y, t, e, n)), i.prevZ = i.prev, i.nextZ = i.next, i = i.next;
|
|
3793
|
-
while (i !==
|
|
3794
|
-
i.prevZ.nextZ = null, i.prevZ = null,
|
|
3944
|
+
while (i !== s);
|
|
3945
|
+
i.prevZ.nextZ = null, i.prevZ = null, xn(i);
|
|
3795
3946
|
}
|
|
3796
|
-
function
|
|
3947
|
+
function xn(s) {
|
|
3797
3948
|
let t = 1, e;
|
|
3798
3949
|
do {
|
|
3799
|
-
let n =
|
|
3800
|
-
|
|
3950
|
+
let n = s;
|
|
3951
|
+
s = null;
|
|
3801
3952
|
let i = null;
|
|
3802
3953
|
for (e = 0; n; ) {
|
|
3803
3954
|
e++;
|
|
3804
|
-
let r = n,
|
|
3805
|
-
for (let
|
|
3955
|
+
let r = n, o = 0;
|
|
3956
|
+
for (let a = 0; a < t && (o++, r = r.nextZ, !!r); a++)
|
|
3806
3957
|
;
|
|
3807
|
-
let
|
|
3808
|
-
for (;
|
|
3809
|
-
let
|
|
3810
|
-
|
|
3958
|
+
let l = t;
|
|
3959
|
+
for (; o > 0 || l > 0 && r; ) {
|
|
3960
|
+
let a;
|
|
3961
|
+
o !== 0 && (l === 0 || !r || n.z <= r.z) ? (a = n, n = n.nextZ, o--) : (a = r, r = r.nextZ, l--), i ? i.nextZ = a : s = a, a.prevZ = i, i = a;
|
|
3811
3962
|
}
|
|
3812
3963
|
n = r;
|
|
3813
3964
|
}
|
|
3814
3965
|
i.nextZ = null, t *= 2;
|
|
3815
3966
|
} while (e > 1);
|
|
3816
|
-
return
|
|
3967
|
+
return s;
|
|
3817
3968
|
}
|
|
3818
|
-
function yt(
|
|
3819
|
-
let r = (
|
|
3820
|
-
return r = (r | r << 8) & 16711935, r = (r | r << 4) & 252645135, r = (r | r << 2) & 858993459, r = (r | r << 1) & 1431655765,
|
|
3969
|
+
function yt(s, t, e, n, i) {
|
|
3970
|
+
let r = (s - e) * i | 0, o = (t - n) * i | 0;
|
|
3971
|
+
return r = (r | r << 8) & 16711935, r = (r | r << 4) & 252645135, r = (r | r << 2) & 858993459, r = (r | r << 1) & 1431655765, o = (o | o << 8) & 16711935, o = (o | o << 4) & 252645135, o = (o | o << 2) & 858993459, o = (o | o << 1) & 1431655765, r | o << 1;
|
|
3821
3972
|
}
|
|
3822
|
-
function
|
|
3823
|
-
let t =
|
|
3973
|
+
function Tn(s) {
|
|
3974
|
+
let t = s, e = s;
|
|
3824
3975
|
do
|
|
3825
3976
|
(t.x < e.x || t.x === e.x && t.y < e.y) && (e = t), t = t.next;
|
|
3826
|
-
while (t !==
|
|
3977
|
+
while (t !== s);
|
|
3827
3978
|
return e;
|
|
3828
3979
|
}
|
|
3829
|
-
function
|
|
3830
|
-
return (i -
|
|
3980
|
+
function tt(s, t, e, n, i, r, o, l) {
|
|
3981
|
+
return (i - o) * (t - l) - (s - o) * (r - l) >= 0 && (s - o) * (n - l) - (e - o) * (t - l) >= 0 && (e - o) * (r - l) - (i - o) * (n - l) >= 0;
|
|
3831
3982
|
}
|
|
3832
|
-
function
|
|
3833
|
-
return
|
|
3983
|
+
function En(s, t) {
|
|
3984
|
+
return s.next.i !== t.i && s.prev.i !== t.i && !bn(s, t) && (st(s, t) && st(t, s) && Sn(s, t) && (L(s.prev, s, t.prev) !== 0 || L(s, t.prev, t) !== 0) || vt(s, t) && L(s.prev, s, s.next) > 0 && L(t.prev, t, t.next) > 0);
|
|
3834
3985
|
}
|
|
3835
|
-
function L(
|
|
3836
|
-
return (t.y -
|
|
3986
|
+
function L(s, t, e) {
|
|
3987
|
+
return (t.y - s.y) * (e.x - t.x) - (t.x - s.x) * (e.y - t.y);
|
|
3837
3988
|
}
|
|
3838
|
-
function
|
|
3839
|
-
return
|
|
3989
|
+
function vt(s, t) {
|
|
3990
|
+
return s.x === t.x && s.y === t.y;
|
|
3840
3991
|
}
|
|
3841
|
-
function
|
|
3842
|
-
const i =
|
|
3843
|
-
return !!(i !== r &&
|
|
3992
|
+
function Zt(s, t, e, n) {
|
|
3993
|
+
const i = ct(L(s, t, e)), r = ct(L(s, t, n)), o = ct(L(e, n, s)), l = ct(L(e, n, t));
|
|
3994
|
+
return !!(i !== r && o !== l || i === 0 && ut(s, e, t) || r === 0 && ut(s, n, t) || o === 0 && ut(e, s, n) || l === 0 && ut(e, t, n));
|
|
3844
3995
|
}
|
|
3845
|
-
function
|
|
3846
|
-
return t.x <= Math.max(
|
|
3996
|
+
function ut(s, t, e) {
|
|
3997
|
+
return t.x <= Math.max(s.x, e.x) && t.x >= Math.min(s.x, e.x) && t.y <= Math.max(s.y, e.y) && t.y >= Math.min(s.y, e.y);
|
|
3847
3998
|
}
|
|
3848
|
-
function
|
|
3849
|
-
return
|
|
3999
|
+
function ct(s) {
|
|
4000
|
+
return s > 0 ? 1 : s < 0 ? -1 : 0;
|
|
3850
4001
|
}
|
|
3851
|
-
function
|
|
3852
|
-
let e =
|
|
4002
|
+
function bn(s, t) {
|
|
4003
|
+
let e = s;
|
|
3853
4004
|
do {
|
|
3854
|
-
if (e.i !==
|
|
4005
|
+
if (e.i !== s.i && e.next.i !== s.i && e.i !== t.i && e.next.i !== t.i && Zt(e, e.next, s, t)) return !0;
|
|
3855
4006
|
e = e.next;
|
|
3856
|
-
} while (e !==
|
|
4007
|
+
} while (e !== s);
|
|
3857
4008
|
return !1;
|
|
3858
4009
|
}
|
|
3859
|
-
function
|
|
3860
|
-
return L(
|
|
4010
|
+
function st(s, t) {
|
|
4011
|
+
return L(s.prev, s, s.next) < 0 ? L(s, t, s.next) >= 0 && L(s, s.prev, t) >= 0 : L(s, t, s.prev) < 0 || L(s, s.next, t) < 0;
|
|
3861
4012
|
}
|
|
3862
|
-
function
|
|
3863
|
-
let e =
|
|
3864
|
-
const i = (
|
|
4013
|
+
function Sn(s, t) {
|
|
4014
|
+
let e = s, n = !1;
|
|
4015
|
+
const i = (s.x + t.x) / 2, r = (s.y + t.y) / 2;
|
|
3865
4016
|
do
|
|
3866
4017
|
e.y > r != e.next.y > r && e.next.y !== e.y && i < (e.next.x - e.x) * (r - e.y) / (e.next.y - e.y) + e.x && (n = !n), e = e.next;
|
|
3867
|
-
while (e !==
|
|
4018
|
+
while (e !== s);
|
|
3868
4019
|
return n;
|
|
3869
4020
|
}
|
|
3870
|
-
function
|
|
3871
|
-
const e =
|
|
3872
|
-
return
|
|
4021
|
+
function $t(s, t) {
|
|
4022
|
+
const e = wt(s.i, s.x, s.y), n = wt(t.i, t.x, t.y), i = s.next, r = t.prev;
|
|
4023
|
+
return s.next = t, t.prev = s, e.next = i, i.prev = e, n.next = e, e.prev = n, r.next = n, n.prev = r, n;
|
|
3873
4024
|
}
|
|
3874
|
-
function
|
|
3875
|
-
const i =
|
|
4025
|
+
function Bt(s, t, e, n) {
|
|
4026
|
+
const i = wt(s, t, e);
|
|
3876
4027
|
return n ? (i.next = n.next, i.prev = n, n.next.prev = i, n.next = i) : (i.prev = i, i.next = i), i;
|
|
3877
4028
|
}
|
|
3878
|
-
function ot(
|
|
3879
|
-
|
|
4029
|
+
function ot(s) {
|
|
4030
|
+
s.next.prev = s.prev, s.prev.next = s.next, s.prevZ && (s.prevZ.nextZ = s.nextZ), s.nextZ && (s.nextZ.prevZ = s.prevZ);
|
|
3880
4031
|
}
|
|
3881
|
-
function
|
|
4032
|
+
function wt(s, t, e) {
|
|
3882
4033
|
return {
|
|
3883
|
-
i:
|
|
4034
|
+
i: s,
|
|
3884
4035
|
x: t,
|
|
3885
4036
|
y: e,
|
|
3886
4037
|
prev: null,
|
|
@@ -3891,10 +4042,10 @@ function St(o, t, e) {
|
|
|
3891
4042
|
steiner: !1
|
|
3892
4043
|
};
|
|
3893
4044
|
}
|
|
3894
|
-
function
|
|
4045
|
+
function yn(s, t, e, n) {
|
|
3895
4046
|
let i = 0;
|
|
3896
|
-
for (let r = t,
|
|
3897
|
-
i += (o
|
|
4047
|
+
for (let r = t, o = e - n; r < e; r += n)
|
|
4048
|
+
i += (s[o] - s[r]) * (s[r + 1] + s[o + 1]), o = r;
|
|
3898
4049
|
return i;
|
|
3899
4050
|
}
|
|
3900
4051
|
const R = {
|
|
@@ -3952,14 +4103,16 @@ const R = {
|
|
|
3952
4103
|
autoplay: !0,
|
|
3953
4104
|
loop: !0,
|
|
3954
4105
|
muted: !0
|
|
3955
|
-
},
|
|
4106
|
+
}, J = 512, Q = 512;
|
|
3956
4107
|
class Et extends HTMLElement {
|
|
3957
4108
|
static TAG_NAME = "layershift-portal";
|
|
3958
4109
|
static get observedAttributes() {
|
|
3959
4110
|
return [
|
|
3960
4111
|
"src",
|
|
3961
4112
|
"depth-src",
|
|
3962
|
-
"depth-
|
|
4113
|
+
"depth-width",
|
|
4114
|
+
"depth-height",
|
|
4115
|
+
"depth-fps",
|
|
3963
4116
|
"depth-model",
|
|
3964
4117
|
"logo-src",
|
|
3965
4118
|
"source-type",
|
|
@@ -4010,11 +4163,11 @@ class Et extends HTMLElement {
|
|
|
4010
4163
|
"muted"
|
|
4011
4164
|
];
|
|
4012
4165
|
}
|
|
4013
|
-
reinitAttributes = ["src", "depth-src", "depth-
|
|
4166
|
+
reinitAttributes = ["src", "depth-src", "depth-width", "depth-height", "depth-fps", "depth-model", "logo-src", "source-type"];
|
|
4014
4167
|
canInit() {
|
|
4015
4168
|
const t = !!this.getAttribute("logo-src");
|
|
4016
4169
|
if (this.sourceType === "camera") return t;
|
|
4017
|
-
const e = !!this.getAttribute("src"), n = !!this.getAttribute("depth-src")
|
|
4170
|
+
const e = !!this.getAttribute("src"), n = !!this.getAttribute("depth-src"), i = !!this.getAttribute("depth-model");
|
|
4018
4171
|
return e && t && (n || i);
|
|
4019
4172
|
}
|
|
4020
4173
|
_input = { x: 0, y: 0 };
|
|
@@ -4034,7 +4187,7 @@ class Et extends HTMLElement {
|
|
|
4034
4187
|
loopCount = 0;
|
|
4035
4188
|
lifecycle;
|
|
4036
4189
|
constructor() {
|
|
4037
|
-
super(), this.shadow = this.attachShadow({ mode: "open" }), this.lifecycle = new
|
|
4190
|
+
super(), this.shadow = this.attachShadow({ mode: "open" }), this.lifecycle = new Wt(this);
|
|
4038
4191
|
}
|
|
4039
4192
|
// --- Attribute helpers ---
|
|
4040
4193
|
getAttrFloat(t, e) {
|
|
@@ -4050,13 +4203,13 @@ class Et extends HTMLElement {
|
|
|
4050
4203
|
}
|
|
4051
4204
|
getAttrColor(t, e) {
|
|
4052
4205
|
const n = this.getAttribute(t) ?? e;
|
|
4053
|
-
return
|
|
4206
|
+
return wn(n);
|
|
4054
4207
|
}
|
|
4055
4208
|
getAttrVec3(t, e) {
|
|
4056
|
-
const i = (this.getAttribute(t) ?? e).split(",").map((
|
|
4209
|
+
const i = (this.getAttribute(t) ?? e).split(",").map((o) => parseFloat(o.trim()));
|
|
4057
4210
|
if (i.length >= 3 && i.every(Number.isFinite))
|
|
4058
4211
|
return [i[0], i[1], i[2]];
|
|
4059
|
-
const r = e.split(",").map((
|
|
4212
|
+
const r = e.split(",").map((o) => parseFloat(o.trim()));
|
|
4060
4213
|
return [r[0], r[1], r[2]];
|
|
4061
4214
|
}
|
|
4062
4215
|
get sourceType() {
|
|
@@ -4280,8 +4433,8 @@ class Et extends HTMLElement {
|
|
|
4280
4433
|
if (!this.container) return;
|
|
4281
4434
|
const n = this.sourceType === "camera", i = this.depthModel;
|
|
4282
4435
|
try {
|
|
4283
|
-
let r,
|
|
4284
|
-
const
|
|
4436
|
+
let r, o, l, a = null;
|
|
4437
|
+
const h = (d) => {
|
|
4285
4438
|
this.emit("layershift-portal:model-progress", d);
|
|
4286
4439
|
};
|
|
4287
4440
|
if (n) {
|
|
@@ -4296,68 +4449,76 @@ class Et extends HTMLElement {
|
|
|
4296
4449
|
d.dispose();
|
|
4297
4450
|
return;
|
|
4298
4451
|
}
|
|
4299
|
-
if (r = d,
|
|
4300
|
-
if (
|
|
4301
|
-
|
|
4452
|
+
if (r = d, l = y, i) {
|
|
4453
|
+
if (a = await dt(i, J, Q, h), t.aborted) {
|
|
4454
|
+
a.dispose(), r.dispose();
|
|
4302
4455
|
return;
|
|
4303
4456
|
}
|
|
4304
|
-
|
|
4457
|
+
o = X(J, Q);
|
|
4305
4458
|
} else
|
|
4306
|
-
|
|
4459
|
+
o = X(r.width, r.height);
|
|
4307
4460
|
} else {
|
|
4308
|
-
const d = this.getAttribute("src"), y = this.getAttribute("depth-src"),
|
|
4461
|
+
const d = this.getAttribute("src"), y = this.getAttribute("depth-src"), b = !!y, E = this.sourceType === "image" || /\.(jpe?g|png|webp|gif|avif|bmp)(\?|$)/i.test(d);
|
|
4309
4462
|
if (b) {
|
|
4310
|
-
const [v, m
|
|
4311
|
-
|
|
4463
|
+
const [g, v, m] = await Promise.all([
|
|
4464
|
+
E ? ft(d) : ht(d, {
|
|
4312
4465
|
parent: this.shadow,
|
|
4313
4466
|
loop: this.shouldLoop,
|
|
4314
4467
|
muted: this.shouldMute
|
|
4315
4468
|
}),
|
|
4316
|
-
|
|
4469
|
+
kt(
|
|
4470
|
+
y,
|
|
4471
|
+
this.getAttrFloat("depth-width", 512),
|
|
4472
|
+
this.getAttrFloat("depth-height", 512),
|
|
4473
|
+
this.getAttrFloat("depth-fps", 5)
|
|
4474
|
+
),
|
|
4317
4475
|
Tt(e)
|
|
4318
4476
|
]);
|
|
4319
4477
|
if (t.aborted) {
|
|
4320
|
-
|
|
4478
|
+
g.dispose();
|
|
4321
4479
|
return;
|
|
4322
4480
|
}
|
|
4323
|
-
r =
|
|
4481
|
+
r = g, o = v, l = m;
|
|
4324
4482
|
} else if (i) {
|
|
4325
|
-
const [v, m
|
|
4326
|
-
|
|
4483
|
+
const [g, v, m] = await Promise.all([
|
|
4484
|
+
E ? ft(d) : ht(d, {
|
|
4327
4485
|
parent: this.shadow,
|
|
4328
4486
|
loop: this.shouldLoop,
|
|
4329
4487
|
muted: this.shouldMute
|
|
4330
4488
|
}),
|
|
4331
|
-
|
|
4489
|
+
dt(i, J, Q, h),
|
|
4332
4490
|
Tt(e)
|
|
4333
4491
|
]);
|
|
4334
4492
|
if (t.aborted) {
|
|
4335
|
-
|
|
4493
|
+
g.dispose(), v.dispose();
|
|
4336
4494
|
return;
|
|
4337
4495
|
}
|
|
4338
|
-
if (r =
|
|
4339
|
-
const
|
|
4340
|
-
if (
|
|
4341
|
-
const
|
|
4342
|
-
|
|
4343
|
-
|
|
4344
|
-
|
|
4496
|
+
if (r = g, a = v, l = m, E || !r.isLive) {
|
|
4497
|
+
const T = r.getImageSource();
|
|
4498
|
+
if (T) {
|
|
4499
|
+
const w = await a.submitFrameAndWait(T);
|
|
4500
|
+
o = {
|
|
4501
|
+
width: J,
|
|
4502
|
+
height: Q,
|
|
4503
|
+
fps: 1,
|
|
4504
|
+
frameCount: 1,
|
|
4505
|
+
frames: [w]
|
|
4345
4506
|
};
|
|
4346
4507
|
} else
|
|
4347
|
-
|
|
4508
|
+
o = X(J, Q);
|
|
4348
4509
|
} else
|
|
4349
|
-
|
|
4510
|
+
o = X(J, Q);
|
|
4350
4511
|
} else
|
|
4351
|
-
throw new Error("Either depth-src
|
|
4512
|
+
throw new Error("Either depth-src or depth-model must be provided.");
|
|
4352
4513
|
}
|
|
4353
|
-
this.source = r, this.depthEstimator =
|
|
4354
|
-
const
|
|
4355
|
-
let
|
|
4356
|
-
if (
|
|
4357
|
-
|
|
4514
|
+
this.source = r, this.depthEstimator = a, this.mesh = l, this.loopCount = 0, this.attachSourceEventListeners(r);
|
|
4515
|
+
const c = this.container?.clientWidth || r.width, f = this.parallaxMax / Math.max(c, 1);
|
|
4516
|
+
let u;
|
|
4517
|
+
if (a)
|
|
4518
|
+
u = () => a.getLatestDepth();
|
|
4358
4519
|
else {
|
|
4359
|
-
const d = new
|
|
4360
|
-
|
|
4520
|
+
const d = new Vt(o);
|
|
4521
|
+
u = (y) => d.sample(y);
|
|
4361
4522
|
}
|
|
4362
4523
|
const x = {
|
|
4363
4524
|
parallaxStrength: f,
|
|
@@ -4401,16 +4562,16 @@ class Et extends HTMLElement {
|
|
|
4401
4562
|
lightDirection: this.lightDirection3
|
|
4402
4563
|
};
|
|
4403
4564
|
if (t.aborted) return;
|
|
4404
|
-
this.renderer = new
|
|
4405
|
-
const
|
|
4565
|
+
this.renderer = new $e(this.container, x), this.renderer.initialize(r, o.width, o.height, l);
|
|
4566
|
+
const p = a;
|
|
4406
4567
|
if (this.renderer.start(
|
|
4407
4568
|
r,
|
|
4408
|
-
|
|
4569
|
+
u,
|
|
4409
4570
|
() => ({ x: this._input.x, y: this._input.y }),
|
|
4410
4571
|
(d, y) => {
|
|
4411
|
-
if (
|
|
4412
|
-
const
|
|
4413
|
-
|
|
4572
|
+
if (p) {
|
|
4573
|
+
const b = r.getImageSource();
|
|
4574
|
+
b && p.submitFrame(b);
|
|
4414
4575
|
}
|
|
4415
4576
|
this.emit("layershift-portal:frame", {
|
|
4416
4577
|
currentTime: d,
|
|
@@ -4429,8 +4590,8 @@ class Et extends HTMLElement {
|
|
|
4429
4590
|
duration: r.duration
|
|
4430
4591
|
});
|
|
4431
4592
|
} catch (r) {
|
|
4432
|
-
const
|
|
4433
|
-
console.error("<layershift-portal>: Failed to initialize.", r), this.emit("layershift-portal:error", { message:
|
|
4593
|
+
const o = r instanceof Error ? r.message : "Failed to initialize.";
|
|
4594
|
+
console.error("<layershift-portal>: Failed to initialize.", r), this.emit("layershift-portal:error", { message: o });
|
|
4434
4595
|
}
|
|
4435
4596
|
}
|
|
4436
4597
|
// --- Cleanup ---
|
|
@@ -4438,8 +4599,8 @@ class Et extends HTMLElement {
|
|
|
4438
4599
|
this.renderer?.dispose(), this.renderer = null, this.depthEstimator?.dispose(), this.depthEstimator = null, this.source?.dispose(), this.source = null, this.mesh = null, this.loopCount = 0, this.container = null;
|
|
4439
4600
|
}
|
|
4440
4601
|
}
|
|
4441
|
-
function
|
|
4442
|
-
const t =
|
|
4602
|
+
function wn(s) {
|
|
4603
|
+
const t = s.replace("#", "");
|
|
4443
4604
|
if (t.length === 3) {
|
|
4444
4605
|
const e = parseInt(t[0] + t[0], 16) / 255, n = parseInt(t[1] + t[1], 16) / 255, i = parseInt(t[2] + t[2], 16) / 255;
|
|
4445
4606
|
return [e, n, i];
|
|
@@ -4450,101 +4611,101 @@ function Rn(o) {
|
|
|
4450
4611
|
}
|
|
4451
4612
|
return [0, 0, 0];
|
|
4452
4613
|
}
|
|
4453
|
-
function V(
|
|
4454
|
-
return Math.min(e, Math.max(t,
|
|
4614
|
+
function V(s, t, e) {
|
|
4615
|
+
return Math.min(e, Math.max(t, s));
|
|
4455
4616
|
}
|
|
4456
|
-
function
|
|
4457
|
-
return
|
|
4617
|
+
function W(s, t, e) {
|
|
4618
|
+
return s + (t - s) * e;
|
|
4458
4619
|
}
|
|
4459
|
-
const
|
|
4460
|
-
function
|
|
4620
|
+
const N = 100, Kt = 0.06;
|
|
4621
|
+
function Rn(s, t) {
|
|
4461
4622
|
const e = t?.sensitivityX ?? 1, n = t?.sensitivityY ?? 1, i = t?.lerpFactor ?? 0.08;
|
|
4462
|
-
let r = 0,
|
|
4463
|
-
const f = (
|
|
4464
|
-
const d =
|
|
4465
|
-
r = V(y, -1, 1),
|
|
4466
|
-
},
|
|
4467
|
-
r = 0,
|
|
4623
|
+
let r = 0, o = 0, l = 0, a = 0, h = 0, c = !0;
|
|
4624
|
+
const f = (p) => {
|
|
4625
|
+
const d = s.getBoundingClientRect(), y = (p.clientX - d.left) / d.width * 2 - 1, b = (p.clientY - d.top) / d.height * 2 - 1;
|
|
4626
|
+
r = V(y, -1, 1), o = V(b, -1, 1);
|
|
4627
|
+
}, u = () => {
|
|
4628
|
+
r = 0, o = 0;
|
|
4468
4629
|
}, x = () => {
|
|
4469
|
-
|
|
4630
|
+
c && (l = W(l, r, i), a = W(a, o, i), s.input = { x: l * e, y: a * n }, h = requestAnimationFrame(x));
|
|
4470
4631
|
};
|
|
4471
|
-
return
|
|
4472
|
-
|
|
4632
|
+
return s.addEventListener("mousemove", f), s.addEventListener("mouseleave", u), h = requestAnimationFrame(x), () => {
|
|
4633
|
+
c = !1, cancelAnimationFrame(h), s.removeEventListener("mousemove", f), s.removeEventListener("mouseleave", u);
|
|
4473
4634
|
};
|
|
4474
4635
|
}
|
|
4475
|
-
function
|
|
4636
|
+
function An(s, t) {
|
|
4476
4637
|
const e = t?.sensitivityX ?? 1, n = t?.sensitivityY ?? 1, i = t?.lerpFactor ?? 0.08;
|
|
4477
|
-
let r = 0,
|
|
4478
|
-
const x = (
|
|
4479
|
-
const
|
|
4480
|
-
|
|
4481
|
-
},
|
|
4482
|
-
const
|
|
4483
|
-
if (!
|
|
4484
|
-
const
|
|
4485
|
-
r = V(
|
|
4638
|
+
let r = 0, o = 0, l = 0, a = 0, h = 0, c = 0, f = 0, u = !0;
|
|
4639
|
+
const x = (b) => {
|
|
4640
|
+
const E = b.touches[0];
|
|
4641
|
+
E && (h = E.clientX - l * N, c = E.clientY - a * N, r = l, o = a);
|
|
4642
|
+
}, p = (b) => {
|
|
4643
|
+
const E = b.touches[0];
|
|
4644
|
+
if (!E) return;
|
|
4645
|
+
const g = E.clientX - h, v = E.clientY - c;
|
|
4646
|
+
r = V(g / N, -1, 1), o = V(v / N, -1, 1);
|
|
4486
4647
|
}, d = () => {
|
|
4487
|
-
r = 0,
|
|
4648
|
+
r = 0, o = 0;
|
|
4488
4649
|
}, y = () => {
|
|
4489
|
-
|
|
4650
|
+
u && (l = W(l, r, i), a = W(a, o, i), s.input = { x: l * e, y: a * n }, f = requestAnimationFrame(y));
|
|
4490
4651
|
};
|
|
4491
|
-
return
|
|
4492
|
-
|
|
4652
|
+
return s.addEventListener("touchstart", x, { passive: !0 }), s.addEventListener("touchmove", p, { passive: !0 }), s.addEventListener("touchend", d, { passive: !0 }), s.addEventListener("touchcancel", d, { passive: !0 }), f = requestAnimationFrame(y), () => {
|
|
4653
|
+
u = !1, cancelAnimationFrame(f), s.removeEventListener("touchstart", x), s.removeEventListener("touchmove", p), s.removeEventListener("touchend", d), s.removeEventListener("touchcancel", d);
|
|
4493
4654
|
};
|
|
4494
4655
|
}
|
|
4495
|
-
function
|
|
4496
|
-
const e = t?.sensitivityX ?? 1, n = t?.sensitivityY ?? 1, i = t?.lerpFactor ??
|
|
4497
|
-
let r = 0,
|
|
4498
|
-
const
|
|
4499
|
-
r = V((y.gamma ?? 0) / 45, -1, 1),
|
|
4656
|
+
function Pn(s, t) {
|
|
4657
|
+
const e = t?.sensitivityX ?? 1, n = t?.sensitivityY ?? 1, i = t?.lerpFactor ?? Kt;
|
|
4658
|
+
let r = 0, o = 0, l = 0, a = 0, h = 0, c = !0, f = !1;
|
|
4659
|
+
const u = (y) => {
|
|
4660
|
+
r = V((y.gamma ?? 0) / 45, -1, 1), o = V((y.beta ?? 0) / 45, -1, 1);
|
|
4500
4661
|
}, x = () => {
|
|
4501
|
-
|
|
4502
|
-
},
|
|
4503
|
-
|
|
4662
|
+
c && (l = W(l, r, i), a = W(a, o, i), s.input = { x: l * e, y: a * n }, h = requestAnimationFrame(x));
|
|
4663
|
+
}, p = () => {
|
|
4664
|
+
c && !f && (window.addEventListener("deviceorientation", u), f = !0);
|
|
4504
4665
|
}, d = DeviceOrientationEvent;
|
|
4505
4666
|
return typeof d.requestPermission == "function" ? d.requestPermission().then((y) => {
|
|
4506
|
-
y === "granted" &&
|
|
4667
|
+
y === "granted" && p();
|
|
4507
4668
|
}).catch(() => {
|
|
4508
|
-
}) :
|
|
4509
|
-
|
|
4669
|
+
}) : p(), h = requestAnimationFrame(x), () => {
|
|
4670
|
+
c = !1, cancelAnimationFrame(h), f && (window.removeEventListener("deviceorientation", u), f = !1);
|
|
4510
4671
|
};
|
|
4511
4672
|
}
|
|
4512
|
-
function
|
|
4513
|
-
const e = t?.sensitivityX ?? 1, n = t?.sensitivityY ?? 1, i = t?.lerpFactor ?? 0.08, r = t?.lerpFactor ??
|
|
4514
|
-
let
|
|
4673
|
+
function Dn(s, t) {
|
|
4674
|
+
const e = t?.sensitivityX ?? 1, n = t?.sensitivityY ?? 1, i = t?.lerpFactor ?? 0.08, r = t?.lerpFactor ?? Kt;
|
|
4675
|
+
let o = 0, l = 0, a = 0, h = 0, c = 0, f = 0, u = 0, x = 0, p = !1, d = !1, y = !1, b = 0, E = 0, g = 0, v = !0;
|
|
4515
4676
|
const m = (S) => {
|
|
4516
|
-
const
|
|
4517
|
-
|
|
4677
|
+
const D = s.getBoundingClientRect(), U = (S.clientX - D.left) / D.width * 2 - 1, M = (S.clientY - D.top) / D.height * 2 - 1;
|
|
4678
|
+
o = V(U, -1, 1), l = V(M, -1, 1);
|
|
4518
4679
|
}, T = () => {
|
|
4519
|
-
|
|
4680
|
+
o = 0, l = 0;
|
|
4520
4681
|
}, w = (S) => {
|
|
4521
|
-
const
|
|
4522
|
-
|
|
4682
|
+
const D = S.touches[0];
|
|
4683
|
+
D && (p = !0, b = D.clientX - u * N, E = D.clientY - x * N, a = u, h = x, !d && !y && I());
|
|
4523
4684
|
}, A = (S) => {
|
|
4524
|
-
const
|
|
4525
|
-
if (!
|
|
4526
|
-
const U =
|
|
4527
|
-
|
|
4528
|
-
},
|
|
4529
|
-
|
|
4530
|
-
},
|
|
4531
|
-
|
|
4685
|
+
const D = S.touches[0];
|
|
4686
|
+
if (!D) return;
|
|
4687
|
+
const U = D.clientX - b, M = D.clientY - E;
|
|
4688
|
+
a = V(U / N, -1, 1), h = V(M / N, -1, 1);
|
|
4689
|
+
}, P = () => {
|
|
4690
|
+
p = !1, a = 0, h = 0;
|
|
4691
|
+
}, F = (S) => {
|
|
4692
|
+
c = V((S.gamma ?? 0) / 45, -1, 1), f = V((S.beta ?? 0) / 45, -1, 1);
|
|
4532
4693
|
}, _ = () => {
|
|
4533
|
-
v && !y && (window.addEventListener("deviceorientation",
|
|
4694
|
+
v && !y && (window.addEventListener("deviceorientation", F), y = !0, d = !0);
|
|
4534
4695
|
}, I = () => {
|
|
4535
4696
|
if (typeof DeviceOrientationEvent > "u") return;
|
|
4536
4697
|
const S = DeviceOrientationEvent;
|
|
4537
|
-
typeof S.requestPermission == "function" ? S.requestPermission().then((
|
|
4538
|
-
|
|
4698
|
+
typeof S.requestPermission == "function" ? S.requestPermission().then((D) => {
|
|
4699
|
+
D === "granted" && _();
|
|
4539
4700
|
}).catch(() => {
|
|
4540
4701
|
}) : _();
|
|
4541
4702
|
}, C = () => {
|
|
4542
4703
|
if (!v) return;
|
|
4543
|
-
let S,
|
|
4544
|
-
|
|
4704
|
+
let S, D, U;
|
|
4705
|
+
p ? (S = a, D = h, U = i) : d ? (S = c, D = f, U = r) : (S = o, D = l, U = i), u = W(u, S, U), x = W(x, D, U), s.input = { x: u * e, y: x * n }, g = requestAnimationFrame(C);
|
|
4545
4706
|
};
|
|
4546
|
-
return
|
|
4547
|
-
v = !1, cancelAnimationFrame(
|
|
4707
|
+
return s.addEventListener("mousemove", m), s.addEventListener("mouseleave", T), s.addEventListener("touchstart", w, { passive: !0 }), s.addEventListener("touchmove", A, { passive: !0 }), s.addEventListener("touchend", P, { passive: !0 }), s.addEventListener("touchcancel", P, { passive: !0 }), g = requestAnimationFrame(C), () => {
|
|
4708
|
+
v = !1, cancelAnimationFrame(g), s.removeEventListener("mousemove", m), s.removeEventListener("mouseleave", T), s.removeEventListener("touchstart", w), s.removeEventListener("touchmove", A), s.removeEventListener("touchend", P), s.removeEventListener("touchcancel", P), y && (window.removeEventListener("deviceorientation", F), y = !1);
|
|
4548
4709
|
};
|
|
4549
4710
|
}
|
|
4550
4711
|
customElements.get(xt.TAG_NAME) || customElements.define(xt.TAG_NAME, xt);
|
|
@@ -4552,8 +4713,8 @@ customElements.get(Et.TAG_NAME) || customElements.define(Et.TAG_NAME, Et);
|
|
|
4552
4713
|
export {
|
|
4553
4714
|
xt as LayershiftElement,
|
|
4554
4715
|
Et as LayershiftPortalElement,
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
|
|
4558
|
-
|
|
4716
|
+
Pn as connectGyro,
|
|
4717
|
+
Rn as connectMouse,
|
|
4718
|
+
Dn as connectPointer,
|
|
4719
|
+
An as connectTouch
|
|
4559
4720
|
};
|