layershift 0.5.1 → 0.7.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 +33 -12
- package/dist/components/layershift.js +29 -29
- package/dist/npm/layershift.es.js +788 -742
- package/dist/types/components/layershift/global.d.ts +4 -2
- package/dist/types/components/layershift/index.d.ts +1 -1
- package/dist/types/components/layershift/layershift-element.d.ts +13 -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/precomputed-depth.d.ts +4 -8
- package/dist/types/depth/precomputed-depth.d.ts.map +1 -1
- package/dist/types/renderers/renderer-base.d.ts +11 -0
- package/dist/types/renderers/renderer-base.d.ts.map +1 -1
- package/dist/types/shared/filter-config.d.ts +2 -3
- package/dist/types/shared/filter-config.d.ts.map +1 -1
- package/package.json +11 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
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,95 +10,72 @@ class Vt {
|
|
|
10
10
|
lastNextFrameIndex = -1;
|
|
11
11
|
lastLerpFactor = -1;
|
|
12
12
|
sample(t) {
|
|
13
|
-
const e =
|
|
13
|
+
const e = ie(t * this.depthData.fps, 0, this.depthData.frameCount - 1), i = Math.floor(e), n = Math.min(i + 1, this.depthData.frameCount - 1), r = e - i, o = i !== this.lastFrameIndex || n !== this.lastNextFrameIndex, l = Math.abs(r - this.lastLerpFactor) > 1e-3;
|
|
14
14
|
if (!o && !l)
|
|
15
15
|
return this.uint8Output;
|
|
16
|
-
this.lastFrameIndex =
|
|
17
|
-
const a = 1 - r, h = this.depthData.frames[
|
|
16
|
+
this.lastFrameIndex = i, this.lastNextFrameIndex = n, this.lastLerpFactor = r;
|
|
17
|
+
const a = 1 - r, h = this.depthData.frames[i], c = this.depthData.frames[n];
|
|
18
18
|
for (let f = 0; f < this.uint8Output.length; f += 1)
|
|
19
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 kt(s, t, e) {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
ee(s)
|
|
27
|
-
]);
|
|
28
|
-
return ne(i, n);
|
|
23
|
+
async function kt(s, t = 512, e = 512, i = 5, n) {
|
|
24
|
+
const r = await te(s);
|
|
25
|
+
return ee(r, t, e, i);
|
|
29
26
|
}
|
|
30
|
-
async function te(s) {
|
|
31
|
-
const t = await fetch(s);
|
|
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 ie(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 ee(s, t) {
|
|
27
|
+
async function te(s, t) {
|
|
44
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");
|
|
48
|
-
const
|
|
49
|
-
if (!
|
|
32
|
+
const i = e.body;
|
|
33
|
+
if (!i)
|
|
50
34
|
return new Uint8Array(await e.arrayBuffer());
|
|
51
|
-
const
|
|
35
|
+
const n = [];
|
|
52
36
|
let r = 0;
|
|
53
|
-
const o =
|
|
37
|
+
const o = i.getReader();
|
|
54
38
|
for (; ; ) {
|
|
55
39
|
const { done: h, value: c } = await o.read();
|
|
56
40
|
if (h)
|
|
57
41
|
break;
|
|
58
|
-
c && (
|
|
42
|
+
c && (n.push(c), r += c.byteLength);
|
|
59
43
|
}
|
|
60
44
|
const l = new Uint8Array(r);
|
|
61
45
|
let a = 0;
|
|
62
|
-
for (const h of
|
|
46
|
+
for (const h of n)
|
|
63
47
|
l.set(h, a), a += h.byteLength;
|
|
64
48
|
return l;
|
|
65
49
|
}
|
|
66
|
-
function
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (s.byteLength !==
|
|
50
|
+
function ee(s, t, e, i) {
|
|
51
|
+
const n = t * e;
|
|
52
|
+
if (n === 0)
|
|
53
|
+
throw new Error("Depth frame dimensions must be non-zero.");
|
|
54
|
+
if (s.byteLength % n !== 0)
|
|
71
55
|
throw new Error(
|
|
72
|
-
`Depth data byte length
|
|
56
|
+
`Depth data byte length (${s.byteLength}) is not evenly divisible by frame size (${n} = ${t}×${e}).`
|
|
73
57
|
);
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
);
|
|
78
|
-
const o = s.subarray(4), l = new Array(n);
|
|
79
|
-
for (let a = 0; a < n; a += 1) {
|
|
80
|
-
const h = a * i;
|
|
81
|
-
l[a] = o.subarray(h, h + i);
|
|
58
|
+
const r = s.byteLength / n, o = new Array(r);
|
|
59
|
+
for (let l = 0; l < r; l += 1) {
|
|
60
|
+
const a = l * n;
|
|
61
|
+
o[l] = s.subarray(a, a + n);
|
|
82
62
|
}
|
|
83
|
-
return {
|
|
84
|
-
}
|
|
85
|
-
function ie(s) {
|
|
86
|
-
if (!s || typeof s.frameCount != "number" || typeof s.fps != "number" || typeof s.width != "number" || typeof s.height != "number" || typeof s.sourceFps != "number")
|
|
87
|
-
throw new Error("Depth metadata is malformed.");
|
|
88
|
-
if (!Number.isFinite(s.frameCount) || !Number.isFinite(s.fps) || !Number.isFinite(s.width) || !Number.isFinite(s.height) || !Number.isFinite(s.sourceFps) || s.frameCount <= 0 || s.fps <= 0 || s.width <= 0 || s.height <= 0 || s.sourceFps <= 0)
|
|
89
|
-
throw new Error("Depth metadata contains invalid numeric values.");
|
|
63
|
+
return { width: t, height: e, fps: i, frameCount: r, frames: o };
|
|
90
64
|
}
|
|
91
|
-
function
|
|
65
|
+
function X(s, t) {
|
|
92
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
|
|
75
|
+
function ie(s, t, e) {
|
|
99
76
|
return Math.min(e, Math.max(t, s));
|
|
100
77
|
}
|
|
101
|
-
const
|
|
78
|
+
const ne = {
|
|
102
79
|
parallaxStrength: 0.05,
|
|
103
80
|
contrastLow: 0.05,
|
|
104
81
|
contrastHigh: 0.95,
|
|
@@ -108,63 +85,63 @@ const se = {
|
|
|
108
85
|
pomSteps: 16,
|
|
109
86
|
overscanPadding: 0.08
|
|
110
87
|
};
|
|
111
|
-
function
|
|
112
|
-
const
|
|
88
|
+
function re(s, t, e) {
|
|
89
|
+
const i = new Float32Array(256);
|
|
113
90
|
if (s.length === 0 || t <= 0 || e <= 0)
|
|
114
|
-
return Pt(
|
|
115
|
-
const
|
|
91
|
+
return Pt(i);
|
|
92
|
+
const n = oe(s.length), r = t * e;
|
|
116
93
|
let o = 0;
|
|
117
94
|
const l = new Uint32Array(256);
|
|
118
|
-
for (const m of
|
|
95
|
+
for (const m of n) {
|
|
119
96
|
const T = s[m], w = Math.min(T.length, r);
|
|
120
97
|
for (let A = 0; A < w; A += 1)
|
|
121
98
|
l[T[A]] += 1;
|
|
122
99
|
o += w;
|
|
123
100
|
}
|
|
124
101
|
if (o === 0)
|
|
125
|
-
return Pt(
|
|
102
|
+
return Pt(i);
|
|
126
103
|
const a = 1 / o;
|
|
127
104
|
for (let m = 0; m < 256; m += 1)
|
|
128
|
-
|
|
105
|
+
i[m] = l[m] * a;
|
|
129
106
|
const h = new Float32Array(256);
|
|
130
|
-
h[0] =
|
|
107
|
+
h[0] = i[0];
|
|
131
108
|
for (let m = 1; m < 256; m += 1)
|
|
132
|
-
h[m] = h[m - 1] +
|
|
133
|
-
const c =
|
|
109
|
+
h[m] = h[m - 1] + i[m];
|
|
110
|
+
const c = it(h, 0.05), f = it(h, 0.25), u = it(h, 0.5), x = it(h, 0.75), p = it(h, 0.95);
|
|
134
111
|
let d = 0;
|
|
135
112
|
for (let m = 0; m < 256; m += 1)
|
|
136
|
-
d += m / 255 *
|
|
113
|
+
d += m / 255 * i[m];
|
|
137
114
|
let y = 0;
|
|
138
115
|
for (let m = 0; m < 256; m += 1) {
|
|
139
116
|
const T = m / 255 - d;
|
|
140
|
-
y +=
|
|
117
|
+
y += i[m] * T * T;
|
|
141
118
|
}
|
|
142
|
-
const
|
|
119
|
+
const b = Math.sqrt(y), E = p - c, g = x - f, v = ae(i);
|
|
143
120
|
return {
|
|
144
121
|
mean: d,
|
|
145
|
-
stdDev:
|
|
122
|
+
stdDev: b,
|
|
146
123
|
p5: c,
|
|
147
124
|
p25: f,
|
|
148
125
|
median: u,
|
|
149
126
|
p75: x,
|
|
150
127
|
p95: p,
|
|
151
|
-
effectiveRange:
|
|
128
|
+
effectiveRange: E,
|
|
152
129
|
iqr: g,
|
|
153
130
|
bimodality: v,
|
|
154
|
-
histogram:
|
|
131
|
+
histogram: i
|
|
155
132
|
};
|
|
156
133
|
}
|
|
157
|
-
function
|
|
134
|
+
function se(s) {
|
|
158
135
|
if (s.effectiveRange < 0.05 || s.stdDev < 0.02)
|
|
159
|
-
return { ...
|
|
160
|
-
const t = s.effectiveRange - 0.5, e = s.bimodality - 0.4,
|
|
136
|
+
return { ...ne };
|
|
137
|
+
const t = s.effectiveRange - 0.5, e = s.bimodality - 0.4, i = H(
|
|
161
138
|
0.05 - t * 0.03 + e * 0.01,
|
|
162
139
|
0.035,
|
|
163
140
|
0.065
|
|
164
|
-
),
|
|
141
|
+
), n = H(s.p5 - 0.03, 0, 0.25), r = H(s.p95 + 0.03, 0.75, 1), o = H((i - 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(i + 0.03, 0.06, 0.1);
|
|
165
142
|
return {
|
|
166
|
-
parallaxStrength:
|
|
167
|
-
contrastLow:
|
|
143
|
+
parallaxStrength: i,
|
|
144
|
+
contrastLow: n,
|
|
168
145
|
contrastHigh: r,
|
|
169
146
|
verticalReduction: l,
|
|
170
147
|
dofStart: a,
|
|
@@ -173,7 +150,7 @@ function ae(s) {
|
|
|
173
150
|
overscanPadding: f
|
|
174
151
|
};
|
|
175
152
|
}
|
|
176
|
-
function
|
|
153
|
+
function oe(s) {
|
|
177
154
|
if (s <= 0) return [];
|
|
178
155
|
if (s === 1) return [0];
|
|
179
156
|
const t = s - 1, e = [
|
|
@@ -182,18 +159,18 @@ function le(s) {
|
|
|
182
159
|
Math.floor(s / 2),
|
|
183
160
|
Math.floor(3 * s / 4),
|
|
184
161
|
t
|
|
185
|
-
],
|
|
162
|
+
], i = /* @__PURE__ */ new Set(), n = [];
|
|
186
163
|
for (const r of e)
|
|
187
|
-
|
|
188
|
-
return
|
|
164
|
+
i.has(r) || (i.add(r), n.push(r));
|
|
165
|
+
return n;
|
|
189
166
|
}
|
|
190
|
-
function
|
|
167
|
+
function it(s, t) {
|
|
191
168
|
for (let e = 0; e < 256; e += 1)
|
|
192
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
175
|
for (let u = 0; u < 256; u += 1) {
|
|
199
176
|
let x = 0, p = 0;
|
|
@@ -205,14 +182,14 @@ function ue(s) {
|
|
|
205
182
|
for (let u = 0; u < 256; u += 1)
|
|
206
183
|
e += t[u];
|
|
207
184
|
e /= 256;
|
|
208
|
-
const
|
|
185
|
+
const i = e * 2, n = 25, r = [];
|
|
209
186
|
for (let u = 1; u < 255; u += 1)
|
|
210
|
-
t[u] > t[u - 1] && t[u] > t[u + 1] && t[u] >=
|
|
211
|
-
if (t[0] > t[1] && t[0] >=
|
|
187
|
+
t[u] > t[u - 1] && t[u] > t[u + 1] && t[u] >= i && r.push({ bin: u, height: t[u] });
|
|
188
|
+
if (t[0] > t[1] && t[0] >= i && r.push({ bin: 0, height: t[0] }), t[255] > t[254] && t[255] >= i && r.push({ bin: 255, height: t[255] }), r.sort((u, x) => x.height - u.height), r.length < 2) return 0;
|
|
212
189
|
const o = r[0];
|
|
213
190
|
let l = null;
|
|
214
191
|
for (let u = 1; u < r.length; u += 1)
|
|
215
|
-
if (Math.abs(r[u].bin - o.bin) >=
|
|
192
|
+
if (Math.abs(r[u].bin - o.bin) >= n) {
|
|
216
193
|
l = r[u];
|
|
217
194
|
break;
|
|
218
195
|
}
|
|
@@ -243,32 +220,32 @@ function H(s, t, e) {
|
|
|
243
220
|
return Math.min(e, Math.max(t, s));
|
|
244
221
|
}
|
|
245
222
|
function G(s, t, e) {
|
|
246
|
-
const
|
|
247
|
-
if (!
|
|
248
|
-
if (s.shaderSource(
|
|
249
|
-
const
|
|
250
|
-
throw s.deleteShader(
|
|
251
|
-
${
|
|
223
|
+
const i = s.createShader(t);
|
|
224
|
+
if (!i) throw new Error("Failed to create shader.");
|
|
225
|
+
if (s.shaderSource(i, e), s.compileShader(i), !s.getShaderParameter(i, s.COMPILE_STATUS)) {
|
|
226
|
+
const n = s.getShaderInfoLog(i) ?? "";
|
|
227
|
+
throw s.deleteShader(i), new Error(`Shader compilation failed:
|
|
228
|
+
${n}`);
|
|
252
229
|
}
|
|
253
|
-
return
|
|
230
|
+
return i;
|
|
254
231
|
}
|
|
255
232
|
function mt(s, t, e) {
|
|
256
|
-
const
|
|
257
|
-
if (!
|
|
258
|
-
if (s.attachShader(
|
|
259
|
-
const
|
|
260
|
-
throw s.deleteProgram(
|
|
261
|
-
${
|
|
233
|
+
const i = s.createProgram();
|
|
234
|
+
if (!i) throw new Error("Failed to create program.");
|
|
235
|
+
if (s.attachShader(i, t), s.attachShader(i, e), s.linkProgram(i), !s.getProgramParameter(i, s.LINK_STATUS)) {
|
|
236
|
+
const n = s.getProgramInfoLog(i) ?? "";
|
|
237
|
+
throw s.deleteProgram(i), new Error(`Program linking failed:
|
|
238
|
+
${n}`);
|
|
262
239
|
}
|
|
263
|
-
return s.detachShader(
|
|
240
|
+
return s.detachShader(i, t), s.detachShader(i, e), s.deleteShader(t), s.deleteShader(e), i;
|
|
264
241
|
}
|
|
265
242
|
function pt(s, t, e) {
|
|
266
|
-
const
|
|
267
|
-
for (const
|
|
268
|
-
n
|
|
269
|
-
return
|
|
243
|
+
const i = {};
|
|
244
|
+
for (const n of e)
|
|
245
|
+
i[n] = s.getUniformLocation(t, n);
|
|
246
|
+
return i;
|
|
270
247
|
}
|
|
271
|
-
const
|
|
248
|
+
const le = new Float32Array([
|
|
272
249
|
-1,
|
|
273
250
|
-1,
|
|
274
251
|
1,
|
|
@@ -282,10 +259,10 @@ function Ot(s, t) {
|
|
|
282
259
|
const e = s.createVertexArray();
|
|
283
260
|
if (!e) throw new Error("Failed to create VAO.");
|
|
284
261
|
s.bindVertexArray(e);
|
|
285
|
-
const
|
|
286
|
-
s.bindBuffer(s.ARRAY_BUFFER,
|
|
287
|
-
const
|
|
288
|
-
return s.enableVertexAttribArray(
|
|
262
|
+
const i = s.createBuffer();
|
|
263
|
+
s.bindBuffer(s.ARRAY_BUFFER, i), s.bufferData(s.ARRAY_BUFFER, le, s.STATIC_DRAW);
|
|
264
|
+
const n = s.getAttribLocation(t, "aPosition");
|
|
265
|
+
return s.enableVertexAttribArray(n), s.vertexAttribPointer(n, 2, s.FLOAT, !1, 0, 0), s.bindVertexArray(null), e;
|
|
289
266
|
}
|
|
290
267
|
class Ht {
|
|
291
268
|
slots = /* @__PURE__ */ new Map();
|
|
@@ -323,8 +300,8 @@ class Ht {
|
|
|
323
300
|
return this.slots.size;
|
|
324
301
|
}
|
|
325
302
|
}
|
|
326
|
-
function O(s, t, e,
|
|
327
|
-
const r = G(s, s.VERTEX_SHADER, e), o = G(s, s.FRAGMENT_SHADER,
|
|
303
|
+
function O(s, t, e, i, n) {
|
|
304
|
+
const r = G(s, s.VERTEX_SHADER, e), o = G(s, s.FRAGMENT_SHADER, i), l = mt(s, r, o), a = pt(s, l, n);
|
|
328
305
|
return {
|
|
329
306
|
name: t,
|
|
330
307
|
program: l,
|
|
@@ -334,8 +311,8 @@ function O(s, t, e, n, i) {
|
|
|
334
311
|
}
|
|
335
312
|
};
|
|
336
313
|
}
|
|
337
|
-
function Dt(s, t, e,
|
|
338
|
-
const o = G(s, s.VERTEX_SHADER, e), l = G(s, s.FRAGMENT_SHADER,
|
|
314
|
+
function Dt(s, t, e, i, n, r) {
|
|
315
|
+
const o = G(s, s.VERTEX_SHADER, e), l = G(s, s.FRAGMENT_SHADER, i), a = mt(s, o, l), h = pt(s, a, n), c = {
|
|
339
316
|
texture: null,
|
|
340
317
|
unit: r.textureUnit,
|
|
341
318
|
attachment: s.COLOR_ATTACHMENT0
|
|
@@ -372,7 +349,7 @@ function Dt(s, t, e, n, i, r) {
|
|
|
372
349
|
};
|
|
373
350
|
return r.width > 0 && r.height > 0 && f.resize(s, r.width, r.height), f;
|
|
374
351
|
}
|
|
375
|
-
const
|
|
352
|
+
const ue = {
|
|
376
353
|
high: {
|
|
377
354
|
dprCap: 2,
|
|
378
355
|
depthMaxDim: 512,
|
|
@@ -395,22 +372,22 @@ const he = {
|
|
|
395
372
|
jfaDivisor: 4
|
|
396
373
|
}
|
|
397
374
|
};
|
|
398
|
-
function
|
|
375
|
+
function ce(s) {
|
|
399
376
|
let t = "unknown";
|
|
400
377
|
const e = s.getExtension("WEBGL_debug_renderer_info");
|
|
401
378
|
e && (t = s.getParameter(e.UNMASKED_RENDERER_WEBGL) || "unknown");
|
|
402
|
-
const
|
|
379
|
+
const i = s.getParameter(s.MAX_TEXTURE_SIZE), n = 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;
|
|
403
380
|
return {
|
|
404
381
|
gpuRenderer: t,
|
|
405
|
-
maxTextureSize:
|
|
406
|
-
hardwareConcurrency:
|
|
382
|
+
maxTextureSize: i,
|
|
383
|
+
hardwareConcurrency: n,
|
|
407
384
|
deviceMemory: r,
|
|
408
385
|
devicePixelRatio: o,
|
|
409
386
|
screenPixels: l,
|
|
410
387
|
isMobile: a && h
|
|
411
388
|
};
|
|
412
389
|
}
|
|
413
|
-
const
|
|
390
|
+
const he = [
|
|
414
391
|
"mali-4",
|
|
415
392
|
"mali-t",
|
|
416
393
|
"adreno 3",
|
|
@@ -423,7 +400,7 @@ const de = [
|
|
|
423
400
|
"llvmpipe",
|
|
424
401
|
"swiftshader",
|
|
425
402
|
"software"
|
|
426
|
-
],
|
|
403
|
+
], fe = [
|
|
427
404
|
"nvidia",
|
|
428
405
|
"geforce",
|
|
429
406
|
"radeon rx",
|
|
@@ -435,14 +412,14 @@ const de = [
|
|
|
435
412
|
"mali-g7",
|
|
436
413
|
"mali-g6"
|
|
437
414
|
];
|
|
438
|
-
function
|
|
415
|
+
function de(s) {
|
|
439
416
|
let t = 0;
|
|
440
|
-
const e = s.gpuRenderer.toLowerCase(),
|
|
441
|
-
return
|
|
417
|
+
const e = s.gpuRenderer.toLowerCase(), i = he.some((r) => e.includes(r)), n = fe.some((r) => e.includes(r));
|
|
418
|
+
return i && (t -= 30), n && (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";
|
|
442
419
|
}
|
|
443
|
-
function
|
|
444
|
-
const e = t && t !== "auto" ? t :
|
|
445
|
-
return { tier: e, ...
|
|
420
|
+
function Xt(s, t) {
|
|
421
|
+
const e = t && t !== "auto" ? t : de(ce(s));
|
|
422
|
+
return { tier: e, ...ue[e] };
|
|
446
423
|
}
|
|
447
424
|
class gt {
|
|
448
425
|
static RESIZE_DEBOUNCE_MS = 100;
|
|
@@ -505,12 +482,31 @@ class gt {
|
|
|
505
482
|
*
|
|
506
483
|
* For static sources (image) or when RVFC is unavailable, RAF-only.
|
|
507
484
|
*/
|
|
508
|
-
start(t, e,
|
|
509
|
-
this.stop(), this.mediaSource = t, this.readDepth = e, this.readInput =
|
|
485
|
+
start(t, e, i, n) {
|
|
486
|
+
this.stop(), this.mediaSource = t, this.readDepth = e, this.readInput = i, this.onVideoFrame = n ?? null, this.rvfcSupported = t.isLive && typeof t.requestVideoFrameCallback == "function", this.rvfcSupported ? this.rvfcHandle = t.requestVideoFrameCallback(this._videoFrameLoop) : t.isLive || this.onDepthUpdate(t.currentTime), this.animationFrameHandle = window.requestAnimationFrame(this._rafLoop);
|
|
510
487
|
}
|
|
511
488
|
/** Stop both render loops and release callbacks. */
|
|
512
489
|
stop() {
|
|
513
|
-
this.
|
|
490
|
+
this.stopLoops(), this.mediaSource = null, this.readDepth = null, this.readInput = null, this.onVideoFrame = null, this.rvfcSupported = !1;
|
|
491
|
+
}
|
|
492
|
+
/**
|
|
493
|
+
* Pause the render loops without releasing callbacks.
|
|
494
|
+
* The loops can be resumed with `resume()`.
|
|
495
|
+
*/
|
|
496
|
+
pause() {
|
|
497
|
+
this.stopLoops();
|
|
498
|
+
}
|
|
499
|
+
/** Resume render loops previously paused with `pause()`. */
|
|
500
|
+
resume() {
|
|
501
|
+
this.readInput && (this.animationFrameHandle || (this.rvfcSupported && this.mediaSource?.requestVideoFrameCallback && (this.rvfcHandle = this.mediaSource.requestVideoFrameCallback(this._videoFrameLoop)), this.animationFrameHandle = window.requestAnimationFrame(this._rafLoop)));
|
|
502
|
+
}
|
|
503
|
+
/** Whether the render loops are currently paused. */
|
|
504
|
+
get isPaused() {
|
|
505
|
+
return this.animationFrameHandle === 0 && this.readInput !== null;
|
|
506
|
+
}
|
|
507
|
+
/** Cancel animation loops without clearing callbacks. */
|
|
508
|
+
stopLoops() {
|
|
509
|
+
this.animationFrameHandle && (window.cancelAnimationFrame(this.animationFrameHandle), this.animationFrameHandle = 0), this.rvfcHandle && this.mediaSource?.cancelVideoFrameCallback && (this.mediaSource.cancelVideoFrameCallback(this.rvfcHandle), this.rvfcHandle = 0);
|
|
514
510
|
}
|
|
515
511
|
/** Stop rendering and release all GPU resources. */
|
|
516
512
|
dispose() {
|
|
@@ -538,11 +534,11 @@ class gt {
|
|
|
538
534
|
* Delegates to subclass `onDepthUpdate()` for depth texture upload.
|
|
539
535
|
*/
|
|
540
536
|
_videoFrameLoop = (t, e) => {
|
|
541
|
-
const
|
|
542
|
-
if (!
|
|
543
|
-
this.rvfcHandle =
|
|
544
|
-
const
|
|
545
|
-
this.onDepthUpdate(
|
|
537
|
+
const i = this.mediaSource;
|
|
538
|
+
if (!i || !i.requestVideoFrameCallback) return;
|
|
539
|
+
this.rvfcHandle = i.requestVideoFrameCallback(this._videoFrameLoop);
|
|
540
|
+
const n = e.mediaTime ?? i.currentTime;
|
|
541
|
+
this.onDepthUpdate(n), this.onVideoFrame && this.onVideoFrame(n, e.presentedFrames ?? 0);
|
|
546
542
|
};
|
|
547
543
|
// -----------------------------------------------------------------------
|
|
548
544
|
// Context loss handling
|
|
@@ -583,14 +579,14 @@ class gt {
|
|
|
583
579
|
* Clamp depth dimensions to the quality tier's maximum and allocate
|
|
584
580
|
* the subsample buffer if needed. Called during `initialize()`.
|
|
585
581
|
*/
|
|
586
|
-
clampDepthDimensions(t, e,
|
|
582
|
+
clampDepthDimensions(t, e, i) {
|
|
587
583
|
this.sourceDepthWidth = t, this.sourceDepthHeight = e;
|
|
588
|
-
let
|
|
589
|
-
if (
|
|
590
|
-
const o =
|
|
591
|
-
|
|
584
|
+
let n = t, r = e;
|
|
585
|
+
if (n > i || r > i) {
|
|
586
|
+
const o = i / Math.max(n, r);
|
|
587
|
+
n = Math.max(1, Math.round(n * o)), r = Math.max(1, Math.round(r * o));
|
|
592
588
|
}
|
|
593
|
-
this.depthWidth =
|
|
589
|
+
this.depthWidth = n, this.depthHeight = r, n !== t || r !== e ? this.depthSubsampleBuffer = new Uint8Array(n * r) : this.depthSubsampleBuffer = null;
|
|
594
590
|
}
|
|
595
591
|
/**
|
|
596
592
|
* CPU nearest-neighbor depth subsampling.
|
|
@@ -600,11 +596,11 @@ class gt {
|
|
|
600
596
|
*/
|
|
601
597
|
subsampleDepth(t) {
|
|
602
598
|
if (!this.depthSubsampleBuffer) return t;
|
|
603
|
-
const e = this.depthSubsampleBuffer,
|
|
599
|
+
const e = this.depthSubsampleBuffer, i = this.sourceDepthWidth, n = this.depthWidth, r = this.depthHeight;
|
|
604
600
|
for (let o = 0; o < r; o++) {
|
|
605
|
-
const a = Math.min(Math.round(o * this.sourceDepthHeight / r), this.sourceDepthHeight - 1) *
|
|
606
|
-
for (let c = 0; c <
|
|
607
|
-
const f = Math.min(Math.round(c *
|
|
601
|
+
const a = Math.min(Math.round(o * this.sourceDepthHeight / r), this.sourceDepthHeight - 1) * i, h = o * n;
|
|
602
|
+
for (let c = 0; c < n; c++) {
|
|
603
|
+
const f = Math.min(Math.round(c * i / n), i - 1);
|
|
608
604
|
e[h + c] = t[a + f];
|
|
609
605
|
}
|
|
610
606
|
}
|
|
@@ -621,14 +617,14 @@ class gt {
|
|
|
621
617
|
* Updates `this.uvOffset` and `this.uvScale`.
|
|
622
618
|
*/
|
|
623
619
|
computeCoverFitUV(t, e) {
|
|
624
|
-
const { width:
|
|
620
|
+
const { width: i, height: n } = this.getViewportSize(), r = i / n, o = t + e;
|
|
625
621
|
let l = 1, a = 1;
|
|
626
622
|
r > this.videoAspect ? a = this.videoAspect / r : l = r / this.videoAspect;
|
|
627
623
|
const h = 1 + o * 2;
|
|
628
624
|
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]);
|
|
629
625
|
}
|
|
630
626
|
}
|
|
631
|
-
const
|
|
627
|
+
const me = `#version 300 es
|
|
632
628
|
in vec2 aPosition;
|
|
633
629
|
|
|
634
630
|
// UV coordinates for cover-fit + overscan.
|
|
@@ -657,7 +653,7 @@ void main() {
|
|
|
657
653
|
vUv = aPosition * 0.5 + 0.5;
|
|
658
654
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
659
655
|
}
|
|
660
|
-
`,
|
|
656
|
+
`, pe = `#version 300 es
|
|
661
657
|
precision highp float;
|
|
662
658
|
|
|
663
659
|
// BILATERAL_RADIUS is injected as a #define at compile time.
|
|
@@ -695,7 +691,7 @@ void main() {
|
|
|
695
691
|
|
|
696
692
|
fragColor = vec4(totalDepth / totalWeight, 0.0, 0.0, 1.0);
|
|
697
693
|
}
|
|
698
|
-
`,
|
|
694
|
+
`, ge = `#version 300 es
|
|
699
695
|
precision highp float;
|
|
700
696
|
|
|
701
697
|
// ---- Uniforms ----
|
|
@@ -1147,18 +1143,18 @@ void main() {
|
|
|
1147
1143
|
tiltHalfTanFov: Math.tan(50 * Math.PI / 360),
|
|
1148
1144
|
tiltTransitionWidth: 0.3 * 4.5,
|
|
1149
1145
|
tiltPeakIntensity: 0.8
|
|
1150
|
-
},
|
|
1146
|
+
}, ve = ["uRawDepth", "uTexelSize", "uSpatialSigma2"], xe = {
|
|
1151
1147
|
2: 2.25,
|
|
1152
1148
|
// 1.5²
|
|
1153
1149
|
1: 0.5625
|
|
1154
1150
|
// 0.75²
|
|
1155
1151
|
};
|
|
1156
|
-
function
|
|
1157
|
-
const e =
|
|
1152
|
+
function Te(s, t) {
|
|
1153
|
+
const e = pe.replace(
|
|
1158
1154
|
"#version 300 es",
|
|
1159
1155
|
`#version 300 es
|
|
1160
1156
|
#define BILATERAL_RADIUS ${t}`
|
|
1161
|
-
),
|
|
1157
|
+
), i = G(s, s.VERTEX_SHADER, bt), n = G(s, s.FRAGMENT_SHADER, e), r = mt(s, i, n), o = pt(s, r, ve), l = xe[t] ?? 2.25;
|
|
1162
1158
|
let a = null;
|
|
1163
1159
|
const h = {
|
|
1164
1160
|
name: "bilateral-filter",
|
|
@@ -1179,7 +1175,7 @@ function be(s, t) {
|
|
|
1179
1175
|
0
|
|
1180
1176
|
), 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);
|
|
1181
1177
|
},
|
|
1182
|
-
execute(c, f, u, x, p, d, y,
|
|
1178
|
+
execute(c, f, u, x, p, d, y, b) {
|
|
1183
1179
|
a && (c.activeTexture(c.TEXTURE2), c.bindTexture(c.TEXTURE_2D, u), c.texSubImage2D(
|
|
1184
1180
|
c.TEXTURE_2D,
|
|
1185
1181
|
0,
|
|
@@ -1190,7 +1186,7 @@ function be(s, t) {
|
|
|
1190
1186
|
c.RED,
|
|
1191
1187
|
c.UNSIGNED_BYTE,
|
|
1192
1188
|
x
|
|
1193
|
-
), 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,
|
|
1189
|
+
), 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));
|
|
1194
1190
|
},
|
|
1195
1191
|
dispose(c) {
|
|
1196
1192
|
a && (c.deleteFramebuffer(a), a = null, h.fbo = null), c.deleteProgram(r);
|
|
@@ -1198,7 +1194,7 @@ function be(s, t) {
|
|
|
1198
1194
|
};
|
|
1199
1195
|
return h;
|
|
1200
1196
|
}
|
|
1201
|
-
const
|
|
1197
|
+
const Ee = [
|
|
1202
1198
|
"uImage",
|
|
1203
1199
|
"uDepth",
|
|
1204
1200
|
"uOffset",
|
|
@@ -1237,29 +1233,29 @@ const Se = [
|
|
|
1237
1233
|
"uTiltPeakIntensity",
|
|
1238
1234
|
"uTiltPlaneNormal",
|
|
1239
1235
|
"uTiltPlaneD"
|
|
1240
|
-
],
|
|
1241
|
-
function
|
|
1242
|
-
const t =
|
|
1236
|
+
], be = 64;
|
|
1237
|
+
function Se(s) {
|
|
1238
|
+
const t = ge.replace(
|
|
1243
1239
|
"#version 300 es",
|
|
1244
1240
|
`#version 300 es
|
|
1245
|
-
#define MAX_POM_STEPS ${
|
|
1246
|
-
), e = G(s, s.VERTEX_SHADER,
|
|
1241
|
+
#define MAX_POM_STEPS ${be}`
|
|
1242
|
+
), e = G(s, s.VERTEX_SHADER, me), i = G(s, s.FRAGMENT_SHADER, t), n = mt(s, e, i), r = pt(s, n, Ee);
|
|
1247
1243
|
return {
|
|
1248
1244
|
name: "depth-effect",
|
|
1249
|
-
program:
|
|
1245
|
+
program: n,
|
|
1250
1246
|
uniforms: r,
|
|
1251
1247
|
setStaticUniforms(o, l, a, h) {
|
|
1252
|
-
o.useProgram(
|
|
1248
|
+
o.useProgram(n), 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);
|
|
1253
1249
|
},
|
|
1254
1250
|
updateUvTransform(o, l, a) {
|
|
1255
|
-
o.useProgram(
|
|
1251
|
+
o.useProgram(n), o.uniform2f(r.uUvOffset, l[0], l[1]), o.uniform2f(r.uUvScale, a[0], a[1]);
|
|
1256
1252
|
},
|
|
1257
1253
|
dispose(o) {
|
|
1258
|
-
o.deleteProgram(
|
|
1254
|
+
o.deleteProgram(n);
|
|
1259
1255
|
}
|
|
1260
1256
|
};
|
|
1261
1257
|
}
|
|
1262
|
-
class
|
|
1258
|
+
class ye extends gt {
|
|
1263
1259
|
// ---- Shared GPU resources ----
|
|
1264
1260
|
gl = null;
|
|
1265
1261
|
quadVao = null;
|
|
@@ -1311,14 +1307,14 @@ class Re extends gt {
|
|
|
1311
1307
|
tiltTransitionWidth: e.tiltTransitionWidth ?? B.tiltTransitionWidth,
|
|
1312
1308
|
tiltPeakIntensity: e.tiltPeakIntensity ?? B.tiltPeakIntensity
|
|
1313
1309
|
};
|
|
1314
|
-
const
|
|
1310
|
+
const i = this.canvas.getContext("webgl2", {
|
|
1315
1311
|
antialias: !1,
|
|
1316
1312
|
alpha: !1,
|
|
1317
1313
|
desynchronized: !0,
|
|
1318
1314
|
powerPreference: "high-performance"
|
|
1319
1315
|
});
|
|
1320
|
-
if (!
|
|
1321
|
-
this.gl =
|
|
1316
|
+
if (!i) throw new Error("WebGL 2 is not supported.");
|
|
1317
|
+
this.gl = i, this.qualityParams = Xt(i, e.quality), "drawingBufferColorSpace" in i && (i.drawingBufferColorSpace = "srgb"), i.clearColor(0, 0, 0, 1), i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL, !0), this.initGPUResources(), this.setupResizeHandling();
|
|
1322
1318
|
}
|
|
1323
1319
|
/**
|
|
1324
1320
|
* Set up the scene: create video texture, depth textures + FBO, and
|
|
@@ -1331,14 +1327,14 @@ class Re extends gt {
|
|
|
1331
1327
|
* @param depthWidth - Width of the precomputed depth map (e.g. 512).
|
|
1332
1328
|
* @param depthHeight - Height of the precomputed depth map (e.g. 512).
|
|
1333
1329
|
*/
|
|
1334
|
-
initialize(t, e,
|
|
1335
|
-
const
|
|
1336
|
-
if (
|
|
1337
|
-
if (this.disposeTextures(), this.isCameraSource = t.type === "camera", this.videoAspect = t.width / t.height, this.clampDepthDimensions(e,
|
|
1330
|
+
initialize(t, e, i) {
|
|
1331
|
+
const n = this.gl;
|
|
1332
|
+
if (n) {
|
|
1333
|
+
if (this.disposeTextures(), this.isCameraSource = t.type === "camera", this.videoAspect = t.width / t.height, this.clampDepthDimensions(e, i, this.qualityParams.depthMaxDim), this.videoSlot.texture = n.createTexture(), n.activeTexture(n.TEXTURE0 + this.videoSlot.unit), n.bindTexture(n.TEXTURE_2D, this.videoSlot.texture), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), this.rawDepthSlot.texture = n.createTexture(), n.activeTexture(n.TEXTURE0 + this.rawDepthSlot.unit), n.bindTexture(n.TEXTURE_2D, this.rawDepthSlot.texture), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.texStorage2D(n.TEXTURE_2D, 1, n.R8, e, i), this.filteredDepthSlot.texture = n.createTexture(), n.activeTexture(n.TEXTURE0 + this.filteredDepthSlot.unit), n.bindTexture(n.TEXTURE_2D, this.filteredDepthSlot.texture), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.texStorage2D(n.TEXTURE_2D, 1, n.R8, e, i), this.bilateralPass && this.filteredDepthSlot.texture && this.bilateralPass.initFBO(n, this.filteredDepthSlot.texture, e, i), this.glowBlurHPass && this.glowBlurVPass) {
|
|
1338
1334
|
const r = this.depthWidth, o = this.depthHeight;
|
|
1339
|
-
this.glowBlurHPass.resize(
|
|
1335
|
+
this.glowBlurHPass.resize(n, r, o), this.glowBlurVPass.resize(n, r, o), this.glowBlurHorizSlot.texture = this.glowBlurHPass.outputs[0].texture, this.glowBlurResultSlot.texture = this.glowBlurVPass.outputs[0].texture, n.useProgram(this.glowBlurHPass.program), n.uniform1i(this.glowBlurHPass.uniforms.uDepth, this.filteredDepthSlot.unit), n.uniform1i(this.glowBlurHPass.uniforms.uGlowCurve, this.glowLutSlot.unit), n.uniform2f(this.glowBlurHPass.uniforms.uBlurDir, 1, 0), n.uniform2f(this.glowBlurHPass.uniforms.uTexelSize, 1 / r, 1 / o), n.uniform1f(this.glowBlurHPass.uniforms.uGlowRadius, this.config.glowRadius), n.useProgram(this.glowBlurVPass.program), n.uniform1i(this.glowBlurVPass.uniforms.uHorizResult, this.glowBlurHorizSlot.unit), n.uniform2f(this.glowBlurVPass.uniforms.uBlurDir, 0, 1), n.uniform2f(this.glowBlurVPass.uniforms.uTexelSize, 1 / r, 1 / o), n.uniform1f(this.glowBlurVPass.uniforms.uGlowRadius, this.config.glowRadius);
|
|
1340
1336
|
}
|
|
1341
|
-
this.effectPass && this.effectPass.setStaticUniforms(
|
|
1337
|
+
this.effectPass && this.effectPass.setStaticUniforms(n, this.config, t.width, t.height), this.recalculateViewportLayout();
|
|
1342
1338
|
}
|
|
1343
1339
|
}
|
|
1344
1340
|
/**
|
|
@@ -1353,18 +1349,18 @@ class Re extends gt {
|
|
|
1353
1349
|
const e = this.gl;
|
|
1354
1350
|
if (!e || !this.effectPass) return;
|
|
1355
1351
|
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);
|
|
1356
|
-
const { uniforms:
|
|
1357
|
-
e.useProgram(
|
|
1352
|
+
const { uniforms: i, program: n } = this.effectPass;
|
|
1353
|
+
e.useProgram(n), e.uniform1f(i.uStrength, this.config.parallaxStrength), e.uniform1i(i.uPomEnabled, this.config.pomEnabled ? 1 : 0), e.uniform1i(i.uPomSteps, this.config.pomSteps), e.uniform1f(i.uContrastLow, this.config.contrastLow), e.uniform1f(i.uContrastHigh, this.config.contrastHigh), e.uniform1f(i.uVerticalReduction, this.config.verticalReduction), e.uniform1f(i.uDofStart, this.config.dofStart), e.uniform1f(i.uDofStrength, this.config.dofStrength), e.uniform1f(i.uBlurRadius, this.config.blurRadius), e.uniform3f(i.uGlowColor, this.config.glowColor[0], this.config.glowColor[1], this.config.glowColor[2]), e.uniform1f(i.uGlowRadius, this.config.glowRadius), e.uniform1f(i.uGlowSoftness, this.config.glowSoftness), e.uniform1i(i.uTiltEnabled, this.config.tiltEnabled ? 1 : 0), e.uniform1f(i.uTiltHalfTanFov, this.config.tiltHalfTanFov), e.uniform1f(i.uTiltTransitionWidth, this.config.tiltTransitionWidth), e.uniform1f(i.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();
|
|
1358
1354
|
}
|
|
1359
1355
|
/**
|
|
1360
1356
|
* Upload new curve LUT data to the GPU.
|
|
1361
1357
|
* Call this whenever the curve editor changes.
|
|
1362
1358
|
*/
|
|
1363
|
-
updateCurveLUTs(t, e,
|
|
1359
|
+
updateCurveLUTs(t, e, i, n, r) {
|
|
1364
1360
|
const o = this.gl;
|
|
1365
1361
|
if (!o || !this.effectPass) return;
|
|
1366
|
-
const l = !!(t || e), a = !!
|
|
1367
|
-
t && this.uploadLUT(this.displacementLutSlot, t), e && this.uploadLUT(this.blurLutSlot, e),
|
|
1362
|
+
const l = !!(t || e), a = !!i, h = !!n;
|
|
1363
|
+
t && this.uploadLUT(this.displacementLutSlot, t), e && this.uploadLUT(this.blurLutSlot, e), i && this.uploadLUT(this.glowLutSlot, i), n && this.uploadLUT(this.colorShiftLutSlot, n), o.useProgram(this.effectPass.program), o.uniform1i(
|
|
1368
1364
|
this.effectPass.uniforms.uCurvesEnabled,
|
|
1369
1365
|
l ? 1 : 0
|
|
1370
1366
|
), o.uniform1i(
|
|
@@ -1375,7 +1371,7 @@ class Re extends gt {
|
|
|
1375
1371
|
h ? 1 : 0
|
|
1376
1372
|
);
|
|
1377
1373
|
const c = this.glowEnabled !== a;
|
|
1378
|
-
if (this.glowEnabled = a, a && (c ||
|
|
1374
|
+
if (this.glowEnabled = a, a && (c || i) && this.refreshGlowBlur(), h && r) {
|
|
1379
1375
|
const f = this.effectPass.uniforms;
|
|
1380
1376
|
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(
|
|
1381
1377
|
f.uColorShiftTintColor,
|
|
@@ -1397,12 +1393,12 @@ class Re extends gt {
|
|
|
1397
1393
|
initGPUResources() {
|
|
1398
1394
|
const t = this.gl;
|
|
1399
1395
|
if (!t) return;
|
|
1400
|
-
this.bilateralPass =
|
|
1396
|
+
this.bilateralPass = Te(t, this.qualityParams.bilateralRadius), this.effectPass = Se(t);
|
|
1401
1397
|
const e = Ft.replace(
|
|
1402
1398
|
"#version 300 es",
|
|
1403
1399
|
`#version 300 es
|
|
1404
1400
|
#define PASS_HORIZONTAL`
|
|
1405
|
-
),
|
|
1401
|
+
), i = [
|
|
1406
1402
|
"uDepth",
|
|
1407
1403
|
"uGlowCurve",
|
|
1408
1404
|
"uHorizResult",
|
|
@@ -1415,7 +1411,7 @@ class Re extends gt {
|
|
|
1415
1411
|
"glow-blur-h",
|
|
1416
1412
|
bt,
|
|
1417
1413
|
e,
|
|
1418
|
-
|
|
1414
|
+
i,
|
|
1419
1415
|
{
|
|
1420
1416
|
internalFormat: t.R8,
|
|
1421
1417
|
format: t.RED,
|
|
@@ -1429,7 +1425,7 @@ class Re extends gt {
|
|
|
1429
1425
|
"glow-blur-v",
|
|
1430
1426
|
bt,
|
|
1431
1427
|
Ft,
|
|
1432
|
-
|
|
1428
|
+
i,
|
|
1433
1429
|
{
|
|
1434
1430
|
internalFormat: t.R8,
|
|
1435
1431
|
format: t.RED,
|
|
@@ -1448,8 +1444,8 @@ class Re extends gt {
|
|
|
1448
1444
|
* Creates the texture on first call, updates via texSubImage2D thereafter.
|
|
1449
1445
|
*/
|
|
1450
1446
|
uploadLUT(t, e) {
|
|
1451
|
-
const
|
|
1452
|
-
|
|
1447
|
+
const i = this.gl;
|
|
1448
|
+
i && (i.activeTexture(i.TEXTURE0 + t.unit), t.texture ? i.bindTexture(i.TEXTURE_2D, t.texture) : (t.texture = i.createTexture(), i.bindTexture(i.TEXTURE_2D, t.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, 256, 1)), i.texSubImage2D(i.TEXTURE_2D, 0, 0, 0, 256, 1, i.RED, i.UNSIGNED_BYTE, e));
|
|
1453
1449
|
}
|
|
1454
1450
|
// -----------------------------------------------------------------------
|
|
1455
1451
|
// Abstract method implementations
|
|
@@ -1469,16 +1465,16 @@ class Re extends gt {
|
|
|
1469
1465
|
const t = this.gl, e = this.mediaSource;
|
|
1470
1466
|
if (!t || !this.effectPass || !this.quadVao)
|
|
1471
1467
|
return;
|
|
1472
|
-
const
|
|
1473
|
-
if (
|
|
1474
|
-
if (!this.rvfcSupported && e.isLive && this.onDepthUpdate(e.currentTime), t.useProgram(this.effectPass.program), 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,
|
|
1475
|
-
const
|
|
1476
|
-
t.uniform2f(this.effectPass.uniforms.uOffset, -
|
|
1468
|
+
const i = e?.getImageSource();
|
|
1469
|
+
if (i) {
|
|
1470
|
+
if (!this.rvfcSupported && e.isLive && this.onDepthUpdate(e.currentTime), t.useProgram(this.effectPass.program), 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, i), this.readInput) {
|
|
1471
|
+
const n = this.readInput();
|
|
1472
|
+
t.uniform2f(this.effectPass.uniforms.uOffset, -n.x, n.y), n.focalBandOffset !== void 0 && t.uniform1f(this.effectPass.uniforms.uFocalBandOffset, n.focalBandOffset), n.tiltPlaneNormal !== void 0 && t.uniform3f(
|
|
1477
1473
|
this.effectPass.uniforms.uTiltPlaneNormal,
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
),
|
|
1474
|
+
n.tiltPlaneNormal[0],
|
|
1475
|
+
n.tiltPlaneNormal[1],
|
|
1476
|
+
n.tiltPlaneNormal[2]
|
|
1477
|
+
), n.tiltPlaneD !== void 0 && t.uniform1f(this.effectPass.uniforms.uTiltPlaneD, n.tiltPlaneD);
|
|
1482
1478
|
}
|
|
1483
1479
|
t.bindVertexArray(this.quadVao), t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
|
|
1484
1480
|
}
|
|
@@ -1494,12 +1490,12 @@ class Re extends gt {
|
|
|
1494
1490
|
onDepthUpdate(t) {
|
|
1495
1491
|
const e = this.gl;
|
|
1496
1492
|
if (!e || !this.readDepth || !this.rawDepthSlot.texture || !this.bilateralPass) return;
|
|
1497
|
-
const
|
|
1493
|
+
const i = this.subsampleDepth(this.readDepth(t));
|
|
1498
1494
|
this.bilateralPass.execute(
|
|
1499
1495
|
e,
|
|
1500
1496
|
this.quadVao,
|
|
1501
1497
|
this.rawDepthSlot.texture,
|
|
1502
|
-
|
|
1498
|
+
i,
|
|
1503
1499
|
this.depthWidth,
|
|
1504
1500
|
this.depthHeight,
|
|
1505
1501
|
this.canvas.width,
|
|
@@ -1512,8 +1508,8 @@ class Re extends gt {
|
|
|
1512
1508
|
*/
|
|
1513
1509
|
executeGlowBlur(t) {
|
|
1514
1510
|
if (!this.glowBlurHPass?.fbo || !this.glowBlurVPass?.fbo || !this.quadVao) return;
|
|
1515
|
-
const e = this.depthWidth,
|
|
1516
|
-
t.bindFramebuffer(t.FRAMEBUFFER, this.glowBlurHPass.fbo), t.viewport(0, 0, e,
|
|
1511
|
+
const e = this.depthWidth, i = this.depthHeight;
|
|
1512
|
+
t.bindFramebuffer(t.FRAMEBUFFER, this.glowBlurHPass.fbo), t.viewport(0, 0, e, i), 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);
|
|
1517
1513
|
}
|
|
1518
1514
|
/**
|
|
1519
1515
|
* Re-execute glow blur on demand (when glow LUT or radius changes).
|
|
@@ -1533,7 +1529,7 @@ class Re extends gt {
|
|
|
1533
1529
|
recalculateViewportLayout() {
|
|
1534
1530
|
const t = this.gl;
|
|
1535
1531
|
if (!t) return;
|
|
1536
|
-
const { width: e, height:
|
|
1532
|
+
const { width: e, height: i } = this.getViewportSize(), n = Math.min(window.devicePixelRatio, this.qualityParams.dprCap), r = Math.round(e * n), o = Math.round(i * n);
|
|
1537
1533
|
(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);
|
|
1538
1534
|
}
|
|
1539
1535
|
/** Release all GPU resources. */
|
|
@@ -1562,12 +1558,12 @@ class Re extends gt {
|
|
|
1562
1558
|
async function ht(s, t = {}) {
|
|
1563
1559
|
const {
|
|
1564
1560
|
parent: e = document.body,
|
|
1565
|
-
loop:
|
|
1566
|
-
muted:
|
|
1561
|
+
loop: i = !0,
|
|
1562
|
+
muted: n = !0
|
|
1567
1563
|
} = t, r = document.createElement("video");
|
|
1568
|
-
return r.crossOrigin = "anonymous", r.setAttribute("crossorigin", "anonymous"), r.playsInline = !0, r.setAttribute("playsinline", ""), r.setAttribute("webkit-playsinline", "true"), r.muted =
|
|
1564
|
+
return r.crossOrigin = "anonymous", r.setAttribute("crossorigin", "anonymous"), r.playsInline = !0, r.setAttribute("playsinline", ""), r.setAttribute("webkit-playsinline", "true"), r.muted = n, r.defaultMuted = n, n && r.setAttribute("muted", ""), r.loop = i, r.preload = "auto", r.style.display = "none", r.src = s, e.appendChild(r), await Gt(r), new we(r);
|
|
1569
1565
|
}
|
|
1570
|
-
class
|
|
1566
|
+
class we {
|
|
1571
1567
|
constructor(t) {
|
|
1572
1568
|
this.video = t;
|
|
1573
1569
|
}
|
|
@@ -1615,15 +1611,15 @@ class Ae {
|
|
|
1615
1611
|
}
|
|
1616
1612
|
async function ft(s, t = {}) {
|
|
1617
1613
|
const e = new Image();
|
|
1618
|
-
return e.crossOrigin = "anonymous", e.src = s, await new Promise((
|
|
1614
|
+
return e.crossOrigin = "anonymous", e.src = s, await new Promise((i, n) => {
|
|
1619
1615
|
if (e.complete && e.naturalWidth > 0) {
|
|
1620
|
-
|
|
1616
|
+
i();
|
|
1621
1617
|
return;
|
|
1622
1618
|
}
|
|
1623
|
-
e.addEventListener("load", () =>
|
|
1624
|
-
}), new
|
|
1619
|
+
e.addEventListener("load", () => i(), { once: !0 }), e.addEventListener("error", () => n(new Error(`Failed to load image: ${s}`)), { once: !0 });
|
|
1620
|
+
}), new Re(e);
|
|
1625
1621
|
}
|
|
1626
|
-
class
|
|
1622
|
+
class Re {
|
|
1627
1623
|
constructor(t) {
|
|
1628
1624
|
this.img = t;
|
|
1629
1625
|
}
|
|
@@ -1645,11 +1641,11 @@ class Pe {
|
|
|
1645
1641
|
this.img.removeAttribute("src");
|
|
1646
1642
|
}
|
|
1647
1643
|
}
|
|
1648
|
-
async function
|
|
1649
|
-
const { parent: e = document.body } = t,
|
|
1650
|
-
return
|
|
1644
|
+
async function Nt(s = { video: !0 }, t = {}) {
|
|
1645
|
+
const { parent: e = document.body } = t, i = await navigator.mediaDevices.getUserMedia(s), n = document.createElement("video");
|
|
1646
|
+
return n.playsInline = !0, n.setAttribute("playsinline", ""), n.muted = !0, n.defaultMuted = !0, n.style.display = "none", n.srcObject = i, e.appendChild(n), await Gt(n), await n.play(), new Ae(n, i);
|
|
1651
1647
|
}
|
|
1652
|
-
class
|
|
1648
|
+
class Ae {
|
|
1653
1649
|
constructor(t, e) {
|
|
1654
1650
|
this.video = t, this.stream = e;
|
|
1655
1651
|
}
|
|
@@ -1697,26 +1693,26 @@ class De {
|
|
|
1697
1693
|
}
|
|
1698
1694
|
async function Gt(s) {
|
|
1699
1695
|
s.readyState >= HTMLMediaElement.HAVE_METADATA || await new Promise((t, e) => {
|
|
1700
|
-
const
|
|
1696
|
+
const i = () => {
|
|
1701
1697
|
r(), t();
|
|
1702
|
-
},
|
|
1698
|
+
}, n = () => {
|
|
1703
1699
|
r(), e(new Error("Failed to load video metadata."));
|
|
1704
1700
|
}, r = () => {
|
|
1705
|
-
s.removeEventListener("loadedmetadata",
|
|
1701
|
+
s.removeEventListener("loadedmetadata", i), s.removeEventListener("error", n);
|
|
1706
1702
|
};
|
|
1707
|
-
s.addEventListener("loadedmetadata",
|
|
1703
|
+
s.addEventListener("loadedmetadata", i), s.addEventListener("error", n), s.load();
|
|
1708
1704
|
});
|
|
1709
1705
|
}
|
|
1710
1706
|
const Z = 518;
|
|
1711
|
-
async function
|
|
1707
|
+
async function Pe() {
|
|
1712
1708
|
return await import("onnxruntime-web/webgpu");
|
|
1713
1709
|
}
|
|
1714
|
-
class
|
|
1710
|
+
class De {
|
|
1715
1711
|
constructor(t, e) {
|
|
1716
1712
|
this.depthWidth = t, this.depthHeight = e;
|
|
1717
|
-
const
|
|
1718
|
-
this.frontBuffer = new Uint8Array(
|
|
1719
|
-
this.readyResolve =
|
|
1713
|
+
const i = t * e;
|
|
1714
|
+
this.frontBuffer = new Uint8Array(i), this.frontBuffer.fill(128), this.backBuffer = new Uint8Array(i), this.backBuffer.fill(128), this.readyPromise = new Promise((n) => {
|
|
1715
|
+
this.readyResolve = n;
|
|
1720
1716
|
});
|
|
1721
1717
|
}
|
|
1722
1718
|
// ONNX session + module (set after init)
|
|
@@ -1750,21 +1746,21 @@ class Ce {
|
|
|
1750
1746
|
* (GPU-accelerated on main thread), falls back to WASM EP.
|
|
1751
1747
|
*/
|
|
1752
1748
|
async init(t, e) {
|
|
1753
|
-
const
|
|
1754
|
-
if (this.ort =
|
|
1749
|
+
const i = await Pe();
|
|
1750
|
+
if (this.ort = i, this.captureCanvas = document.createElement("canvas"), this.captureCanvas.width = Z, this.captureCanvas.height = Z, this.captureCtx = this.captureCanvas.getContext("2d", {
|
|
1755
1751
|
willReadFrequently: !0
|
|
1756
1752
|
}), !this.captureCtx)
|
|
1757
1753
|
throw new Error("[DepthEstimator] Failed to create 2D canvas context.");
|
|
1758
1754
|
e?.({ receivedBytes: 0, totalBytes: null, fraction: 0, label: "Downloading depth model…" });
|
|
1759
|
-
const
|
|
1760
|
-
e?.({ receivedBytes:
|
|
1755
|
+
const n = await Fe(t, e);
|
|
1756
|
+
e?.({ receivedBytes: n.byteLength, totalBytes: n.byteLength, fraction: 1, label: "Initialising depth model…" });
|
|
1761
1757
|
let r;
|
|
1762
1758
|
try {
|
|
1763
|
-
r = await
|
|
1759
|
+
r = await i.InferenceSession.create(n, {
|
|
1764
1760
|
executionProviders: ["webgpu"]
|
|
1765
1761
|
}), console.log("[DepthEstimator] Using WebGPU execution provider");
|
|
1766
1762
|
} catch (o) {
|
|
1767
|
-
console.warn("[DepthEstimator] WebGPU EP unavailable, falling back to WASM:", o),
|
|
1763
|
+
console.warn("[DepthEstimator] WebGPU EP unavailable, falling back to WASM:", o), i.env.wasm.proxy = !0, r = await i.InferenceSession.create(n, {
|
|
1768
1764
|
executionProviders: ["wasm"]
|
|
1769
1765
|
}), console.log("[DepthEstimator] Using WASM execution provider (proxy worker)");
|
|
1770
1766
|
}
|
|
@@ -1833,7 +1829,7 @@ class Ce {
|
|
|
1833
1829
|
0,
|
|
1834
1830
|
Z,
|
|
1835
1831
|
Z
|
|
1836
|
-
),
|
|
1832
|
+
), i = await this.workerPreprocess(e.data.buffer, e.width, e.height), n = new this.ort.Tensor("float32", new Float32Array(i), [1, 3, e.height, e.width]), o = (await this.session.run({ [this.inputName]: n }))[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);
|
|
1837
1833
|
this.backBuffer.set(new Uint8Array(f));
|
|
1838
1834
|
const u = this.frontBuffer;
|
|
1839
1835
|
this.frontBuffer = this.backBuffer, this.backBuffer = u;
|
|
@@ -1843,50 +1839,50 @@ class Ce {
|
|
|
1843
1839
|
this.inferenceInFlight = !1;
|
|
1844
1840
|
}
|
|
1845
1841
|
}
|
|
1846
|
-
workerPreprocess(t, e,
|
|
1847
|
-
return new Promise((
|
|
1842
|
+
workerPreprocess(t, e, i) {
|
|
1843
|
+
return new Promise((n, r) => {
|
|
1848
1844
|
if (!this.preprocessWorker) {
|
|
1849
1845
|
r(new Error("Worker not ready"));
|
|
1850
1846
|
return;
|
|
1851
1847
|
}
|
|
1852
1848
|
const o = (a) => {
|
|
1853
|
-
this.preprocessWorker?.removeEventListener("message", o), a.data.type === "preprocessed" ?
|
|
1849
|
+
this.preprocessWorker?.removeEventListener("message", o), a.data.type === "preprocessed" ? n(a.data.float32) : a.data.type === "error" && r(new Error(a.data.message));
|
|
1854
1850
|
};
|
|
1855
1851
|
this.preprocessWorker.addEventListener("message", o);
|
|
1856
1852
|
const l = t.slice(0);
|
|
1857
1853
|
this.preprocessWorker.postMessage(
|
|
1858
|
-
{ type: "preprocess", pixels: l, width: e, height:
|
|
1854
|
+
{ type: "preprocess", pixels: l, width: e, height: i },
|
|
1859
1855
|
[l]
|
|
1860
1856
|
);
|
|
1861
1857
|
});
|
|
1862
1858
|
}
|
|
1863
|
-
workerPostprocess(t, e,
|
|
1864
|
-
return new Promise((
|
|
1859
|
+
workerPostprocess(t, e, i) {
|
|
1860
|
+
return new Promise((n, r) => {
|
|
1865
1861
|
if (!this.preprocessWorker) {
|
|
1866
1862
|
r(new Error("Worker not ready"));
|
|
1867
1863
|
return;
|
|
1868
1864
|
}
|
|
1869
1865
|
const o = (a) => {
|
|
1870
|
-
this.preprocessWorker?.removeEventListener("message", o), a.data.type === "postprocessed" ?
|
|
1866
|
+
this.preprocessWorker?.removeEventListener("message", o), a.data.type === "postprocessed" ? n(a.data.depth) : a.data.type === "error" && r(new Error(a.data.message));
|
|
1871
1867
|
};
|
|
1872
1868
|
this.preprocessWorker.addEventListener("message", o);
|
|
1873
1869
|
const l = t.slice(0);
|
|
1874
1870
|
this.preprocessWorker.postMessage(
|
|
1875
|
-
{ type: "postprocess", depthFloat: l, srcW: e, srcH:
|
|
1871
|
+
{ type: "postprocess", depthFloat: l, srcW: e, srcH: i, dstW: this.depthWidth, dstH: this.depthHeight },
|
|
1876
1872
|
[l]
|
|
1877
1873
|
);
|
|
1878
1874
|
});
|
|
1879
1875
|
}
|
|
1880
1876
|
}
|
|
1881
|
-
async function dt(s, t, e,
|
|
1882
|
-
const
|
|
1883
|
-
return await
|
|
1877
|
+
async function dt(s, t, e, i) {
|
|
1878
|
+
const n = new De(t, e);
|
|
1879
|
+
return await n.init(s, i), n;
|
|
1884
1880
|
}
|
|
1885
|
-
async function
|
|
1881
|
+
async function Fe(s, t) {
|
|
1886
1882
|
const e = await fetch(s);
|
|
1887
1883
|
if (!e.ok)
|
|
1888
1884
|
throw new Error(`[DepthEstimator] Failed to fetch model (${e.status} ${e.statusText}).`);
|
|
1889
|
-
const
|
|
1885
|
+
const i = e.headers.get("content-length"), n = i ? Number(i) : null, r = e.body;
|
|
1890
1886
|
if (!r) {
|
|
1891
1887
|
const f = await e.arrayBuffer();
|
|
1892
1888
|
return t?.({
|
|
@@ -1904,8 +1900,8 @@ async function Ue(s, t) {
|
|
|
1904
1900
|
if (f) break;
|
|
1905
1901
|
u && (o.push(u), l += u.byteLength, t?.({
|
|
1906
1902
|
receivedBytes: l,
|
|
1907
|
-
totalBytes:
|
|
1908
|
-
fraction:
|
|
1903
|
+
totalBytes: n,
|
|
1904
|
+
fraction: n ? Math.min(l / n, 1) : 0,
|
|
1909
1905
|
label: "Downloading depth model…"
|
|
1910
1906
|
}));
|
|
1911
1907
|
}
|
|
@@ -1925,27 +1921,27 @@ function St(s, t) {
|
|
|
1925
1921
|
if (e.length === 0) return 0;
|
|
1926
1922
|
if (e.length === 1 || t <= e[0].x) return e[0].y;
|
|
1927
1923
|
if (t >= e[e.length - 1].x) return e[e.length - 1].y;
|
|
1928
|
-
let
|
|
1929
|
-
for (;
|
|
1930
|
-
const
|
|
1924
|
+
let i = 0;
|
|
1925
|
+
for (; i < e.length - 1 && e[i + 1].x < t; ) i++;
|
|
1926
|
+
const n = e[i], r = e[i + 1], o = (t - n.x) / (r.x - n.x);
|
|
1931
1927
|
switch (s.interpolation) {
|
|
1932
1928
|
case "step":
|
|
1933
|
-
return
|
|
1929
|
+
return n.y;
|
|
1934
1930
|
case "linear":
|
|
1935
|
-
return
|
|
1931
|
+
return n.y + (r.y - n.y) * o;
|
|
1936
1932
|
case "smooth": {
|
|
1937
1933
|
const l = o * o * (3 - 2 * o);
|
|
1938
|
-
return
|
|
1934
|
+
return n.y + (r.y - n.y) * l;
|
|
1939
1935
|
}
|
|
1940
1936
|
default:
|
|
1941
|
-
return
|
|
1937
|
+
return n.y + (r.y - n.y) * o;
|
|
1942
1938
|
}
|
|
1943
1939
|
}
|
|
1944
1940
|
function lt(s, t = 256) {
|
|
1945
1941
|
const e = new Uint8Array(t);
|
|
1946
|
-
for (let
|
|
1947
|
-
const
|
|
1948
|
-
e[
|
|
1942
|
+
for (let i = 0; i < t; i++) {
|
|
1943
|
+
const n = i / (t - 1);
|
|
1944
|
+
e[i] = Math.round(St(s, n) * 255);
|
|
1949
1945
|
}
|
|
1950
1946
|
return e;
|
|
1951
1947
|
}
|
|
@@ -1953,10 +1949,10 @@ function q(s, t) {
|
|
|
1953
1949
|
return s.find((e) => e.channel === t && e.enabled);
|
|
1954
1950
|
}
|
|
1955
1951
|
function Ut(s, t) {
|
|
1956
|
-
const e = q(s, "displacement"),
|
|
1952
|
+
const e = q(s, "displacement"), i = q(s, "blur"), n = q(s, "glow"), r = e?.params;
|
|
1957
1953
|
let o = 0.6, l = 0;
|
|
1958
|
-
if (
|
|
1959
|
-
const a =
|
|
1954
|
+
if (i) {
|
|
1955
|
+
const a = i.curve;
|
|
1960
1956
|
for (let h = 0; h <= 1; h += 0.01)
|
|
1961
1957
|
if (St(a, h) > 0.01) {
|
|
1962
1958
|
o = h;
|
|
@@ -1973,23 +1969,23 @@ function Ut(s, t) {
|
|
|
1973
1969
|
verticalReduction: t.verticalReduction,
|
|
1974
1970
|
dofStart: o,
|
|
1975
1971
|
dofStrength: l,
|
|
1976
|
-
blurRadius:
|
|
1977
|
-
glowColor:
|
|
1978
|
-
glowRadius:
|
|
1979
|
-
glowSoftness:
|
|
1980
|
-
tiltEnabled:
|
|
1981
|
-
tiltHalfTanFov: Math.tan((
|
|
1982
|
-
tiltTransitionWidth: (
|
|
1983
|
-
tiltPeakIntensity:
|
|
1972
|
+
blurRadius: i?.params?.maxRadius ?? 0.01,
|
|
1973
|
+
glowColor: n?.params?.color ?? [1, 0.95, 0.85],
|
|
1974
|
+
glowRadius: n?.params?.radius ?? 0.02,
|
|
1975
|
+
glowSoftness: n?.params?.softness ?? 0.6,
|
|
1976
|
+
tiltEnabled: i?.params?.tiltEnabled ?? !1,
|
|
1977
|
+
tiltHalfTanFov: Math.tan((i?.params?.tiltFov ?? 50) * Math.PI / 360),
|
|
1978
|
+
tiltTransitionWidth: (i?.params?.focalWidth ?? 0.3) * 4.5,
|
|
1979
|
+
tiltPeakIntensity: i?.params?.peakIntensity ?? 0.8
|
|
1984
1980
|
};
|
|
1985
1981
|
}
|
|
1986
1982
|
function Lt(s) {
|
|
1987
|
-
const t = q(s, "displacement"), e = q(s, "blur"),
|
|
1983
|
+
const t = q(s, "displacement"), e = q(s, "blur"), i = q(s, "glow"), n = q(s, "color-shift"), r = n?.params;
|
|
1988
1984
|
return {
|
|
1989
1985
|
displacementLUT: t ? lt(t.curve) : null,
|
|
1990
1986
|
blurLUT: e ? lt(e.curve) : null,
|
|
1991
|
-
glowLUT:
|
|
1992
|
-
colorShiftLUT:
|
|
1987
|
+
glowLUT: i ? lt(i.curve) : null,
|
|
1988
|
+
colorShiftLUT: n ? lt(n.curve) : null,
|
|
1993
1989
|
colorShiftParams: r ? {
|
|
1994
1990
|
hueShift: r.hueShift ?? 0,
|
|
1995
1991
|
saturation: r.saturation ?? 1,
|
|
@@ -2014,8 +2010,8 @@ class Wt {
|
|
|
2014
2010
|
onDisconnected() {
|
|
2015
2011
|
this.cancelInit(), this.element.doDispose(), this.initialized = !1;
|
|
2016
2012
|
}
|
|
2017
|
-
onAttributeChanged(t, e,
|
|
2018
|
-
this.element.reinitAttributes.includes(t) && e !==
|
|
2013
|
+
onAttributeChanged(t, e, i) {
|
|
2014
|
+
this.element.reinitAttributes.includes(t) && e !== i && (this.initialized ? (this.cancelInit(), this.element.doDispose(), this.initialized = !1, this.element.setupShadowDOM(), this.tryInit()) : this.initializing || this.tryInit());
|
|
2019
2015
|
}
|
|
2020
2016
|
get isInitialized() {
|
|
2021
2017
|
return this.initialized;
|
|
@@ -2031,8 +2027,8 @@ class Wt {
|
|
|
2031
2027
|
if (t.canInit) {
|
|
2032
2028
|
if (!t.canInit()) return;
|
|
2033
2029
|
} else
|
|
2034
|
-
for (const
|
|
2035
|
-
if (!t.getAttribute(
|
|
2030
|
+
for (const i of t.reinitAttributes)
|
|
2031
|
+
if (!t.getAttribute(i)) return;
|
|
2036
2032
|
this.cancelInit();
|
|
2037
2033
|
const e = new AbortController();
|
|
2038
2034
|
this.abortController = e, this.initializing = !0;
|
|
@@ -2063,8 +2059,10 @@ class xt extends HTMLElement {
|
|
|
2063
2059
|
static get observedAttributes() {
|
|
2064
2060
|
return [
|
|
2065
2061
|
"src",
|
|
2066
|
-
"
|
|
2067
|
-
"
|
|
2062
|
+
"map-src",
|
|
2063
|
+
"map-width",
|
|
2064
|
+
"map-height",
|
|
2065
|
+
"map-fps",
|
|
2068
2066
|
"depth-model",
|
|
2069
2067
|
"source-type",
|
|
2070
2068
|
"config",
|
|
@@ -2080,11 +2078,11 @@ class xt extends HTMLElement {
|
|
|
2080
2078
|
"muted"
|
|
2081
2079
|
];
|
|
2082
2080
|
}
|
|
2083
|
-
reinitAttributes = ["src", "
|
|
2081
|
+
reinitAttributes = ["src", "map-src", "map-width", "map-height", "map-fps", "depth-model", "source-type", "config"];
|
|
2084
2082
|
canInit() {
|
|
2085
2083
|
if (this.sourceType === "camera") return !0;
|
|
2086
|
-
const t = !!this.getAttribute("src"), e = !!this.getAttribute("
|
|
2087
|
-
return t && (e ||
|
|
2084
|
+
const t = !!this.getAttribute("src"), e = !!this.getAttribute("map-src"), i = !!this.getAttribute("depth-model");
|
|
2085
|
+
return t && (e || i);
|
|
2088
2086
|
}
|
|
2089
2087
|
shadow;
|
|
2090
2088
|
container = null;
|
|
@@ -2112,15 +2110,15 @@ class xt extends HTMLElement {
|
|
|
2112
2110
|
}
|
|
2113
2111
|
// --- Attribute helpers ---
|
|
2114
2112
|
getAttrFloat(t, e) {
|
|
2115
|
-
const
|
|
2116
|
-
if (
|
|
2117
|
-
const
|
|
2118
|
-
return Number.isFinite(
|
|
2113
|
+
const i = this.getAttribute(t);
|
|
2114
|
+
if (i === null) return e;
|
|
2115
|
+
const n = parseFloat(i);
|
|
2116
|
+
return Number.isFinite(n) ? n : e;
|
|
2119
2117
|
}
|
|
2120
2118
|
getAttrBool(t, e) {
|
|
2121
2119
|
if (!this.hasAttribute(t)) return e;
|
|
2122
|
-
const
|
|
2123
|
-
return !(
|
|
2120
|
+
const i = this.getAttribute(t);
|
|
2121
|
+
return !(i === "false" || i === "0");
|
|
2124
2122
|
}
|
|
2125
2123
|
get parallaxX() {
|
|
2126
2124
|
return this.getAttrFloat("parallax-x", z.parallaxX);
|
|
@@ -2199,8 +2197,8 @@ class xt extends HTMLElement {
|
|
|
2199
2197
|
disconnectedCallback() {
|
|
2200
2198
|
this.lifecycle.onDisconnected();
|
|
2201
2199
|
}
|
|
2202
|
-
attributeChangedCallback(t, e,
|
|
2203
|
-
this.lifecycle.onAttributeChanged(t, e,
|
|
2200
|
+
attributeChangedCallback(t, e, i) {
|
|
2201
|
+
this.lifecycle.onAttributeChanged(t, e, i);
|
|
2204
2202
|
}
|
|
2205
2203
|
// --- Shadow DOM setup ---
|
|
2206
2204
|
setupShadowDOM() {
|
|
@@ -2237,27 +2235,27 @@ class xt extends HTMLElement {
|
|
|
2237
2235
|
const e = this.getAttribute("config");
|
|
2238
2236
|
if (!e) return null;
|
|
2239
2237
|
try {
|
|
2240
|
-
const
|
|
2241
|
-
if (!
|
|
2242
|
-
return console.warn(`<layershift-effect>: Failed to fetch config from "${e}" (${
|
|
2243
|
-
const
|
|
2238
|
+
const i = await fetch(e, { signal: t });
|
|
2239
|
+
if (!i.ok)
|
|
2240
|
+
return console.warn(`<layershift-effect>: Failed to fetch config from "${e}" (${i.status})`), null;
|
|
2241
|
+
const n = await i.json();
|
|
2244
2242
|
return {
|
|
2245
|
-
channels:
|
|
2246
|
-
motion:
|
|
2247
|
-
overscanPadding:
|
|
2248
|
-
quality:
|
|
2243
|
+
channels: n.channels ?? [],
|
|
2244
|
+
motion: n.motion ?? Ct,
|
|
2245
|
+
overscanPadding: n.overscanPadding ?? 0.05,
|
|
2246
|
+
quality: n.quality ?? "auto"
|
|
2249
2247
|
};
|
|
2250
|
-
} catch (
|
|
2251
|
-
return
|
|
2248
|
+
} catch (i) {
|
|
2249
|
+
return i.name === "AbortError" || console.warn("<layershift-effect>: Failed to parse config.", i), null;
|
|
2252
2250
|
}
|
|
2253
2251
|
}
|
|
2254
2252
|
/**
|
|
2255
2253
|
* Build renderer config from HTML attributes (legacy parallax-only path).
|
|
2256
2254
|
*/
|
|
2257
2255
|
buildLegacyConfig(t, e) {
|
|
2258
|
-
const
|
|
2256
|
+
const i = this.container?.clientWidth || e, n = this.hasAttribute("parallax-max") ? this.parallaxMax / Math.max(i, 1) : t.parallaxStrength, r = this.hasAttribute("overscan") ? this.overscan : t.overscanPadding;
|
|
2259
2257
|
return {
|
|
2260
|
-
parallaxStrength:
|
|
2258
|
+
parallaxStrength: n,
|
|
2261
2259
|
pomEnabled: !0,
|
|
2262
2260
|
pomSteps: t.pomSteps,
|
|
2263
2261
|
overscanPadding: r,
|
|
@@ -2272,78 +2270,86 @@ class xt extends HTMLElement {
|
|
|
2272
2270
|
// --- Initialization ---
|
|
2273
2271
|
async doInit(t) {
|
|
2274
2272
|
if (!this.container) return;
|
|
2275
|
-
const e = this.sourceType === "camera",
|
|
2273
|
+
const e = this.sourceType === "camera", i = this.depthModel;
|
|
2276
2274
|
try {
|
|
2277
|
-
let
|
|
2275
|
+
let n, r, o = null;
|
|
2278
2276
|
const l = (m) => {
|
|
2279
2277
|
this.emit("layershift-effect:model-progress", m);
|
|
2280
2278
|
};
|
|
2281
2279
|
if (e) {
|
|
2282
|
-
if (
|
|
2280
|
+
if (n = await Nt(
|
|
2283
2281
|
{ video: { facingMode: "user" } },
|
|
2284
2282
|
{ parent: this.shadow }
|
|
2285
2283
|
), t.aborted) {
|
|
2286
|
-
|
|
2284
|
+
n.dispose();
|
|
2287
2285
|
return;
|
|
2288
2286
|
}
|
|
2289
|
-
if (
|
|
2290
|
-
if (o = await dt(
|
|
2291
|
-
o.dispose(),
|
|
2287
|
+
if (i) {
|
|
2288
|
+
if (o = await dt(i, $, K, l), t.aborted) {
|
|
2289
|
+
o.dispose(), n.dispose();
|
|
2292
2290
|
return;
|
|
2293
2291
|
}
|
|
2294
|
-
r =
|
|
2292
|
+
r = X($, K);
|
|
2295
2293
|
} else
|
|
2296
|
-
r =
|
|
2294
|
+
r = X(n.width, n.height);
|
|
2297
2295
|
} else {
|
|
2298
|
-
const m = this.getAttribute("src"), T = this.getAttribute("
|
|
2299
|
-
if (
|
|
2300
|
-
const [
|
|
2301
|
-
|
|
2296
|
+
const m = this.getAttribute("src"), T = this.getAttribute("map-src"), w = !!T, A = this.sourceType === "image" || /\.(jpe?g|png|webp|gif|avif|bmp)(\?|$)/i.test(m);
|
|
2297
|
+
if (w) {
|
|
2298
|
+
const [P, F] = await Promise.all([
|
|
2299
|
+
A ? ft(m) : ht(m, {
|
|
2302
2300
|
parent: this.shadow,
|
|
2303
2301
|
loop: this.shouldLoop,
|
|
2304
2302
|
muted: this.shouldMute
|
|
2305
2303
|
}),
|
|
2306
|
-
kt(
|
|
2304
|
+
kt(
|
|
2305
|
+
T,
|
|
2306
|
+
this.getAttrFloat("map-width", 512),
|
|
2307
|
+
this.getAttrFloat("map-height", 512),
|
|
2308
|
+
this.getAttrFloat("map-fps", 5)
|
|
2309
|
+
)
|
|
2307
2310
|
]);
|
|
2308
2311
|
if (t.aborted) {
|
|
2309
|
-
|
|
2312
|
+
P.dispose();
|
|
2310
2313
|
return;
|
|
2311
2314
|
}
|
|
2312
|
-
|
|
2313
|
-
} else if (
|
|
2314
|
-
const [
|
|
2315
|
-
|
|
2315
|
+
n = P, r = F;
|
|
2316
|
+
} else if (i) {
|
|
2317
|
+
const [P, F] = await Promise.all([
|
|
2318
|
+
A ? ft(m) : ht(m, {
|
|
2316
2319
|
parent: this.shadow,
|
|
2317
2320
|
loop: this.shouldLoop,
|
|
2318
2321
|
muted: this.shouldMute
|
|
2319
2322
|
}),
|
|
2320
|
-
dt(
|
|
2323
|
+
dt(i, $, K, l)
|
|
2321
2324
|
]);
|
|
2322
2325
|
if (t.aborted) {
|
|
2323
|
-
|
|
2326
|
+
P.dispose(), F.dispose();
|
|
2324
2327
|
return;
|
|
2325
2328
|
}
|
|
2326
|
-
if (
|
|
2327
|
-
const
|
|
2328
|
-
if (
|
|
2329
|
-
const
|
|
2329
|
+
if (n = P, o = F, A || !n.isLive) {
|
|
2330
|
+
const _ = n.getImageSource();
|
|
2331
|
+
if (_) {
|
|
2332
|
+
const I = await o.submitFrameAndWait(_);
|
|
2330
2333
|
r = {
|
|
2331
|
-
|
|
2332
|
-
|
|
2334
|
+
width: $,
|
|
2335
|
+
height: K,
|
|
2336
|
+
fps: 1,
|
|
2337
|
+
frameCount: 1,
|
|
2338
|
+
frames: [I]
|
|
2333
2339
|
};
|
|
2334
2340
|
} else
|
|
2335
|
-
r =
|
|
2341
|
+
r = X($, K);
|
|
2336
2342
|
} else
|
|
2337
|
-
r =
|
|
2343
|
+
r = X($, K);
|
|
2338
2344
|
} else
|
|
2339
|
-
throw new Error("Either
|
|
2345
|
+
throw new Error("Either map-src or depth-model must be provided.");
|
|
2340
2346
|
}
|
|
2341
|
-
this.source =
|
|
2342
|
-
const a =
|
|
2347
|
+
this.source = n, this.depthEstimator = o, this.loopCount = 0, this.attachSourceEventListeners(n);
|
|
2348
|
+
const a = re(
|
|
2343
2349
|
r.frames,
|
|
2344
|
-
r.
|
|
2345
|
-
r.
|
|
2346
|
-
), h =
|
|
2350
|
+
r.width,
|
|
2351
|
+
r.height
|
|
2352
|
+
), h = se(a);
|
|
2347
2353
|
this.depthFallback = {
|
|
2348
2354
|
contrastLow: h.contrastLow,
|
|
2349
2355
|
contrastHigh: h.contrastHigh,
|
|
@@ -2387,22 +2393,22 @@ class xt extends HTMLElement {
|
|
|
2387
2393
|
tiltPeakIntensity: m.tiltPeakIntensity
|
|
2388
2394
|
}, u = Lt(p.channels), x = p.motion;
|
|
2389
2395
|
} else
|
|
2390
|
-
f = this.buildLegacyConfig(h,
|
|
2391
|
-
this.renderer = new
|
|
2396
|
+
f = this.buildLegacyConfig(h, n.width);
|
|
2397
|
+
this.renderer = new ye(this.container, f), this.renderer.initialize(n, r.width, r.height), u && this.renderer.updateCurveLUTs(
|
|
2392
2398
|
u.displacementLUT,
|
|
2393
2399
|
u.blurLUT,
|
|
2394
2400
|
u.glowLUT,
|
|
2395
2401
|
u.colorShiftLUT,
|
|
2396
2402
|
u.colorShiftParams ?? void 0
|
|
2397
2403
|
);
|
|
2398
|
-
const d = x.tiltPlaneInput ?? !1, y = x.tiltPitchSensitivity ?? 0.35,
|
|
2404
|
+
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;
|
|
2399
2405
|
if (this.renderer.start(
|
|
2400
|
-
|
|
2406
|
+
n,
|
|
2401
2407
|
c,
|
|
2402
2408
|
() => {
|
|
2403
2409
|
const m = this._input;
|
|
2404
2410
|
if (d) {
|
|
2405
|
-
const A = m.y * y, P = m.x *
|
|
2411
|
+
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);
|
|
2406
2412
|
return {
|
|
2407
2413
|
x: m.x * 0.3,
|
|
2408
2414
|
y: m.y * 0.3,
|
|
@@ -2414,7 +2420,7 @@ class xt extends HTMLElement {
|
|
|
2414
2420
|
},
|
|
2415
2421
|
(m, T) => {
|
|
2416
2422
|
if (v) {
|
|
2417
|
-
const w =
|
|
2423
|
+
const w = n.getImageSource();
|
|
2418
2424
|
w && v.submitFrame(w);
|
|
2419
2425
|
}
|
|
2420
2426
|
this.emit("layershift-effect:frame", {
|
|
@@ -2422,23 +2428,53 @@ class xt extends HTMLElement {
|
|
|
2422
2428
|
frameNumber: T
|
|
2423
2429
|
});
|
|
2424
2430
|
}
|
|
2425
|
-
), !e &&
|
|
2431
|
+
), !e && n.isLive && this.shouldAutoplay && n.play)
|
|
2426
2432
|
try {
|
|
2427
|
-
await
|
|
2433
|
+
await n.play();
|
|
2428
2434
|
} catch {
|
|
2429
2435
|
}
|
|
2430
2436
|
if (t.aborted) return;
|
|
2431
2437
|
this.lifecycle.markInitialized(), this.emit("layershift-effect:ready", {
|
|
2432
|
-
videoWidth:
|
|
2433
|
-
videoHeight:
|
|
2434
|
-
duration:
|
|
2438
|
+
videoWidth: n.width,
|
|
2439
|
+
videoHeight: n.height,
|
|
2440
|
+
duration: n.duration,
|
|
2435
2441
|
depthProfile: a,
|
|
2436
2442
|
derivedParams: h,
|
|
2437
2443
|
motionConfig: x
|
|
2438
2444
|
});
|
|
2439
|
-
} catch (
|
|
2440
|
-
const r =
|
|
2441
|
-
console.error("<layershift-effect>: Failed to initialize.",
|
|
2445
|
+
} catch (n) {
|
|
2446
|
+
const r = n instanceof Error ? n.message : "Failed to initialize.";
|
|
2447
|
+
console.error("<layershift-effect>: Failed to initialize.", n), this.emit("layershift-effect:error", { message: r });
|
|
2448
|
+
}
|
|
2449
|
+
}
|
|
2450
|
+
// --- Playback control ---
|
|
2451
|
+
/** Whether the effect is currently paused. */
|
|
2452
|
+
get paused() {
|
|
2453
|
+
return this.renderer ? this.renderer.isPaused : this.source?.paused ?? !0;
|
|
2454
|
+
}
|
|
2455
|
+
/**
|
|
2456
|
+
* Pause the effect: stops the renderer animation loop and pauses the
|
|
2457
|
+
* underlying media source. Dispatches a `layershift-effect:pause` event.
|
|
2458
|
+
*/
|
|
2459
|
+
pause() {
|
|
2460
|
+
!this.renderer || this.paused || (this.renderer.pause(), this.source?.pause?.(), this.emit("layershift-effect:pause", {
|
|
2461
|
+
currentTime: this.source?.currentTime ?? 0
|
|
2462
|
+
}));
|
|
2463
|
+
}
|
|
2464
|
+
/**
|
|
2465
|
+
* Resume the effect: restarts the renderer animation loop and plays the
|
|
2466
|
+
* underlying media source. Dispatches a `layershift-effect:play` event.
|
|
2467
|
+
*/
|
|
2468
|
+
async play() {
|
|
2469
|
+
if (!(!this.renderer || !this.paused)) {
|
|
2470
|
+
if (this.renderer.resume(), this.source?.play)
|
|
2471
|
+
try {
|
|
2472
|
+
await this.source.play();
|
|
2473
|
+
} catch {
|
|
2474
|
+
}
|
|
2475
|
+
this.emit("layershift-effect:play", {
|
|
2476
|
+
currentTime: this.source?.currentTime ?? 0
|
|
2477
|
+
});
|
|
2442
2478
|
}
|
|
2443
2479
|
}
|
|
2444
2480
|
// --- Live config updates ---
|
|
@@ -2457,15 +2493,15 @@ class xt extends HTMLElement {
|
|
|
2457
2493
|
contrastLow: 0.05,
|
|
2458
2494
|
contrastHigh: 0.95,
|
|
2459
2495
|
verticalReduction: 0.5
|
|
2460
|
-
},
|
|
2461
|
-
this.renderer.updateConfig(
|
|
2462
|
-
const
|
|
2496
|
+
}, i = Ut(t, e);
|
|
2497
|
+
this.renderer.updateConfig(i);
|
|
2498
|
+
const n = Lt(t);
|
|
2463
2499
|
this.renderer.updateCurveLUTs(
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2500
|
+
n.displacementLUT,
|
|
2501
|
+
n.blurLUT,
|
|
2502
|
+
n.glowLUT,
|
|
2503
|
+
n.colorShiftLUT,
|
|
2504
|
+
n.colorShiftParams ?? void 0
|
|
2469
2505
|
);
|
|
2470
2506
|
}
|
|
2471
2507
|
// --- Cleanup ---
|
|
@@ -2518,18 +2554,18 @@ class Rt {
|
|
|
2518
2554
|
* Create (or recreate) all JFA FBO/texture resources at the given canvas
|
|
2519
2555
|
* dimensions, divided by the quality tier's JFA divisor.
|
|
2520
2556
|
*/
|
|
2521
|
-
createResources(t, e,
|
|
2522
|
-
const
|
|
2557
|
+
createResources(t, e, i) {
|
|
2558
|
+
const n = this.gl;
|
|
2523
2559
|
this.dispose();
|
|
2524
|
-
const r = Math.max(1, Math.round(t /
|
|
2560
|
+
const r = Math.max(1, Math.round(t / i)), o = Math.max(1, Math.round(e / i));
|
|
2525
2561
|
this._width = r, this._height = o;
|
|
2526
2562
|
const l = (h, c, f, u) => {
|
|
2527
|
-
const x =
|
|
2528
|
-
return
|
|
2563
|
+
const x = n.createFramebuffer();
|
|
2564
|
+
return n.bindFramebuffer(n.FRAMEBUFFER, x), n.bindTexture(n.TEXTURE_2D, h), n.texStorage2D(n.TEXTURE_2D, 1, c, f, u), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.framebufferTexture2D(n.FRAMEBUFFER, n.COLOR_ATTACHMENT0, n.TEXTURE_2D, h, 0), n.bindFramebuffer(n.FRAMEBUFFER, null), x;
|
|
2529
2565
|
};
|
|
2530
|
-
this.maskTex =
|
|
2531
|
-
const a = this.hasColorBufferFloat ?
|
|
2532
|
-
this.pingTex =
|
|
2566
|
+
this.maskTex = n.createTexture(), this.maskFbo = l(this.maskTex, n.R8, r, o);
|
|
2567
|
+
const a = this.hasColorBufferFloat ? n.RG16F : n.RGBA8;
|
|
2568
|
+
this.pingTex = n.createTexture(), this.pingFbo = l(this.pingTex, a, r, o), this.pongTex = n.createTexture(), this.pongFbo = l(this.pongTex, a, r, o), this.distTex = n.createTexture(), this.distFbo = l(this.distTex, n.RGBA8, r, o), this._dirty = !0;
|
|
2533
2569
|
}
|
|
2534
2570
|
// -----------------------------------------------------------------------
|
|
2535
2571
|
// Distance field computation
|
|
@@ -2545,14 +2581,14 @@ class Rt {
|
|
|
2545
2581
|
compute(t) {
|
|
2546
2582
|
const e = this.gl;
|
|
2547
2583
|
if (!this.maskFbo || !this.pingFbo || !this.pongFbo || !this.distFbo) return;
|
|
2548
|
-
const
|
|
2549
|
-
if (
|
|
2550
|
-
e.viewport(0, 0,
|
|
2551
|
-
const r = Rt.computeFloodIterations(
|
|
2584
|
+
const i = this._width, n = this._height;
|
|
2585
|
+
if (i === 0 || n === 0) return;
|
|
2586
|
+
e.viewport(0, 0, i, n), 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 / i, 1 / n), e.bindVertexArray(t.quadVao), e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
|
|
2587
|
+
const r = Rt.computeFloodIterations(i, n);
|
|
2552
2588
|
e.useProgram(t.floodPass.program);
|
|
2553
2589
|
let o = this.pingTex, l = this.pongFbo, a = this.pongTex;
|
|
2554
2590
|
for (let h = 0; h < r.length; h++) {
|
|
2555
|
-
const c = r[h] / Math.max(
|
|
2591
|
+
const c = r[h] / Math.max(i, n);
|
|
2556
2592
|
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);
|
|
2557
2593
|
const f = o, u = l;
|
|
2558
2594
|
o = a, l = u === this.pongFbo ? this.pingFbo : this.pongFbo, a = f;
|
|
@@ -2567,11 +2603,11 @@ class Rt {
|
|
|
2567
2603
|
* Steps halve from ceil(maxDim/2) down to 1.
|
|
2568
2604
|
*/
|
|
2569
2605
|
static computeFloodIterations(t, e) {
|
|
2570
|
-
const
|
|
2571
|
-
let r = Math.ceil(
|
|
2606
|
+
const i = Math.max(t, e), n = [];
|
|
2607
|
+
let r = Math.ceil(i / 2);
|
|
2572
2608
|
for (; r >= 1; )
|
|
2573
|
-
|
|
2574
|
-
return
|
|
2609
|
+
n.push(r), r = Math.floor(r / 2);
|
|
2610
|
+
return n;
|
|
2575
2611
|
}
|
|
2576
2612
|
// -----------------------------------------------------------------------
|
|
2577
2613
|
// Cleanup
|
|
@@ -2581,34 +2617,34 @@ class Rt {
|
|
|
2581
2617
|
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;
|
|
2582
2618
|
}
|
|
2583
2619
|
}
|
|
2584
|
-
const
|
|
2620
|
+
const Ce = `#version 300 es
|
|
2585
2621
|
in vec2 aPosition;
|
|
2586
2622
|
uniform vec2 uMeshScale;
|
|
2587
2623
|
void main() {
|
|
2588
2624
|
gl_Position = vec4(aPosition * uMeshScale, 0.0, 1.0);
|
|
2589
2625
|
}
|
|
2590
|
-
`,
|
|
2626
|
+
`, Ue = `#version 300 es
|
|
2591
2627
|
precision lowp float;
|
|
2592
2628
|
out vec4 fragColor;
|
|
2593
2629
|
void main() { fragColor = vec4(0.0); }
|
|
2594
|
-
`,
|
|
2630
|
+
`, Le = `#version 300 es
|
|
2595
2631
|
in vec2 aPosition;
|
|
2596
2632
|
uniform vec2 uMeshScale;
|
|
2597
2633
|
void main() {
|
|
2598
2634
|
gl_Position = vec4(aPosition * uMeshScale, 0.0, 1.0);
|
|
2599
2635
|
}
|
|
2600
|
-
`,
|
|
2636
|
+
`, _e = `#version 300 es
|
|
2601
2637
|
precision lowp float;
|
|
2602
2638
|
out vec4 fragColor;
|
|
2603
2639
|
void main() { fragColor = vec4(1.0); }
|
|
2604
|
-
`,
|
|
2640
|
+
`, Ie = `#version 300 es
|
|
2605
2641
|
in vec2 aPosition;
|
|
2606
2642
|
out vec2 vUv;
|
|
2607
2643
|
void main() {
|
|
2608
2644
|
vUv = aPosition * 0.5 + 0.5;
|
|
2609
2645
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2610
2646
|
}
|
|
2611
|
-
`,
|
|
2647
|
+
`, Me = `#version 300 es
|
|
2612
2648
|
precision highp float;
|
|
2613
2649
|
uniform sampler2D uMask;
|
|
2614
2650
|
uniform vec2 uTexelSize;
|
|
@@ -2633,14 +2669,14 @@ void main() {
|
|
|
2633
2669
|
fragSeed = vec2(-1.0);
|
|
2634
2670
|
}
|
|
2635
2671
|
}
|
|
2636
|
-
`,
|
|
2672
|
+
`, Be = `#version 300 es
|
|
2637
2673
|
in vec2 aPosition;
|
|
2638
2674
|
out vec2 vUv;
|
|
2639
2675
|
void main() {
|
|
2640
2676
|
vUv = aPosition * 0.5 + 0.5;
|
|
2641
2677
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2642
2678
|
}
|
|
2643
|
-
`,
|
|
2679
|
+
`, Ve = `#version 300 es
|
|
2644
2680
|
precision highp float;
|
|
2645
2681
|
uniform sampler2D uSeedTex;
|
|
2646
2682
|
uniform float uStepSize;
|
|
@@ -2669,14 +2705,14 @@ void main() {
|
|
|
2669
2705
|
|
|
2670
2706
|
fragSeed = bestSeed;
|
|
2671
2707
|
}
|
|
2672
|
-
`,
|
|
2708
|
+
`, ke = `#version 300 es
|
|
2673
2709
|
in vec2 aPosition;
|
|
2674
2710
|
out vec2 vUv;
|
|
2675
2711
|
void main() {
|
|
2676
2712
|
vUv = aPosition * 0.5 + 0.5;
|
|
2677
2713
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2678
2714
|
}
|
|
2679
|
-
`,
|
|
2715
|
+
`, Oe = `#version 300 es
|
|
2680
2716
|
precision highp float;
|
|
2681
2717
|
uniform sampler2D uSeedTex;
|
|
2682
2718
|
uniform sampler2D uMask;
|
|
@@ -2701,7 +2737,7 @@ void main() {
|
|
|
2701
2737
|
float normalized = clamp(d / max(uBevelWidth, 0.001), 0.0, 1.0);
|
|
2702
2738
|
fragDist = vec4(normalized, 0.0, 0.0, 1.0);
|
|
2703
2739
|
}
|
|
2704
|
-
`,
|
|
2740
|
+
`, He = `#version 300 es
|
|
2705
2741
|
in vec2 aPosition;
|
|
2706
2742
|
uniform vec2 uUvOffset;
|
|
2707
2743
|
uniform vec2 uUvScale;
|
|
@@ -2713,7 +2749,7 @@ void main() {
|
|
|
2713
2749
|
vScreenUv = baseUv;
|
|
2714
2750
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2715
2751
|
}
|
|
2716
|
-
`,
|
|
2752
|
+
`, Xe = `#version 300 es
|
|
2717
2753
|
precision highp float;
|
|
2718
2754
|
|
|
2719
2755
|
#define MAX_POM_STEPS 32
|
|
@@ -2844,14 +2880,14 @@ void main() {
|
|
|
2844
2880
|
// Write lens-transformed depth to second attachment for boundary effects
|
|
2845
2881
|
fragDepth = vec4(lensD, 0.0, 0.0, 1.0);
|
|
2846
2882
|
}
|
|
2847
|
-
`,
|
|
2883
|
+
`, Ne = `#version 300 es
|
|
2848
2884
|
in vec2 aPosition;
|
|
2849
2885
|
out vec2 vUv;
|
|
2850
2886
|
void main() {
|
|
2851
2887
|
vUv = aPosition * 0.5 + 0.5;
|
|
2852
2888
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
2853
2889
|
}
|
|
2854
|
-
`,
|
|
2890
|
+
`, Ge = `#version 300 es
|
|
2855
2891
|
precision highp float;
|
|
2856
2892
|
uniform sampler2D uInteriorColor;
|
|
2857
2893
|
uniform sampler2D uDistField;
|
|
@@ -2881,7 +2917,7 @@ void main() {
|
|
|
2881
2917
|
|
|
2882
2918
|
fragColor = vec4(toSRGB(linear), color.a);
|
|
2883
2919
|
}
|
|
2884
|
-
`,
|
|
2920
|
+
`, We = `#version 300 es
|
|
2885
2921
|
in vec2 aPosition;
|
|
2886
2922
|
in vec2 aNormal;
|
|
2887
2923
|
uniform float uRimWidth;
|
|
@@ -2904,7 +2940,7 @@ void main() {
|
|
|
2904
2940
|
|
|
2905
2941
|
gl_Position = vec4(pos, 0.0, 1.0);
|
|
2906
2942
|
}
|
|
2907
|
-
`,
|
|
2943
|
+
`, ze = `#version 300 es
|
|
2908
2944
|
precision highp float;
|
|
2909
2945
|
|
|
2910
2946
|
uniform sampler2D uInteriorColor;
|
|
@@ -3006,7 +3042,7 @@ void main() {
|
|
|
3006
3042
|
|
|
3007
3043
|
fragColor = vec4(color * alpha, alpha);
|
|
3008
3044
|
}
|
|
3009
|
-
`,
|
|
3045
|
+
`, qe = `#version 300 es
|
|
3010
3046
|
in vec2 aPosition;
|
|
3011
3047
|
in vec3 aNormal3;
|
|
3012
3048
|
in float aLerpT; // 0 = inner (at silhouette), 1 = outer edge
|
|
@@ -3022,7 +3058,7 @@ void main() {
|
|
|
3022
3058
|
vLerpT = aLerpT;
|
|
3023
3059
|
gl_Position = vec4(sp, 0.0, 1.0);
|
|
3024
3060
|
}
|
|
3025
|
-
`,
|
|
3061
|
+
`, Ye = `#version 300 es
|
|
3026
3062
|
precision highp float;
|
|
3027
3063
|
uniform vec3 uLightDir3;
|
|
3028
3064
|
uniform vec3 uChamferColor;
|
|
@@ -3090,19 +3126,19 @@ void main() {
|
|
|
3090
3126
|
fragColor = vec4(toSRGB(lit), 1.0);
|
|
3091
3127
|
}
|
|
3092
3128
|
`;
|
|
3093
|
-
function
|
|
3129
|
+
function je(s) {
|
|
3094
3130
|
const t = [];
|
|
3095
3131
|
let e = 0;
|
|
3096
|
-
for (let
|
|
3097
|
-
const
|
|
3132
|
+
for (let i = 0; i < s.length - 2; i += 2) {
|
|
3133
|
+
const n = s[i], r = s[i + 1], o = s[i + 2], l = s[i + 3], a = o - n, h = l - r, c = Math.sqrt(a * a + h * h);
|
|
3098
3134
|
if (c < 1e-6) continue;
|
|
3099
3135
|
const f = -h / c, u = a / c;
|
|
3100
3136
|
t.push(
|
|
3101
|
-
|
|
3137
|
+
n,
|
|
3102
3138
|
r,
|
|
3103
3139
|
f,
|
|
3104
3140
|
u,
|
|
3105
|
-
|
|
3141
|
+
n,
|
|
3106
3142
|
r,
|
|
3107
3143
|
-f,
|
|
3108
3144
|
-u,
|
|
@@ -3114,7 +3150,7 @@ function $e(s) {
|
|
|
3114
3150
|
l,
|
|
3115
3151
|
f,
|
|
3116
3152
|
u,
|
|
3117
|
-
|
|
3153
|
+
n,
|
|
3118
3154
|
r,
|
|
3119
3155
|
-f,
|
|
3120
3156
|
-u,
|
|
@@ -3129,10 +3165,10 @@ function $e(s) {
|
|
|
3129
3165
|
count: e
|
|
3130
3166
|
};
|
|
3131
3167
|
}
|
|
3132
|
-
function
|
|
3133
|
-
if (
|
|
3168
|
+
function Ze(s, t, e, i, n) {
|
|
3169
|
+
if (i <= 0)
|
|
3134
3170
|
return { vertices: new Float32Array(0), count: 0 };
|
|
3135
|
-
const r =
|
|
3171
|
+
const r = n * Math.PI / 180, o = -Math.cos(r), l = Math.sin(r), a = [];
|
|
3136
3172
|
let h = 0;
|
|
3137
3173
|
for (let c = 0; c < t.length; c++) {
|
|
3138
3174
|
const f = t[c], p = ((c + 1 < t.length ? t[c + 1] : s.length) - f) / 2;
|
|
@@ -3143,20 +3179,20 @@ function Ke(s, t, e, n, i) {
|
|
|
3143
3179
|
const w = f + T * 2, A = s[w], P = s[w + 1], F = s[w + 2], _ = s[w + 3];
|
|
3144
3180
|
y += A * _ - F * P;
|
|
3145
3181
|
}
|
|
3146
|
-
const
|
|
3182
|
+
const b = y >= 0 ? 1 : -1, E = [], g = [];
|
|
3147
3183
|
for (let T = 0; T < d; T++) {
|
|
3148
3184
|
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);
|
|
3149
|
-
F < 1e-8 ? (
|
|
3185
|
+
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));
|
|
3150
3186
|
}
|
|
3151
3187
|
const v = [], m = [];
|
|
3152
3188
|
for (let T = 0; T < d; T++) {
|
|
3153
3189
|
const w = (T - 1 + d) % d;
|
|
3154
|
-
let A =
|
|
3190
|
+
let A = E[w] + E[T], P = g[w] + g[T];
|
|
3155
3191
|
const F = Math.sqrt(A * A + P * P);
|
|
3156
|
-
F > 1e-8 ? (A /= F, P /= F) : (A =
|
|
3192
|
+
F > 1e-8 ? (A /= F, P /= F) : (A = E[T], P = g[T]), v.push(A), m.push(P);
|
|
3157
3193
|
}
|
|
3158
3194
|
for (let T = 0; T < d; T++) {
|
|
3159
|
-
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] *
|
|
3195
|
+
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] * i, At = I + m[w] * i, Jt = C + v[A] * i, Qt = S + m[A] * i;
|
|
3160
3196
|
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;
|
|
3161
3197
|
}
|
|
3162
3198
|
}
|
|
@@ -3165,7 +3201,7 @@ function Ke(s, t, e, n, i) {
|
|
|
3165
3201
|
count: h
|
|
3166
3202
|
};
|
|
3167
3203
|
}
|
|
3168
|
-
class
|
|
3204
|
+
class $e extends gt {
|
|
3169
3205
|
gl = null;
|
|
3170
3206
|
// Render passes (each owns its program + cached uniforms)
|
|
3171
3207
|
stencilPass = null;
|
|
@@ -3210,10 +3246,10 @@ class Je extends gt {
|
|
|
3210
3246
|
config;
|
|
3211
3247
|
constructor(t, e) {
|
|
3212
3248
|
super(t), this.config = { ...e }, this.videoSlot = this.textures.register("video"), this.depthSlot = this.textures.register("depth");
|
|
3213
|
-
const
|
|
3214
|
-
this.lightDirX = Math.cos(
|
|
3215
|
-
const
|
|
3216
|
-
r > 1e-6 && (this.lightDir3 = [
|
|
3249
|
+
const i = this.config.bevelLightAngle * Math.PI / 180;
|
|
3250
|
+
this.lightDirX = Math.cos(i), this.lightDirY = Math.sin(i);
|
|
3251
|
+
const n = this.config.lightDirection, r = Math.sqrt(n[0] * n[0] + n[1] * n[1] + n[2] * n[2]);
|
|
3252
|
+
r > 1e-6 && (this.lightDir3 = [n[0] / r, n[1] / r, n[2] / r]);
|
|
3217
3253
|
const o = this.canvas.getContext("webgl2", {
|
|
3218
3254
|
antialias: !0,
|
|
3219
3255
|
alpha: !0,
|
|
@@ -3223,11 +3259,11 @@ class Je extends gt {
|
|
|
3223
3259
|
powerPreference: "high-performance"
|
|
3224
3260
|
});
|
|
3225
3261
|
if (!o) throw new Error("WebGL 2 is not supported.");
|
|
3226
|
-
this.gl = o, this.qualityParams =
|
|
3262
|
+
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();
|
|
3227
3263
|
}
|
|
3228
|
-
initialize(t, e,
|
|
3264
|
+
initialize(t, e, i, n) {
|
|
3229
3265
|
const r = this.gl;
|
|
3230
|
-
r && (this.disposeTextures(), this.disposeFBO(), this.jfa && (this.jfa.dispose(), this.jfa = null), this.disposeStencilGeometry(), this.disposeBoundaryGeometry(), this.disposeChamferGeometry(), this.isCameraSource = t.type === "camera", this.videoAspect = t.width / t.height, this.meshAspect =
|
|
3266
|
+
r && (this.disposeTextures(), this.disposeFBO(), this.jfa && (this.jfa.dispose(), this.jfa = null), this.disposeStencilGeometry(), this.disposeBoundaryGeometry(), this.disposeChamferGeometry(), this.isCameraSource = t.type === "camera", this.videoAspect = t.width / t.height, this.meshAspect = n.aspect, this.clampDepthDimensions(e, i, this.qualityParams.depthMaxDim), this.videoSlot.texture = r.createTexture(), r.activeTexture(r.TEXTURE0 + this.videoSlot.unit), r.bindTexture(r.TEXTURE_2D, this.videoSlot.texture), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MIN_FILTER, r.LINEAR), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MAG_FILTER, r.LINEAR), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_WRAP_S, r.CLAMP_TO_EDGE), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_WRAP_T, r.CLAMP_TO_EDGE), this.depthSlot.texture = r.createTexture(), r.activeTexture(r.TEXTURE0 + this.depthSlot.unit), r.bindTexture(r.TEXTURE_2D, this.depthSlot.texture), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MIN_FILTER, r.LINEAR), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MAG_FILTER, r.LINEAR), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_WRAP_S, r.CLAMP_TO_EDGE), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_WRAP_T, r.CLAMP_TO_EDGE), r.texStorage2D(r.TEXTURE_2D, 1, r.R8, this.depthWidth, this.depthHeight), this.uploadStencilMesh(n), this.uploadMaskMesh(n), this.uploadBoundaryMesh(n), this.uploadChamferMesh(n), this.interiorPass && (r.useProgram(this.interiorPass.program), r.uniform1i(this.interiorPass.uniforms.uImage, 0), r.uniform1i(this.interiorPass.uniforms.uDepth, 1), r.uniform1f(this.interiorPass.uniforms.uStrength, this.config.parallaxStrength), r.uniform1i(this.interiorPass.uniforms.uPomSteps, this.config.pomSteps), r.uniform1f(this.interiorPass.uniforms.uDepthPower, this.config.depthPower), r.uniform1f(this.interiorPass.uniforms.uDepthScale, this.config.depthScale), r.uniform1f(this.interiorPass.uniforms.uDepthBias, this.config.depthBias), r.uniform1f(this.interiorPass.uniforms.uContrastLow, this.config.contrastLow), r.uniform1f(this.interiorPass.uniforms.uContrastHigh, this.config.contrastHigh), r.uniform1f(this.interiorPass.uniforms.uVerticalReduction, this.config.verticalReduction), r.uniform1f(this.interiorPass.uniforms.uDofStart, this.config.dofStart), r.uniform1f(this.interiorPass.uniforms.uDofStrength, this.config.dofStrength), r.uniform2f(this.interiorPass.uniforms.uImageTexelSize, 1 / t.width, 1 / t.height), r.uniform1f(this.interiorPass.uniforms.uFogDensity, this.config.fogDensity), r.uniform3f(this.interiorPass.uniforms.uFogColor, ...this.config.fogColor), r.uniform1f(this.interiorPass.uniforms.uColorShift, this.config.colorShift), r.uniform1f(this.interiorPass.uniforms.uBrightnessBias, this.config.brightnessBias)), this.compositePass && (r.useProgram(this.compositePass.program), r.uniform1i(this.compositePass.uniforms.uInteriorColor, 2), r.uniform1i(this.compositePass.uniforms.uDistField, 4), r.uniform1f(this.compositePass.uniforms.uEdgeOcclusionWidth, this.config.edgeOcclusionWidth), r.uniform1f(this.compositePass.uniforms.uEdgeOcclusionStrength, this.config.edgeOcclusionStrength)), this.chamferPass && (r.useProgram(this.chamferPass.program), r.uniform3f(this.chamferPass.uniforms.uLightDir3, ...this.lightDir3), r.uniform3f(this.chamferPass.uniforms.uChamferColor, ...this.config.chamferColor), r.uniform1f(this.chamferPass.uniforms.uChamferAmbient, this.config.chamferAmbient), r.uniform1f(this.chamferPass.uniforms.uChamferSpecular, this.config.chamferSpecular), r.uniform1f(this.chamferPass.uniforms.uChamferShininess, this.config.chamferShininess), r.uniform1i(this.chamferPass.uniforms.uInteriorColor, 2)), this.boundaryPass && (r.useProgram(this.boundaryPass.program), r.uniform1i(this.boundaryPass.uniforms.uInteriorColor, 2), r.uniform1i(this.boundaryPass.uniforms.uInteriorDepth, 3), r.uniform1i(this.boundaryPass.uniforms.uDistField, 4), r.uniform1f(this.boundaryPass.uniforms.uRimIntensity, this.config.rimLightIntensity), r.uniform3f(this.boundaryPass.uniforms.uRimColor, ...this.config.rimLightColor), r.uniform1f(this.boundaryPass.uniforms.uRefractionStrength, this.config.refractionStrength), r.uniform1f(this.boundaryPass.uniforms.uChromaticStrength, this.config.chromaticStrength), r.uniform1f(this.boundaryPass.uniforms.uOcclusionIntensity, this.config.occlusionIntensity), r.uniform1f(this.boundaryPass.uniforms.uEdgeThickness, this.config.edgeThickness), r.uniform1f(this.boundaryPass.uniforms.uEdgeSpecular, this.config.edgeSpecular), r.uniform3f(this.boundaryPass.uniforms.uEdgeColor, ...this.config.edgeColor), r.uniform2f(this.boundaryPass.uniforms.uLightDir, this.lightDirX, this.lightDirY), r.uniform1f(this.boundaryPass.uniforms.uBevelIntensity, this.config.bevelIntensity)), this.recalculateViewportLayout());
|
|
3231
3267
|
}
|
|
3232
3268
|
// -----------------------------------------------------------------------
|
|
3233
3269
|
// Geometry upload
|
|
@@ -3236,10 +3272,10 @@ class Je extends gt {
|
|
|
3236
3272
|
const e = this.gl;
|
|
3237
3273
|
if (!e || !this.stencilPass) return;
|
|
3238
3274
|
this.stencilVao = e.createVertexArray(), e.bindVertexArray(this.stencilVao);
|
|
3239
|
-
const
|
|
3240
|
-
e.bindBuffer(e.ARRAY_BUFFER,
|
|
3241
|
-
const
|
|
3242
|
-
e.enableVertexAttribArray(
|
|
3275
|
+
const i = e.createBuffer();
|
|
3276
|
+
e.bindBuffer(e.ARRAY_BUFFER, i), e.bufferData(e.ARRAY_BUFFER, t.vertices, e.STATIC_DRAW);
|
|
3277
|
+
const n = e.getAttribLocation(this.stencilPass.program, "aPosition");
|
|
3278
|
+
e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, 0, 0);
|
|
3243
3279
|
const r = e.createBuffer();
|
|
3244
3280
|
e.bindBuffer(e.ELEMENT_ARRAY_BUFFER, r), e.bufferData(e.ELEMENT_ARRAY_BUFFER, t.indices, e.STATIC_DRAW), this.stencilIndexCount = t.indices.length, e.bindVertexArray(null);
|
|
3245
3281
|
}
|
|
@@ -3247,46 +3283,46 @@ class Je extends gt {
|
|
|
3247
3283
|
const e = this.gl;
|
|
3248
3284
|
if (!e || !this.maskPass) return;
|
|
3249
3285
|
this.maskVao = e.createVertexArray(), e.bindVertexArray(this.maskVao);
|
|
3250
|
-
const
|
|
3251
|
-
e.bindBuffer(e.ARRAY_BUFFER,
|
|
3252
|
-
const
|
|
3253
|
-
e.enableVertexAttribArray(
|
|
3286
|
+
const i = e.createBuffer();
|
|
3287
|
+
e.bindBuffer(e.ARRAY_BUFFER, i), e.bufferData(e.ARRAY_BUFFER, t.vertices, e.STATIC_DRAW);
|
|
3288
|
+
const n = e.getAttribLocation(this.maskPass.program, "aPosition");
|
|
3289
|
+
e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, 0, 0);
|
|
3254
3290
|
const r = e.createBuffer();
|
|
3255
3291
|
e.bindBuffer(e.ELEMENT_ARRAY_BUFFER, r), e.bufferData(e.ELEMENT_ARRAY_BUFFER, t.indices, e.STATIC_DRAW), e.bindVertexArray(null);
|
|
3256
3292
|
}
|
|
3257
3293
|
uploadBoundaryMesh(t) {
|
|
3258
3294
|
const e = this.gl;
|
|
3259
3295
|
if (!e || !this.boundaryPass) return;
|
|
3260
|
-
const
|
|
3261
|
-
if (
|
|
3296
|
+
const i = je(t.edgeVertices);
|
|
3297
|
+
if (i.count === 0) return;
|
|
3262
3298
|
this.boundaryVao = e.createVertexArray(), e.bindVertexArray(this.boundaryVao);
|
|
3263
|
-
const
|
|
3264
|
-
e.bindBuffer(e.ARRAY_BUFFER,
|
|
3299
|
+
const n = e.createBuffer();
|
|
3300
|
+
e.bindBuffer(e.ARRAY_BUFFER, n), e.bufferData(e.ARRAY_BUFFER, i.vertices, e.STATIC_DRAW);
|
|
3265
3301
|
const r = 16, o = e.getAttribLocation(this.boundaryPass.program, "aPosition");
|
|
3266
3302
|
e.enableVertexAttribArray(o), e.vertexAttribPointer(o, 2, e.FLOAT, !1, r, 0);
|
|
3267
3303
|
const l = e.getAttribLocation(this.boundaryPass.program, "aNormal");
|
|
3268
|
-
l >= 0 && (e.enableVertexAttribArray(l), e.vertexAttribPointer(l, 2, e.FLOAT, !1, r, 8)), this.boundaryVertexCount =
|
|
3304
|
+
l >= 0 && (e.enableVertexAttribArray(l), e.vertexAttribPointer(l, 2, e.FLOAT, !1, r, 8)), this.boundaryVertexCount = i.count, e.bindVertexArray(null);
|
|
3269
3305
|
}
|
|
3270
3306
|
uploadChamferMesh(t) {
|
|
3271
3307
|
const e = this.gl;
|
|
3272
3308
|
if (!e || !this.chamferPass || this.config.chamferWidth <= 0) return;
|
|
3273
|
-
const
|
|
3309
|
+
const i = Ze(
|
|
3274
3310
|
t.edgeVertices,
|
|
3275
3311
|
t.contourOffsets,
|
|
3276
3312
|
t.contourIsHole,
|
|
3277
3313
|
this.config.chamferWidth,
|
|
3278
3314
|
this.config.chamferAngle
|
|
3279
3315
|
);
|
|
3280
|
-
if (
|
|
3316
|
+
if (i.count === 0) return;
|
|
3281
3317
|
this.chamferVao = e.createVertexArray(), e.bindVertexArray(this.chamferVao);
|
|
3282
|
-
const
|
|
3283
|
-
e.bindBuffer(e.ARRAY_BUFFER,
|
|
3318
|
+
const n = e.createBuffer();
|
|
3319
|
+
e.bindBuffer(e.ARRAY_BUFFER, n), e.bufferData(e.ARRAY_BUFFER, i.vertices, e.STATIC_DRAW);
|
|
3284
3320
|
const r = 24, o = e.getAttribLocation(this.chamferPass.program, "aPosition");
|
|
3285
3321
|
e.enableVertexAttribArray(o), e.vertexAttribPointer(o, 2, e.FLOAT, !1, r, 0);
|
|
3286
3322
|
const l = e.getAttribLocation(this.chamferPass.program, "aNormal3");
|
|
3287
3323
|
l >= 0 && (e.enableVertexAttribArray(l), e.vertexAttribPointer(l, 3, e.FLOAT, !1, r, 8));
|
|
3288
3324
|
const a = e.getAttribLocation(this.chamferPass.program, "aLerpT");
|
|
3289
|
-
a >= 0 && (e.enableVertexAttribArray(a), e.vertexAttribPointer(a, 1, e.FLOAT, !1, r, 20)), this.chamferVertexCount =
|
|
3325
|
+
a >= 0 && (e.enableVertexAttribArray(a), e.vertexAttribPointer(a, 1, e.FLOAT, !1, r, 20)), this.chamferVertexCount = i.count, e.bindVertexArray(null);
|
|
3290
3326
|
}
|
|
3291
3327
|
disposeChamferGeometry() {
|
|
3292
3328
|
const t = this.gl;
|
|
@@ -3296,18 +3332,18 @@ class Je extends gt {
|
|
|
3296
3332
|
// FBO management
|
|
3297
3333
|
// -----------------------------------------------------------------------
|
|
3298
3334
|
createFBO(t, e) {
|
|
3299
|
-
const
|
|
3300
|
-
if (!
|
|
3301
|
-
this.disposeFBO(), this.fboWidth = t, this.fboHeight = e, this.interiorFbo =
|
|
3302
|
-
const
|
|
3303
|
-
|
|
3335
|
+
const i = this.gl;
|
|
3336
|
+
if (!i) return;
|
|
3337
|
+
this.disposeFBO(), this.fboWidth = t, this.fboHeight = e, this.interiorFbo = i.createFramebuffer(), i.bindFramebuffer(i.FRAMEBUFFER, this.interiorFbo), this.interiorColorTex = i.createTexture(), i.activeTexture(i.TEXTURE2), i.bindTexture(i.TEXTURE_2D, this.interiorColorTex), i.texStorage2D(i.TEXTURE_2D, 1, i.RGBA8, t, e), 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, this.interiorColorTex, 0), this.interiorDepthTex = i.createTexture(), i.activeTexture(i.TEXTURE3), i.bindTexture(i.TEXTURE_2D, this.interiorDepthTex), i.texStorage2D(i.TEXTURE_2D, 1, i.RGBA8, t, e), 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_ATTACHMENT1, i.TEXTURE_2D, this.interiorDepthTex, 0), i.drawBuffers([i.COLOR_ATTACHMENT0, i.COLOR_ATTACHMENT1]);
|
|
3338
|
+
const n = i.checkFramebufferStatus(i.FRAMEBUFFER);
|
|
3339
|
+
n !== i.FRAMEBUFFER_COMPLETE && console.error("Interior FBO incomplete:", n), i.bindFramebuffer(i.FRAMEBUFFER, null);
|
|
3304
3340
|
}
|
|
3305
3341
|
// -----------------------------------------------------------------------
|
|
3306
3342
|
// JFA Distance Field
|
|
3307
3343
|
// -----------------------------------------------------------------------
|
|
3308
3344
|
createJFAResources(t, e) {
|
|
3309
|
-
const
|
|
3310
|
-
|
|
3345
|
+
const i = this.gl;
|
|
3346
|
+
i && (this.jfa || (this.jfa = new Rt(i, this.hasColorBufferFloat)), this.jfa.createResources(t, e, this.qualityParams.jfaDivisor));
|
|
3311
3347
|
}
|
|
3312
3348
|
computeDistanceField() {
|
|
3313
3349
|
!this.jfa || !this.maskPass || !this.jfaSeedPass || !this.jfaFloodPass || !this.jfaDistPass || !this.maskVao || !this.quadVao || this.jfa.compute({
|
|
@@ -3328,7 +3364,7 @@ class Je extends gt {
|
|
|
3328
3364
|
// -----------------------------------------------------------------------
|
|
3329
3365
|
initGPUResources() {
|
|
3330
3366
|
const t = this.gl;
|
|
3331
|
-
t && (this.stencilPass = O(t, "stencil",
|
|
3367
|
+
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, [
|
|
3332
3368
|
"uImage",
|
|
3333
3369
|
"uDepth",
|
|
3334
3370
|
"uOffset",
|
|
@@ -3349,12 +3385,12 @@ class Je extends gt {
|
|
|
3349
3385
|
"uBrightnessBias",
|
|
3350
3386
|
"uUvOffset",
|
|
3351
3387
|
"uUvScale"
|
|
3352
|
-
]), this.compositePass = O(t, "composite",
|
|
3388
|
+
]), this.compositePass = O(t, "composite", Ne, Ge, [
|
|
3353
3389
|
"uInteriorColor",
|
|
3354
3390
|
"uDistField",
|
|
3355
3391
|
"uEdgeOcclusionWidth",
|
|
3356
3392
|
"uEdgeOcclusionStrength"
|
|
3357
|
-
]), this.boundaryPass = O(t, "boundary",
|
|
3393
|
+
]), this.boundaryPass = O(t, "boundary", We, ze, [
|
|
3358
3394
|
"uInteriorColor",
|
|
3359
3395
|
"uInteriorDepth",
|
|
3360
3396
|
"uDistField",
|
|
@@ -3371,7 +3407,7 @@ class Je extends gt {
|
|
|
3371
3407
|
"uEdgeColor",
|
|
3372
3408
|
"uLightDir",
|
|
3373
3409
|
"uBevelIntensity"
|
|
3374
|
-
]), this.chamferPass = O(t, "chamfer",
|
|
3410
|
+
]), this.chamferPass = O(t, "chamfer", qe, Ye, [
|
|
3375
3411
|
"uMeshScale",
|
|
3376
3412
|
"uLightDir3",
|
|
3377
3413
|
"uChamferColor",
|
|
@@ -3394,23 +3430,23 @@ class Je extends gt {
|
|
|
3394
3430
|
onRenderFrame() {
|
|
3395
3431
|
const t = this.gl, e = this.mediaSource;
|
|
3396
3432
|
if (!t || !this.interiorPass || !this.quadVao) return;
|
|
3397
|
-
const
|
|
3398
|
-
if (!
|
|
3433
|
+
const i = e?.getImageSource();
|
|
3434
|
+
if (!i || !this.interiorFbo || !this.interiorColorTex || !this.interiorDepthTex) return;
|
|
3399
3435
|
if (this.jfa?.isDirty && this.maskVao) {
|
|
3400
3436
|
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));
|
|
3401
3437
|
(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);
|
|
3402
3438
|
}
|
|
3403
|
-
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,
|
|
3404
|
-
let
|
|
3439
|
+
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, i), this.rvfcSupported || this.onDepthUpdate(e.currentTime);
|
|
3440
|
+
let n = 0, r = 0;
|
|
3405
3441
|
if (this.readInput) {
|
|
3406
3442
|
const o = this.readInput();
|
|
3407
|
-
|
|
3443
|
+
n = -o.x, r = o.y;
|
|
3408
3444
|
}
|
|
3409
3445
|
if (t.bindFramebuffer(t.FRAMEBUFFER, this.interiorFbo), t.checkFramebufferStatus(t.FRAMEBUFFER) !== t.FRAMEBUFFER_COMPLETE) {
|
|
3410
3446
|
t.bindFramebuffer(t.FRAMEBUFFER, null);
|
|
3411
3447
|
return;
|
|
3412
3448
|
}
|
|
3413
|
-
t.viewport(0, 0, this.fboWidth, this.fboHeight), t.clearColor(0, 0, 0, 1), t.clear(t.COLOR_BUFFER_BIT), t.useProgram(this.interiorPass.program), t.uniform2f(this.interiorPass.uniforms.uOffset,
|
|
3449
|
+
t.viewport(0, 0, this.fboWidth, this.fboHeight), t.clearColor(0, 0, 0, 1), t.clear(t.COLOR_BUFFER_BIT), t.useProgram(this.interiorPass.program), t.uniform2f(this.interiorPass.uniforms.uOffset, n, r), t.activeTexture(t.TEXTURE0 + this.videoSlot.unit), t.bindTexture(t.TEXTURE_2D, this.videoSlot.texture), t.activeTexture(t.TEXTURE0 + this.depthSlot.unit), t.bindTexture(t.TEXTURE_2D, this.depthSlot.texture), t.bindVertexArray(this.quadVao), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindFramebuffer(t.FRAMEBUFFER, null), t.clearColor(0, 0, 0, 0), t.viewport(0, 0, this.canvas.width, this.canvas.height), t.clear(t.COLOR_BUFFER_BIT | t.STENCIL_BUFFER_BIT), this.stencilVao && this.stencilPass && this.stencilIndexCount > 0 && (t.enable(t.STENCIL_TEST), t.stencilFunc(t.ALWAYS, 1, 255), t.stencilOp(t.KEEP, t.KEEP, t.REPLACE), t.stencilMask(255), t.colorMask(!1, !1, !1, !1), t.useProgram(this.stencilPass.program), t.bindVertexArray(this.stencilVao), t.drawElements(t.TRIANGLES, this.stencilIndexCount, t.UNSIGNED_SHORT, 0), t.colorMask(!0, !0, !0, !0)), t.stencilFunc(t.EQUAL, 1, 255), t.stencilMask(0), t.activeTexture(t.TEXTURE2), t.bindTexture(t.TEXTURE_2D, this.interiorColorTex), t.activeTexture(t.TEXTURE3), t.bindTexture(t.TEXTURE_2D, this.interiorDepthTex), t.activeTexture(t.TEXTURE4), t.bindTexture(t.TEXTURE_2D, this.jfa?.distanceTexture ?? null), t.useProgram(this.compositePass.program), t.bindVertexArray(this.quadVao), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.disable(t.STENCIL_TEST), this.chamferVao && this.chamferPass && this.chamferVertexCount > 0 && (t.useProgram(this.chamferPass.program), t.uniform2f(this.chamferPass.uniforms.uMeshScale, this.meshScaleX, this.meshScaleY), t.uniform2f(this.chamferPass.uniforms.uTexelSize, 1 / this.canvas.width, 1 / this.canvas.height), t.bindVertexArray(this.chamferVao), t.drawArrays(t.TRIANGLES, 0, this.chamferVertexCount)), this.boundaryVao && this.boundaryPass && this.boundaryVertexCount > 0 && this.config.rimLightIntensity > 0 && (t.enable(t.BLEND), t.blendFunc(t.SRC_ALPHA, t.ONE_MINUS_SRC_ALPHA), t.useProgram(this.boundaryPass.program), t.bindVertexArray(this.boundaryVao), t.drawArrays(t.TRIANGLES, 0, this.boundaryVertexCount), t.disable(t.BLEND));
|
|
3414
3450
|
}
|
|
3415
3451
|
/**
|
|
3416
3452
|
* Upload depth data to the GPU texture.
|
|
@@ -3419,7 +3455,7 @@ class Je extends gt {
|
|
|
3419
3455
|
onDepthUpdate(t) {
|
|
3420
3456
|
const e = this.gl;
|
|
3421
3457
|
if (!e || !this.readDepth || !this.depthSlot.texture) return;
|
|
3422
|
-
const
|
|
3458
|
+
const i = this.subsampleDepth(this.readDepth(t));
|
|
3423
3459
|
e.activeTexture(e.TEXTURE0 + this.depthSlot.unit), e.bindTexture(e.TEXTURE_2D, this.depthSlot.texture), e.texSubImage2D(
|
|
3424
3460
|
e.TEXTURE_2D,
|
|
3425
3461
|
0,
|
|
@@ -3429,7 +3465,7 @@ class Je extends gt {
|
|
|
3429
3465
|
this.depthHeight,
|
|
3430
3466
|
e.RED,
|
|
3431
3467
|
e.UNSIGNED_BYTE,
|
|
3432
|
-
|
|
3468
|
+
i
|
|
3433
3469
|
), this.jfa && this.jfa.markDirty();
|
|
3434
3470
|
}
|
|
3435
3471
|
// -----------------------------------------------------------------------
|
|
@@ -3438,9 +3474,9 @@ class Je extends gt {
|
|
|
3438
3474
|
recalculateViewportLayout() {
|
|
3439
3475
|
const t = this.gl;
|
|
3440
3476
|
if (!t) return;
|
|
3441
|
-
const { width: e, height:
|
|
3477
|
+
const { width: e, height: i } = this.getViewportSize(), n = Math.min(window.devicePixelRatio, this.qualityParams.dprCap), r = Math.round(e * n), o = Math.round(i * n);
|
|
3442
3478
|
(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]));
|
|
3443
|
-
const l = e /
|
|
3479
|
+
const l = e / i, a = 0.65;
|
|
3444
3480
|
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));
|
|
3445
3481
|
}
|
|
3446
3482
|
// -----------------------------------------------------------------------
|
|
@@ -3494,8 +3530,8 @@ class Je extends gt {
|
|
|
3494
3530
|
this.boundaryPass,
|
|
3495
3531
|
this.chamferPass
|
|
3496
3532
|
];
|
|
3497
|
-
for (const
|
|
3498
|
-
|
|
3533
|
+
for (const i of e)
|
|
3534
|
+
i && i.dispose(t);
|
|
3499
3535
|
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);
|
|
3500
3536
|
}
|
|
3501
3537
|
}
|
|
@@ -3504,33 +3540,33 @@ async function Tt(s) {
|
|
|
3504
3540
|
if (!t.ok)
|
|
3505
3541
|
throw new Error(`Failed to fetch SVG: ${t.status} ${t.statusText}`);
|
|
3506
3542
|
const e = await t.text();
|
|
3507
|
-
return
|
|
3543
|
+
return Ke(e);
|
|
3508
3544
|
}
|
|
3509
|
-
function
|
|
3510
|
-
const
|
|
3511
|
-
if (!
|
|
3545
|
+
function Ke(s) {
|
|
3546
|
+
const i = new DOMParser().parseFromString(s, "image/svg+xml").querySelector("svg");
|
|
3547
|
+
if (!i)
|
|
3512
3548
|
throw new Error("No <svg> element found in document.");
|
|
3513
|
-
const
|
|
3514
|
-
if (
|
|
3549
|
+
const n = Je(i);
|
|
3550
|
+
if (n.length === 0)
|
|
3515
3551
|
throw new Error("No path data found in SVG.");
|
|
3516
3552
|
let r = 1 / 0, o = 1 / 0, l = -1 / 0, a = -1 / 0;
|
|
3517
|
-
for (const C of
|
|
3553
|
+
for (const C of n)
|
|
3518
3554
|
for (let S = 0; S < C.length; S += 2)
|
|
3519
3555
|
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]);
|
|
3520
|
-
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 =
|
|
3556
|
+
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 = n.map((C) => {
|
|
3521
3557
|
const S = [];
|
|
3522
3558
|
for (let D = 0; D < C.length; D += 2)
|
|
3523
3559
|
S.push((C[D] - f) * x), S.push(-((C[D + 1] - u) * x));
|
|
3524
3560
|
return S;
|
|
3525
|
-
}), y =
|
|
3561
|
+
}), y = oi(d), b = [], E = [];
|
|
3526
3562
|
for (const C of y) {
|
|
3527
|
-
const { flatCoords: S, holeIndices: D } =
|
|
3563
|
+
const { flatCoords: S, holeIndices: D } = si(C), U = ai(S, D), M = b.length / 2;
|
|
3528
3564
|
for (const k of U)
|
|
3529
|
-
|
|
3565
|
+
E.push(k + M);
|
|
3530
3566
|
for (const k of S)
|
|
3531
|
-
|
|
3567
|
+
b.push(k);
|
|
3532
3568
|
}
|
|
3533
|
-
const g =
|
|
3569
|
+
const g = b, v = E, m = [], T = [], w = [], A = zt(d);
|
|
3534
3570
|
for (let C = 0; C < d.length; C++) {
|
|
3535
3571
|
const S = d[C];
|
|
3536
3572
|
T.push(m.length), w.push(A[C]);
|
|
@@ -3551,12 +3587,12 @@ function Qe(s) {
|
|
|
3551
3587
|
aspect: p
|
|
3552
3588
|
};
|
|
3553
3589
|
}
|
|
3554
|
-
function
|
|
3590
|
+
function Je(s) {
|
|
3555
3591
|
const t = [];
|
|
3556
3592
|
return s.querySelectorAll("path").forEach((a) => {
|
|
3557
3593
|
const h = a.getAttribute("d");
|
|
3558
3594
|
if (!h) return;
|
|
3559
|
-
const c =
|
|
3595
|
+
const c = ei(h);
|
|
3560
3596
|
t.push(...c);
|
|
3561
3597
|
}), s.querySelectorAll("polygon").forEach((a) => {
|
|
3562
3598
|
const h = a.getAttribute("points");
|
|
@@ -3573,40 +3609,40 @@ function tn(s) {
|
|
|
3573
3609
|
f > 0 && u > 0 && t.push([h, c, h + f, c, h + f, c + u, h, c + u]);
|
|
3574
3610
|
}), s.querySelectorAll("circle").forEach((a) => {
|
|
3575
3611
|
const h = parseFloat(a.getAttribute("cx") || "0"), c = parseFloat(a.getAttribute("cy") || "0"), f = parseFloat(a.getAttribute("r") || "0");
|
|
3576
|
-
f > 0 && t.push(
|
|
3612
|
+
f > 0 && t.push(Qe(h, c, f));
|
|
3577
3613
|
}), s.querySelectorAll("ellipse").forEach((a) => {
|
|
3578
3614
|
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");
|
|
3579
|
-
f > 0 && u > 0 && t.push(
|
|
3615
|
+
f > 0 && u > 0 && t.push(ti(h, c, f, u));
|
|
3580
3616
|
}), t;
|
|
3581
3617
|
}
|
|
3582
3618
|
function _t(s) {
|
|
3583
3619
|
const t = [], e = s.trim().split(/[\s,]+/);
|
|
3584
|
-
for (let
|
|
3585
|
-
const
|
|
3586
|
-
Number.isFinite(
|
|
3620
|
+
for (let i = 0; i < e.length - 1; i += 2) {
|
|
3621
|
+
const n = parseFloat(e[i]), r = parseFloat(e[i + 1]);
|
|
3622
|
+
Number.isFinite(n) && Number.isFinite(r) && t.push(n, r);
|
|
3587
3623
|
}
|
|
3588
3624
|
return t;
|
|
3589
3625
|
}
|
|
3590
|
-
function
|
|
3591
|
-
const
|
|
3592
|
-
for (let r = 0; r <
|
|
3593
|
-
const o = 2 * Math.PI * r /
|
|
3594
|
-
|
|
3626
|
+
function Qe(s, t, e, i = 64) {
|
|
3627
|
+
const n = [];
|
|
3628
|
+
for (let r = 0; r < i; r++) {
|
|
3629
|
+
const o = 2 * Math.PI * r / i;
|
|
3630
|
+
n.push(s + e * Math.cos(o), t + e * Math.sin(o));
|
|
3595
3631
|
}
|
|
3596
|
-
return
|
|
3632
|
+
return n;
|
|
3597
3633
|
}
|
|
3598
|
-
function
|
|
3634
|
+
function ti(s, t, e, i, n = 64) {
|
|
3599
3635
|
const r = [];
|
|
3600
|
-
for (let o = 0; o <
|
|
3601
|
-
const l = 2 * Math.PI * o /
|
|
3602
|
-
r.push(s + e * Math.cos(l), t +
|
|
3636
|
+
for (let o = 0; o < n; o++) {
|
|
3637
|
+
const l = 2 * Math.PI * o / n;
|
|
3638
|
+
r.push(s + e * Math.cos(l), t + i * Math.sin(l));
|
|
3603
3639
|
}
|
|
3604
3640
|
return r;
|
|
3605
3641
|
}
|
|
3606
|
-
function
|
|
3642
|
+
function ei(s) {
|
|
3607
3643
|
const t = [];
|
|
3608
|
-
let e = [],
|
|
3609
|
-
const c =
|
|
3644
|
+
let e = [], i = 0, n = 0, r = 0, o = 0, l = 0, a = 0, h = "";
|
|
3645
|
+
const c = ii(s);
|
|
3610
3646
|
let f = 0;
|
|
3611
3647
|
function u() {
|
|
3612
3648
|
return f >= c.length ? 0 : parseFloat(c[f++]);
|
|
@@ -3619,49 +3655,49 @@ function rn(s) {
|
|
|
3619
3655
|
switch (p.toUpperCase()) {
|
|
3620
3656
|
case "M": {
|
|
3621
3657
|
e.length > 0 && t.push(e), e = [];
|
|
3622
|
-
const
|
|
3623
|
-
|
|
3658
|
+
const b = u() + (d ? i : 0), E = u() + (d ? n : 0);
|
|
3659
|
+
i = b, n = E, r = b, o = E, e.push(i, n), l = i, a = n;
|
|
3624
3660
|
break;
|
|
3625
3661
|
}
|
|
3626
3662
|
case "L": {
|
|
3627
|
-
|
|
3663
|
+
i = u() + (d ? i : 0), n = u() + (d ? n : 0), e.push(i, n), l = i, a = n;
|
|
3628
3664
|
break;
|
|
3629
3665
|
}
|
|
3630
3666
|
case "H": {
|
|
3631
|
-
|
|
3667
|
+
i = u() + (d ? i : 0), e.push(i, n), l = i, a = n;
|
|
3632
3668
|
break;
|
|
3633
3669
|
}
|
|
3634
3670
|
case "V": {
|
|
3635
|
-
|
|
3671
|
+
n = u() + (d ? n : 0), e.push(i, n), l = i, a = n;
|
|
3636
3672
|
break;
|
|
3637
3673
|
}
|
|
3638
3674
|
case "C": {
|
|
3639
|
-
const
|
|
3640
|
-
|
|
3675
|
+
const b = u() + (d ? i : 0), E = u() + (d ? n : 0), g = u() + (d ? i : 0), v = u() + (d ? n : 0), m = u() + (d ? i : 0), T = u() + (d ? n : 0);
|
|
3676
|
+
nt(e, i, n, b, E, g, v, m, T), i = m, n = T, l = g, a = v;
|
|
3641
3677
|
break;
|
|
3642
3678
|
}
|
|
3643
3679
|
case "S": {
|
|
3644
|
-
const
|
|
3645
|
-
|
|
3680
|
+
const b = 2 * i - l, E = 2 * n - a, g = u() + (d ? i : 0), v = u() + (d ? n : 0), m = u() + (d ? i : 0), T = u() + (d ? n : 0);
|
|
3681
|
+
nt(e, i, n, b, E, g, v, m, T), i = m, n = T, l = g, a = v;
|
|
3646
3682
|
break;
|
|
3647
3683
|
}
|
|
3648
3684
|
case "Q": {
|
|
3649
|
-
const
|
|
3650
|
-
It(e, n,
|
|
3685
|
+
const b = u() + (d ? i : 0), E = u() + (d ? n : 0), g = u() + (d ? i : 0), v = u() + (d ? n : 0);
|
|
3686
|
+
It(e, i, n, b, E, g, v), i = g, n = v, l = b, a = E;
|
|
3651
3687
|
break;
|
|
3652
3688
|
}
|
|
3653
3689
|
case "T": {
|
|
3654
|
-
const
|
|
3655
|
-
It(e, n,
|
|
3690
|
+
const b = 2 * i - l, E = 2 * n - a, g = u() + (d ? i : 0), v = u() + (d ? n : 0);
|
|
3691
|
+
It(e, i, n, b, E, g, v), i = g, n = v, l = b, a = E;
|
|
3656
3692
|
break;
|
|
3657
3693
|
}
|
|
3658
3694
|
case "A": {
|
|
3659
|
-
const
|
|
3660
|
-
|
|
3695
|
+
const b = u(), E = u(), g = u(), v = u(), m = u(), T = u() + (d ? i : 0), w = u() + (d ? n : 0);
|
|
3696
|
+
ri(e, i, n, b, E, g, !!v, !!m, T, w), i = T, n = w, l = i, a = n;
|
|
3661
3697
|
break;
|
|
3662
3698
|
}
|
|
3663
3699
|
case "Z": {
|
|
3664
|
-
|
|
3700
|
+
i = r, n = o, e.length > 0 && t.push(e), e = [], l = i, a = n;
|
|
3665
3701
|
break;
|
|
3666
3702
|
}
|
|
3667
3703
|
default:
|
|
@@ -3672,15 +3708,15 @@ function rn(s) {
|
|
|
3672
3708
|
}
|
|
3673
3709
|
return e.length >= 6 && t.push(e), t;
|
|
3674
3710
|
}
|
|
3675
|
-
function
|
|
3711
|
+
function ii(s) {
|
|
3676
3712
|
const t = [], e = /([a-zA-Z])|([+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?)/g;
|
|
3677
|
-
let
|
|
3678
|
-
for (; (
|
|
3679
|
-
t.push(
|
|
3713
|
+
let i;
|
|
3714
|
+
for (; (i = e.exec(s)) !== null; )
|
|
3715
|
+
t.push(i[0]);
|
|
3680
3716
|
return t;
|
|
3681
3717
|
}
|
|
3682
|
-
const
|
|
3683
|
-
function
|
|
3718
|
+
const ni = 0.5;
|
|
3719
|
+
function nt(s, t, e, i, n, r, o, l, a, h = 0) {
|
|
3684
3720
|
if (h > 12) {
|
|
3685
3721
|
s.push(l, a);
|
|
3686
3722
|
return;
|
|
@@ -3690,39 +3726,39 @@ function it(s, t, e, n, i, r, o, l, a, h = 0) {
|
|
|
3690
3726
|
s.push(l, a);
|
|
3691
3727
|
return;
|
|
3692
3728
|
}
|
|
3693
|
-
const x = Math.abs((
|
|
3694
|
-
if (x + p <
|
|
3729
|
+
const x = Math.abs((i - l) * f - (n - a) * c) / u, p = Math.abs((r - l) * f - (o - a) * c) / u;
|
|
3730
|
+
if (x + p < ni) {
|
|
3695
3731
|
s.push(l, a);
|
|
3696
3732
|
return;
|
|
3697
3733
|
}
|
|
3698
|
-
const d = (t +
|
|
3699
|
-
|
|
3734
|
+
const d = (t + i) / 2, y = (e + n) / 2, b = (i + r) / 2, E = (n + 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;
|
|
3735
|
+
nt(s, t, e, d, y, m, T, P, F, h + 1), nt(s, P, F, w, A, g, v, l, a, h + 1);
|
|
3700
3736
|
}
|
|
3701
|
-
function It(s, t, e,
|
|
3702
|
-
const l = t + 0.6666666666666666 * (
|
|
3703
|
-
|
|
3737
|
+
function It(s, t, e, i, n, r, o) {
|
|
3738
|
+
const l = t + 0.6666666666666666 * (i - t), a = e + 2 / 3 * (n - e), h = r + 2 / 3 * (i - r), c = o + 2 / 3 * (n - o);
|
|
3739
|
+
nt(s, t, e, l, a, h, c, r, o);
|
|
3704
3740
|
}
|
|
3705
|
-
function
|
|
3706
|
-
if (
|
|
3741
|
+
function ri(s, t, e, i, n, r, o, l, a, h) {
|
|
3742
|
+
if (i === 0 || n === 0) {
|
|
3707
3743
|
s.push(a, h);
|
|
3708
3744
|
return;
|
|
3709
3745
|
}
|
|
3710
|
-
let c = Math.abs(
|
|
3711
|
-
const u = r * Math.PI / 180, x = Math.cos(u), p = Math.sin(u), d = (t - a) / 2, y = (e - h) / 2,
|
|
3712
|
-
let g =
|
|
3746
|
+
let c = Math.abs(i), f = Math.abs(n);
|
|
3747
|
+
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;
|
|
3748
|
+
let g = b * b / (c * c) + E * E / (f * f);
|
|
3713
3749
|
if (g > 1) {
|
|
3714
3750
|
const U = Math.sqrt(g);
|
|
3715
3751
|
c *= U, f *= U, g = 1;
|
|
3716
3752
|
}
|
|
3717
|
-
const v = c * c, m = f * f, T =
|
|
3753
|
+
const v = c * c, m = f * f, T = b * b, w = E * E;
|
|
3718
3754
|
let A = Math.max(0, (v * m - v * w - m * T) / (v * w + m * T));
|
|
3719
3755
|
A = Math.sqrt(A), o === l && (A = -A);
|
|
3720
|
-
const P = A * (c *
|
|
3756
|
+
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);
|
|
3721
3757
|
let S = Mt(
|
|
3722
|
-
(
|
|
3723
|
-
(
|
|
3724
|
-
(-
|
|
3725
|
-
(-
|
|
3758
|
+
(b - P) / c,
|
|
3759
|
+
(E - F) / f,
|
|
3760
|
+
(-b - P) / c,
|
|
3761
|
+
(-E - F) / f
|
|
3726
3762
|
);
|
|
3727
3763
|
!l && S > 0 && (S -= 2 * Math.PI), l && S < 0 && (S += 2 * Math.PI);
|
|
3728
3764
|
const D = Math.max(4, Math.ceil(Math.abs(S) / (Math.PI / 16)));
|
|
@@ -3731,49 +3767,49 @@ function an(s, t, e, n, i, r, o, l, a, h) {
|
|
|
3731
3767
|
s.push(et, at);
|
|
3732
3768
|
}
|
|
3733
3769
|
}
|
|
3734
|
-
function Mt(s, t, e,
|
|
3735
|
-
const
|
|
3736
|
-
return
|
|
3770
|
+
function Mt(s, t, e, i) {
|
|
3771
|
+
const n = s * i - t * e < 0 ? -1 : 1, r = s * e + t * i, o = Math.sqrt(s * s + t * t), l = Math.sqrt(e * e + i * i), a = r / (o * l);
|
|
3772
|
+
return n * Math.acos(Math.max(-1, Math.min(1, a)));
|
|
3737
3773
|
}
|
|
3738
|
-
function
|
|
3774
|
+
function si(s) {
|
|
3739
3775
|
const t = [], e = [];
|
|
3740
|
-
for (let
|
|
3741
|
-
|
|
3742
|
-
for (const
|
|
3743
|
-
t.push(
|
|
3776
|
+
for (let i = 0; i < s.length; i++) {
|
|
3777
|
+
i > 0 && e.push(t.length / 2);
|
|
3778
|
+
for (const n of s[i])
|
|
3779
|
+
t.push(n);
|
|
3744
3780
|
}
|
|
3745
3781
|
return { flatCoords: t, holeIndices: e };
|
|
3746
3782
|
}
|
|
3747
3783
|
function zt(s) {
|
|
3748
|
-
const t = s.length, e = s.map((
|
|
3749
|
-
for (let
|
|
3784
|
+
const t = s.length, e = s.map((n) => Math.abs(qt(n))), i = new Array(t).fill(!1);
|
|
3785
|
+
for (let n = 0; n < t; n++) {
|
|
3750
3786
|
let r = 0;
|
|
3751
|
-
const o = s[
|
|
3787
|
+
const o = s[n][0], l = s[n][1];
|
|
3752
3788
|
for (let a = 0; a < t; a++)
|
|
3753
|
-
|
|
3754
|
-
n
|
|
3789
|
+
n !== a && e[a] > e[n] && Yt(o, l, s[a]) && r++;
|
|
3790
|
+
i[n] = r % 2 === 1;
|
|
3755
3791
|
}
|
|
3756
|
-
return
|
|
3792
|
+
return i;
|
|
3757
3793
|
}
|
|
3758
|
-
function
|
|
3794
|
+
function oi(s) {
|
|
3759
3795
|
if (s.length <= 1)
|
|
3760
3796
|
return [s];
|
|
3761
3797
|
const t = zt(s), e = s.map((o, l) => {
|
|
3762
3798
|
const a = qt(o);
|
|
3763
3799
|
return { index: l, contour: o, area: a, isOuter: !t[l] };
|
|
3764
|
-
}),
|
|
3765
|
-
if (
|
|
3800
|
+
}), i = e.filter((o) => o.isOuter), n = e.filter((o) => !o.isOuter);
|
|
3801
|
+
if (i.length === 0)
|
|
3766
3802
|
return s.map((o) => [o]);
|
|
3767
|
-
const r =
|
|
3803
|
+
const r = i.map((o) => ({
|
|
3768
3804
|
outer: o.contour,
|
|
3769
3805
|
holes: []
|
|
3770
3806
|
}));
|
|
3771
|
-
for (const o of
|
|
3807
|
+
for (const o of n) {
|
|
3772
3808
|
const l = o.contour[0], a = o.contour[1];
|
|
3773
3809
|
let h = -1, c = 1 / 0;
|
|
3774
|
-
for (let f = 0; f <
|
|
3775
|
-
if (Yt(l, a,
|
|
3776
|
-
const u = Math.abs(
|
|
3810
|
+
for (let f = 0; f < i.length; f++)
|
|
3811
|
+
if (Yt(l, a, i[f].contour)) {
|
|
3812
|
+
const u = Math.abs(i[f].area);
|
|
3777
3813
|
u < c && (c = u, h = f);
|
|
3778
3814
|
}
|
|
3779
3815
|
h >= 0 ? r[h].holes.push(o.contour) : r.push({ outer: o.contour, holes: [] });
|
|
@@ -3783,30 +3819,30 @@ function un(s) {
|
|
|
3783
3819
|
function qt(s) {
|
|
3784
3820
|
let t = 0;
|
|
3785
3821
|
const e = s.length;
|
|
3786
|
-
for (let
|
|
3787
|
-
const
|
|
3788
|
-
t +=
|
|
3822
|
+
for (let i = 0; i < e; i += 2) {
|
|
3823
|
+
const n = s[i], r = s[i + 1], o = s[(i + 2) % e], l = s[(i + 3) % e];
|
|
3824
|
+
t += n * l - o * r;
|
|
3789
3825
|
}
|
|
3790
3826
|
return t / 2;
|
|
3791
3827
|
}
|
|
3792
3828
|
function Yt(s, t, e) {
|
|
3793
|
-
let
|
|
3794
|
-
const
|
|
3795
|
-
for (let r = 0, o =
|
|
3829
|
+
let i = !1;
|
|
3830
|
+
const n = e.length;
|
|
3831
|
+
for (let r = 0, o = n - 2; r < n; o = r, r += 2) {
|
|
3796
3832
|
const l = e[r], a = e[r + 1], h = e[o], c = e[o + 1];
|
|
3797
|
-
a > t != c > t && s < (h - l) * (t - a) / (c - a) + l && (
|
|
3833
|
+
a > t != c > t && s < (h - l) * (t - a) / (c - a) + l && (i = !i);
|
|
3798
3834
|
}
|
|
3799
|
-
return
|
|
3835
|
+
return i;
|
|
3800
3836
|
}
|
|
3801
|
-
function
|
|
3802
|
-
const
|
|
3803
|
-
let r = jt(s, 0,
|
|
3837
|
+
function ai(s, t, e = 2) {
|
|
3838
|
+
const i = t && t.length > 0, n = i ? t[0] * e : s.length;
|
|
3839
|
+
let r = jt(s, 0, n, e, !0);
|
|
3804
3840
|
const o = [];
|
|
3805
3841
|
if (!r || r.next === r.prev) return o;
|
|
3806
|
-
|
|
3842
|
+
i && (r = fi(s, t, r, e));
|
|
3807
3843
|
let l = 1 / 0, a = 1 / 0, h = -1 / 0, c = -1 / 0, f = 0;
|
|
3808
3844
|
if (s.length > 80 * e) {
|
|
3809
|
-
for (let u = 0; u <
|
|
3845
|
+
for (let u = 0; u < n; u += e) {
|
|
3810
3846
|
const x = s[u], p = s[u + 1];
|
|
3811
3847
|
x < l && (l = x), p < a && (a = p), x > h && (h = x), p > c && (c = p);
|
|
3812
3848
|
}
|
|
@@ -3814,90 +3850,90 @@ function cn(s, t, e = 2) {
|
|
|
3814
3850
|
}
|
|
3815
3851
|
return rt(r, o, e, l, a, f, 0), o;
|
|
3816
3852
|
}
|
|
3817
|
-
function jt(s, t, e,
|
|
3853
|
+
function jt(s, t, e, i, n) {
|
|
3818
3854
|
let r = null;
|
|
3819
|
-
if (
|
|
3820
|
-
for (let o = t; o < e; o +=
|
|
3855
|
+
if (n === Si(s, t, e, i) > 0)
|
|
3856
|
+
for (let o = t; o < e; o += i)
|
|
3821
3857
|
r = Bt(o, s[o], s[o + 1], r);
|
|
3822
3858
|
else
|
|
3823
|
-
for (let o = e -
|
|
3859
|
+
for (let o = e - i; o >= t; o -= i)
|
|
3824
3860
|
r = Bt(o, s[o], s[o + 1], r);
|
|
3825
3861
|
return r && vt(r, r.next) && (ot(r), r = r.next), r ? (r.next.prev = r, r.prev.next = r, r.next) : null;
|
|
3826
3862
|
}
|
|
3827
3863
|
function Y(s, t) {
|
|
3828
3864
|
t || (t = s);
|
|
3829
|
-
let e = s,
|
|
3865
|
+
let e = s, i;
|
|
3830
3866
|
do
|
|
3831
|
-
if (
|
|
3867
|
+
if (i = !1, !e.steiner && (vt(e, e.next) || L(e.prev, e, e.next) === 0)) {
|
|
3832
3868
|
if (ot(e), e = t = e.prev, e === e.next) break;
|
|
3833
|
-
|
|
3869
|
+
i = !0;
|
|
3834
3870
|
} else
|
|
3835
3871
|
e = e.next;
|
|
3836
|
-
while (
|
|
3872
|
+
while (i || e !== t);
|
|
3837
3873
|
return t;
|
|
3838
3874
|
}
|
|
3839
|
-
function rt(s, t, e,
|
|
3875
|
+
function rt(s, t, e, i, n, r, o) {
|
|
3840
3876
|
if (!s) return;
|
|
3841
|
-
!o && r &&
|
|
3877
|
+
!o && r && gi(s, i, n, r);
|
|
3842
3878
|
let l = s, a, h;
|
|
3843
3879
|
for (; s.prev !== s.next; ) {
|
|
3844
|
-
if (a = s.prev, h = s.next, r ?
|
|
3880
|
+
if (a = s.prev, h = s.next, r ? ui(s, i, n, r) : li(s)) {
|
|
3845
3881
|
t.push(a.i / e, s.i / e, h.i / e), ot(s), s = h.next, l = h.next;
|
|
3846
3882
|
continue;
|
|
3847
3883
|
}
|
|
3848
3884
|
if (s = h, s === l) {
|
|
3849
|
-
o ? o === 1 ? (s =
|
|
3885
|
+
o ? o === 1 ? (s = ci(Y(s), t, e), rt(s, t, e, i, n, r, 2)) : o === 2 && hi(s, t, e, i, n, r) : rt(Y(s), t, e, i, n, r, 1);
|
|
3850
3886
|
break;
|
|
3851
3887
|
}
|
|
3852
3888
|
}
|
|
3853
3889
|
}
|
|
3854
|
-
function
|
|
3855
|
-
const t = s.prev, e = s,
|
|
3856
|
-
if (L(t, e,
|
|
3857
|
-
const
|
|
3858
|
-
let p =
|
|
3890
|
+
function li(s) {
|
|
3891
|
+
const t = s.prev, e = s, i = s.next;
|
|
3892
|
+
if (L(t, e, i) >= 0) return !1;
|
|
3893
|
+
const n = t.x, r = e.x, o = i.x, l = t.y, a = e.y, h = i.y, c = n < r ? n < o ? n : o : r < o ? r : o, f = l < a ? l < h ? l : h : a < h ? a : h, u = n > r ? n > o ? n : o : r > o ? r : o, x = l > a ? l > h ? l : h : a > h ? a : h;
|
|
3894
|
+
let p = i.next;
|
|
3859
3895
|
for (; p !== t; ) {
|
|
3860
|
-
if (p.x >= c && p.x <= u && p.y >= f && p.y <= x && tt(
|
|
3896
|
+
if (p.x >= c && p.x <= u && p.y >= f && p.y <= x && tt(n, l, r, a, o, h, p.x, p.y) && L(p.prev, p, p.next) >= 0)
|
|
3861
3897
|
return !1;
|
|
3862
3898
|
p = p.next;
|
|
3863
3899
|
}
|
|
3864
3900
|
return !0;
|
|
3865
3901
|
}
|
|
3866
|
-
function
|
|
3867
|
-
const
|
|
3868
|
-
if (L(
|
|
3869
|
-
const l =
|
|
3902
|
+
function ui(s, t, e, i) {
|
|
3903
|
+
const n = s.prev, r = s, o = s.next;
|
|
3904
|
+
if (L(n, r, o) >= 0) return !1;
|
|
3905
|
+
const l = n.x, a = r.x, h = o.x, c = n.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, i), E = yt(d, y, t, e, i);
|
|
3870
3906
|
let g = s.prevZ, v = s.nextZ;
|
|
3871
|
-
for (; g && g.z >=
|
|
3872
|
-
if (g.x >= x && g.x <= d && g.y >= p && g.y <= y && g !==
|
|
3907
|
+
for (; g && g.z >= b && v && v.z <= E; ) {
|
|
3908
|
+
if (g.x >= x && g.x <= d && g.y >= p && g.y <= y && g !== n && 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 !== n && v !== o && tt(l, c, a, f, h, u, v.x, v.y) && L(v.prev, v, v.next) >= 0)) return !1;
|
|
3873
3909
|
v = v.nextZ;
|
|
3874
3910
|
}
|
|
3875
|
-
for (; g && g.z >=
|
|
3876
|
-
if (g.x >= x && g.x <= d && g.y >= p && g.y <= y && g !==
|
|
3911
|
+
for (; g && g.z >= b; ) {
|
|
3912
|
+
if (g.x >= x && g.x <= d && g.y >= p && g.y <= y && g !== n && g !== o && tt(l, c, a, f, h, u, g.x, g.y) && L(g.prev, g, g.next) >= 0) return !1;
|
|
3877
3913
|
g = g.prevZ;
|
|
3878
3914
|
}
|
|
3879
|
-
for (; v && v.z <=
|
|
3880
|
-
if (v.x >= x && v.x <= d && v.y >= p && v.y <= y && v !==
|
|
3915
|
+
for (; v && v.z <= E; ) {
|
|
3916
|
+
if (v.x >= x && v.x <= d && v.y >= p && v.y <= y && v !== n && v !== o && tt(l, c, a, f, h, u, v.x, v.y) && L(v.prev, v, v.next) >= 0) return !1;
|
|
3881
3917
|
v = v.nextZ;
|
|
3882
3918
|
}
|
|
3883
3919
|
return !0;
|
|
3884
3920
|
}
|
|
3885
|
-
function
|
|
3886
|
-
let
|
|
3921
|
+
function ci(s, t, e) {
|
|
3922
|
+
let i = s;
|
|
3887
3923
|
do {
|
|
3888
|
-
const
|
|
3889
|
-
!vt(
|
|
3890
|
-
} while (
|
|
3891
|
-
return Y(
|
|
3924
|
+
const n = i.prev, r = i.next.next;
|
|
3925
|
+
!vt(n, r) && Zt(n, i, i.next, r) && st(n, r) && st(r, n) && (t.push(n.i / e, i.i / e, r.i / e), ot(i), ot(i.next), i = s = r), i = i.next;
|
|
3926
|
+
} while (i !== s);
|
|
3927
|
+
return Y(i);
|
|
3892
3928
|
}
|
|
3893
|
-
function
|
|
3929
|
+
function hi(s, t, e, i, n, r) {
|
|
3894
3930
|
let o = s;
|
|
3895
3931
|
do {
|
|
3896
3932
|
let l = o.next.next;
|
|
3897
3933
|
for (; l !== o.prev; ) {
|
|
3898
|
-
if (o.i !== l.i &&
|
|
3934
|
+
if (o.i !== l.i && Ti(o, l)) {
|
|
3899
3935
|
let a = $t(o, l);
|
|
3900
|
-
o = Y(o, o.next), a = Y(a, a.next), rt(o, t, e,
|
|
3936
|
+
o = Y(o, o.next), a = Y(a, a.next), rt(o, t, e, i, n, r, 0), rt(a, t, e, i, n, r, 0);
|
|
3901
3937
|
return;
|
|
3902
3938
|
}
|
|
3903
3939
|
l = l.next;
|
|
@@ -3905,31 +3941,31 @@ function mn(s, t, e, n, i, r) {
|
|
|
3905
3941
|
o = o.next;
|
|
3906
3942
|
} while (o !== s);
|
|
3907
3943
|
}
|
|
3908
|
-
function
|
|
3909
|
-
const
|
|
3944
|
+
function fi(s, t, e, i) {
|
|
3945
|
+
const n = [];
|
|
3910
3946
|
for (let r = 0; r < t.length; r++) {
|
|
3911
|
-
const o = t[r] *
|
|
3912
|
-
a && (a === a.next && (a.steiner = !0),
|
|
3947
|
+
const o = t[r] * i, l = r < t.length - 1 ? t[r + 1] * i : s.length, a = jt(s, o, l, i, !1);
|
|
3948
|
+
a && (a === a.next && (a.steiner = !0), n.push(xi(a)));
|
|
3913
3949
|
}
|
|
3914
|
-
|
|
3915
|
-
for (const r of
|
|
3916
|
-
e =
|
|
3950
|
+
n.sort((r, o) => r.x - o.x);
|
|
3951
|
+
for (const r of n)
|
|
3952
|
+
e = di(r, e);
|
|
3917
3953
|
return e;
|
|
3918
3954
|
}
|
|
3919
|
-
function
|
|
3920
|
-
const e =
|
|
3955
|
+
function di(s, t) {
|
|
3956
|
+
const e = mi(s, t);
|
|
3921
3957
|
if (!e) return t;
|
|
3922
|
-
const
|
|
3923
|
-
return Y(
|
|
3958
|
+
const i = $t(e, s);
|
|
3959
|
+
return Y(i, i.next), Y(e, e.next);
|
|
3924
3960
|
}
|
|
3925
|
-
function
|
|
3961
|
+
function mi(s, t) {
|
|
3926
3962
|
let e = t;
|
|
3927
|
-
const
|
|
3963
|
+
const i = s.x, n = s.y;
|
|
3928
3964
|
let r = -1 / 0, o = null;
|
|
3929
3965
|
do {
|
|
3930
|
-
if (
|
|
3931
|
-
const f = e.x + (
|
|
3932
|
-
if (f <=
|
|
3966
|
+
if (n <= e.y && n >= e.next.y && e.next.y !== e.y) {
|
|
3967
|
+
const f = e.x + (n - e.y) / (e.next.y - e.y) * (e.next.x - e.x);
|
|
3968
|
+
if (f <= i && f > r && (r = f, o = e.x < e.next.x ? e : e.next, f === i))
|
|
3933
3969
|
return o;
|
|
3934
3970
|
}
|
|
3935
3971
|
e = e.next;
|
|
@@ -3939,62 +3975,62 @@ function vn(s, t) {
|
|
|
3939
3975
|
let c = 1 / 0;
|
|
3940
3976
|
e = o;
|
|
3941
3977
|
do {
|
|
3942
|
-
if (
|
|
3943
|
-
const f = Math.abs(
|
|
3944
|
-
st(e, s) && (f < c || f === c && (e.x > o.x ||
|
|
3978
|
+
if (i >= e.x && e.x >= a && i !== e.x && tt(n < h ? i : r, n, a, h, n < h ? r : i, n, e.x, e.y)) {
|
|
3979
|
+
const f = Math.abs(n - e.y) / (i - e.x);
|
|
3980
|
+
st(e, s) && (f < c || f === c && (e.x > o.x || pi(o, e))) && (o = e, c = f);
|
|
3945
3981
|
}
|
|
3946
3982
|
e = e.next;
|
|
3947
3983
|
} while (e !== l);
|
|
3948
3984
|
return o;
|
|
3949
3985
|
}
|
|
3950
|
-
function
|
|
3986
|
+
function pi(s, t) {
|
|
3951
3987
|
return L(s.prev, s, t.prev) < 0 && L(t.next, s, s.next) < 0;
|
|
3952
3988
|
}
|
|
3953
|
-
function
|
|
3954
|
-
let
|
|
3989
|
+
function gi(s, t, e, i) {
|
|
3990
|
+
let n = s;
|
|
3955
3991
|
do
|
|
3956
|
-
|
|
3957
|
-
while (
|
|
3958
|
-
|
|
3992
|
+
n.z === 0 && (n.z = yt(n.x, n.y, t, e, i)), n.prevZ = n.prev, n.nextZ = n.next, n = n.next;
|
|
3993
|
+
while (n !== s);
|
|
3994
|
+
n.prevZ.nextZ = null, n.prevZ = null, vi(n);
|
|
3959
3995
|
}
|
|
3960
|
-
function
|
|
3996
|
+
function vi(s) {
|
|
3961
3997
|
let t = 1, e;
|
|
3962
3998
|
do {
|
|
3963
|
-
let
|
|
3999
|
+
let i = s;
|
|
3964
4000
|
s = null;
|
|
3965
|
-
let
|
|
3966
|
-
for (e = 0;
|
|
4001
|
+
let n = null;
|
|
4002
|
+
for (e = 0; i; ) {
|
|
3967
4003
|
e++;
|
|
3968
|
-
let r =
|
|
4004
|
+
let r = i, o = 0;
|
|
3969
4005
|
for (let a = 0; a < t && (o++, r = r.nextZ, !!r); a++)
|
|
3970
4006
|
;
|
|
3971
4007
|
let l = t;
|
|
3972
4008
|
for (; o > 0 || l > 0 && r; ) {
|
|
3973
4009
|
let a;
|
|
3974
|
-
o !== 0 && (l === 0 || !r ||
|
|
4010
|
+
o !== 0 && (l === 0 || !r || i.z <= r.z) ? (a = i, i = i.nextZ, o--) : (a = r, r = r.nextZ, l--), n ? n.nextZ = a : s = a, a.prevZ = n, n = a;
|
|
3975
4011
|
}
|
|
3976
|
-
|
|
4012
|
+
i = r;
|
|
3977
4013
|
}
|
|
3978
|
-
|
|
4014
|
+
n.nextZ = null, t *= 2;
|
|
3979
4015
|
} while (e > 1);
|
|
3980
4016
|
return s;
|
|
3981
4017
|
}
|
|
3982
|
-
function yt(s, t, e,
|
|
3983
|
-
let r = (s - e) *
|
|
4018
|
+
function yt(s, t, e, i, n) {
|
|
4019
|
+
let r = (s - e) * n | 0, o = (t - i) * n | 0;
|
|
3984
4020
|
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;
|
|
3985
4021
|
}
|
|
3986
|
-
function
|
|
4022
|
+
function xi(s) {
|
|
3987
4023
|
let t = s, e = s;
|
|
3988
4024
|
do
|
|
3989
4025
|
(t.x < e.x || t.x === e.x && t.y < e.y) && (e = t), t = t.next;
|
|
3990
4026
|
while (t !== s);
|
|
3991
4027
|
return e;
|
|
3992
4028
|
}
|
|
3993
|
-
function tt(s, t, e,
|
|
3994
|
-
return (
|
|
4029
|
+
function tt(s, t, e, i, n, r, o, l) {
|
|
4030
|
+
return (n - o) * (t - l) - (s - o) * (r - l) >= 0 && (s - o) * (i - l) - (e - o) * (t - l) >= 0 && (e - o) * (r - l) - (n - o) * (i - l) >= 0;
|
|
3995
4031
|
}
|
|
3996
|
-
function
|
|
3997
|
-
return s.next.i !== t.i && s.prev.i !== t.i && !
|
|
4032
|
+
function Ti(s, t) {
|
|
4033
|
+
return s.next.i !== t.i && s.prev.i !== t.i && !Ei(s, t) && (st(s, t) && st(t, s) && bi(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);
|
|
3998
4034
|
}
|
|
3999
4035
|
function L(s, t, e) {
|
|
4000
4036
|
return (t.y - s.y) * (e.x - t.x) - (t.x - s.x) * (e.y - t.y);
|
|
@@ -4002,9 +4038,9 @@ function L(s, t, e) {
|
|
|
4002
4038
|
function vt(s, t) {
|
|
4003
4039
|
return s.x === t.x && s.y === t.y;
|
|
4004
4040
|
}
|
|
4005
|
-
function Zt(s, t, e,
|
|
4006
|
-
const
|
|
4007
|
-
return !!(
|
|
4041
|
+
function Zt(s, t, e, i) {
|
|
4042
|
+
const n = ct(L(s, t, e)), r = ct(L(s, t, i)), o = ct(L(e, i, s)), l = ct(L(e, i, t));
|
|
4043
|
+
return !!(n !== r && o !== l || n === 0 && ut(s, e, t) || r === 0 && ut(s, i, t) || o === 0 && ut(e, s, i) || l === 0 && ut(e, t, i));
|
|
4008
4044
|
}
|
|
4009
4045
|
function ut(s, t, e) {
|
|
4010
4046
|
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);
|
|
@@ -4012,7 +4048,7 @@ function ut(s, t, e) {
|
|
|
4012
4048
|
function ct(s) {
|
|
4013
4049
|
return s > 0 ? 1 : s < 0 ? -1 : 0;
|
|
4014
4050
|
}
|
|
4015
|
-
function
|
|
4051
|
+
function Ei(s, t) {
|
|
4016
4052
|
let e = s;
|
|
4017
4053
|
do {
|
|
4018
4054
|
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;
|
|
@@ -4023,21 +4059,21 @@ function yn(s, t) {
|
|
|
4023
4059
|
function st(s, t) {
|
|
4024
4060
|
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;
|
|
4025
4061
|
}
|
|
4026
|
-
function
|
|
4027
|
-
let e = s,
|
|
4028
|
-
const
|
|
4062
|
+
function bi(s, t) {
|
|
4063
|
+
let e = s, i = !1;
|
|
4064
|
+
const n = (s.x + t.x) / 2, r = (s.y + t.y) / 2;
|
|
4029
4065
|
do
|
|
4030
|
-
e.y > r != e.next.y > r && e.next.y !== e.y &&
|
|
4066
|
+
e.y > r != e.next.y > r && e.next.y !== e.y && n < (e.next.x - e.x) * (r - e.y) / (e.next.y - e.y) + e.x && (i = !i), e = e.next;
|
|
4031
4067
|
while (e !== s);
|
|
4032
|
-
return
|
|
4068
|
+
return i;
|
|
4033
4069
|
}
|
|
4034
4070
|
function $t(s, t) {
|
|
4035
|
-
const e = wt(s.i, s.x, s.y),
|
|
4036
|
-
return s.next = t, t.prev = s, e.next =
|
|
4071
|
+
const e = wt(s.i, s.x, s.y), i = wt(t.i, t.x, t.y), n = s.next, r = t.prev;
|
|
4072
|
+
return s.next = t, t.prev = s, e.next = n, n.prev = e, i.next = e, e.prev = i, r.next = i, i.prev = r, i;
|
|
4037
4073
|
}
|
|
4038
|
-
function Bt(s, t, e,
|
|
4039
|
-
const
|
|
4040
|
-
return
|
|
4074
|
+
function Bt(s, t, e, i) {
|
|
4075
|
+
const n = wt(s, t, e);
|
|
4076
|
+
return i ? (n.next = i.next, n.prev = i, i.next.prev = n, i.next = n) : (n.prev = n, n.next = n), n;
|
|
4041
4077
|
}
|
|
4042
4078
|
function ot(s) {
|
|
4043
4079
|
s.next.prev = s.prev, s.prev.next = s.next, s.prevZ && (s.prevZ.nextZ = s.nextZ), s.nextZ && (s.nextZ.prevZ = s.prevZ);
|
|
@@ -4055,11 +4091,11 @@ function wt(s, t, e) {
|
|
|
4055
4091
|
steiner: !1
|
|
4056
4092
|
};
|
|
4057
4093
|
}
|
|
4058
|
-
function
|
|
4059
|
-
let
|
|
4060
|
-
for (let r = t, o = e -
|
|
4061
|
-
|
|
4062
|
-
return
|
|
4094
|
+
function Si(s, t, e, i) {
|
|
4095
|
+
let n = 0;
|
|
4096
|
+
for (let r = t, o = e - i; r < e; r += i)
|
|
4097
|
+
n += (s[o] - s[r]) * (s[r + 1] + s[o + 1]), o = r;
|
|
4098
|
+
return n;
|
|
4063
4099
|
}
|
|
4064
4100
|
const R = {
|
|
4065
4101
|
parallaxX: 0.4,
|
|
@@ -4122,8 +4158,10 @@ class Et extends HTMLElement {
|
|
|
4122
4158
|
static get observedAttributes() {
|
|
4123
4159
|
return [
|
|
4124
4160
|
"src",
|
|
4125
|
-
"
|
|
4126
|
-
"
|
|
4161
|
+
"map-src",
|
|
4162
|
+
"map-width",
|
|
4163
|
+
"map-height",
|
|
4164
|
+
"map-fps",
|
|
4127
4165
|
"depth-model",
|
|
4128
4166
|
"logo-src",
|
|
4129
4167
|
"source-type",
|
|
@@ -4174,12 +4212,12 @@ class Et extends HTMLElement {
|
|
|
4174
4212
|
"muted"
|
|
4175
4213
|
];
|
|
4176
4214
|
}
|
|
4177
|
-
reinitAttributes = ["src", "
|
|
4215
|
+
reinitAttributes = ["src", "map-src", "map-width", "map-height", "map-fps", "depth-model", "logo-src", "source-type"];
|
|
4178
4216
|
canInit() {
|
|
4179
4217
|
const t = !!this.getAttribute("logo-src");
|
|
4180
4218
|
if (this.sourceType === "camera") return t;
|
|
4181
|
-
const e = !!this.getAttribute("src"),
|
|
4182
|
-
return e && t && (
|
|
4219
|
+
const e = !!this.getAttribute("src"), i = !!this.getAttribute("map-src"), n = !!this.getAttribute("depth-model");
|
|
4220
|
+
return e && t && (i || n);
|
|
4183
4221
|
}
|
|
4184
4222
|
_input = { x: 0, y: 0 };
|
|
4185
4223
|
/** The current input offset. Set this externally to drive the effect. */
|
|
@@ -4202,24 +4240,24 @@ class Et extends HTMLElement {
|
|
|
4202
4240
|
}
|
|
4203
4241
|
// --- Attribute helpers ---
|
|
4204
4242
|
getAttrFloat(t, e) {
|
|
4205
|
-
const
|
|
4206
|
-
if (
|
|
4207
|
-
const
|
|
4208
|
-
return Number.isFinite(
|
|
4243
|
+
const i = this.getAttribute(t);
|
|
4244
|
+
if (i === null) return e;
|
|
4245
|
+
const n = parseFloat(i);
|
|
4246
|
+
return Number.isFinite(n) ? n : e;
|
|
4209
4247
|
}
|
|
4210
4248
|
getAttrBool(t, e) {
|
|
4211
4249
|
if (!this.hasAttribute(t)) return e;
|
|
4212
|
-
const
|
|
4213
|
-
return !(
|
|
4250
|
+
const i = this.getAttribute(t);
|
|
4251
|
+
return !(i === "false" || i === "0");
|
|
4214
4252
|
}
|
|
4215
4253
|
getAttrColor(t, e) {
|
|
4216
|
-
const
|
|
4217
|
-
return
|
|
4254
|
+
const i = this.getAttribute(t) ?? e;
|
|
4255
|
+
return yi(i);
|
|
4218
4256
|
}
|
|
4219
4257
|
getAttrVec3(t, e) {
|
|
4220
|
-
const
|
|
4221
|
-
if (
|
|
4222
|
-
return [
|
|
4258
|
+
const n = (this.getAttribute(t) ?? e).split(",").map((o) => parseFloat(o.trim()));
|
|
4259
|
+
if (n.length >= 3 && n.every(Number.isFinite))
|
|
4260
|
+
return [n[0], n[1], n[2]];
|
|
4223
4261
|
const r = e.split(",").map((o) => parseFloat(o.trim()));
|
|
4224
4262
|
return [r[0], r[1], r[2]];
|
|
4225
4263
|
}
|
|
@@ -4409,8 +4447,8 @@ class Et extends HTMLElement {
|
|
|
4409
4447
|
disconnectedCallback() {
|
|
4410
4448
|
this.lifecycle.onDisconnected();
|
|
4411
4449
|
}
|
|
4412
|
-
attributeChangedCallback(t, e,
|
|
4413
|
-
this.lifecycle.onAttributeChanged(t, e,
|
|
4450
|
+
attributeChangedCallback(t, e, i) {
|
|
4451
|
+
this.lifecycle.onAttributeChanged(t, e, i);
|
|
4414
4452
|
}
|
|
4415
4453
|
// --- Shadow DOM setup ---
|
|
4416
4454
|
setupShadowDOM() {
|
|
@@ -4442,15 +4480,15 @@ class Et extends HTMLElement {
|
|
|
4442
4480
|
async doInit(t) {
|
|
4443
4481
|
const e = this.getAttribute("logo-src");
|
|
4444
4482
|
if (!this.container) return;
|
|
4445
|
-
const
|
|
4483
|
+
const i = this.sourceType === "camera", n = this.depthModel;
|
|
4446
4484
|
try {
|
|
4447
4485
|
let r, o, l, a = null;
|
|
4448
4486
|
const h = (d) => {
|
|
4449
4487
|
this.emit("layershift-portal:model-progress", d);
|
|
4450
4488
|
};
|
|
4451
|
-
if (
|
|
4489
|
+
if (i) {
|
|
4452
4490
|
const [d, y] = await Promise.all([
|
|
4453
|
-
|
|
4491
|
+
Nt(
|
|
4454
4492
|
{ video: { facingMode: "user" } },
|
|
4455
4493
|
{ parent: this.shadow }
|
|
4456
4494
|
),
|
|
@@ -4460,59 +4498,67 @@ class Et extends HTMLElement {
|
|
|
4460
4498
|
d.dispose();
|
|
4461
4499
|
return;
|
|
4462
4500
|
}
|
|
4463
|
-
if (r = d, l = y,
|
|
4464
|
-
if (a = await dt(
|
|
4501
|
+
if (r = d, l = y, n) {
|
|
4502
|
+
if (a = await dt(n, J, Q, h), t.aborted) {
|
|
4465
4503
|
a.dispose(), r.dispose();
|
|
4466
4504
|
return;
|
|
4467
4505
|
}
|
|
4468
|
-
o =
|
|
4506
|
+
o = X(J, Q);
|
|
4469
4507
|
} else
|
|
4470
|
-
o =
|
|
4508
|
+
o = X(r.width, r.height);
|
|
4471
4509
|
} else {
|
|
4472
|
-
const d = this.getAttribute("src"), y = this.getAttribute("
|
|
4510
|
+
const d = this.getAttribute("src"), y = this.getAttribute("map-src"), b = !!y, E = this.sourceType === "image" || /\.(jpe?g|png|webp|gif|avif|bmp)(\?|$)/i.test(d);
|
|
4473
4511
|
if (b) {
|
|
4474
|
-
const [v, m
|
|
4475
|
-
|
|
4512
|
+
const [g, v, m] = await Promise.all([
|
|
4513
|
+
E ? ft(d) : ht(d, {
|
|
4476
4514
|
parent: this.shadow,
|
|
4477
4515
|
loop: this.shouldLoop,
|
|
4478
4516
|
muted: this.shouldMute
|
|
4479
4517
|
}),
|
|
4480
|
-
kt(
|
|
4518
|
+
kt(
|
|
4519
|
+
y,
|
|
4520
|
+
this.getAttrFloat("map-width", 512),
|
|
4521
|
+
this.getAttrFloat("map-height", 512),
|
|
4522
|
+
this.getAttrFloat("map-fps", 5)
|
|
4523
|
+
),
|
|
4481
4524
|
Tt(e)
|
|
4482
4525
|
]);
|
|
4483
4526
|
if (t.aborted) {
|
|
4484
|
-
|
|
4527
|
+
g.dispose();
|
|
4485
4528
|
return;
|
|
4486
4529
|
}
|
|
4487
|
-
r =
|
|
4488
|
-
} else if (
|
|
4489
|
-
const [v, m
|
|
4490
|
-
|
|
4530
|
+
r = g, o = v, l = m;
|
|
4531
|
+
} else if (n) {
|
|
4532
|
+
const [g, v, m] = await Promise.all([
|
|
4533
|
+
E ? ft(d) : ht(d, {
|
|
4491
4534
|
parent: this.shadow,
|
|
4492
4535
|
loop: this.shouldLoop,
|
|
4493
4536
|
muted: this.shouldMute
|
|
4494
4537
|
}),
|
|
4495
|
-
dt(
|
|
4538
|
+
dt(n, J, Q, h),
|
|
4496
4539
|
Tt(e)
|
|
4497
4540
|
]);
|
|
4498
4541
|
if (t.aborted) {
|
|
4499
|
-
|
|
4542
|
+
g.dispose(), v.dispose();
|
|
4500
4543
|
return;
|
|
4501
4544
|
}
|
|
4502
|
-
if (r =
|
|
4503
|
-
const
|
|
4504
|
-
if (
|
|
4505
|
-
const
|
|
4545
|
+
if (r = g, a = v, l = m, E || !r.isLive) {
|
|
4546
|
+
const T = r.getImageSource();
|
|
4547
|
+
if (T) {
|
|
4548
|
+
const w = await a.submitFrameAndWait(T);
|
|
4506
4549
|
o = {
|
|
4507
|
-
|
|
4508
|
-
|
|
4550
|
+
width: J,
|
|
4551
|
+
height: Q,
|
|
4552
|
+
fps: 1,
|
|
4553
|
+
frameCount: 1,
|
|
4554
|
+
frames: [w]
|
|
4509
4555
|
};
|
|
4510
4556
|
} else
|
|
4511
|
-
o =
|
|
4557
|
+
o = X(J, Q);
|
|
4512
4558
|
} else
|
|
4513
|
-
o =
|
|
4559
|
+
o = X(J, Q);
|
|
4514
4560
|
} else
|
|
4515
|
-
throw new Error("Either
|
|
4561
|
+
throw new Error("Either map-src or depth-model must be provided.");
|
|
4516
4562
|
}
|
|
4517
4563
|
this.source = r, this.depthEstimator = a, this.mesh = l, this.loopCount = 0, this.attachSourceEventListeners(r);
|
|
4518
4564
|
const c = this.container?.clientWidth || r.width, f = this.parallaxMax / Math.max(c, 1);
|
|
@@ -4565,7 +4611,7 @@ class Et extends HTMLElement {
|
|
|
4565
4611
|
lightDirection: this.lightDirection3
|
|
4566
4612
|
};
|
|
4567
4613
|
if (t.aborted) return;
|
|
4568
|
-
this.renderer = new
|
|
4614
|
+
this.renderer = new $e(this.container, x), this.renderer.initialize(r, o.width, o.height, l);
|
|
4569
4615
|
const p = a;
|
|
4570
4616
|
if (this.renderer.start(
|
|
4571
4617
|
r,
|
|
@@ -4573,15 +4619,15 @@ class Et extends HTMLElement {
|
|
|
4573
4619
|
() => ({ x: this._input.x, y: this._input.y }),
|
|
4574
4620
|
(d, y) => {
|
|
4575
4621
|
if (p) {
|
|
4576
|
-
const
|
|
4577
|
-
|
|
4622
|
+
const b = r.getImageSource();
|
|
4623
|
+
b && p.submitFrame(b);
|
|
4578
4624
|
}
|
|
4579
4625
|
this.emit("layershift-portal:frame", {
|
|
4580
4626
|
currentTime: d,
|
|
4581
4627
|
frameNumber: y
|
|
4582
4628
|
});
|
|
4583
4629
|
}
|
|
4584
|
-
), !
|
|
4630
|
+
), !i && r.isLive && this.shouldAutoplay && r.play)
|
|
4585
4631
|
try {
|
|
4586
4632
|
await r.play();
|
|
4587
4633
|
} catch {
|
|
@@ -4602,15 +4648,15 @@ class Et extends HTMLElement {
|
|
|
4602
4648
|
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;
|
|
4603
4649
|
}
|
|
4604
4650
|
}
|
|
4605
|
-
function
|
|
4651
|
+
function yi(s) {
|
|
4606
4652
|
const t = s.replace("#", "");
|
|
4607
4653
|
if (t.length === 3) {
|
|
4608
|
-
const e = parseInt(t[0] + t[0], 16) / 255,
|
|
4609
|
-
return [e,
|
|
4654
|
+
const e = parseInt(t[0] + t[0], 16) / 255, i = parseInt(t[1] + t[1], 16) / 255, n = parseInt(t[2] + t[2], 16) / 255;
|
|
4655
|
+
return [e, i, n];
|
|
4610
4656
|
}
|
|
4611
4657
|
if (t.length === 6) {
|
|
4612
|
-
const e = parseInt(t.substring(0, 2), 16) / 255,
|
|
4613
|
-
return [e,
|
|
4658
|
+
const e = parseInt(t.substring(0, 2), 16) / 255, i = parseInt(t.substring(2, 4), 16) / 255, n = parseInt(t.substring(4, 6), 16) / 255;
|
|
4659
|
+
return [e, i, n];
|
|
4614
4660
|
}
|
|
4615
4661
|
return [0, 0, 0];
|
|
4616
4662
|
}
|
|
@@ -4620,49 +4666,49 @@ function V(s, t, e) {
|
|
|
4620
4666
|
function W(s, t, e) {
|
|
4621
4667
|
return s + (t - s) * e;
|
|
4622
4668
|
}
|
|
4623
|
-
const
|
|
4624
|
-
function
|
|
4625
|
-
const e = t?.sensitivityX ?? 1,
|
|
4669
|
+
const N = 100, Kt = 0.06;
|
|
4670
|
+
function wi(s, t) {
|
|
4671
|
+
const e = t?.sensitivityX ?? 1, i = t?.sensitivityY ?? 1, n = t?.lerpFactor ?? 0.08;
|
|
4626
4672
|
let r = 0, o = 0, l = 0, a = 0, h = 0, c = !0;
|
|
4627
4673
|
const f = (p) => {
|
|
4628
|
-
const d = s.getBoundingClientRect(), y = (p.clientX - d.left) / d.width * 2 - 1,
|
|
4629
|
-
r = V(y, -1, 1), o = V(
|
|
4674
|
+
const d = s.getBoundingClientRect(), y = (p.clientX - d.left) / d.width * 2 - 1, b = (p.clientY - d.top) / d.height * 2 - 1;
|
|
4675
|
+
r = V(y, -1, 1), o = V(b, -1, 1);
|
|
4630
4676
|
}, u = () => {
|
|
4631
4677
|
r = 0, o = 0;
|
|
4632
4678
|
}, x = () => {
|
|
4633
|
-
c && (l = W(l, r,
|
|
4679
|
+
c && (l = W(l, r, n), a = W(a, o, n), s.input = { x: l * e, y: a * i }, h = requestAnimationFrame(x));
|
|
4634
4680
|
};
|
|
4635
4681
|
return s.addEventListener("mousemove", f), s.addEventListener("mouseleave", u), h = requestAnimationFrame(x), () => {
|
|
4636
4682
|
c = !1, cancelAnimationFrame(h), s.removeEventListener("mousemove", f), s.removeEventListener("mouseleave", u);
|
|
4637
4683
|
};
|
|
4638
4684
|
}
|
|
4639
|
-
function
|
|
4640
|
-
const e = t?.sensitivityX ?? 1,
|
|
4685
|
+
function Ri(s, t) {
|
|
4686
|
+
const e = t?.sensitivityX ?? 1, i = t?.sensitivityY ?? 1, n = t?.lerpFactor ?? 0.08;
|
|
4641
4687
|
let r = 0, o = 0, l = 0, a = 0, h = 0, c = 0, f = 0, u = !0;
|
|
4642
|
-
const x = (
|
|
4643
|
-
const
|
|
4644
|
-
|
|
4645
|
-
}, p = (
|
|
4646
|
-
const
|
|
4647
|
-
if (!
|
|
4648
|
-
const g =
|
|
4649
|
-
r = V(g /
|
|
4688
|
+
const x = (b) => {
|
|
4689
|
+
const E = b.touches[0];
|
|
4690
|
+
E && (h = E.clientX - l * N, c = E.clientY - a * N, r = l, o = a);
|
|
4691
|
+
}, p = (b) => {
|
|
4692
|
+
const E = b.touches[0];
|
|
4693
|
+
if (!E) return;
|
|
4694
|
+
const g = E.clientX - h, v = E.clientY - c;
|
|
4695
|
+
r = V(g / N, -1, 1), o = V(v / N, -1, 1);
|
|
4650
4696
|
}, d = () => {
|
|
4651
4697
|
r = 0, o = 0;
|
|
4652
4698
|
}, y = () => {
|
|
4653
|
-
u && (l = W(l, r,
|
|
4699
|
+
u && (l = W(l, r, n), a = W(a, o, n), s.input = { x: l * e, y: a * i }, f = requestAnimationFrame(y));
|
|
4654
4700
|
};
|
|
4655
4701
|
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), () => {
|
|
4656
4702
|
u = !1, cancelAnimationFrame(f), s.removeEventListener("touchstart", x), s.removeEventListener("touchmove", p), s.removeEventListener("touchend", d), s.removeEventListener("touchcancel", d);
|
|
4657
4703
|
};
|
|
4658
4704
|
}
|
|
4659
|
-
function
|
|
4660
|
-
const e = t?.sensitivityX ?? 1,
|
|
4705
|
+
function Ai(s, t) {
|
|
4706
|
+
const e = t?.sensitivityX ?? 1, i = t?.sensitivityY ?? 1, n = t?.lerpFactor ?? Kt;
|
|
4661
4707
|
let r = 0, o = 0, l = 0, a = 0, h = 0, c = !0, f = !1;
|
|
4662
4708
|
const u = (y) => {
|
|
4663
4709
|
r = V((y.gamma ?? 0) / 45, -1, 1), o = V((y.beta ?? 0) / 45, -1, 1);
|
|
4664
4710
|
}, x = () => {
|
|
4665
|
-
c && (l = W(l, r,
|
|
4711
|
+
c && (l = W(l, r, n), a = W(a, o, n), s.input = { x: l * e, y: a * i }, h = requestAnimationFrame(x));
|
|
4666
4712
|
}, p = () => {
|
|
4667
4713
|
c && !f && (window.addEventListener("deviceorientation", u), f = !0);
|
|
4668
4714
|
}, d = DeviceOrientationEvent;
|
|
@@ -4673,9 +4719,9 @@ function Fn(s, t) {
|
|
|
4673
4719
|
c = !1, cancelAnimationFrame(h), f && (window.removeEventListener("deviceorientation", u), f = !1);
|
|
4674
4720
|
};
|
|
4675
4721
|
}
|
|
4676
|
-
function
|
|
4677
|
-
const e = t?.sensitivityX ?? 1,
|
|
4678
|
-
let o = 0, l = 0, a = 0, h = 0, c = 0, f = 0, u = 0, x = 0, p = !1, d = !1, y = !1,
|
|
4722
|
+
function Pi(s, t) {
|
|
4723
|
+
const e = t?.sensitivityX ?? 1, i = t?.sensitivityY ?? 1, n = t?.lerpFactor ?? 0.08, r = t?.lerpFactor ?? Kt;
|
|
4724
|
+
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;
|
|
4679
4725
|
const m = (S) => {
|
|
4680
4726
|
const D = s.getBoundingClientRect(), U = (S.clientX - D.left) / D.width * 2 - 1, M = (S.clientY - D.top) / D.height * 2 - 1;
|
|
4681
4727
|
o = V(U, -1, 1), l = V(M, -1, 1);
|
|
@@ -4683,12 +4729,12 @@ function Cn(s, t) {
|
|
|
4683
4729
|
o = 0, l = 0;
|
|
4684
4730
|
}, w = (S) => {
|
|
4685
4731
|
const D = S.touches[0];
|
|
4686
|
-
D && (p = !0,
|
|
4732
|
+
D && (p = !0, b = D.clientX - u * N, E = D.clientY - x * N, a = u, h = x, !d && !y && I());
|
|
4687
4733
|
}, A = (S) => {
|
|
4688
4734
|
const D = S.touches[0];
|
|
4689
4735
|
if (!D) return;
|
|
4690
|
-
const U = D.clientX -
|
|
4691
|
-
a = V(U /
|
|
4736
|
+
const U = D.clientX - b, M = D.clientY - E;
|
|
4737
|
+
a = V(U / N, -1, 1), h = V(M / N, -1, 1);
|
|
4692
4738
|
}, P = () => {
|
|
4693
4739
|
p = !1, a = 0, h = 0;
|
|
4694
4740
|
}, F = (S) => {
|
|
@@ -4705,7 +4751,7 @@ function Cn(s, t) {
|
|
|
4705
4751
|
}, C = () => {
|
|
4706
4752
|
if (!v) return;
|
|
4707
4753
|
let S, D, U;
|
|
4708
|
-
p ? (S = a, D = h, U =
|
|
4754
|
+
p ? (S = a, D = h, U = n) : d ? (S = c, D = f, U = r) : (S = o, D = l, U = n), u = W(u, S, U), x = W(x, D, U), s.input = { x: u * e, y: x * i }, g = requestAnimationFrame(C);
|
|
4709
4755
|
};
|
|
4710
4756
|
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), () => {
|
|
4711
4757
|
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);
|
|
@@ -4716,8 +4762,8 @@ customElements.get(Et.TAG_NAME) || customElements.define(Et.TAG_NAME, Et);
|
|
|
4716
4762
|
export {
|
|
4717
4763
|
xt as LayershiftElement,
|
|
4718
4764
|
Et as LayershiftPortalElement,
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
4765
|
+
Ai as connectGyro,
|
|
4766
|
+
wi as connectMouse,
|
|
4767
|
+
Pi as connectPointer,
|
|
4768
|
+
Ri as connectTouch
|
|
4723
4769
|
};
|