@react-three/fiber 10.0.0-canary.aecbafb → 10.0.0-canary.b6c54f2
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/dist/index.cjs +433 -1319
- package/dist/index.d.cts +169 -801
- package/dist/index.d.mts +169 -801
- package/dist/index.d.ts +169 -801
- package/dist/index.mjs +407 -1292
- package/dist/legacy.cjs +388 -1274
- package/dist/legacy.d.cts +169 -800
- package/dist/legacy.d.mts +169 -800
- package/dist/legacy.d.ts +169 -800
- package/dist/legacy.mjs +361 -1246
- package/dist/webgpu/index.cjs +953 -2062
- package/dist/webgpu/index.d.cts +202 -804
- package/dist/webgpu/index.d.mts +202 -804
- package/dist/webgpu/index.d.ts +202 -804
- package/dist/webgpu/index.mjs +928 -2036
- package/package.json +4 -3
- package/readme.md +2 -3
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as webgpu from 'three/webgpu';
|
|
2
|
-
import { RenderTarget, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, Scene,
|
|
3
|
-
import { WebGLRenderTarget, WebGLRenderer } from 'three';
|
|
2
|
+
import { CubeRenderTarget, RenderTarget, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, Scene, HalfFloatType, Color, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, CanvasTarget, Raycaster, OrthographicCamera, PerspectiveCamera, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGPURenderer } from 'three/webgpu';
|
|
3
|
+
import { WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer } from 'three';
|
|
4
4
|
import { Inspector } from 'three/addons/inspector/Inspector.js';
|
|
5
5
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
6
6
|
import * as React from 'react';
|
|
@@ -15,6 +15,8 @@ import { UltraHDRLoader } from 'three/examples/jsm/loaders/UltraHDRLoader.js';
|
|
|
15
15
|
import { GainMapLoader } from '@monogrid/gainmap-js';
|
|
16
16
|
import Tb, { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
|
|
17
17
|
import { createWithEqualityFn } from 'zustand/traditional';
|
|
18
|
+
import { getScheduler } from '@pmndrs/scheduler';
|
|
19
|
+
export { Scheduler, getScheduler } from '@pmndrs/scheduler';
|
|
18
20
|
import { suspend, preload, clear } from 'suspend-react';
|
|
19
21
|
|
|
20
22
|
function _mergeNamespaces(n, m) {
|
|
@@ -34,10 +36,13 @@ const R3F_BUILD_WEBGPU = true;
|
|
|
34
36
|
|
|
35
37
|
const THREE = /*#__PURE__*/_mergeNamespaces({
|
|
36
38
|
__proto__: null,
|
|
39
|
+
CubeRenderTarget: CubeRenderTarget,
|
|
40
|
+
CubeRenderTargetCompat: CubeRenderTarget,
|
|
37
41
|
Inspector: Inspector,
|
|
38
42
|
R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
|
|
39
43
|
R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
|
|
40
44
|
RenderTargetCompat: RenderTarget,
|
|
45
|
+
WebGLCubeRenderTarget: WebGLCubeRenderTarget,
|
|
41
46
|
WebGLRenderTarget: WebGLRenderTarget,
|
|
42
47
|
WebGLRenderer: WebGLRenderer
|
|
43
48
|
}, [webgpu]);
|
|
@@ -139,7 +144,7 @@ function useEnvironment({
|
|
|
139
144
|
useLoader$1.clear(loader, multiFile ? [files] : files);
|
|
140
145
|
}
|
|
141
146
|
renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
|
|
142
|
-
}, [files, renderer.domElement]);
|
|
147
|
+
}, [extension, files, loader, multiFile, renderer.domElement]);
|
|
143
148
|
const loaderResult = useLoader$1(
|
|
144
149
|
loader,
|
|
145
150
|
multiFile ? [files] : files,
|
|
@@ -311,15 +316,16 @@ function EnvironmentPortal({
|
|
|
311
316
|
preset = void 0,
|
|
312
317
|
extensions
|
|
313
318
|
}) {
|
|
314
|
-
const
|
|
319
|
+
const renderer = useThree$1((state) => state.renderer);
|
|
320
|
+
const isLegacy = useThree$1((state) => state.isLegacy);
|
|
315
321
|
const defaultScene = useThree$1((state) => state.scene);
|
|
316
322
|
const camera = React.useRef(null);
|
|
317
323
|
const [virtualScene] = React.useState(() => new Scene());
|
|
318
324
|
const fbo = React.useMemo(() => {
|
|
319
|
-
const fbo2 = new WebGLCubeRenderTarget(resolution);
|
|
325
|
+
const fbo2 = isLegacy ? new WebGLCubeRenderTarget(resolution) : new CubeRenderTarget(resolution);
|
|
320
326
|
fbo2.texture.type = HalfFloatType;
|
|
321
327
|
return fbo2;
|
|
322
|
-
}, [resolution]);
|
|
328
|
+
}, [resolution, isLegacy]);
|
|
323
329
|
React.useEffect(() => {
|
|
324
330
|
return () => {
|
|
325
331
|
fbo.dispose();
|
|
@@ -327,10 +333,10 @@ function EnvironmentPortal({
|
|
|
327
333
|
}, [fbo]);
|
|
328
334
|
React.useLayoutEffect(() => {
|
|
329
335
|
if (frames === 1) {
|
|
330
|
-
const autoClear =
|
|
331
|
-
|
|
332
|
-
camera.current.update(
|
|
333
|
-
|
|
336
|
+
const autoClear = renderer.autoClear;
|
|
337
|
+
renderer.autoClear = true;
|
|
338
|
+
camera.current.update(renderer, virtualScene);
|
|
339
|
+
renderer.autoClear = autoClear;
|
|
334
340
|
}
|
|
335
341
|
return setEnvProps(background, scene, defaultScene, fbo.texture, {
|
|
336
342
|
backgroundBlurriness: blur ?? backgroundBlurriness,
|
|
@@ -339,14 +345,29 @@ function EnvironmentPortal({
|
|
|
339
345
|
environmentIntensity,
|
|
340
346
|
environmentRotation
|
|
341
347
|
});
|
|
342
|
-
}, [
|
|
348
|
+
}, [
|
|
349
|
+
children,
|
|
350
|
+
virtualScene,
|
|
351
|
+
fbo.texture,
|
|
352
|
+
scene,
|
|
353
|
+
defaultScene,
|
|
354
|
+
background,
|
|
355
|
+
frames,
|
|
356
|
+
renderer,
|
|
357
|
+
blur,
|
|
358
|
+
backgroundBlurriness,
|
|
359
|
+
backgroundIntensity,
|
|
360
|
+
backgroundRotation,
|
|
361
|
+
environmentIntensity,
|
|
362
|
+
environmentRotation
|
|
363
|
+
]);
|
|
343
364
|
let count = 1;
|
|
344
365
|
useFrame$1(() => {
|
|
345
366
|
if (frames === Infinity || count < frames) {
|
|
346
|
-
const autoClear =
|
|
347
|
-
|
|
348
|
-
camera.current.update(
|
|
349
|
-
|
|
367
|
+
const autoClear = renderer.autoClear;
|
|
368
|
+
renderer.autoClear = true;
|
|
369
|
+
camera.current.update(renderer, virtualScene);
|
|
370
|
+
renderer.autoClear = autoClear;
|
|
350
371
|
count++;
|
|
351
372
|
}
|
|
352
373
|
});
|
|
@@ -410,9 +431,9 @@ function Environment(props) {
|
|
|
410
431
|
return props.ground ? /* @__PURE__ */ jsx(EnvironmentGround, { ...props }) : props.map ? /* @__PURE__ */ jsx(EnvironmentMap, { ...props }) : props.children ? /* @__PURE__ */ jsx(EnvironmentPortal, { ...props }) : /* @__PURE__ */ jsx(EnvironmentCube, { ...props });
|
|
411
432
|
}
|
|
412
433
|
|
|
413
|
-
var __defProp
|
|
414
|
-
var __defNormalProp
|
|
415
|
-
var __publicField
|
|
434
|
+
var __defProp = Object.defineProperty;
|
|
435
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
436
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
416
437
|
const act = React["act"];
|
|
417
438
|
const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React.useLayoutEffect : React.useEffect;
|
|
418
439
|
function useMutableCallback(fn) {
|
|
@@ -444,7 +465,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
|
|
|
444
465
|
return _a = class extends React.Component {
|
|
445
466
|
constructor() {
|
|
446
467
|
super(...arguments);
|
|
447
|
-
__publicField
|
|
468
|
+
__publicField(this, "state", { error: false });
|
|
448
469
|
}
|
|
449
470
|
componentDidCatch(err) {
|
|
450
471
|
this.props.set(err);
|
|
@@ -452,7 +473,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
|
|
|
452
473
|
render() {
|
|
453
474
|
return this.state.error ? null : this.props.children;
|
|
454
475
|
}
|
|
455
|
-
}, __publicField
|
|
476
|
+
}, __publicField(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
|
|
456
477
|
})();
|
|
457
478
|
|
|
458
479
|
const is = {
|
|
@@ -589,8 +610,7 @@ function prepare(target, root, type, props) {
|
|
|
589
610
|
object,
|
|
590
611
|
eventCount: 0,
|
|
591
612
|
handlers: {},
|
|
592
|
-
isHidden: false
|
|
593
|
-
deferredRefs: []
|
|
613
|
+
isHidden: false
|
|
594
614
|
};
|
|
595
615
|
if (object) object.__r3f = instance;
|
|
596
616
|
}
|
|
@@ -747,6 +767,17 @@ function unregisterVisibility(store, object) {
|
|
|
747
767
|
internal.visibilityRegistry.delete(object.uuid);
|
|
748
768
|
internal.occlusionCache.delete(object);
|
|
749
769
|
}
|
|
770
|
+
function updateVisibilityHandlers(store, object, handlers) {
|
|
771
|
+
const { internal } = store.getState();
|
|
772
|
+
const entry = internal.visibilityRegistry.get(object.uuid);
|
|
773
|
+
if (!entry) return false;
|
|
774
|
+
entry.handlers = handlers;
|
|
775
|
+
if ((handlers.onOccluded || handlers.onVisible) && !internal.occlusionEnabled) {
|
|
776
|
+
object.occlusionTest = true;
|
|
777
|
+
enableOcclusion(store);
|
|
778
|
+
}
|
|
779
|
+
return true;
|
|
780
|
+
}
|
|
750
781
|
function checkVisibility(state) {
|
|
751
782
|
const { internal, camera } = state;
|
|
752
783
|
const registry = internal.visibilityRegistry;
|
|
@@ -934,10 +965,7 @@ function applyProps(object, props) {
|
|
|
934
965
|
continue;
|
|
935
966
|
}
|
|
936
967
|
if (value === void 0) continue;
|
|
937
|
-
if (isFromRef(value))
|
|
938
|
-
instance?.deferredRefs?.push({ prop, ref: value[FROM_REF] });
|
|
939
|
-
continue;
|
|
940
|
-
}
|
|
968
|
+
if (isFromRef(value)) continue;
|
|
941
969
|
if (isOnce(value)) {
|
|
942
970
|
if (instance?.appliedOnce?.has(prop)) continue;
|
|
943
971
|
if (instance) {
|
|
@@ -973,6 +1001,19 @@ function applyProps(object, props) {
|
|
|
973
1001
|
} else if (isVectorLike(target) && is.num(value)) {
|
|
974
1002
|
if ("setScalar" in target && typeof target.setScalar === "function") target.setScalar(value);
|
|
975
1003
|
else target.set(value);
|
|
1004
|
+
} else if (root instanceof ShaderMaterial && key === "uniforms" && is.obj(value)) {
|
|
1005
|
+
if (!is.obj(root.uniforms)) root.uniforms = {};
|
|
1006
|
+
const uniforms = root.uniforms;
|
|
1007
|
+
const nextUniforms = value;
|
|
1008
|
+
for (const name in nextUniforms) {
|
|
1009
|
+
const uniform = nextUniforms[name];
|
|
1010
|
+
const targetUniform = uniforms[name];
|
|
1011
|
+
if (targetUniform) Object.assign(targetUniform, uniform);
|
|
1012
|
+
else {
|
|
1013
|
+
const nextUniform = uniform instanceof Uniform ? uniform.clone() : new Uniform(uniform.value);
|
|
1014
|
+
uniforms[name] = nextUniform;
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
976
1017
|
} else {
|
|
977
1018
|
root[key] = value;
|
|
978
1019
|
if (key.endsWith("Node") && root.isMaterial) {
|
|
@@ -991,6 +1032,9 @@ function applyProps(object, props) {
|
|
|
991
1032
|
if (instance.eventCount && object2.raycast !== null) {
|
|
992
1033
|
rootState.internal.interaction.push(object2);
|
|
993
1034
|
}
|
|
1035
|
+
}
|
|
1036
|
+
if (instance?.parent && rootState?.internal && instance.object?.isObject3D) {
|
|
1037
|
+
const object2 = instance.object;
|
|
994
1038
|
const root = findInitialRoot(instance);
|
|
995
1039
|
const visibilityHandlers = {
|
|
996
1040
|
onFramed: instance.handlers.onFramed,
|
|
@@ -998,7 +1042,9 @@ function applyProps(object, props) {
|
|
|
998
1042
|
onVisible: instance.handlers.onVisible
|
|
999
1043
|
};
|
|
1000
1044
|
if (hasVisibilityHandlers(visibilityHandlers)) {
|
|
1001
|
-
|
|
1045
|
+
if (!updateVisibilityHandlers(root, object2, visibilityHandlers)) {
|
|
1046
|
+
registerVisibility(root, object2, visibilityHandlers);
|
|
1047
|
+
}
|
|
1002
1048
|
} else {
|
|
1003
1049
|
unregisterVisibility(root, object2);
|
|
1004
1050
|
}
|
|
@@ -1266,7 +1312,7 @@ function createEvents(store) {
|
|
|
1266
1312
|
}
|
|
1267
1313
|
function processDeferredPointer(event, pointerId) {
|
|
1268
1314
|
const state = store.getState();
|
|
1269
|
-
const {
|
|
1315
|
+
const { internal } = state;
|
|
1270
1316
|
if (!state.events.enabled) return;
|
|
1271
1317
|
const filter = filterPointerEvents;
|
|
1272
1318
|
const hits = intersect(event, filter);
|
|
@@ -1501,6 +1547,7 @@ function createPointerEvents(store) {
|
|
|
1501
1547
|
}
|
|
1502
1548
|
},
|
|
1503
1549
|
connect: (target) => {
|
|
1550
|
+
if (!target) return;
|
|
1504
1551
|
const { set, events } = store.getState();
|
|
1505
1552
|
events.disconnect?.();
|
|
1506
1553
|
set((state) => ({ events: { ...state.events, connected: target } }));
|
|
@@ -1525,6 +1572,7 @@ function createPointerEvents(store) {
|
|
|
1525
1572
|
set((state) => ({ events: { ...state.events, connected: void 0 } }));
|
|
1526
1573
|
}
|
|
1527
1574
|
},
|
|
1575
|
+
// PREVIEW (A8): the XR pointer registration API may change before stable.
|
|
1528
1576
|
registerPointer: (config) => {
|
|
1529
1577
|
const pointerId = nextXRPointerId++;
|
|
1530
1578
|
xrPointers.set(pointerId, config);
|
|
@@ -1611,1036 +1659,11 @@ function notifyAlpha({ message, link }) {
|
|
|
1611
1659
|
}
|
|
1612
1660
|
}
|
|
1613
1661
|
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
const
|
|
1618
|
-
|
|
1619
|
-
constructor() {
|
|
1620
|
-
/** Ordered list of phase nodes */
|
|
1621
|
-
__publicField$1(this, "phases", []);
|
|
1622
|
-
/** Quick lookup by name */
|
|
1623
|
-
__publicField$1(this, "phaseMap", /* @__PURE__ */ new Map());
|
|
1624
|
-
/** Cached ordered names (invalidated on changes) */
|
|
1625
|
-
__publicField$1(this, "orderedNamesCache", null);
|
|
1626
|
-
this.initializeDefaultPhases();
|
|
1627
|
-
}
|
|
1628
|
-
//* Initialization --------------------------------
|
|
1629
|
-
initializeDefaultPhases() {
|
|
1630
|
-
for (const name of DEFAULT_PHASES) {
|
|
1631
|
-
const node = { name, isAutoGenerated: false };
|
|
1632
|
-
this.phases.push(node);
|
|
1633
|
-
this.phaseMap.set(name, node);
|
|
1634
|
-
}
|
|
1635
|
-
this.invalidateCache();
|
|
1636
|
-
}
|
|
1637
|
-
//* Public API --------------------------------
|
|
1638
|
-
/**
|
|
1639
|
-
* Add a named phase to the graph
|
|
1640
|
-
* @param name - Phase name (must be unique)
|
|
1641
|
-
* @param options - Position options (before or after another phase)
|
|
1642
|
-
*/
|
|
1643
|
-
addPhase(name, options = {}) {
|
|
1644
|
-
if (this.phaseMap.has(name)) {
|
|
1645
|
-
console.warn(`[useFrame] Phase "${name}" already exists`);
|
|
1646
|
-
return;
|
|
1647
|
-
}
|
|
1648
|
-
const { before, after } = options;
|
|
1649
|
-
const node = { name, isAutoGenerated: false };
|
|
1650
|
-
let insertIndex = this.phases.length;
|
|
1651
|
-
const targetIndex = this.getPhaseIndex(before ?? after);
|
|
1652
|
-
if (targetIndex !== -1) {
|
|
1653
|
-
insertIndex = before ? targetIndex : targetIndex + 1;
|
|
1654
|
-
} else {
|
|
1655
|
-
const constraintType = before ? "before" : "after";
|
|
1656
|
-
console.warn(`[useFrame] Phase "${before ?? after}" not found for '${constraintType}' constraint`);
|
|
1657
|
-
}
|
|
1658
|
-
this.phases.splice(insertIndex, 0, node);
|
|
1659
|
-
this.phaseMap.set(name, node);
|
|
1660
|
-
this.invalidateCache();
|
|
1661
|
-
}
|
|
1662
|
-
/**
|
|
1663
|
-
* Get ordered list of phase names
|
|
1664
|
-
*/
|
|
1665
|
-
getOrderedPhases() {
|
|
1666
|
-
if (this.orderedNamesCache === null) this.orderedNamesCache = this.phases.map((p) => p.name);
|
|
1667
|
-
return this.orderedNamesCache;
|
|
1668
|
-
}
|
|
1669
|
-
/**
|
|
1670
|
-
* Check if a phase exists
|
|
1671
|
-
*/
|
|
1672
|
-
hasPhase(name) {
|
|
1673
|
-
return this.phaseMap.has(name);
|
|
1674
|
-
}
|
|
1675
|
-
/**
|
|
1676
|
-
* Get the index of a phase (-1 if not found)
|
|
1677
|
-
*/
|
|
1678
|
-
getPhaseIndex(name) {
|
|
1679
|
-
if (!name) return -1;
|
|
1680
|
-
return this.phases.findIndex((p) => p.name === name);
|
|
1681
|
-
}
|
|
1682
|
-
/**
|
|
1683
|
-
* Ensure a phase exists, creating an auto-generated one if needed.
|
|
1684
|
-
* Used for resolving before/after constraints.
|
|
1685
|
-
*
|
|
1686
|
-
* @param name - The phase name to ensure exists
|
|
1687
|
-
* @returns The phase name (may be auto-generated like 'before:render')
|
|
1688
|
-
*/
|
|
1689
|
-
ensurePhase(name) {
|
|
1690
|
-
if (this.phaseMap.has(name)) return name;
|
|
1691
|
-
const node = { name, isAutoGenerated: true };
|
|
1692
|
-
this.phases.push(node);
|
|
1693
|
-
this.phaseMap.set(name, node);
|
|
1694
|
-
this.invalidateCache();
|
|
1695
|
-
return name;
|
|
1696
|
-
}
|
|
1697
|
-
/**
|
|
1698
|
-
* Resolve where a job with before/after constraints should go.
|
|
1699
|
-
* Creates auto-generated phases if needed.
|
|
1700
|
-
*
|
|
1701
|
-
* @param before - Phase(s) to run before
|
|
1702
|
-
* @param after - Phase(s) to run after
|
|
1703
|
-
* @returns The resolved phase name
|
|
1704
|
-
*/
|
|
1705
|
-
resolveConstraintPhase(before, after) {
|
|
1706
|
-
const beforeArr = before ? Array.isArray(before) ? before : [before] : [];
|
|
1707
|
-
const afterArr = after ? Array.isArray(after) ? after : [after] : [];
|
|
1708
|
-
if (beforeArr.length > 0) {
|
|
1709
|
-
return this.ensureAutoPhase(beforeArr[0], "before", 0);
|
|
1710
|
-
}
|
|
1711
|
-
if (afterArr.length > 0) {
|
|
1712
|
-
return this.ensureAutoPhase(afterArr[0], "after", 1);
|
|
1713
|
-
}
|
|
1714
|
-
return "update";
|
|
1715
|
-
}
|
|
1716
|
-
/**
|
|
1717
|
-
* Ensure an auto-generated phase exists relative to a target phase.
|
|
1718
|
-
* Creates the phase if it doesn't exist, inserting it at the correct position.
|
|
1719
|
-
*
|
|
1720
|
-
* @param target - The target phase name to position relative to
|
|
1721
|
-
* @param prefix - Prefix for auto-generated phase name ('before' or 'after')
|
|
1722
|
-
* @param offset - Insertion offset (0 for before, 1 for after)
|
|
1723
|
-
* @returns The auto-generated phase name
|
|
1724
|
-
*/
|
|
1725
|
-
ensureAutoPhase(target, prefix, offset) {
|
|
1726
|
-
const autoName = `${prefix}:${target}`;
|
|
1727
|
-
if (this.phaseMap.has(autoName)) return autoName;
|
|
1728
|
-
const node = { name: autoName, isAutoGenerated: true };
|
|
1729
|
-
const targetIndex = this.getPhaseIndex(target);
|
|
1730
|
-
if (targetIndex !== -1) this.phases.splice(targetIndex + offset, 0, node);
|
|
1731
|
-
else this.phases.push(node);
|
|
1732
|
-
this.phaseMap.set(autoName, node);
|
|
1733
|
-
this.invalidateCache();
|
|
1734
|
-
return autoName;
|
|
1735
|
-
}
|
|
1736
|
-
// Internal --------------------------------
|
|
1737
|
-
invalidateCache() {
|
|
1738
|
-
this.orderedNamesCache = null;
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
|
-
|
|
1742
|
-
function rebuildSortedJobs(jobs, phaseGraph) {
|
|
1743
|
-
const orderedPhases = phaseGraph.getOrderedPhases();
|
|
1744
|
-
const buckets = /* @__PURE__ */ new Map();
|
|
1745
|
-
for (const phase of orderedPhases) {
|
|
1746
|
-
buckets.set(phase, []);
|
|
1747
|
-
}
|
|
1748
|
-
for (const job of jobs.values()) {
|
|
1749
|
-
if (!job.enabled) continue;
|
|
1750
|
-
let bucket = buckets.get(job.phase);
|
|
1751
|
-
if (!bucket) {
|
|
1752
|
-
bucket = [];
|
|
1753
|
-
buckets.set(job.phase, bucket);
|
|
1754
|
-
}
|
|
1755
|
-
bucket.push(job);
|
|
1756
|
-
}
|
|
1757
|
-
const sortedBuckets = [];
|
|
1758
|
-
for (const phase of orderedPhases) {
|
|
1759
|
-
const bucket = buckets.get(phase);
|
|
1760
|
-
if (!bucket || bucket.length === 0) continue;
|
|
1761
|
-
bucket.sort((a, b) => {
|
|
1762
|
-
if (a.priority !== b.priority) return b.priority - a.priority;
|
|
1763
|
-
return a.index - b.index;
|
|
1764
|
-
});
|
|
1765
|
-
sortedBuckets.push(hasCrossJobConstraints(bucket) ? topologicalSort(bucket) : bucket);
|
|
1766
|
-
}
|
|
1767
|
-
for (const [phase, bucket] of buckets) {
|
|
1768
|
-
if (!orderedPhases.includes(phase) && bucket.length > 0) {
|
|
1769
|
-
bucket.sort((a, b) => {
|
|
1770
|
-
if (a.priority !== b.priority) return b.priority - a.priority;
|
|
1771
|
-
return a.index - b.index;
|
|
1772
|
-
});
|
|
1773
|
-
sortedBuckets.push(bucket);
|
|
1774
|
-
}
|
|
1775
|
-
}
|
|
1776
|
-
return sortedBuckets.flat();
|
|
1777
|
-
}
|
|
1778
|
-
function hasCrossJobConstraints(bucket) {
|
|
1779
|
-
const jobIds = new Set(bucket.map((j) => j.id));
|
|
1780
|
-
for (const job of bucket) {
|
|
1781
|
-
for (const ref of job.before) {
|
|
1782
|
-
if (jobIds.has(ref)) return true;
|
|
1783
|
-
}
|
|
1784
|
-
for (const ref of job.after) {
|
|
1785
|
-
if (jobIds.has(ref)) return true;
|
|
1786
|
-
}
|
|
1787
|
-
}
|
|
1788
|
-
return false;
|
|
1789
|
-
}
|
|
1790
|
-
function topologicalSort(jobs) {
|
|
1791
|
-
const n = jobs.length;
|
|
1792
|
-
if (n <= 1) return jobs;
|
|
1793
|
-
const jobMap = /* @__PURE__ */ new Map();
|
|
1794
|
-
const inDegree = /* @__PURE__ */ new Map();
|
|
1795
|
-
const adjacency = /* @__PURE__ */ new Map();
|
|
1796
|
-
for (const job of jobs) {
|
|
1797
|
-
jobMap.set(job.id, job);
|
|
1798
|
-
inDegree.set(job.id, 0);
|
|
1799
|
-
adjacency.set(job.id, []);
|
|
1800
|
-
}
|
|
1801
|
-
for (const job of jobs) {
|
|
1802
|
-
for (const ref of job.before) {
|
|
1803
|
-
if (jobMap.has(ref)) {
|
|
1804
|
-
adjacency.get(job.id).push(ref);
|
|
1805
|
-
inDegree.set(ref, inDegree.get(ref) + 1);
|
|
1806
|
-
}
|
|
1807
|
-
}
|
|
1808
|
-
for (const ref of job.after) {
|
|
1809
|
-
if (jobMap.has(ref)) {
|
|
1810
|
-
adjacency.get(ref).push(job.id);
|
|
1811
|
-
inDegree.set(job.id, inDegree.get(job.id) + 1);
|
|
1812
|
-
}
|
|
1813
|
-
}
|
|
1814
|
-
}
|
|
1815
|
-
const queue = [];
|
|
1816
|
-
for (const job of jobs) {
|
|
1817
|
-
if (inDegree.get(job.id) === 0) {
|
|
1818
|
-
queue.push(job);
|
|
1819
|
-
}
|
|
1820
|
-
}
|
|
1821
|
-
queue.sort((a, b) => {
|
|
1822
|
-
if (a.priority !== b.priority) return b.priority - a.priority;
|
|
1823
|
-
return a.index - b.index;
|
|
1824
|
-
});
|
|
1825
|
-
const result = [];
|
|
1826
|
-
while (queue.length > 0) {
|
|
1827
|
-
const job = queue.shift();
|
|
1828
|
-
result.push(job);
|
|
1829
|
-
const neighbors = adjacency.get(job.id) || [];
|
|
1830
|
-
for (const neighborId of neighbors) {
|
|
1831
|
-
const newDegree = inDegree.get(neighborId) - 1;
|
|
1832
|
-
inDegree.set(neighborId, newDegree);
|
|
1833
|
-
if (newDegree === 0) {
|
|
1834
|
-
const neighbor = jobMap.get(neighborId);
|
|
1835
|
-
insertSorted(queue, neighbor);
|
|
1836
|
-
}
|
|
1837
|
-
}
|
|
1838
|
-
}
|
|
1839
|
-
if (result.length !== n) {
|
|
1840
|
-
console.warn("[useFrame] Circular dependency detected in job constraints");
|
|
1841
|
-
const resultIds = new Set(result.map((j) => j.id));
|
|
1842
|
-
for (const job of jobs) {
|
|
1843
|
-
if (!resultIds.has(job.id)) result.push(job);
|
|
1844
|
-
}
|
|
1845
|
-
}
|
|
1846
|
-
return result;
|
|
1847
|
-
}
|
|
1848
|
-
function insertSorted(arr, job) {
|
|
1849
|
-
let i = 0;
|
|
1850
|
-
while (i < arr.length) {
|
|
1851
|
-
const cmp = arr[i];
|
|
1852
|
-
if (job.priority > cmp.priority || job.priority === cmp.priority && job.index < cmp.index) {
|
|
1853
|
-
break;
|
|
1854
|
-
}
|
|
1855
|
-
i++;
|
|
1856
|
-
}
|
|
1857
|
-
arr.splice(i, 0, job);
|
|
1858
|
-
}
|
|
1859
|
-
|
|
1860
|
-
function shouldRun(job, now) {
|
|
1861
|
-
if (!job.enabled) return false;
|
|
1862
|
-
if (!job.fps) return true;
|
|
1863
|
-
const minInterval = 1e3 / job.fps;
|
|
1864
|
-
const lastRun = job.lastRun ?? 0;
|
|
1865
|
-
const elapsed = now - lastRun;
|
|
1866
|
-
if (elapsed < minInterval) return false;
|
|
1867
|
-
if (job.drop) {
|
|
1868
|
-
job.lastRun = now;
|
|
1869
|
-
} else {
|
|
1870
|
-
const steps = Math.floor(elapsed / minInterval);
|
|
1871
|
-
job.lastRun = lastRun + steps * minInterval;
|
|
1872
|
-
if (job.lastRun < now - minInterval) {
|
|
1873
|
-
job.lastRun = now;
|
|
1874
|
-
}
|
|
1875
|
-
}
|
|
1876
|
-
return true;
|
|
1877
|
-
}
|
|
1878
|
-
function resetJobTiming(job) {
|
|
1879
|
-
job.lastRun = void 0;
|
|
1880
|
-
}
|
|
1881
|
-
|
|
1882
|
-
var __defProp = Object.defineProperty;
|
|
1883
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1884
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
1885
|
-
const hmrData = (() => {
|
|
1886
|
-
if (typeof process !== "undefined" && process.env.NODE_ENV === "test") return void 0;
|
|
1887
|
-
if (typeof import_meta_hot !== "undefined") return import_meta_hot;
|
|
1888
|
-
try {
|
|
1889
|
-
return (0, eval)("import.meta.hot");
|
|
1890
|
-
} catch {
|
|
1891
|
-
return void 0;
|
|
1892
|
-
}
|
|
1893
|
-
})();
|
|
1894
|
-
const _Scheduler = class _Scheduler {
|
|
1895
|
-
//* Constructor ================================
|
|
1896
|
-
constructor() {
|
|
1897
|
-
//* Critical State ================================
|
|
1898
|
-
__publicField(this, "roots", /* @__PURE__ */ new Map());
|
|
1899
|
-
__publicField(this, "phaseGraph");
|
|
1900
|
-
__publicField(this, "loopState", {
|
|
1901
|
-
running: false,
|
|
1902
|
-
rafHandle: null,
|
|
1903
|
-
lastTime: null,
|
|
1904
|
-
// null = uninitialized, 0+ = valid timestamp
|
|
1905
|
-
frameCount: 0,
|
|
1906
|
-
elapsedTime: 0,
|
|
1907
|
-
createdAt: performance.now()
|
|
1908
|
-
});
|
|
1909
|
-
__publicField(this, "stoppedTime", 0);
|
|
1910
|
-
//* Private State ================================
|
|
1911
|
-
__publicField(this, "nextRootIndex", 0);
|
|
1912
|
-
__publicField(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
|
|
1913
|
-
__publicField(this, "globalAfterJobs", /* @__PURE__ */ new Map());
|
|
1914
|
-
__publicField(this, "nextGlobalIndex", 0);
|
|
1915
|
-
__publicField(this, "idleCallbacks", /* @__PURE__ */ new Set());
|
|
1916
|
-
__publicField(this, "nextJobIndex", 0);
|
|
1917
|
-
__publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
|
|
1918
|
-
__publicField(this, "pendingFrames", 0);
|
|
1919
|
-
__publicField(this, "_frameloop", "always");
|
|
1920
|
-
//* Independent Mode & Error Handling State ================================
|
|
1921
|
-
__publicField(this, "_independent", false);
|
|
1922
|
-
__publicField(this, "errorHandler", null);
|
|
1923
|
-
__publicField(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
|
|
1924
|
-
//* Core Loop Execution Methods ================================
|
|
1925
|
-
/**
|
|
1926
|
-
* Main RAF loop callback.
|
|
1927
|
-
* Executes frame, handles demand mode, and schedules next frame.
|
|
1928
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
1929
|
-
* @returns {void}
|
|
1930
|
-
* @private
|
|
1931
|
-
*/
|
|
1932
|
-
__publicField(this, "loop", (timestamp) => {
|
|
1933
|
-
if (!this.loopState.running) return;
|
|
1934
|
-
this.executeFrame(timestamp);
|
|
1935
|
-
if (this._frameloop === "demand") {
|
|
1936
|
-
this.pendingFrames = Math.max(0, this.pendingFrames - 1);
|
|
1937
|
-
if (this.pendingFrames === 0) {
|
|
1938
|
-
this.notifyIdle(timestamp);
|
|
1939
|
-
return this.stop();
|
|
1940
|
-
}
|
|
1941
|
-
}
|
|
1942
|
-
this.loopState.rafHandle = requestAnimationFrame(this.loop);
|
|
1943
|
-
});
|
|
1944
|
-
this.phaseGraph = new PhaseGraph();
|
|
1945
|
-
}
|
|
1946
|
-
static get instance() {
|
|
1947
|
-
return globalThis[_Scheduler.INSTANCE_KEY] ?? null;
|
|
1948
|
-
}
|
|
1949
|
-
static set instance(value) {
|
|
1950
|
-
globalThis[_Scheduler.INSTANCE_KEY] = value;
|
|
1951
|
-
}
|
|
1952
|
-
/**
|
|
1953
|
-
* Get the global scheduler instance (creates if doesn't exist).
|
|
1954
|
-
* Uses HMR data to preserve instance across hot reloads.
|
|
1955
|
-
* @returns {Scheduler} The singleton scheduler instance
|
|
1956
|
-
*/
|
|
1957
|
-
static get() {
|
|
1958
|
-
if (!_Scheduler.instance && hmrData?.data?.scheduler) {
|
|
1959
|
-
_Scheduler.instance = hmrData.data.scheduler;
|
|
1960
|
-
}
|
|
1961
|
-
if (!_Scheduler.instance) {
|
|
1962
|
-
_Scheduler.instance = new _Scheduler();
|
|
1963
|
-
if (hmrData?.data) {
|
|
1964
|
-
hmrData.data.scheduler = _Scheduler.instance;
|
|
1965
|
-
}
|
|
1966
|
-
}
|
|
1967
|
-
return _Scheduler.instance;
|
|
1968
|
-
}
|
|
1969
|
-
/**
|
|
1970
|
-
* Reset the singleton instance. Stops the loop and clears all state.
|
|
1971
|
-
* Primarily used for testing to ensure clean state between tests.
|
|
1972
|
-
* @returns {void}
|
|
1973
|
-
*/
|
|
1974
|
-
static reset() {
|
|
1975
|
-
if (_Scheduler.instance) {
|
|
1976
|
-
_Scheduler.instance.stop();
|
|
1977
|
-
_Scheduler.instance = null;
|
|
1978
|
-
}
|
|
1979
|
-
if (hmrData?.data) {
|
|
1980
|
-
hmrData.data.scheduler = null;
|
|
1981
|
-
}
|
|
1982
|
-
}
|
|
1983
|
-
//* Getters & Setters ================================
|
|
1984
|
-
get phases() {
|
|
1985
|
-
return this.phaseGraph.getOrderedPhases();
|
|
1986
|
-
}
|
|
1987
|
-
get frameloop() {
|
|
1988
|
-
return this._frameloop;
|
|
1989
|
-
}
|
|
1990
|
-
set frameloop(mode) {
|
|
1991
|
-
if (this._frameloop === mode) return;
|
|
1992
|
-
const wasAlways = this._frameloop === "always";
|
|
1993
|
-
this._frameloop = mode;
|
|
1994
|
-
if (mode === "always" && !this.loopState.running && this.roots.size > 0) this.start();
|
|
1995
|
-
else if (mode !== "always" && wasAlways) this.stop();
|
|
1996
|
-
}
|
|
1997
|
-
get isRunning() {
|
|
1998
|
-
return this.loopState.running;
|
|
1999
|
-
}
|
|
2000
|
-
get isReady() {
|
|
2001
|
-
return this.roots.size > 0;
|
|
2002
|
-
}
|
|
2003
|
-
get independent() {
|
|
2004
|
-
return this._independent;
|
|
2005
|
-
}
|
|
2006
|
-
set independent(value) {
|
|
2007
|
-
this._independent = value;
|
|
2008
|
-
if (value) this.ensureDefaultRoot();
|
|
2009
|
-
}
|
|
2010
|
-
//* Root Management Methods ================================
|
|
2011
|
-
/**
|
|
2012
|
-
* Register a root (Canvas) with the scheduler.
|
|
2013
|
-
* The first root to register starts the RAF loop (if frameloop='always').
|
|
2014
|
-
* @param {string} id - Unique identifier for this root
|
|
2015
|
-
* @param {RootOptions} [options] - Optional configuration with getState and onError callbacks
|
|
2016
|
-
* @returns {() => void} Unsubscribe function to remove this root
|
|
2017
|
-
*/
|
|
2018
|
-
registerRoot(id, options = {}) {
|
|
2019
|
-
if (this.roots.has(id)) {
|
|
2020
|
-
console.warn(`[Scheduler] Root "${id}" already registered`);
|
|
2021
|
-
return () => this.unregisterRoot(id);
|
|
2022
|
-
}
|
|
2023
|
-
const entry = {
|
|
2024
|
-
id,
|
|
2025
|
-
getState: options.getState ?? (() => ({})),
|
|
2026
|
-
jobs: /* @__PURE__ */ new Map(),
|
|
2027
|
-
sortedJobs: [],
|
|
2028
|
-
needsRebuild: false
|
|
2029
|
-
};
|
|
2030
|
-
if (options.onError) {
|
|
2031
|
-
this.errorHandler = options.onError;
|
|
2032
|
-
}
|
|
2033
|
-
this.roots.set(id, entry);
|
|
2034
|
-
if (this.roots.size === 1) {
|
|
2035
|
-
this.notifyRootReady();
|
|
2036
|
-
if (this._frameloop === "always") this.start();
|
|
2037
|
-
}
|
|
2038
|
-
return () => this.unregisterRoot(id);
|
|
2039
|
-
}
|
|
2040
|
-
/**
|
|
2041
|
-
* Unregister a root from the scheduler.
|
|
2042
|
-
* Cleans up all job state listeners for this root's jobs.
|
|
2043
|
-
* The last root to unregister stops the RAF loop.
|
|
2044
|
-
* @param {string} id - The root ID to unregister
|
|
2045
|
-
* @returns {void}
|
|
2046
|
-
*/
|
|
2047
|
-
unregisterRoot(id) {
|
|
2048
|
-
const root = this.roots.get(id);
|
|
2049
|
-
if (!root) return;
|
|
2050
|
-
for (const jobId of root.jobs.keys()) {
|
|
2051
|
-
this.jobStateListeners.delete(jobId);
|
|
2052
|
-
}
|
|
2053
|
-
this.roots.delete(id);
|
|
2054
|
-
if (this.roots.size === 0) {
|
|
2055
|
-
this.stop();
|
|
2056
|
-
this.errorHandler = null;
|
|
2057
|
-
}
|
|
2058
|
-
}
|
|
2059
|
-
/**
|
|
2060
|
-
* Subscribe to be notified when a root becomes available.
|
|
2061
|
-
* Fires immediately if a root already exists.
|
|
2062
|
-
* @param {() => void} callback - Function called when first root registers
|
|
2063
|
-
* @returns {() => void} Unsubscribe function
|
|
2064
|
-
*/
|
|
2065
|
-
onRootReady(callback) {
|
|
2066
|
-
if (this.roots.size > 0) {
|
|
2067
|
-
callback();
|
|
2068
|
-
return () => {
|
|
2069
|
-
};
|
|
2070
|
-
}
|
|
2071
|
-
this.rootReadyCallbacks.add(callback);
|
|
2072
|
-
return () => this.rootReadyCallbacks.delete(callback);
|
|
2073
|
-
}
|
|
2074
|
-
/**
|
|
2075
|
-
* Notify all registered root-ready callbacks.
|
|
2076
|
-
* Called when the first root registers.
|
|
2077
|
-
* @returns {void}
|
|
2078
|
-
* @private
|
|
2079
|
-
*/
|
|
2080
|
-
notifyRootReady() {
|
|
2081
|
-
for (const cb of this.rootReadyCallbacks) {
|
|
2082
|
-
try {
|
|
2083
|
-
cb();
|
|
2084
|
-
} catch (error) {
|
|
2085
|
-
console.error("[Scheduler] Error in root-ready callback:", error);
|
|
2086
|
-
}
|
|
2087
|
-
}
|
|
2088
|
-
this.rootReadyCallbacks.clear();
|
|
2089
|
-
}
|
|
2090
|
-
/**
|
|
2091
|
-
* Ensure a default root exists for independent mode.
|
|
2092
|
-
* Creates a minimal root with no state provider.
|
|
2093
|
-
* @returns {void}
|
|
2094
|
-
* @private
|
|
2095
|
-
*/
|
|
2096
|
-
ensureDefaultRoot() {
|
|
2097
|
-
if (!this.roots.has("__default__")) {
|
|
2098
|
-
this.registerRoot("__default__");
|
|
2099
|
-
}
|
|
2100
|
-
}
|
|
2101
|
-
/**
|
|
2102
|
-
* Trigger error handling for job errors.
|
|
2103
|
-
* Uses the bound error handler if available, otherwise logs to console.
|
|
2104
|
-
* @param {Error} error - The error to handle
|
|
2105
|
-
* @returns {void}
|
|
2106
|
-
*/
|
|
2107
|
-
triggerError(error) {
|
|
2108
|
-
if (this.errorHandler) this.errorHandler(error);
|
|
2109
|
-
else console.error("[Scheduler]", error);
|
|
2110
|
-
}
|
|
2111
|
-
//* Phase Management Methods ================================
|
|
2112
|
-
/**
|
|
2113
|
-
* Add a named phase to the scheduler's execution order.
|
|
2114
|
-
* Marks all roots for rebuild to incorporate the new phase.
|
|
2115
|
-
* @param {string} name - The phase name (e.g., 'physics', 'postprocess')
|
|
2116
|
-
* @param {AddPhaseOptions} [options] - Positioning options (before/after other phases)
|
|
2117
|
-
* @returns {void}
|
|
2118
|
-
* @example
|
|
2119
|
-
* scheduler.addPhase('physics', { before: 'update' });
|
|
2120
|
-
* scheduler.addPhase('postprocess', { after: 'render' });
|
|
2121
|
-
*/
|
|
2122
|
-
addPhase(name, options) {
|
|
2123
|
-
this.phaseGraph.addPhase(name, options);
|
|
2124
|
-
for (const root of this.roots.values()) {
|
|
2125
|
-
root.needsRebuild = true;
|
|
2126
|
-
}
|
|
2127
|
-
}
|
|
2128
|
-
/**
|
|
2129
|
-
* Check if a phase exists in the scheduler.
|
|
2130
|
-
* @param {string} name - The phase name to check
|
|
2131
|
-
* @returns {boolean} True if the phase exists
|
|
2132
|
-
*/
|
|
2133
|
-
hasPhase(name) {
|
|
2134
|
-
return this.phaseGraph.hasPhase(name);
|
|
2135
|
-
}
|
|
2136
|
-
//* Global Job Registration Methods (Deprecated APIs) ================================
|
|
2137
|
-
/**
|
|
2138
|
-
* Register a global job that runs once per frame (not per-root).
|
|
2139
|
-
* Used internally by deprecated addEffect/addAfterEffect APIs.
|
|
2140
|
-
* @param {'before' | 'after'} phase - When to run: 'before' all roots or 'after' all roots
|
|
2141
|
-
* @param {string} id - Unique identifier for this global job
|
|
2142
|
-
* @param {(timestamp: number) => void} callback - Function called each frame with RAF timestamp
|
|
2143
|
-
* @returns {() => void} Unsubscribe function to remove this global job
|
|
2144
|
-
* @deprecated Use useFrame with phases instead
|
|
2145
|
-
*/
|
|
2146
|
-
registerGlobal(phase, id, callback) {
|
|
2147
|
-
const job = { id, callback };
|
|
2148
|
-
if (phase === "before") {
|
|
2149
|
-
this.globalBeforeJobs.set(id, job);
|
|
2150
|
-
} else {
|
|
2151
|
-
this.globalAfterJobs.set(id, job);
|
|
2152
|
-
}
|
|
2153
|
-
return () => {
|
|
2154
|
-
if (phase === "before") this.globalBeforeJobs.delete(id);
|
|
2155
|
-
else this.globalAfterJobs.delete(id);
|
|
2156
|
-
};
|
|
2157
|
-
}
|
|
2158
|
-
//* Idle Callback Methods (Deprecated API) ================================
|
|
2159
|
-
/**
|
|
2160
|
-
* Register an idle callback that fires when the loop stops.
|
|
2161
|
-
* Used internally by deprecated addTail API.
|
|
2162
|
-
* @param {(timestamp: number) => void} callback - Function called when loop becomes idle
|
|
2163
|
-
* @returns {() => void} Unsubscribe function to remove this idle callback
|
|
2164
|
-
* @deprecated Use demand mode with invalidate() instead
|
|
2165
|
-
*/
|
|
2166
|
-
onIdle(callback) {
|
|
2167
|
-
this.idleCallbacks.add(callback);
|
|
2168
|
-
return () => this.idleCallbacks.delete(callback);
|
|
2169
|
-
}
|
|
2170
|
-
/**
|
|
2171
|
-
* Notify all registered idle callbacks.
|
|
2172
|
-
* Called when the loop stops in demand mode.
|
|
2173
|
-
* @param {number} timestamp - The RAF timestamp when idle occurred
|
|
2174
|
-
* @returns {void}
|
|
2175
|
-
* @private
|
|
2176
|
-
*/
|
|
2177
|
-
notifyIdle(timestamp) {
|
|
2178
|
-
for (const cb of this.idleCallbacks) {
|
|
2179
|
-
try {
|
|
2180
|
-
cb(timestamp);
|
|
2181
|
-
} catch (error) {
|
|
2182
|
-
console.error("[Scheduler] Error in idle callback:", error);
|
|
2183
|
-
}
|
|
2184
|
-
}
|
|
2185
|
-
}
|
|
2186
|
-
//* Job Registration & Management Methods ================================
|
|
2187
|
-
/**
|
|
2188
|
-
* Register a job (frame callback) with a specific root.
|
|
2189
|
-
* This is the core registration method used by useFrame internally.
|
|
2190
|
-
* @param {FrameNextCallback} callback - The function to call each frame
|
|
2191
|
-
* @param {JobOptions & { rootId?: string; system?: boolean }} [options] - Job configuration
|
|
2192
|
-
* @param {string} [options.rootId] - Target root ID (defaults to first registered root)
|
|
2193
|
-
* @param {string} [options.id] - Unique job ID (auto-generated if not provided)
|
|
2194
|
-
* @param {string} [options.phase] - Execution phase (defaults to 'update')
|
|
2195
|
-
* @param {number} [options.priority] - Priority within phase (higher = earlier, default 0)
|
|
2196
|
-
* @param {number} [options.fps] - FPS throttle limit
|
|
2197
|
-
* @param {boolean} [options.drop] - Drop frames when behind (default true)
|
|
2198
|
-
* @param {boolean} [options.enabled] - Whether job is active (default true)
|
|
2199
|
-
* @param {boolean} [options.system] - Internal flag for system jobs (not user-facing)
|
|
2200
|
-
* @returns {() => void} Unsubscribe function to remove this job
|
|
2201
|
-
*/
|
|
2202
|
-
register(callback, options = {}) {
|
|
2203
|
-
const rootId = options.rootId;
|
|
2204
|
-
const root = rootId ? this.roots.get(rootId) : this.roots.values().next().value;
|
|
2205
|
-
if (!root) {
|
|
2206
|
-
console.warn("[Scheduler] No root registered. Is this inside a Canvas?");
|
|
2207
|
-
return () => {
|
|
2208
|
-
};
|
|
2209
|
-
}
|
|
2210
|
-
const id = options.id ?? this.generateJobId();
|
|
2211
|
-
let phase = options.phase ?? "update";
|
|
2212
|
-
if (!options.phase && (options.before || options.after)) {
|
|
2213
|
-
phase = this.phaseGraph.resolveConstraintPhase(options.before, options.after);
|
|
2214
|
-
}
|
|
2215
|
-
const before = this.normalizeConstraints(options.before);
|
|
2216
|
-
const after = this.normalizeConstraints(options.after);
|
|
2217
|
-
const job = {
|
|
2218
|
-
id,
|
|
2219
|
-
callback,
|
|
2220
|
-
phase,
|
|
2221
|
-
before,
|
|
2222
|
-
after,
|
|
2223
|
-
priority: options.priority ?? 0,
|
|
2224
|
-
index: this.nextJobIndex++,
|
|
2225
|
-
fps: options.fps,
|
|
2226
|
-
drop: options.drop ?? true,
|
|
2227
|
-
enabled: options.enabled ?? true,
|
|
2228
|
-
system: options.system ?? false
|
|
2229
|
-
};
|
|
2230
|
-
if (root.jobs.has(id)) {
|
|
2231
|
-
console.warn(`[useFrame] Job with id "${id}" already exists, replacing`);
|
|
2232
|
-
}
|
|
2233
|
-
root.jobs.set(id, job);
|
|
2234
|
-
root.needsRebuild = true;
|
|
2235
|
-
return () => this.unregister(id, root.id);
|
|
2236
|
-
}
|
|
2237
|
-
/**
|
|
2238
|
-
* Unregister a job by its ID.
|
|
2239
|
-
* Searches all roots if rootId is not provided.
|
|
2240
|
-
* @param {string} id - The job ID to unregister
|
|
2241
|
-
* @param {string} [rootId] - Optional root ID to search (searches all if not provided)
|
|
2242
|
-
* @returns {void}
|
|
2243
|
-
*/
|
|
2244
|
-
unregister(id, rootId) {
|
|
2245
|
-
const root = rootId ? this.roots.get(rootId) : Array.from(this.roots.values()).find((r) => r.jobs.has(id));
|
|
2246
|
-
if (root?.jobs.delete(id)) {
|
|
2247
|
-
root.needsRebuild = true;
|
|
2248
|
-
this.jobStateListeners.delete(id);
|
|
2249
|
-
}
|
|
2250
|
-
}
|
|
2251
|
-
/**
|
|
2252
|
-
* Update a job's options dynamically.
|
|
2253
|
-
* Searches all roots to find the job by ID.
|
|
2254
|
-
* Phase/constraint changes trigger a rebuild of the sorted job list.
|
|
2255
|
-
* @param {string} id - The job ID to update
|
|
2256
|
-
* @param {Partial<JobOptions>} options - The options to update
|
|
2257
|
-
* @returns {void}
|
|
2258
|
-
*/
|
|
2259
|
-
updateJob(id, options) {
|
|
2260
|
-
let job;
|
|
2261
|
-
let root;
|
|
2262
|
-
for (const r of this.roots.values()) {
|
|
2263
|
-
job = r.jobs.get(id);
|
|
2264
|
-
if (job) {
|
|
2265
|
-
root = r;
|
|
2266
|
-
break;
|
|
2267
|
-
}
|
|
2268
|
-
}
|
|
2269
|
-
if (!job || !root) return;
|
|
2270
|
-
if (options.priority !== void 0) job.priority = options.priority;
|
|
2271
|
-
if (options.fps !== void 0) job.fps = options.fps;
|
|
2272
|
-
if (options.drop !== void 0) job.drop = options.drop;
|
|
2273
|
-
if (options.enabled !== void 0) {
|
|
2274
|
-
const wasEnabled = job.enabled;
|
|
2275
|
-
job.enabled = options.enabled;
|
|
2276
|
-
if (!wasEnabled && job.enabled) resetJobTiming(job);
|
|
2277
|
-
if (wasEnabled !== job.enabled) root.needsRebuild = true;
|
|
2278
|
-
}
|
|
2279
|
-
if (options.phase !== void 0 || options.before !== void 0 || options.after !== void 0) {
|
|
2280
|
-
if (options.phase) job.phase = options.phase;
|
|
2281
|
-
if (options.before !== void 0) job.before = this.normalizeConstraints(options.before);
|
|
2282
|
-
if (options.after !== void 0) job.after = this.normalizeConstraints(options.after);
|
|
2283
|
-
root.needsRebuild = true;
|
|
2284
|
-
}
|
|
2285
|
-
}
|
|
2286
|
-
//* Job State Management Methods ================================
|
|
2287
|
-
/**
|
|
2288
|
-
* Check if a job is currently paused (disabled).
|
|
2289
|
-
* @param {string} id - The job ID to check
|
|
2290
|
-
* @returns {boolean} True if the job exists and is paused
|
|
2291
|
-
*/
|
|
2292
|
-
isJobPaused(id) {
|
|
2293
|
-
for (const root of this.roots.values()) {
|
|
2294
|
-
const job = root.jobs.get(id);
|
|
2295
|
-
if (job) return !job.enabled;
|
|
2296
|
-
}
|
|
2297
|
-
return false;
|
|
2298
|
-
}
|
|
2299
|
-
/**
|
|
2300
|
-
* Subscribe to state changes for a specific job.
|
|
2301
|
-
* Listener is called when job is paused or resumed.
|
|
2302
|
-
* @param {string} id - The job ID to subscribe to
|
|
2303
|
-
* @param {() => void} listener - Callback invoked on state changes
|
|
2304
|
-
* @returns {() => void} Unsubscribe function
|
|
2305
|
-
*/
|
|
2306
|
-
subscribeJobState(id, listener) {
|
|
2307
|
-
if (!this.jobStateListeners.has(id)) {
|
|
2308
|
-
this.jobStateListeners.set(id, /* @__PURE__ */ new Set());
|
|
2309
|
-
}
|
|
2310
|
-
this.jobStateListeners.get(id).add(listener);
|
|
2311
|
-
return () => {
|
|
2312
|
-
this.jobStateListeners.get(id)?.delete(listener);
|
|
2313
|
-
if (this.jobStateListeners.get(id)?.size === 0) {
|
|
2314
|
-
this.jobStateListeners.delete(id);
|
|
2315
|
-
}
|
|
2316
|
-
};
|
|
2317
|
-
}
|
|
2318
|
-
/**
|
|
2319
|
-
* Notify all listeners that a job's state has changed.
|
|
2320
|
-
* @param {string} id - The job ID that changed
|
|
2321
|
-
* @returns {void}
|
|
2322
|
-
* @private
|
|
2323
|
-
*/
|
|
2324
|
-
notifyJobStateChange(id) {
|
|
2325
|
-
this.jobStateListeners.get(id)?.forEach((listener) => listener());
|
|
2326
|
-
}
|
|
2327
|
-
/**
|
|
2328
|
-
* Pause a job by ID (sets enabled=false).
|
|
2329
|
-
* Notifies any subscribed state listeners.
|
|
2330
|
-
* @param {string} id - The job ID to pause
|
|
2331
|
-
* @returns {void}
|
|
2332
|
-
*/
|
|
2333
|
-
pauseJob(id) {
|
|
2334
|
-
this.updateJob(id, { enabled: false });
|
|
2335
|
-
this.notifyJobStateChange(id);
|
|
2336
|
-
}
|
|
2337
|
-
/**
|
|
2338
|
-
* Resume a paused job by ID (sets enabled=true).
|
|
2339
|
-
* Resets job timing to prevent frame accumulation.
|
|
2340
|
-
* Notifies any subscribed state listeners.
|
|
2341
|
-
* @param {string} id - The job ID to resume
|
|
2342
|
-
* @returns {void}
|
|
2343
|
-
*/
|
|
2344
|
-
resumeJob(id) {
|
|
2345
|
-
this.updateJob(id, { enabled: true });
|
|
2346
|
-
this.notifyJobStateChange(id);
|
|
2347
|
-
}
|
|
2348
|
-
//* Frame Loop Control Methods ================================
|
|
2349
|
-
/**
|
|
2350
|
-
* Start the requestAnimationFrame loop.
|
|
2351
|
-
* Resets timing state (elapsedTime, frameCount) on start.
|
|
2352
|
-
* No-op if already running.
|
|
2353
|
-
* @returns {void}
|
|
2354
|
-
*/
|
|
2355
|
-
start() {
|
|
2356
|
-
if (this.loopState.running) return;
|
|
2357
|
-
const { elapsedTime, createdAt } = this.loopState;
|
|
2358
|
-
let adjustedCreated = 0;
|
|
2359
|
-
if (this.stoppedTime > 0) {
|
|
2360
|
-
adjustedCreated = createdAt - (performance.now() - this.stoppedTime);
|
|
2361
|
-
this.stoppedTime = 0;
|
|
2362
|
-
}
|
|
2363
|
-
Object.assign(this.loopState, {
|
|
2364
|
-
running: true,
|
|
2365
|
-
elapsedTime: elapsedTime ?? 0,
|
|
2366
|
-
lastTime: performance.now(),
|
|
2367
|
-
createdAt: adjustedCreated > 0 ? adjustedCreated : performance.now(),
|
|
2368
|
-
frameCount: 0,
|
|
2369
|
-
rafHandle: requestAnimationFrame(this.loop)
|
|
2370
|
-
});
|
|
2371
|
-
}
|
|
2372
|
-
/**
|
|
2373
|
-
* Stop the requestAnimationFrame loop.
|
|
2374
|
-
* Cancels any pending RAF callback.
|
|
2375
|
-
* No-op if not running.
|
|
2376
|
-
* @returns {void}
|
|
2377
|
-
*/
|
|
2378
|
-
stop() {
|
|
2379
|
-
if (!this.loopState.running) return;
|
|
2380
|
-
this.loopState.running = false;
|
|
2381
|
-
if (this.loopState.rafHandle !== null) {
|
|
2382
|
-
cancelAnimationFrame(this.loopState.rafHandle);
|
|
2383
|
-
this.loopState.rafHandle = null;
|
|
2384
|
-
}
|
|
2385
|
-
this.stoppedTime = performance.now();
|
|
2386
|
-
}
|
|
2387
|
-
/**
|
|
2388
|
-
* Request frames to be rendered in demand mode.
|
|
2389
|
-
* Accumulates pending frames (capped at 60) and starts the loop if not running.
|
|
2390
|
-
* No-op if frameloop is not 'demand'.
|
|
2391
|
-
* @param {number} [frames=1] - Number of frames to request
|
|
2392
|
-
* @param {boolean} [stackFrames=false] - Whether to add frames to existing pending count
|
|
2393
|
-
* - `false` (default): Sets pending frames to the specified value (replaces existing count)
|
|
2394
|
-
* - `true`: Adds frames to existing pending count (useful for accumulating invalidations)
|
|
2395
|
-
* @returns {void}
|
|
2396
|
-
* @example
|
|
2397
|
-
* // Request a single frame render
|
|
2398
|
-
* scheduler.invalidate();
|
|
2399
|
-
*
|
|
2400
|
-
* @example
|
|
2401
|
-
* // Request 5 frames (e.g., for animations)
|
|
2402
|
-
* scheduler.invalidate(5);
|
|
2403
|
-
*
|
|
2404
|
-
* @example
|
|
2405
|
-
* // Set pending frames to exactly 3 (don't stack with existing)
|
|
2406
|
-
* scheduler.invalidate(3, false);
|
|
2407
|
-
*
|
|
2408
|
-
* @example
|
|
2409
|
-
* // Add 2 more frames to existing pending count
|
|
2410
|
-
* scheduler.invalidate(2, true);
|
|
2411
|
-
*/
|
|
2412
|
-
invalidate(frames = 1, stackFrames = false) {
|
|
2413
|
-
if (this._frameloop !== "demand") return;
|
|
2414
|
-
const baseFrames = stackFrames ? this.pendingFrames : 0;
|
|
2415
|
-
this.pendingFrames = Math.min(60, baseFrames + frames);
|
|
2416
|
-
if (!this.loopState.running && this.pendingFrames > 0) this.start();
|
|
2417
|
-
}
|
|
2418
|
-
/**
|
|
2419
|
-
* Reset timing state for deterministic testing.
|
|
2420
|
-
* Preserves jobs and roots but resets lastTime, frameCount, elapsedTime, etc.
|
|
2421
|
-
* @returns {void}
|
|
2422
|
-
*/
|
|
2423
|
-
resetTiming() {
|
|
2424
|
-
this.loopState.lastTime = null;
|
|
2425
|
-
this.loopState.frameCount = 0;
|
|
2426
|
-
this.loopState.elapsedTime = 0;
|
|
2427
|
-
this.loopState.createdAt = performance.now();
|
|
2428
|
-
}
|
|
2429
|
-
//* Manual Stepping Methods ================================
|
|
2430
|
-
/**
|
|
2431
|
-
* Manually execute a single frame for all roots.
|
|
2432
|
-
* Useful for frameloop='never' mode or testing scenarios.
|
|
2433
|
-
* @param {number} [timestamp] - Optional timestamp (defaults to performance.now())
|
|
2434
|
-
* @returns {void}
|
|
2435
|
-
* @example
|
|
2436
|
-
* // Manual control mode
|
|
2437
|
-
* scheduler.frameloop = 'never';
|
|
2438
|
-
* scheduler.step(); // Execute one frame
|
|
2439
|
-
*/
|
|
2440
|
-
step(timestamp) {
|
|
2441
|
-
const now = timestamp ?? performance.now();
|
|
2442
|
-
this.executeFrame(now);
|
|
2443
|
-
}
|
|
2444
|
-
/**
|
|
2445
|
-
* Manually execute a single job by its ID.
|
|
2446
|
-
* Useful for testing individual job callbacks in isolation.
|
|
2447
|
-
* @param {string} id - The job ID to step
|
|
2448
|
-
* @param {number} [timestamp] - Optional timestamp (defaults to performance.now())
|
|
2449
|
-
* @returns {void}
|
|
2450
|
-
*/
|
|
2451
|
-
stepJob(id, timestamp) {
|
|
2452
|
-
let job;
|
|
2453
|
-
let root;
|
|
2454
|
-
for (const r of this.roots.values()) {
|
|
2455
|
-
job = r.jobs.get(id);
|
|
2456
|
-
if (job) {
|
|
2457
|
-
root = r;
|
|
2458
|
-
break;
|
|
2459
|
-
}
|
|
2460
|
-
}
|
|
2461
|
-
if (!job || !root) {
|
|
2462
|
-
console.warn(`[Scheduler] Job "${id}" not found`);
|
|
2463
|
-
return;
|
|
2464
|
-
}
|
|
2465
|
-
const now = timestamp ?? performance.now();
|
|
2466
|
-
const deltaMs = this.loopState.lastTime !== null ? now - this.loopState.lastTime : 0;
|
|
2467
|
-
const delta = deltaMs / 1e3;
|
|
2468
|
-
const elapsed = now - this.loopState.createdAt;
|
|
2469
|
-
const providedState = root.getState?.() ?? {};
|
|
2470
|
-
const frameState = {
|
|
2471
|
-
...providedState,
|
|
2472
|
-
time: now,
|
|
2473
|
-
delta,
|
|
2474
|
-
elapsed,
|
|
2475
|
-
frame: this.loopState.frameCount
|
|
2476
|
-
};
|
|
2477
|
-
try {
|
|
2478
|
-
job.callback(frameState, delta);
|
|
2479
|
-
} catch (error) {
|
|
2480
|
-
console.error(`[Scheduler] Error in job "${job.id}":`, error);
|
|
2481
|
-
this.triggerError(error instanceof Error ? error : new Error(String(error)));
|
|
2482
|
-
}
|
|
2483
|
-
}
|
|
2484
|
-
/**
|
|
2485
|
-
* Execute a single frame across all roots.
|
|
2486
|
-
* Order: globalBefore → each root's jobs → globalAfter
|
|
2487
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
2488
|
-
* @returns {void}
|
|
2489
|
-
* @private
|
|
2490
|
-
*/
|
|
2491
|
-
executeFrame(timestamp) {
|
|
2492
|
-
const deltaMs = this.loopState.lastTime !== null ? timestamp - this.loopState.lastTime : 0;
|
|
2493
|
-
const delta = deltaMs / 1e3;
|
|
2494
|
-
this.loopState.lastTime = timestamp;
|
|
2495
|
-
this.loopState.frameCount++;
|
|
2496
|
-
this.loopState.elapsedTime += deltaMs;
|
|
2497
|
-
this.runGlobalJobs(this.globalBeforeJobs, timestamp);
|
|
2498
|
-
for (const root of this.roots.values()) {
|
|
2499
|
-
this.tickRoot(root, timestamp, delta);
|
|
2500
|
-
}
|
|
2501
|
-
this.runGlobalJobs(this.globalAfterJobs, timestamp);
|
|
2502
|
-
}
|
|
2503
|
-
/**
|
|
2504
|
-
* Run all global jobs from a job map.
|
|
2505
|
-
* Catches and logs errors without stopping execution.
|
|
2506
|
-
* @param {Map<string, GlobalJob>} jobs - The global jobs map to execute
|
|
2507
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
2508
|
-
* @returns {void}
|
|
2509
|
-
* @private
|
|
2510
|
-
*/
|
|
2511
|
-
runGlobalJobs(jobs, timestamp) {
|
|
2512
|
-
for (const job of jobs.values()) {
|
|
2513
|
-
try {
|
|
2514
|
-
job.callback(timestamp);
|
|
2515
|
-
} catch (error) {
|
|
2516
|
-
console.error(`[Scheduler] Error in global job "${job.id}":`, error);
|
|
2517
|
-
}
|
|
2518
|
-
}
|
|
2519
|
-
}
|
|
2520
|
-
/**
|
|
2521
|
-
* Execute all jobs for a single root in sorted order.
|
|
2522
|
-
* Rebuilds sorted job list if needed, then dispatches each job.
|
|
2523
|
-
* Errors are caught and propagated via triggerError.
|
|
2524
|
-
* @param {RootEntry} root - The root entry to tick
|
|
2525
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
2526
|
-
* @param {number} delta - Time since last frame in seconds
|
|
2527
|
-
* @returns {void}
|
|
2528
|
-
* @private
|
|
2529
|
-
*/
|
|
2530
|
-
tickRoot(root, timestamp, delta) {
|
|
2531
|
-
if (root.needsRebuild) {
|
|
2532
|
-
root.sortedJobs = rebuildSortedJobs(root.jobs, this.phaseGraph);
|
|
2533
|
-
root.needsRebuild = false;
|
|
2534
|
-
}
|
|
2535
|
-
const providedState = root.getState?.() ?? {};
|
|
2536
|
-
const frameState = {
|
|
2537
|
-
...providedState,
|
|
2538
|
-
time: timestamp,
|
|
2539
|
-
delta,
|
|
2540
|
-
elapsed: this.loopState.elapsedTime / 1e3,
|
|
2541
|
-
// Convert ms to seconds
|
|
2542
|
-
frame: this.loopState.frameCount
|
|
2543
|
-
};
|
|
2544
|
-
for (const job of root.sortedJobs) {
|
|
2545
|
-
if (!shouldRun(job, timestamp)) continue;
|
|
2546
|
-
try {
|
|
2547
|
-
job.callback(frameState, delta);
|
|
2548
|
-
} catch (error) {
|
|
2549
|
-
console.error(`[Scheduler] Error in job "${job.id}":`, error);
|
|
2550
|
-
this.triggerError(error instanceof Error ? error : new Error(String(error)));
|
|
2551
|
-
}
|
|
2552
|
-
}
|
|
2553
|
-
}
|
|
2554
|
-
//* Debug & Inspection Methods ================================
|
|
2555
|
-
/**
|
|
2556
|
-
* Get the total number of registered jobs across all roots.
|
|
2557
|
-
* Includes both per-root jobs and global before/after jobs.
|
|
2558
|
-
* @returns {number} Total job count
|
|
2559
|
-
*/
|
|
2560
|
-
getJobCount() {
|
|
2561
|
-
let count = 0;
|
|
2562
|
-
for (const root of this.roots.values()) {
|
|
2563
|
-
count += root.jobs.size;
|
|
2564
|
-
}
|
|
2565
|
-
return count + this.globalBeforeJobs.size + this.globalAfterJobs.size;
|
|
2566
|
-
}
|
|
2567
|
-
/**
|
|
2568
|
-
* Get all registered job IDs across all roots.
|
|
2569
|
-
* Includes both per-root jobs and global before/after jobs.
|
|
2570
|
-
* @returns {string[]} Array of all job IDs
|
|
2571
|
-
*/
|
|
2572
|
-
getJobIds() {
|
|
2573
|
-
const ids = [];
|
|
2574
|
-
for (const root of this.roots.values()) {
|
|
2575
|
-
ids.push(...root.jobs.keys());
|
|
2576
|
-
}
|
|
2577
|
-
ids.push(...this.globalBeforeJobs.keys());
|
|
2578
|
-
ids.push(...this.globalAfterJobs.keys());
|
|
2579
|
-
return ids;
|
|
2580
|
-
}
|
|
2581
|
-
/**
|
|
2582
|
-
* Get the number of registered roots (Canvas instances).
|
|
2583
|
-
* @returns {number} Number of registered roots
|
|
2584
|
-
*/
|
|
2585
|
-
getRootCount() {
|
|
2586
|
-
return this.roots.size;
|
|
2587
|
-
}
|
|
2588
|
-
/**
|
|
2589
|
-
* Check if any user (non-system) jobs are registered in a specific phase.
|
|
2590
|
-
* Used by the default render job to know if a user has taken over rendering.
|
|
2591
|
-
*
|
|
2592
|
-
* @param phase The phase to check
|
|
2593
|
-
* @param rootId Optional root ID to check (checks all roots if not provided)
|
|
2594
|
-
* @returns true if any user jobs exist in the phase
|
|
2595
|
-
*/
|
|
2596
|
-
hasUserJobsInPhase(phase, rootId) {
|
|
2597
|
-
const rootsToCheck = rootId ? [this.roots.get(rootId)].filter(Boolean) : Array.from(this.roots.values());
|
|
2598
|
-
return rootsToCheck.some((root) => {
|
|
2599
|
-
if (!root) return false;
|
|
2600
|
-
for (const job of root.jobs.values()) {
|
|
2601
|
-
if (job.phase === phase && !job.system && job.enabled) return true;
|
|
2602
|
-
}
|
|
2603
|
-
return false;
|
|
2604
|
-
});
|
|
2605
|
-
}
|
|
2606
|
-
//* Utility Methods ================================
|
|
2607
|
-
/**
|
|
2608
|
-
* Generate a unique root ID for automatic root registration.
|
|
2609
|
-
* @returns {string} A unique root ID in the format 'root_N'
|
|
2610
|
-
*/
|
|
2611
|
-
generateRootId() {
|
|
2612
|
-
return `root_${this.nextRootIndex++}`;
|
|
2613
|
-
}
|
|
2614
|
-
/**
|
|
2615
|
-
* Generate a unique job ID.
|
|
2616
|
-
* @returns {string} A unique job ID in the format 'job_N'
|
|
2617
|
-
* @private
|
|
2618
|
-
*/
|
|
2619
|
-
generateJobId() {
|
|
2620
|
-
return `job_${this.nextJobIndex}`;
|
|
2621
|
-
}
|
|
2622
|
-
/**
|
|
2623
|
-
* Normalize before/after constraints to a Set.
|
|
2624
|
-
* Handles undefined, single string, or array inputs.
|
|
2625
|
-
* @param {string | string[] | undefined} value - The constraint value(s)
|
|
2626
|
-
* @returns {Set<string>} Normalized Set of constraint strings
|
|
2627
|
-
* @private
|
|
2628
|
-
*/
|
|
2629
|
-
normalizeConstraints(value) {
|
|
2630
|
-
if (!value) return /* @__PURE__ */ new Set();
|
|
2631
|
-
if (Array.isArray(value)) return new Set(value);
|
|
2632
|
-
return /* @__PURE__ */ new Set([value]);
|
|
2633
|
-
}
|
|
2634
|
-
};
|
|
2635
|
-
//* Static State & Methods (Singleton Usage) ================================
|
|
2636
|
-
//* Cross-Bundle Singleton Key ==============================
|
|
2637
|
-
// Use Symbol.for() to ensure scheduler is shared across bundle boundaries
|
|
2638
|
-
// This prevents issues when mixing imports from @react-three/fiber and @react-three/fiber/webgpu
|
|
2639
|
-
__publicField(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
|
|
2640
|
-
let Scheduler = _Scheduler;
|
|
2641
|
-
const getScheduler = () => Scheduler.get();
|
|
2642
|
-
if (hmrData) {
|
|
2643
|
-
hmrData.accept?.();
|
|
1662
|
+
const INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
|
|
1663
|
+
function isInternalRendererAccess(stack, callerDepth = 2) {
|
|
1664
|
+
if (!stack) return false;
|
|
1665
|
+
const caller = stack.split("\n")[callerDepth] ?? "";
|
|
1666
|
+
return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
|
|
2644
1667
|
}
|
|
2645
1668
|
|
|
2646
1669
|
const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
|
|
@@ -2775,6 +1798,7 @@ const createStore = (invalidate, advance) => {
|
|
|
2775
1798
|
}),
|
|
2776
1799
|
setFrameloop: (frameloop = "always") => {
|
|
2777
1800
|
set(() => ({ frameloop }));
|
|
1801
|
+
getScheduler().frameloop = frameloop;
|
|
2778
1802
|
},
|
|
2779
1803
|
setError: (error) => set(() => ({ error })),
|
|
2780
1804
|
error: null,
|
|
@@ -2784,6 +1808,7 @@ const createStore = (invalidate, advance) => {
|
|
|
2784
1808
|
buffers: {},
|
|
2785
1809
|
gpuStorage: {},
|
|
2786
1810
|
textures: /* @__PURE__ */ new Map(),
|
|
1811
|
+
_textureRefs: /* @__PURE__ */ new Map(),
|
|
2787
1812
|
renderPipeline: null,
|
|
2788
1813
|
passes: {},
|
|
2789
1814
|
_hmrVersion: 0,
|
|
@@ -2841,8 +1866,7 @@ const createStore = (invalidate, advance) => {
|
|
|
2841
1866
|
const currentState = rootStore.getState();
|
|
2842
1867
|
if (!currentState.isLegacy && currentState.internal.actualRenderer) {
|
|
2843
1868
|
const stack = new Error().stack || "";
|
|
2844
|
-
|
|
2845
|
-
if (!isInternalAccess) {
|
|
1869
|
+
if (!isInternalRendererAccess(stack)) {
|
|
2846
1870
|
const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
|
|
2847
1871
|
notifyDepreciated({
|
|
2848
1872
|
heading: "Accessing state.gl in WebGPU mode",
|
|
@@ -2890,14 +1914,16 @@ const createStore = (invalidate, advance) => {
|
|
|
2890
1914
|
oldSize = size;
|
|
2891
1915
|
oldDpr = viewport.dpr;
|
|
2892
1916
|
updateCamera(camera, size);
|
|
2893
|
-
if (canvasTarget) {
|
|
1917
|
+
if (internal.isSecondary && canvasTarget) {
|
|
2894
1918
|
if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
|
|
2895
|
-
|
|
2896
|
-
canvasTarget.setSize(size.width, size.height, updateStyle);
|
|
1919
|
+
canvasTarget.setSize(size.width, size.height, false);
|
|
2897
1920
|
} else {
|
|
2898
1921
|
if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
|
|
2899
|
-
|
|
2900
|
-
|
|
1922
|
+
actualRenderer.setSize(size.width, size.height, false);
|
|
1923
|
+
if (canvasTarget) {
|
|
1924
|
+
if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
|
|
1925
|
+
canvasTarget.setSize(size.width, size.height, false);
|
|
1926
|
+
}
|
|
2901
1927
|
}
|
|
2902
1928
|
}
|
|
2903
1929
|
if (camera !== oldCamera) {
|
|
@@ -2953,19 +1979,25 @@ function loadingFn(extensions, onProgress) {
|
|
|
2953
1979
|
);
|
|
2954
1980
|
};
|
|
2955
1981
|
}
|
|
2956
|
-
function useLoader(loader, input, extensions, onProgress) {
|
|
2957
|
-
const
|
|
1982
|
+
function useLoader(loader, input, extensions, onProgress, cacheKey) {
|
|
1983
|
+
const inputs = Array.isArray(input) ? input : [input];
|
|
1984
|
+
const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
|
|
2958
1985
|
const fn = loadingFn(extensions, onProgress);
|
|
2959
|
-
const results =
|
|
1986
|
+
const results = cacheKeys.map(
|
|
1987
|
+
(key, index) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
|
|
1988
|
+
);
|
|
2960
1989
|
return Array.isArray(input) ? results : results[0];
|
|
2961
1990
|
}
|
|
2962
|
-
useLoader.preload = function(loader, input, extensions, onProgress) {
|
|
2963
|
-
const
|
|
2964
|
-
|
|
1991
|
+
useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
|
|
1992
|
+
const inputs = Array.isArray(input) ? input : [input];
|
|
1993
|
+
const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
|
|
1994
|
+
cacheKeys.forEach(
|
|
1995
|
+
(key, index) => preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
|
|
1996
|
+
);
|
|
2965
1997
|
};
|
|
2966
|
-
useLoader.clear = function(loader, input) {
|
|
2967
|
-
const
|
|
2968
|
-
|
|
1998
|
+
useLoader.clear = function(loader, input, cacheKey) {
|
|
1999
|
+
const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
|
|
2000
|
+
cacheKeys.forEach((key) => clear([loader, key]));
|
|
2969
2001
|
};
|
|
2970
2002
|
useLoader.loader = getLoader;
|
|
2971
2003
|
|
|
@@ -3041,20 +2073,14 @@ function useFrame(callback, priorityOrOptions) {
|
|
|
3041
2073
|
}
|
|
3042
2074
|
};
|
|
3043
2075
|
} else {
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
unregisterJob = registerOutside();
|
|
3053
|
-
});
|
|
3054
|
-
return () => {
|
|
3055
|
-
unsubReady();
|
|
3056
|
-
unregisterJob?.();
|
|
3057
|
-
};
|
|
2076
|
+
return scheduler.register(
|
|
2077
|
+
(state, delta) => {
|
|
2078
|
+
const frameState = state;
|
|
2079
|
+
if (!frameState.renderer) return;
|
|
2080
|
+
callbackRef.current?.(frameState, delta);
|
|
2081
|
+
},
|
|
2082
|
+
{ id, ...options }
|
|
2083
|
+
);
|
|
3058
2084
|
}
|
|
3059
2085
|
}, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
|
|
3060
2086
|
const isPaused = React.useSyncExternalStore(
|
|
@@ -3145,18 +2171,18 @@ function buildFromCache(input, textureCache) {
|
|
|
3145
2171
|
function useTexture(input, optionsOrOnLoad) {
|
|
3146
2172
|
const renderer = useThree((state) => state.internal.actualRenderer);
|
|
3147
2173
|
const store = useStore();
|
|
3148
|
-
const textureCache = useThree((state) => state.textures);
|
|
3149
2174
|
const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
|
|
3150
|
-
const { onLoad, cache =
|
|
2175
|
+
const { onLoad, cache = true } = options;
|
|
3151
2176
|
const onLoadRef = useRef(onLoad);
|
|
3152
2177
|
onLoadRef.current = onLoad;
|
|
3153
2178
|
const onLoadCalledForRef = useRef(null);
|
|
3154
2179
|
const urls = useMemo(() => getUrls(input), [input]);
|
|
3155
2180
|
const cachedResult = useMemo(() => {
|
|
3156
2181
|
if (!cache) return null;
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
2182
|
+
const textures = store.getState().textures;
|
|
2183
|
+
if (!allUrlsCached(urls, textures)) return null;
|
|
2184
|
+
return buildFromCache(input, textures);
|
|
2185
|
+
}, [cache, urls, input, store]);
|
|
3160
2186
|
const loadedTextures = useLoader(
|
|
3161
2187
|
TextureLoader,
|
|
3162
2188
|
IsObject(input) ? Object.values(input) : input
|
|
@@ -3200,8 +2226,6 @@ function useTexture(input, optionsOrOnLoad) {
|
|
|
3200
2226
|
}, [input, loadedTextures, cachedResult]);
|
|
3201
2227
|
useEffect(() => {
|
|
3202
2228
|
if (!cache) return;
|
|
3203
|
-
if (cachedResult) return;
|
|
3204
|
-
const set = store.setState;
|
|
3205
2229
|
const urlTextureMap = [];
|
|
3206
2230
|
if (typeof input === "string") {
|
|
3207
2231
|
urlTextureMap.push([input, mappedTextures]);
|
|
@@ -3215,18 +2239,32 @@ function useTexture(input, optionsOrOnLoad) {
|
|
|
3215
2239
|
urlTextureMap.push([url, textureRecord[key]]);
|
|
3216
2240
|
}
|
|
3217
2241
|
}
|
|
3218
|
-
|
|
3219
|
-
const
|
|
3220
|
-
let
|
|
2242
|
+
store.setState((state) => {
|
|
2243
|
+
const refs = new Map(state._textureRefs);
|
|
2244
|
+
let textures = state.textures;
|
|
2245
|
+
let added = false;
|
|
3221
2246
|
for (const [url, texture] of urlTextureMap) {
|
|
3222
|
-
if (!
|
|
3223
|
-
|
|
3224
|
-
|
|
2247
|
+
if (!textures.has(url)) {
|
|
2248
|
+
if (!added) {
|
|
2249
|
+
textures = new Map(textures);
|
|
2250
|
+
added = true;
|
|
2251
|
+
}
|
|
2252
|
+
textures.set(url, texture);
|
|
3225
2253
|
}
|
|
2254
|
+
refs.set(url, (refs.get(url) ?? 0) + 1);
|
|
3226
2255
|
}
|
|
3227
|
-
return
|
|
2256
|
+
return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
|
|
3228
2257
|
});
|
|
3229
|
-
|
|
2258
|
+
return () => store.setState((state) => {
|
|
2259
|
+
const refs = new Map(state._textureRefs);
|
|
2260
|
+
for (const [url] of urlTextureMap) {
|
|
2261
|
+
const next = (refs.get(url) ?? 0) - 1;
|
|
2262
|
+
if (next <= 0) refs.delete(url);
|
|
2263
|
+
else refs.set(url, next);
|
|
2264
|
+
}
|
|
2265
|
+
return { _textureRefs: refs };
|
|
2266
|
+
});
|
|
2267
|
+
}, [cache, input, mappedTextures, store]);
|
|
3230
2268
|
return mappedTextures;
|
|
3231
2269
|
}
|
|
3232
2270
|
useTexture.preload = (url) => useLoader.preload(TextureLoader, url);
|
|
@@ -3242,96 +2280,63 @@ const Texture = ({
|
|
|
3242
2280
|
return /* @__PURE__ */ jsx(Fragment, { children: children?.(ret) });
|
|
3243
2281
|
};
|
|
3244
2282
|
|
|
3245
|
-
function
|
|
3246
|
-
if (entry instanceof Texture$1) return entry;
|
|
3247
|
-
if (entry && typeof entry === "object" && "value" in entry && entry.value instanceof Texture$1) {
|
|
3248
|
-
return entry.value;
|
|
3249
|
-
}
|
|
3250
|
-
return null;
|
|
3251
|
-
}
|
|
3252
|
-
function useTextures() {
|
|
2283
|
+
function useTextures(selector) {
|
|
3253
2284
|
const store = useStore();
|
|
3254
|
-
|
|
3255
|
-
const set = store.setState;
|
|
2285
|
+
const registry = useMemo(() => {
|
|
3256
2286
|
const getState = store.getState;
|
|
3257
|
-
const
|
|
3258
|
-
|
|
3259
|
-
const newMap = new Map(state.textures);
|
|
3260
|
-
newMap.set(key, value);
|
|
3261
|
-
return { textures: newMap };
|
|
3262
|
-
});
|
|
3263
|
-
};
|
|
3264
|
-
const addMultiple = (items) => {
|
|
3265
|
-
set((state) => {
|
|
3266
|
-
const newMap = new Map(state.textures);
|
|
3267
|
-
const entries = items instanceof Map ? items.entries() : Object.entries(items);
|
|
3268
|
-
for (const [key, value] of entries) {
|
|
3269
|
-
newMap.set(key, value);
|
|
3270
|
-
}
|
|
3271
|
-
return { textures: newMap };
|
|
3272
|
-
});
|
|
3273
|
-
};
|
|
3274
|
-
const remove = (key) => {
|
|
3275
|
-
set((state) => {
|
|
3276
|
-
const newMap = new Map(state.textures);
|
|
3277
|
-
newMap.delete(key);
|
|
3278
|
-
return { textures: newMap };
|
|
3279
|
-
});
|
|
3280
|
-
};
|
|
3281
|
-
const removeMultiple = (keys) => {
|
|
3282
|
-
set((state) => {
|
|
3283
|
-
const newMap = new Map(state.textures);
|
|
3284
|
-
for (const key of keys) newMap.delete(key);
|
|
3285
|
-
return { textures: newMap };
|
|
3286
|
-
});
|
|
3287
|
-
};
|
|
3288
|
-
const dispose = (key) => {
|
|
3289
|
-
const entry = getState().textures.get(key);
|
|
3290
|
-
if (entry) {
|
|
3291
|
-
const tex = getTextureValue(entry);
|
|
3292
|
-
tex?.dispose();
|
|
3293
|
-
}
|
|
3294
|
-
remove(key);
|
|
3295
|
-
};
|
|
3296
|
-
const disposeMultiple = (keys) => {
|
|
3297
|
-
const textures = getState().textures;
|
|
3298
|
-
for (const key of keys) {
|
|
3299
|
-
const entry = textures.get(key);
|
|
3300
|
-
if (entry) {
|
|
3301
|
-
const tex = getTextureValue(entry);
|
|
3302
|
-
tex?.dispose();
|
|
3303
|
-
}
|
|
3304
|
-
}
|
|
3305
|
-
removeMultiple(keys);
|
|
3306
|
-
};
|
|
3307
|
-
const disposeAll = () => {
|
|
3308
|
-
const textures = getState().textures;
|
|
3309
|
-
for (const entry of textures.values()) {
|
|
3310
|
-
const tex = getTextureValue(entry);
|
|
3311
|
-
tex?.dispose();
|
|
3312
|
-
}
|
|
3313
|
-
set({ textures: /* @__PURE__ */ new Map() });
|
|
3314
|
-
};
|
|
2287
|
+
const setState = store.setState;
|
|
2288
|
+
const getOne = (key) => getState().textures.get(key);
|
|
3315
2289
|
return {
|
|
3316
|
-
|
|
3317
|
-
get textures() {
|
|
2290
|
+
get all() {
|
|
3318
2291
|
return getState().textures;
|
|
3319
2292
|
},
|
|
3320
|
-
|
|
3321
|
-
|
|
2293
|
+
get(input) {
|
|
2294
|
+
if (typeof input === "string") return getOne(input);
|
|
2295
|
+
if (Array.isArray(input)) return input.map(getOne);
|
|
2296
|
+
const out = {};
|
|
2297
|
+
for (const name in input) out[name] = getOne(input[name]);
|
|
2298
|
+
return out;
|
|
2299
|
+
},
|
|
3322
2300
|
has: (key) => getState().textures.has(key),
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
2301
|
+
add(keyOrRecord, texture) {
|
|
2302
|
+
setState((state) => {
|
|
2303
|
+
const textures = new Map(state.textures);
|
|
2304
|
+
if (typeof keyOrRecord === "string") {
|
|
2305
|
+
textures.set(keyOrRecord, texture);
|
|
2306
|
+
} else {
|
|
2307
|
+
for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
|
|
2308
|
+
}
|
|
2309
|
+
return { textures };
|
|
2310
|
+
});
|
|
2311
|
+
},
|
|
2312
|
+
dispose(key, options) {
|
|
2313
|
+
const state = getState();
|
|
2314
|
+
const refs = state._textureRefs.get(key) ?? 0;
|
|
2315
|
+
if (refs > 0 && !options?.force) {
|
|
2316
|
+
console.warn(
|
|
2317
|
+
`[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
|
|
2318
|
+
);
|
|
2319
|
+
return false;
|
|
2320
|
+
}
|
|
2321
|
+
state.textures.get(key)?.dispose();
|
|
2322
|
+
setState((s) => {
|
|
2323
|
+
const textures = new Map(s.textures);
|
|
2324
|
+
textures.delete(key);
|
|
2325
|
+
const nextRefs = new Map(s._textureRefs);
|
|
2326
|
+
nextRefs.delete(key);
|
|
2327
|
+
return { textures, _textureRefs: nextRefs };
|
|
2328
|
+
});
|
|
2329
|
+
return true;
|
|
2330
|
+
},
|
|
2331
|
+
disposeAll() {
|
|
2332
|
+
for (const texture of getState().textures.values()) texture.dispose();
|
|
2333
|
+
setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
|
|
2334
|
+
}
|
|
3333
2335
|
};
|
|
3334
2336
|
}, [store]);
|
|
2337
|
+
const subscribe = selector ? () => selector(registry) : (state) => state.textures;
|
|
2338
|
+
const selected = useThree(subscribe);
|
|
2339
|
+
return selector ? selected : registry;
|
|
3335
2340
|
}
|
|
3336
2341
|
|
|
3337
2342
|
function useRenderTarget(widthOrOptions, heightOrOptions, options) {
|
|
@@ -3414,7 +2419,7 @@ function advance(timestamp) {
|
|
|
3414
2419
|
getScheduler().step(timestamp);
|
|
3415
2420
|
}
|
|
3416
2421
|
|
|
3417
|
-
const version = "10.0.0-alpha.
|
|
2422
|
+
const version = "10.0.0-alpha.3";
|
|
3418
2423
|
const packageData = {
|
|
3419
2424
|
version: version};
|
|
3420
2425
|
|
|
@@ -14853,6 +13858,7 @@ function swapInstances() {
|
|
|
14853
13858
|
}
|
|
14854
13859
|
}
|
|
14855
13860
|
if (instance.isHidden) unhideInstance(instance);
|
|
13861
|
+
if (isObject3D(instance.object)) removeInteractivity(findInitialRoot(instance), instance.object);
|
|
14856
13862
|
if (instance.object.__r3f) delete instance.object.__r3f;
|
|
14857
13863
|
if (instance.type !== "primitive") disposeOnIdle(instance.object);
|
|
14858
13864
|
}
|
|
@@ -14865,6 +13871,8 @@ function swapInstances() {
|
|
|
14865
13871
|
instance.object.__r3f = instance;
|
|
14866
13872
|
setFiberRef(fiber, instance.object);
|
|
14867
13873
|
delete instance.appliedOnce;
|
|
13874
|
+
instance.eventCount = 0;
|
|
13875
|
+
instance.handlers = {};
|
|
14868
13876
|
applyProps(instance.object, instance.props);
|
|
14869
13877
|
if (instance.props.attach) {
|
|
14870
13878
|
attach(parent, instance);
|
|
@@ -15080,11 +14088,15 @@ const reconciler = /* @__PURE__ */ createReconciler({
|
|
|
15080
14088
|
cloneMutableTextInstance(textInstance) {
|
|
15081
14089
|
return textInstance;
|
|
15082
14090
|
},
|
|
14091
|
+
// React 19.2 added these for root-level view transitions. They only run for hosts that opt into
|
|
14092
|
+
// view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
|
|
14093
|
+
// into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
|
|
14094
|
+
// React never calls them. They stay as no-ops rather than throws: the host config is shared by
|
|
14095
|
+
// every root, and a throw here would turn a React-internal probe into a hard crash for users.
|
|
14096
|
+
// Guarded by a test asserting a full render + unmount never reaches them.
|
|
15083
14097
|
cloneRootViewTransitionContainer(_rootContainer) {
|
|
15084
|
-
throw new Error("Not implemented.");
|
|
15085
14098
|
},
|
|
15086
14099
|
removeRootViewTransitionClone(_rootContainer, _clone) {
|
|
15087
|
-
throw new Error("Not implemented.");
|
|
15088
14100
|
},
|
|
15089
14101
|
// https://github.com/facebook/react/pull/32465
|
|
15090
14102
|
createFragmentInstance: (_fiber) => null,
|
|
@@ -15169,6 +14181,7 @@ function createRoot(canvas) {
|
|
|
15169
14181
|
const lastConfiguredProps = {};
|
|
15170
14182
|
let configured = false;
|
|
15171
14183
|
let pending = null;
|
|
14184
|
+
let rendererSetup = null;
|
|
15172
14185
|
return {
|
|
15173
14186
|
async configure(props = {}) {
|
|
15174
14187
|
let resolve;
|
|
@@ -15184,7 +14197,6 @@ function createRoot(canvas) {
|
|
|
15184
14197
|
events,
|
|
15185
14198
|
onCreated: onCreatedCallback,
|
|
15186
14199
|
shadows = false,
|
|
15187
|
-
textureColorSpace = SRGBColorSpace,
|
|
15188
14200
|
orthographic = false,
|
|
15189
14201
|
frameloop = "always",
|
|
15190
14202
|
dpr = [1, 2],
|
|
@@ -15199,7 +14211,8 @@ function createRoot(canvas) {
|
|
|
15199
14211
|
_sizeProps,
|
|
15200
14212
|
forceEven
|
|
15201
14213
|
} = props;
|
|
15202
|
-
const
|
|
14214
|
+
const textureColorSpace = is.obj(glConfig) && !is.fun(glConfig) && !isRenderer(glConfig) && glConfig.textureColorSpace || is.obj(rendererConfig) && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && rendererConfig.textureColorSpace || SRGBColorSpace;
|
|
14215
|
+
let state = store.getState();
|
|
15203
14216
|
const defaultGLProps = {
|
|
15204
14217
|
canvas,
|
|
15205
14218
|
powerPreference: "high-performance",
|
|
@@ -15227,56 +14240,68 @@ function createRoot(canvas) {
|
|
|
15227
14240
|
"The `primaryCanvas` prop for multi-canvas rendering cannot be used with WebGL. Remove the `gl` prop or use WebGPU."
|
|
15228
14241
|
);
|
|
15229
14242
|
}
|
|
15230
|
-
if (
|
|
15231
|
-
|
|
15232
|
-
|
|
15233
|
-
|
|
15234
|
-
|
|
15235
|
-
|
|
15236
|
-
|
|
15237
|
-
|
|
15238
|
-
|
|
15239
|
-
|
|
15240
|
-
|
|
15241
|
-
|
|
15242
|
-
|
|
15243
|
-
|
|
15244
|
-
|
|
15245
|
-
|
|
15246
|
-
|
|
15247
|
-
|
|
15248
|
-
|
|
15249
|
-
|
|
15250
|
-
|
|
15251
|
-
|
|
15252
|
-
|
|
15253
|
-
|
|
15254
|
-
|
|
15255
|
-
|
|
15256
|
-
|
|
15257
|
-
|
|
15258
|
-
|
|
15259
|
-
|
|
15260
|
-
|
|
15261
|
-
|
|
15262
|
-
|
|
15263
|
-
|
|
15264
|
-
|
|
15265
|
-
|
|
15266
|
-
|
|
15267
|
-
|
|
15268
|
-
|
|
15269
|
-
|
|
15270
|
-
|
|
15271
|
-
|
|
15272
|
-
|
|
15273
|
-
|
|
15274
|
-
|
|
15275
|
-
|
|
15276
|
-
|
|
14243
|
+
if (!state.internal.actualRenderer) {
|
|
14244
|
+
if (!rendererSetup) {
|
|
14245
|
+
rendererSetup = (async () => {
|
|
14246
|
+
if (wantsGL) {
|
|
14247
|
+
renderer = await resolveRenderer(glConfig, defaultGLProps, WebGLRenderer);
|
|
14248
|
+
state.internal.actualRenderer = renderer;
|
|
14249
|
+
state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
|
|
14250
|
+
} else if (!wantsGL && primaryCanvas) {
|
|
14251
|
+
const primary = await waitForPrimary(primaryCanvas);
|
|
14252
|
+
renderer = primary.renderer;
|
|
14253
|
+
state.internal.actualRenderer = renderer;
|
|
14254
|
+
const canvasTarget = new CanvasTarget(canvas);
|
|
14255
|
+
primary.store.setState((prev) => ({
|
|
14256
|
+
internal: { ...prev.internal, isMultiCanvas: true }
|
|
14257
|
+
}));
|
|
14258
|
+
state.set((prev) => ({
|
|
14259
|
+
webGPUSupported: primary.store.getState().webGPUSupported,
|
|
14260
|
+
renderer,
|
|
14261
|
+
primaryStore: primary.store,
|
|
14262
|
+
internal: {
|
|
14263
|
+
...prev.internal,
|
|
14264
|
+
canvasTarget,
|
|
14265
|
+
isMultiCanvas: true,
|
|
14266
|
+
isSecondary: true,
|
|
14267
|
+
targetId: primaryCanvas
|
|
14268
|
+
}
|
|
14269
|
+
}));
|
|
14270
|
+
} else if (!wantsGL) {
|
|
14271
|
+
renderer = await resolveRenderer(rendererConfig, defaultGPUProps, WebGPURenderer);
|
|
14272
|
+
if (!renderer.hasInitialized?.()) {
|
|
14273
|
+
const size2 = computeInitialSize(canvas, propsSize);
|
|
14274
|
+
if (size2.width > 0 && size2.height > 0) {
|
|
14275
|
+
const pixelRatio = calculateDpr(dpr);
|
|
14276
|
+
canvas.width = size2.width * pixelRatio;
|
|
14277
|
+
canvas.height = size2.height * pixelRatio;
|
|
14278
|
+
}
|
|
14279
|
+
await renderer.init();
|
|
14280
|
+
}
|
|
14281
|
+
const backend = renderer.backend;
|
|
14282
|
+
const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
|
|
14283
|
+
state.internal.actualRenderer = renderer;
|
|
14284
|
+
state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
|
|
14285
|
+
if (canvasId && !state.internal.isSecondary) {
|
|
14286
|
+
const canvasTarget = new CanvasTarget(canvas);
|
|
14287
|
+
const unregisterPrimary = registerPrimary(canvasId, renderer, store);
|
|
14288
|
+
state.set((prev) => ({
|
|
14289
|
+
internal: {
|
|
14290
|
+
...prev.internal,
|
|
14291
|
+
canvasTarget,
|
|
14292
|
+
unregisterPrimary
|
|
14293
|
+
}
|
|
14294
|
+
}));
|
|
14295
|
+
}
|
|
15277
14296
|
}
|
|
15278
|
-
}))
|
|
14297
|
+
})().catch((err) => {
|
|
14298
|
+
rendererSetup = null;
|
|
14299
|
+
throw err;
|
|
14300
|
+
});
|
|
15279
14301
|
}
|
|
14302
|
+
await rendererSetup;
|
|
14303
|
+
state = store.getState();
|
|
14304
|
+
renderer = state.internal.actualRenderer;
|
|
15280
14305
|
}
|
|
15281
14306
|
let raycaster = state.raycaster;
|
|
15282
14307
|
if (!raycaster) state.set({ raycaster: raycaster = new Raycaster() });
|
|
@@ -15369,7 +14394,7 @@ function createRoot(canvas) {
|
|
|
15369
14394
|
lastConfiguredProps.performance = performance;
|
|
15370
14395
|
}
|
|
15371
14396
|
if (!state.xr) {
|
|
15372
|
-
const handleXRFrame = (timestamp,
|
|
14397
|
+
const handleXRFrame = (timestamp, _frame) => {
|
|
15373
14398
|
const state2 = store.getState();
|
|
15374
14399
|
if (state2.frameloop === "never") return;
|
|
15375
14400
|
advance(timestamp);
|
|
@@ -15405,15 +14430,22 @@ function createRoot(canvas) {
|
|
|
15405
14430
|
const oldType = renderer.shadowMap.type;
|
|
15406
14431
|
renderer.shadowMap.enabled = !!shadows;
|
|
15407
14432
|
if (is.boo(shadows)) {
|
|
15408
|
-
renderer.shadowMap.type =
|
|
14433
|
+
renderer.shadowMap.type = PCFShadowMap;
|
|
15409
14434
|
} else if (is.str(shadows)) {
|
|
14435
|
+
if (shadows === "soft") {
|
|
14436
|
+
notifyDepreciated({
|
|
14437
|
+
heading: 'shadows="soft" is deprecated',
|
|
14438
|
+
body: "Three has depreciated soft and improved basic PCFShadows, we converted for you.",
|
|
14439
|
+
link: "https://github.com/mrdoob/three.js/wiki/Migration-Guide?utm_source=chatgpt.com#181--182"
|
|
14440
|
+
});
|
|
14441
|
+
}
|
|
15410
14442
|
const types = {
|
|
15411
14443
|
basic: BasicShadowMap,
|
|
15412
14444
|
percentage: PCFShadowMap,
|
|
15413
|
-
soft:
|
|
14445
|
+
soft: PCFShadowMap,
|
|
15414
14446
|
variance: VSMShadowMap
|
|
15415
14447
|
};
|
|
15416
|
-
renderer.shadowMap.type = types[shadows] ??
|
|
14448
|
+
renderer.shadowMap.type = types[shadows] ?? PCFShadowMap;
|
|
15417
14449
|
} else if (is.obj(shadows)) {
|
|
15418
14450
|
Object.assign(renderer.shadowMap, shadows);
|
|
15419
14451
|
}
|
|
@@ -15429,13 +14461,24 @@ function createRoot(canvas) {
|
|
|
15429
14461
|
if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
|
|
15430
14462
|
lastConfiguredProps.textureColorSpace = textureColorSpace;
|
|
15431
14463
|
}
|
|
14464
|
+
const r3fProps = ["textureColorSpace"];
|
|
14465
|
+
const constructorOnlyProps = ["samples", "antialias", "alpha", "canvas", "powerPreference"];
|
|
14466
|
+
const nonApplyProps = [...r3fProps, ...constructorOnlyProps];
|
|
15432
14467
|
if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
|
|
15433
|
-
|
|
14468
|
+
const glProps = {};
|
|
14469
|
+
for (const key in glConfig) {
|
|
14470
|
+
if (!nonApplyProps.includes(key)) glProps[key] = glConfig[key];
|
|
14471
|
+
}
|
|
14472
|
+
applyProps(renderer, glProps);
|
|
15434
14473
|
}
|
|
15435
14474
|
if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
|
|
15436
14475
|
const currentRenderer = state.renderer;
|
|
15437
14476
|
if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
|
|
15438
|
-
|
|
14477
|
+
const rendererProps = {};
|
|
14478
|
+
for (const key in rendererConfig) {
|
|
14479
|
+
if (!nonApplyProps.includes(key)) rendererProps[key] = rendererConfig[key];
|
|
14480
|
+
}
|
|
14481
|
+
applyProps(currentRenderer, rendererProps);
|
|
15439
14482
|
}
|
|
15440
14483
|
}
|
|
15441
14484
|
const scheduler = getScheduler();
|
|
@@ -15483,7 +14526,7 @@ function createRoot(canvas) {
|
|
|
15483
14526
|
{
|
|
15484
14527
|
id: `${newRootId}_frustum`,
|
|
15485
14528
|
rootId: newRootId,
|
|
15486
|
-
|
|
14529
|
+
before: "render",
|
|
15487
14530
|
system: true
|
|
15488
14531
|
}
|
|
15489
14532
|
);
|
|
@@ -15495,7 +14538,7 @@ function createRoot(canvas) {
|
|
|
15495
14538
|
{
|
|
15496
14539
|
id: `${newRootId}_visibility`,
|
|
15497
14540
|
rootId: newRootId,
|
|
15498
|
-
|
|
14541
|
+
before: "render",
|
|
15499
14542
|
system: true,
|
|
15500
14543
|
after: `${newRootId}_frustum`
|
|
15501
14544
|
}
|
|
@@ -15608,7 +14651,8 @@ function unmountComponentAtNode(canvas, callback) {
|
|
|
15608
14651
|
dispose(state.scene);
|
|
15609
14652
|
_roots.delete(canvas);
|
|
15610
14653
|
if (callback) callback(canvas);
|
|
15611
|
-
} catch {
|
|
14654
|
+
} catch (error) {
|
|
14655
|
+
console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
|
|
15612
14656
|
}
|
|
15613
14657
|
}, 500);
|
|
15614
14658
|
}
|
|
@@ -15671,6 +14715,7 @@ function PortalInner({ state = {}, children, container }) {
|
|
|
15671
14715
|
viewport = rootState.viewport.getCurrentViewport(camera, new Vector3(), resolvedSize);
|
|
15672
14716
|
if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
|
|
15673
14717
|
}
|
|
14718
|
+
const set = injectState.set;
|
|
15674
14719
|
return {
|
|
15675
14720
|
// The intersect consists of the previous root state
|
|
15676
14721
|
...rootState,
|
|
@@ -15689,7 +14734,7 @@ function PortalInner({ state = {}, children, container }) {
|
|
|
15689
14734
|
size: resolvedSize,
|
|
15690
14735
|
viewport: { ...rootState.viewport, ...viewport },
|
|
15691
14736
|
// Layers are allowed to override events
|
|
15692
|
-
setEvents: (events2) =>
|
|
14737
|
+
setEvents: (events2) => set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
|
|
15693
14738
|
// Container for child attachment - the portalScene (injected or container itself)
|
|
15694
14739
|
internal: { ...rootState.internal, ...injectState.internal, container: portalScene }
|
|
15695
14740
|
};
|
|
@@ -15718,6 +14763,81 @@ function flushSync(fn) {
|
|
|
15718
14763
|
return reconciler.flushSyncFromReconciler(fn);
|
|
15719
14764
|
}
|
|
15720
14765
|
|
|
14766
|
+
function parseBackground(background) {
|
|
14767
|
+
if (!background) return null;
|
|
14768
|
+
if (typeof background === "object" && !background.isColor) {
|
|
14769
|
+
const { backgroundMap, envMap, files, preset, ...rest } = background;
|
|
14770
|
+
return {
|
|
14771
|
+
...rest,
|
|
14772
|
+
preset,
|
|
14773
|
+
files: envMap || files,
|
|
14774
|
+
backgroundFiles: backgroundMap,
|
|
14775
|
+
background: true
|
|
14776
|
+
};
|
|
14777
|
+
}
|
|
14778
|
+
if (typeof background === "number") {
|
|
14779
|
+
return { color: background, background: true };
|
|
14780
|
+
}
|
|
14781
|
+
if (typeof background === "string") {
|
|
14782
|
+
if (background in presetsObj) {
|
|
14783
|
+
return { preset: background, background: true };
|
|
14784
|
+
}
|
|
14785
|
+
if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
|
|
14786
|
+
return { files: background, background: true };
|
|
14787
|
+
}
|
|
14788
|
+
return { color: background, background: true };
|
|
14789
|
+
}
|
|
14790
|
+
if (background.isColor) {
|
|
14791
|
+
return { color: background, background: true };
|
|
14792
|
+
}
|
|
14793
|
+
return null;
|
|
14794
|
+
}
|
|
14795
|
+
|
|
14796
|
+
function parseRendererConfig(rendererProp) {
|
|
14797
|
+
const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
|
|
14798
|
+
if (isRendererConfig) {
|
|
14799
|
+
const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
|
|
14800
|
+
return {
|
|
14801
|
+
primaryCanvas: pc,
|
|
14802
|
+
scheduler: sc,
|
|
14803
|
+
renderer: Object.keys(rest).length > 0 ? rest : rendererProp
|
|
14804
|
+
};
|
|
14805
|
+
}
|
|
14806
|
+
return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
|
|
14807
|
+
}
|
|
14808
|
+
|
|
14809
|
+
const RESOURCE_KINDS = ["nodes", "uniforms", "buffers", "gpuStorage"];
|
|
14810
|
+
const registries = /* @__PURE__ */ new WeakMap();
|
|
14811
|
+
function getKindRegistry(store, kind) {
|
|
14812
|
+
let registry = registries.get(store);
|
|
14813
|
+
if (!registry) {
|
|
14814
|
+
registry = {
|
|
14815
|
+
nodes: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
|
|
14816
|
+
uniforms: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
|
|
14817
|
+
buffers: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
|
|
14818
|
+
gpuStorage: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() }
|
|
14819
|
+
};
|
|
14820
|
+
registries.set(store, registry);
|
|
14821
|
+
}
|
|
14822
|
+
return registry[kind];
|
|
14823
|
+
}
|
|
14824
|
+
function invalidateResource(store, kind, scopeKey) {
|
|
14825
|
+
const registry = getKindRegistry(store, kind);
|
|
14826
|
+
{
|
|
14827
|
+
registry.valid.clear();
|
|
14828
|
+
registry.staged.clear();
|
|
14829
|
+
}
|
|
14830
|
+
}
|
|
14831
|
+
function invalidateAllResources(store) {
|
|
14832
|
+
for (const kind of RESOURCE_KINDS) invalidateResource(store, kind);
|
|
14833
|
+
}
|
|
14834
|
+
|
|
14835
|
+
function clearHmrCaches(store) {
|
|
14836
|
+
const primary = store.getState().primaryStore ?? store;
|
|
14837
|
+
invalidateAllResources(primary);
|
|
14838
|
+
primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
|
|
14839
|
+
}
|
|
14840
|
+
|
|
15721
14841
|
function CanvasImpl({
|
|
15722
14842
|
ref,
|
|
15723
14843
|
children,
|
|
@@ -15738,6 +14858,8 @@ function CanvasImpl({
|
|
|
15738
14858
|
raycaster,
|
|
15739
14859
|
camera,
|
|
15740
14860
|
scene,
|
|
14861
|
+
autoUpdateFrustum,
|
|
14862
|
+
occlusion,
|
|
15741
14863
|
onPointerMissed,
|
|
15742
14864
|
onDragOverMissed,
|
|
15743
14865
|
onDropMissed,
|
|
@@ -15749,39 +14871,10 @@ function CanvasImpl({
|
|
|
15749
14871
|
forceEven,
|
|
15750
14872
|
...props
|
|
15751
14873
|
}) {
|
|
15752
|
-
const { primaryCanvas, scheduler,
|
|
15753
|
-
const renderer = Object.keys(rendererConfig).length > 0 ? rendererConfig : rendererProp;
|
|
14874
|
+
const { primaryCanvas, scheduler, renderer } = parseRendererConfig(rendererProp);
|
|
15754
14875
|
React.useMemo(() => extend(THREE), []);
|
|
15755
14876
|
const Bridge = useBridge();
|
|
15756
|
-
const backgroundProps = React.useMemo(() =>
|
|
15757
|
-
if (!background) return null;
|
|
15758
|
-
if (typeof background === "object" && !background.isColor) {
|
|
15759
|
-
const { backgroundMap, envMap, files, preset, ...rest } = background;
|
|
15760
|
-
return {
|
|
15761
|
-
...rest,
|
|
15762
|
-
preset,
|
|
15763
|
-
files: envMap || files,
|
|
15764
|
-
backgroundFiles: backgroundMap,
|
|
15765
|
-
background: true
|
|
15766
|
-
};
|
|
15767
|
-
}
|
|
15768
|
-
if (typeof background === "number") {
|
|
15769
|
-
return { color: background, background: true };
|
|
15770
|
-
}
|
|
15771
|
-
if (typeof background === "string") {
|
|
15772
|
-
if (background in presetsObj) {
|
|
15773
|
-
return { preset: background, background: true };
|
|
15774
|
-
}
|
|
15775
|
-
if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
|
|
15776
|
-
return { files: background, background: true };
|
|
15777
|
-
}
|
|
15778
|
-
return { color: background, background: true };
|
|
15779
|
-
}
|
|
15780
|
-
if (background.isColor) {
|
|
15781
|
-
return { color: background, background: true };
|
|
15782
|
-
}
|
|
15783
|
-
return null;
|
|
15784
|
-
}, [background]);
|
|
14877
|
+
const backgroundProps = React.useMemo(() => parseBackground(background), [background]);
|
|
15785
14878
|
const hasInitialSizeRef = React.useRef(false);
|
|
15786
14879
|
const measureConfig = React.useMemo(() => {
|
|
15787
14880
|
if (!hasInitialSizeRef.current) {
|
|
@@ -15823,6 +14916,7 @@ function CanvasImpl({
|
|
|
15823
14916
|
const handleDropMissed = useMutableCallback(onDropMissed);
|
|
15824
14917
|
const [block, setBlock] = React.useState(false);
|
|
15825
14918
|
const [error, setError] = React.useState(false);
|
|
14919
|
+
const [fallbackVisible, setFallbackVisible] = React.useState(false);
|
|
15826
14920
|
if (block) throw block;
|
|
15827
14921
|
if (error) throw error;
|
|
15828
14922
|
const root = React.useRef(null);
|
|
@@ -15830,6 +14924,7 @@ function CanvasImpl({
|
|
|
15830
14924
|
const unsubscribeErrorRef = React.useRef(null);
|
|
15831
14925
|
useIsomorphicLayoutEffect(() => {
|
|
15832
14926
|
effectActiveRef.current = true;
|
|
14927
|
+
if (fallbackVisible) return;
|
|
15833
14928
|
const canvas = canvasRef.current;
|
|
15834
14929
|
if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
|
|
15835
14930
|
if (!root.current) {
|
|
@@ -15850,7 +14945,7 @@ function CanvasImpl({
|
|
|
15850
14945
|
}
|
|
15851
14946
|
async function run() {
|
|
15852
14947
|
if (!effectActiveRef.current || !root.current) return;
|
|
15853
|
-
await root.current.configure({
|
|
14948
|
+
const configured = await root.current.configure({
|
|
15854
14949
|
id,
|
|
15855
14950
|
primaryCanvas,
|
|
15856
14951
|
scheduler,
|
|
@@ -15865,6 +14960,8 @@ function CanvasImpl({
|
|
|
15865
14960
|
performance,
|
|
15866
14961
|
raycaster,
|
|
15867
14962
|
camera,
|
|
14963
|
+
autoUpdateFrustum,
|
|
14964
|
+
occlusion,
|
|
15868
14965
|
size: effectiveSize,
|
|
15869
14966
|
// Store size props for reset functionality
|
|
15870
14967
|
_sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
|
|
@@ -15889,8 +14986,20 @@ function CanvasImpl({
|
|
|
15889
14986
|
}
|
|
15890
14987
|
onCreated?.(state);
|
|
15891
14988
|
}
|
|
15892
|
-
})
|
|
15893
|
-
|
|
14989
|
+
}).then(
|
|
14990
|
+
() => true,
|
|
14991
|
+
// Renderer setup failed (e.g. no WebGL/WebGPU support). The `fallback` prop lives
|
|
14992
|
+
// inside <canvas>, which browsers don't display, so surface it as visible DOM
|
|
14993
|
+
// instead; with no fallback, rethrow to an external error boundary. (#3757)
|
|
14994
|
+
(setupError) => {
|
|
14995
|
+
if (effectActiveRef.current) {
|
|
14996
|
+
if (fallback != null) setFallbackVisible(true);
|
|
14997
|
+
else setError(setupError);
|
|
14998
|
+
}
|
|
14999
|
+
return false;
|
|
15000
|
+
}
|
|
15001
|
+
);
|
|
15002
|
+
if (!configured || !effectActiveRef.current || !root.current) return;
|
|
15894
15003
|
root.current.render(
|
|
15895
15004
|
/* @__PURE__ */ jsx(Bridge, { children: /* @__PURE__ */ jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxs(React.Suspense, { fallback: /* @__PURE__ */ jsx(Block, { set: setBlock }), children: [
|
|
15896
15005
|
backgroundProps && /* @__PURE__ */ jsx(Environment, { ...backgroundProps }),
|
|
@@ -15924,14 +15033,7 @@ function CanvasImpl({
|
|
|
15924
15033
|
const handleHMR = () => {
|
|
15925
15034
|
queueMicrotask(() => {
|
|
15926
15035
|
const rootEntry = _roots.get(canvas);
|
|
15927
|
-
if (rootEntry?.store)
|
|
15928
|
-
console.log("[R3F] HMR detected \u2014 rebuilding nodes/uniforms");
|
|
15929
|
-
rootEntry.store.setState((state) => ({
|
|
15930
|
-
nodes: {},
|
|
15931
|
-
uniforms: {},
|
|
15932
|
-
_hmrVersion: state._hmrVersion + 1
|
|
15933
|
-
}));
|
|
15934
|
-
}
|
|
15036
|
+
if (rootEntry?.store) clearHmrCaches(rootEntry.store);
|
|
15935
15037
|
});
|
|
15936
15038
|
};
|
|
15937
15039
|
if (typeof import.meta !== "undefined" && import.meta.hot) {
|
|
@@ -15960,7 +15062,20 @@ function CanvasImpl({
|
|
|
15960
15062
|
...style
|
|
15961
15063
|
},
|
|
15962
15064
|
...props,
|
|
15963
|
-
children:
|
|
15065
|
+
children: fallbackVisible ? (
|
|
15066
|
+
// Renderer setup failed: render the fallback as visible DOM. Inside <canvas> (below)
|
|
15067
|
+
// it exists in the tree but browsers never paint it, which is the whole bug (#3757).
|
|
15068
|
+
fallback
|
|
15069
|
+
) : /* @__PURE__ */ jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
|
|
15070
|
+
"canvas",
|
|
15071
|
+
{
|
|
15072
|
+
ref: canvasRef,
|
|
15073
|
+
id,
|
|
15074
|
+
className: "r3f-canvas",
|
|
15075
|
+
style: { display: "block", width: "100%", height: "100%" },
|
|
15076
|
+
children: fallback
|
|
15077
|
+
}
|
|
15078
|
+
) })
|
|
15964
15079
|
}
|
|
15965
15080
|
);
|
|
15966
15081
|
}
|
|
@@ -15970,4 +15085,4 @@ function Canvas(props) {
|
|
|
15970
15085
|
|
|
15971
15086
|
extend(THREE);
|
|
15972
15087
|
|
|
15973
|
-
export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS,
|
|
15088
|
+
export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, reconciler, registerPrimary, removeInteractivity, resolve, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useMutableCallback, useRenderTarget, useStore, useTexture, useTextures, useThree, waitForPrimary };
|