@react-three/fiber 10.0.0-canary.604355a → 10.0.0-canary.60e7a38
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 +885 -1422
- package/dist/index.d.cts +309 -811
- package/dist/index.d.mts +309 -811
- package/dist/index.d.ts +309 -811
- package/dist/index.mjs +860 -1396
- package/dist/legacy.cjs +840 -1383
- package/dist/legacy.d.cts +310 -811
- package/dist/legacy.d.mts +310 -811
- package/dist/legacy.d.ts +310 -811
- package/dist/legacy.mjs +814 -1356
- package/dist/webgpu/index.cjs +1341 -1737
- package/dist/webgpu/index.d.cts +425 -825
- package/dist/webgpu/index.d.mts +425 -825
- package/dist/webgpu/index.d.ts +425 -825
- package/dist/webgpu/index.mjs +1310 -1709
- package/package.json +4 -3
- package/readme.md +2 -3
package/dist/index.cjs
CHANGED
|
@@ -15,6 +15,7 @@ const UltraHDRLoader_js = require('three/examples/jsm/loaders/UltraHDRLoader.js'
|
|
|
15
15
|
const gainmapJs = require('@monogrid/gainmap-js');
|
|
16
16
|
const Tb = require('scheduler');
|
|
17
17
|
const traditional = require('zustand/traditional');
|
|
18
|
+
const scheduler = require('@pmndrs/scheduler');
|
|
18
19
|
const suspendReact = require('suspend-react');
|
|
19
20
|
|
|
20
21
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
@@ -55,10 +56,13 @@ const R3F_BUILD_WEBGPU = true;
|
|
|
55
56
|
|
|
56
57
|
const THREE = /*#__PURE__*/_mergeNamespaces({
|
|
57
58
|
__proto__: null,
|
|
59
|
+
CubeRenderTarget: webgpu.CubeRenderTarget,
|
|
60
|
+
CubeRenderTargetCompat: webgpu.CubeRenderTarget,
|
|
58
61
|
Inspector: Inspector_js.Inspector,
|
|
59
62
|
R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
|
|
60
63
|
R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
|
|
61
64
|
RenderTargetCompat: webgpu.RenderTarget,
|
|
65
|
+
WebGLCubeRenderTarget: three.WebGLCubeRenderTarget,
|
|
62
66
|
WebGLRenderTarget: three.WebGLRenderTarget,
|
|
63
67
|
WebGLRenderer: three.WebGLRenderer
|
|
64
68
|
}, [webgpu__namespace]);
|
|
@@ -160,7 +164,7 @@ function useEnvironment({
|
|
|
160
164
|
fiber.useLoader.clear(loader, multiFile ? [files] : files);
|
|
161
165
|
}
|
|
162
166
|
renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
|
|
163
|
-
}, [files, renderer.domElement]);
|
|
167
|
+
}, [extension, files, loader, multiFile, renderer.domElement]);
|
|
164
168
|
const loaderResult = fiber.useLoader(
|
|
165
169
|
loader,
|
|
166
170
|
multiFile ? [files] : files,
|
|
@@ -332,15 +336,16 @@ function EnvironmentPortal({
|
|
|
332
336
|
preset = void 0,
|
|
333
337
|
extensions
|
|
334
338
|
}) {
|
|
335
|
-
const
|
|
339
|
+
const renderer = fiber.useThree((state) => state.renderer);
|
|
340
|
+
const isLegacy = fiber.useThree((state) => state.isLegacy);
|
|
336
341
|
const defaultScene = fiber.useThree((state) => state.scene);
|
|
337
342
|
const camera = React__namespace.useRef(null);
|
|
338
343
|
const [virtualScene] = React__namespace.useState(() => new webgpu.Scene());
|
|
339
344
|
const fbo = React__namespace.useMemo(() => {
|
|
340
|
-
const fbo2 = new
|
|
345
|
+
const fbo2 = isLegacy ? new three.WebGLCubeRenderTarget(resolution) : new webgpu.CubeRenderTarget(resolution);
|
|
341
346
|
fbo2.texture.type = webgpu.HalfFloatType;
|
|
342
347
|
return fbo2;
|
|
343
|
-
}, [resolution]);
|
|
348
|
+
}, [resolution, isLegacy]);
|
|
344
349
|
React__namespace.useEffect(() => {
|
|
345
350
|
return () => {
|
|
346
351
|
fbo.dispose();
|
|
@@ -348,10 +353,10 @@ function EnvironmentPortal({
|
|
|
348
353
|
}, [fbo]);
|
|
349
354
|
React__namespace.useLayoutEffect(() => {
|
|
350
355
|
if (frames === 1) {
|
|
351
|
-
const autoClear =
|
|
352
|
-
|
|
353
|
-
camera.current.update(
|
|
354
|
-
|
|
356
|
+
const autoClear = renderer.autoClear;
|
|
357
|
+
renderer.autoClear = true;
|
|
358
|
+
camera.current.update(renderer, virtualScene);
|
|
359
|
+
renderer.autoClear = autoClear;
|
|
355
360
|
}
|
|
356
361
|
return setEnvProps(background, scene, defaultScene, fbo.texture, {
|
|
357
362
|
backgroundBlurriness: blur ?? backgroundBlurriness,
|
|
@@ -360,14 +365,29 @@ function EnvironmentPortal({
|
|
|
360
365
|
environmentIntensity,
|
|
361
366
|
environmentRotation
|
|
362
367
|
});
|
|
363
|
-
}, [
|
|
368
|
+
}, [
|
|
369
|
+
children,
|
|
370
|
+
virtualScene,
|
|
371
|
+
fbo.texture,
|
|
372
|
+
scene,
|
|
373
|
+
defaultScene,
|
|
374
|
+
background,
|
|
375
|
+
frames,
|
|
376
|
+
renderer,
|
|
377
|
+
blur,
|
|
378
|
+
backgroundBlurriness,
|
|
379
|
+
backgroundIntensity,
|
|
380
|
+
backgroundRotation,
|
|
381
|
+
environmentIntensity,
|
|
382
|
+
environmentRotation
|
|
383
|
+
]);
|
|
364
384
|
let count = 1;
|
|
365
385
|
fiber.useFrame(() => {
|
|
366
386
|
if (frames === Infinity || count < frames) {
|
|
367
|
-
const autoClear =
|
|
368
|
-
|
|
369
|
-
camera.current.update(
|
|
370
|
-
|
|
387
|
+
const autoClear = renderer.autoClear;
|
|
388
|
+
renderer.autoClear = true;
|
|
389
|
+
camera.current.update(renderer, virtualScene);
|
|
390
|
+
renderer.autoClear = autoClear;
|
|
371
391
|
count++;
|
|
372
392
|
}
|
|
373
393
|
});
|
|
@@ -431,10 +451,9 @@ function Environment(props) {
|
|
|
431
451
|
return props.ground ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentGround, { ...props }) : props.map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { ...props }) : props.children ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentPortal, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props });
|
|
432
452
|
}
|
|
433
453
|
|
|
434
|
-
var __defProp
|
|
435
|
-
var __defNormalProp
|
|
436
|
-
var __publicField
|
|
437
|
-
const act = React__namespace["act"];
|
|
454
|
+
var __defProp = Object.defineProperty;
|
|
455
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
456
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
438
457
|
const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
|
|
439
458
|
function useMutableCallback(fn) {
|
|
440
459
|
const ref = React__namespace.useRef(fn);
|
|
@@ -465,7 +484,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
|
|
|
465
484
|
return _a = class extends React__namespace.Component {
|
|
466
485
|
constructor() {
|
|
467
486
|
super(...arguments);
|
|
468
|
-
__publicField
|
|
487
|
+
__publicField(this, "state", { error: false });
|
|
469
488
|
}
|
|
470
489
|
componentDidCatch(err) {
|
|
471
490
|
this.props.set(err);
|
|
@@ -473,7 +492,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
|
|
|
473
492
|
render() {
|
|
474
493
|
return this.state.error ? null : this.props.children;
|
|
475
494
|
}
|
|
476
|
-
}, __publicField
|
|
495
|
+
}, __publicField(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
|
|
477
496
|
})();
|
|
478
497
|
|
|
479
498
|
const is = {
|
|
@@ -610,8 +629,7 @@ function prepare(target, root, type, props) {
|
|
|
610
629
|
object,
|
|
611
630
|
eventCount: 0,
|
|
612
631
|
handlers: {},
|
|
613
|
-
isHidden: false
|
|
614
|
-
deferredRefs: []
|
|
632
|
+
isHidden: false
|
|
615
633
|
};
|
|
616
634
|
if (object) object.__r3f = instance;
|
|
617
635
|
}
|
|
@@ -768,6 +786,17 @@ function unregisterVisibility(store, object) {
|
|
|
768
786
|
internal.visibilityRegistry.delete(object.uuid);
|
|
769
787
|
internal.occlusionCache.delete(object);
|
|
770
788
|
}
|
|
789
|
+
function updateVisibilityHandlers(store, object, handlers) {
|
|
790
|
+
const { internal } = store.getState();
|
|
791
|
+
const entry = internal.visibilityRegistry.get(object.uuid);
|
|
792
|
+
if (!entry) return false;
|
|
793
|
+
entry.handlers = handlers;
|
|
794
|
+
if ((handlers.onOccluded || handlers.onVisible) && !internal.occlusionEnabled) {
|
|
795
|
+
object.occlusionTest = true;
|
|
796
|
+
enableOcclusion(store);
|
|
797
|
+
}
|
|
798
|
+
return true;
|
|
799
|
+
}
|
|
771
800
|
function checkVisibility(state) {
|
|
772
801
|
const { internal, camera } = state;
|
|
773
802
|
const registry = internal.visibilityRegistry;
|
|
@@ -928,9 +957,9 @@ function diffProps(instance, newProps) {
|
|
|
928
957
|
const { root, key } = resolve(instance.object, prop);
|
|
929
958
|
if (root.constructor && root.constructor.length === 0) {
|
|
930
959
|
const ctor = getMemoizedPrototype(root);
|
|
931
|
-
if (!is.und(ctor)) changedProps[
|
|
960
|
+
if (!is.und(ctor)) changedProps[prop] = ctor[key];
|
|
932
961
|
} else {
|
|
933
|
-
changedProps[
|
|
962
|
+
changedProps[prop] = 0;
|
|
934
963
|
}
|
|
935
964
|
}
|
|
936
965
|
return changedProps;
|
|
@@ -955,10 +984,7 @@ function applyProps(object, props) {
|
|
|
955
984
|
continue;
|
|
956
985
|
}
|
|
957
986
|
if (value === void 0) continue;
|
|
958
|
-
if (isFromRef(value))
|
|
959
|
-
instance?.deferredRefs?.push({ prop, ref: value[FROM_REF] });
|
|
960
|
-
continue;
|
|
961
|
-
}
|
|
987
|
+
if (isFromRef(value)) continue;
|
|
962
988
|
if (isOnce(value)) {
|
|
963
989
|
if (instance?.appliedOnce?.has(prop)) continue;
|
|
964
990
|
if (instance) {
|
|
@@ -994,8 +1020,24 @@ function applyProps(object, props) {
|
|
|
994
1020
|
} else if (isVectorLike(target) && is.num(value)) {
|
|
995
1021
|
if ("setScalar" in target && typeof target.setScalar === "function") target.setScalar(value);
|
|
996
1022
|
else target.set(value);
|
|
1023
|
+
} else if (root instanceof webgpu.ShaderMaterial && key === "uniforms" && is.obj(value)) {
|
|
1024
|
+
if (!is.obj(root.uniforms)) root.uniforms = {};
|
|
1025
|
+
const uniforms = root.uniforms;
|
|
1026
|
+
const nextUniforms = value;
|
|
1027
|
+
for (const name in nextUniforms) {
|
|
1028
|
+
const uniform = nextUniforms[name];
|
|
1029
|
+
const targetUniform = uniforms[name];
|
|
1030
|
+
if (targetUniform) Object.assign(targetUniform, uniform);
|
|
1031
|
+
else {
|
|
1032
|
+
const nextUniform = uniform instanceof webgpu.Uniform ? uniform.clone() : new webgpu.Uniform(uniform.value);
|
|
1033
|
+
uniforms[name] = nextUniform;
|
|
1034
|
+
}
|
|
1035
|
+
}
|
|
997
1036
|
} else {
|
|
998
1037
|
root[key] = value;
|
|
1038
|
+
if (key.endsWith("Node") && root.isMaterial) {
|
|
1039
|
+
root.needsUpdate = true;
|
|
1040
|
+
}
|
|
999
1041
|
if (rootState && rootState.renderer?.outputColorSpace === webgpu.SRGBColorSpace && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
|
|
1000
1042
|
root[key].format === webgpu.RGBAFormat && root[key].type === webgpu.UnsignedByteType) {
|
|
1001
1043
|
root[key].colorSpace = rootState.textureColorSpace;
|
|
@@ -1009,6 +1051,9 @@ function applyProps(object, props) {
|
|
|
1009
1051
|
if (instance.eventCount && object2.raycast !== null) {
|
|
1010
1052
|
rootState.internal.interaction.push(object2);
|
|
1011
1053
|
}
|
|
1054
|
+
}
|
|
1055
|
+
if (instance?.parent && rootState?.internal && instance.object?.isObject3D) {
|
|
1056
|
+
const object2 = instance.object;
|
|
1012
1057
|
const root = findInitialRoot(instance);
|
|
1013
1058
|
const visibilityHandlers = {
|
|
1014
1059
|
onFramed: instance.handlers.onFramed,
|
|
@@ -1016,7 +1061,9 @@ function applyProps(object, props) {
|
|
|
1016
1061
|
onVisible: instance.handlers.onVisible
|
|
1017
1062
|
};
|
|
1018
1063
|
if (hasVisibilityHandlers(visibilityHandlers)) {
|
|
1019
|
-
|
|
1064
|
+
if (!updateVisibilityHandlers(root, object2, visibilityHandlers)) {
|
|
1065
|
+
registerVisibility(root, object2, visibilityHandlers);
|
|
1066
|
+
}
|
|
1020
1067
|
} else {
|
|
1021
1068
|
unregisterVisibility(root, object2);
|
|
1022
1069
|
}
|
|
@@ -1029,38 +1076,95 @@ function applyProps(object, props) {
|
|
|
1029
1076
|
return object;
|
|
1030
1077
|
}
|
|
1031
1078
|
|
|
1079
|
+
const DEFAULT_POINTER_ID = 0;
|
|
1080
|
+
const XR_POINTER_ID_START = 1e3;
|
|
1081
|
+
function getPointerState(internal, pointerId) {
|
|
1082
|
+
let state = internal.pointerMap.get(pointerId);
|
|
1083
|
+
if (!state) {
|
|
1084
|
+
state = {
|
|
1085
|
+
hovered: /* @__PURE__ */ new Map(),
|
|
1086
|
+
captured: /* @__PURE__ */ new Map(),
|
|
1087
|
+
initialClick: [0, 0],
|
|
1088
|
+
initialHits: []
|
|
1089
|
+
};
|
|
1090
|
+
internal.pointerMap.set(pointerId, state);
|
|
1091
|
+
}
|
|
1092
|
+
return state;
|
|
1093
|
+
}
|
|
1094
|
+
function getPointerId(event) {
|
|
1095
|
+
return "pointerId" in event ? event.pointerId : DEFAULT_POINTER_ID;
|
|
1096
|
+
}
|
|
1032
1097
|
function makeId(event) {
|
|
1033
1098
|
return (event.eventObject || event.object).uuid + "/" + event.index + event.instanceId;
|
|
1034
1099
|
}
|
|
1035
|
-
function releaseInternalPointerCapture(
|
|
1036
|
-
const
|
|
1100
|
+
function releaseInternalPointerCapture(internal, obj, pointerId) {
|
|
1101
|
+
const pointerState = internal.pointerMap.get(pointerId);
|
|
1102
|
+
if (!pointerState) return;
|
|
1103
|
+
const captureData = pointerState.captured.get(obj);
|
|
1037
1104
|
if (captureData) {
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1105
|
+
pointerState.captured.delete(obj);
|
|
1106
|
+
captureData.target.releasePointerCapture(pointerId);
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
function swapInteractivity(store, object, newObject) {
|
|
1110
|
+
const { internal } = store.getState();
|
|
1111
|
+
for (let i = 0; i < internal.interaction.length; i++) {
|
|
1112
|
+
if (internal.interaction[i] === object) internal.interaction[i] = newObject;
|
|
1113
|
+
}
|
|
1114
|
+
for (const pointerState of internal.pointerMap.values()) {
|
|
1115
|
+
for (let i = 0; i < pointerState.initialHits.length; i++) {
|
|
1116
|
+
if (pointerState.initialHits[i] === object) pointerState.initialHits[i] = newObject;
|
|
1117
|
+
}
|
|
1118
|
+
pointerState.hovered.forEach((value, key) => {
|
|
1119
|
+
if (value.eventObject === object || value.object === object) {
|
|
1120
|
+
pointerState.hovered.delete(key);
|
|
1121
|
+
const next = {
|
|
1122
|
+
...value,
|
|
1123
|
+
eventObject: value.eventObject === object ? newObject : value.eventObject,
|
|
1124
|
+
object: value.object === object ? newObject : value.object
|
|
1125
|
+
};
|
|
1126
|
+
pointerState.hovered.set(makeId(next), next);
|
|
1127
|
+
}
|
|
1128
|
+
});
|
|
1129
|
+
const captureData = pointerState.captured.get(object);
|
|
1130
|
+
if (captureData) {
|
|
1131
|
+
pointerState.captured.delete(object);
|
|
1132
|
+
pointerState.captured.set(newObject, {
|
|
1133
|
+
...captureData,
|
|
1134
|
+
intersection: {
|
|
1135
|
+
...captureData.intersection,
|
|
1136
|
+
object: captureData.intersection.object === object ? newObject : captureData.intersection.object,
|
|
1137
|
+
eventObject: captureData.intersection.eventObject === object ? newObject : captureData.intersection.eventObject
|
|
1138
|
+
}
|
|
1139
|
+
});
|
|
1042
1140
|
}
|
|
1043
1141
|
}
|
|
1142
|
+
unregisterVisibility(store, object);
|
|
1044
1143
|
}
|
|
1045
1144
|
function removeInteractivity(store, object) {
|
|
1046
1145
|
const { internal } = store.getState();
|
|
1047
1146
|
internal.interaction = internal.interaction.filter((o) => o !== object);
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1147
|
+
for (const [pointerId, pointerState] of internal.pointerMap) {
|
|
1148
|
+
pointerState.initialHits = pointerState.initialHits.filter((o) => o !== object);
|
|
1149
|
+
pointerState.hovered.forEach((value, key) => {
|
|
1150
|
+
if (value.eventObject === object || value.object === object) {
|
|
1151
|
+
pointerState.hovered.delete(key);
|
|
1152
|
+
}
|
|
1153
|
+
});
|
|
1154
|
+
if (pointerState.captured.has(object)) {
|
|
1155
|
+
releaseInternalPointerCapture(internal, object, pointerId);
|
|
1052
1156
|
}
|
|
1053
|
-
}
|
|
1054
|
-
internal.capturedMap.forEach((captures, pointerId) => {
|
|
1055
|
-
releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
|
|
1056
|
-
});
|
|
1157
|
+
}
|
|
1057
1158
|
unregisterVisibility(store, object);
|
|
1058
1159
|
}
|
|
1059
1160
|
function createEvents(store) {
|
|
1060
|
-
function calculateDistance(event) {
|
|
1161
|
+
function calculateDistance(event, pointerId) {
|
|
1061
1162
|
const { internal } = store.getState();
|
|
1062
|
-
const
|
|
1063
|
-
|
|
1163
|
+
const pointerState = internal.pointerMap.get(pointerId);
|
|
1164
|
+
if (!pointerState) return 0;
|
|
1165
|
+
const [initialX, initialY] = pointerState.initialClick;
|
|
1166
|
+
const dx = event.offsetX - initialX;
|
|
1167
|
+
const dy = event.offsetY - initialY;
|
|
1064
1168
|
return Math.round(Math.sqrt(dx * dx + dy * dy));
|
|
1065
1169
|
}
|
|
1066
1170
|
function filterPointerEvents(objects) {
|
|
@@ -1096,6 +1200,15 @@ function createEvents(store) {
|
|
|
1096
1200
|
return state2.raycaster.camera ? state2.raycaster.intersectObject(obj, true) : [];
|
|
1097
1201
|
}
|
|
1098
1202
|
let hits = eventsObjects.flatMap(handleRaycast).sort((a, b) => {
|
|
1203
|
+
const aInteractivePriority = a.object.userData?.interactivePriority;
|
|
1204
|
+
const bInteractivePriority = b.object.userData?.interactivePriority;
|
|
1205
|
+
if (aInteractivePriority !== void 0 || bInteractivePriority !== void 0) {
|
|
1206
|
+
if (aInteractivePriority !== void 0 && bInteractivePriority === void 0) return -1;
|
|
1207
|
+
if (bInteractivePriority !== void 0 && aInteractivePriority === void 0) return 1;
|
|
1208
|
+
if (aInteractivePriority !== bInteractivePriority) {
|
|
1209
|
+
return (bInteractivePriority ?? 0) - (aInteractivePriority ?? 0);
|
|
1210
|
+
}
|
|
1211
|
+
}
|
|
1099
1212
|
const aState = getRootState(a.object);
|
|
1100
1213
|
const bState = getRootState(b.object);
|
|
1101
1214
|
const aPriority = aState?.events?.priority ?? 1;
|
|
@@ -1117,9 +1230,13 @@ function createEvents(store) {
|
|
|
1117
1230
|
eventObject = eventObject.parent;
|
|
1118
1231
|
}
|
|
1119
1232
|
}
|
|
1120
|
-
if ("pointerId" in event
|
|
1121
|
-
|
|
1122
|
-
|
|
1233
|
+
if ("pointerId" in event) {
|
|
1234
|
+
const pointerId = event.pointerId;
|
|
1235
|
+
const pointerState = state.internal.pointerMap.get(pointerId);
|
|
1236
|
+
if (pointerState?.captured.size) {
|
|
1237
|
+
for (const captureData of pointerState.captured.values()) {
|
|
1238
|
+
if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
|
|
1239
|
+
}
|
|
1123
1240
|
}
|
|
1124
1241
|
}
|
|
1125
1242
|
return intersections;
|
|
@@ -1132,27 +1249,25 @@ function createEvents(store) {
|
|
|
1132
1249
|
if (state) {
|
|
1133
1250
|
const { raycaster, pointer, camera, internal } = state;
|
|
1134
1251
|
const unprojectedPoint = new webgpu.Vector3(pointer.x, pointer.y, 0).unproject(camera);
|
|
1135
|
-
const hasPointerCapture = (id) =>
|
|
1252
|
+
const hasPointerCapture = (id) => {
|
|
1253
|
+
const pointerState = internal.pointerMap.get(id);
|
|
1254
|
+
return pointerState?.captured.has(hit.eventObject) ?? false;
|
|
1255
|
+
};
|
|
1136
1256
|
const setPointerCapture = (id) => {
|
|
1137
1257
|
const captureData = { intersection: hit, target: event.target };
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
} else {
|
|
1141
|
-
internal.capturedMap.set(id, /* @__PURE__ */ new Map([[hit.eventObject, captureData]]));
|
|
1142
|
-
}
|
|
1258
|
+
const pointerState = getPointerState(internal, id);
|
|
1259
|
+
pointerState.captured.set(hit.eventObject, captureData);
|
|
1143
1260
|
event.target.setPointerCapture(id);
|
|
1144
1261
|
};
|
|
1145
1262
|
const releasePointerCapture = (id) => {
|
|
1146
|
-
|
|
1147
|
-
if (captures) {
|
|
1148
|
-
releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
|
|
1149
|
-
}
|
|
1263
|
+
releaseInternalPointerCapture(internal, hit.eventObject, id);
|
|
1150
1264
|
};
|
|
1151
1265
|
const extractEventProps = {};
|
|
1152
1266
|
for (const prop in event) {
|
|
1153
1267
|
const property = event[prop];
|
|
1154
1268
|
if (typeof property !== "function") extractEventProps[prop] = property;
|
|
1155
1269
|
}
|
|
1270
|
+
const eventPointerId = "pointerId" in event ? event.pointerId : void 0;
|
|
1156
1271
|
const raycastEvent = {
|
|
1157
1272
|
...hit,
|
|
1158
1273
|
...extractEventProps,
|
|
@@ -1163,18 +1278,19 @@ function createEvents(store) {
|
|
|
1163
1278
|
unprojectedPoint,
|
|
1164
1279
|
ray: raycaster.ray,
|
|
1165
1280
|
camera,
|
|
1281
|
+
pointerId: eventPointerId,
|
|
1166
1282
|
// Hijack stopPropagation, which just sets a flag
|
|
1167
1283
|
stopPropagation() {
|
|
1168
|
-
const
|
|
1284
|
+
const pointerState = eventPointerId !== void 0 ? internal.pointerMap.get(eventPointerId) : void 0;
|
|
1169
1285
|
if (
|
|
1170
1286
|
// ...if this pointer hasn't been captured
|
|
1171
|
-
!
|
|
1172
|
-
|
|
1287
|
+
!pointerState?.captured.size || // ... or if the hit object is capturing the pointer
|
|
1288
|
+
pointerState.captured.has(hit.eventObject)
|
|
1173
1289
|
) {
|
|
1174
1290
|
raycastEvent.stopped = localState.stopped = true;
|
|
1175
|
-
if (
|
|
1291
|
+
if (pointerState?.hovered.size && Array.from(pointerState.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
|
|
1176
1292
|
const higher = intersections.slice(0, intersections.indexOf(hit));
|
|
1177
|
-
cancelPointer([...higher, hit]);
|
|
1293
|
+
cancelPointer([...higher, hit], eventPointerId);
|
|
1178
1294
|
}
|
|
1179
1295
|
}
|
|
1180
1296
|
},
|
|
@@ -1190,15 +1306,18 @@ function createEvents(store) {
|
|
|
1190
1306
|
}
|
|
1191
1307
|
return intersections;
|
|
1192
1308
|
}
|
|
1193
|
-
function cancelPointer(intersections) {
|
|
1309
|
+
function cancelPointer(intersections, pointerId) {
|
|
1194
1310
|
const { internal } = store.getState();
|
|
1195
|
-
|
|
1311
|
+
const pid = pointerId ?? DEFAULT_POINTER_ID;
|
|
1312
|
+
const pointerState = internal.pointerMap.get(pid);
|
|
1313
|
+
if (!pointerState) return;
|
|
1314
|
+
for (const [hoveredId, hoveredObj] of pointerState.hovered) {
|
|
1196
1315
|
if (!intersections.length || !intersections.find(
|
|
1197
1316
|
(hit) => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId
|
|
1198
1317
|
)) {
|
|
1199
1318
|
const eventObject = hoveredObj.eventObject;
|
|
1200
1319
|
const instance = eventObject.__r3f;
|
|
1201
|
-
|
|
1320
|
+
pointerState.hovered.delete(hoveredId);
|
|
1202
1321
|
if (instance?.eventCount) {
|
|
1203
1322
|
const handlers = instance.handlers;
|
|
1204
1323
|
const data = { ...hoveredObj, intersections };
|
|
@@ -1227,41 +1346,118 @@ function createEvents(store) {
|
|
|
1227
1346
|
instance?.handlers.onDropMissed?.(event);
|
|
1228
1347
|
}
|
|
1229
1348
|
}
|
|
1349
|
+
function cleanupPointer(pointerId) {
|
|
1350
|
+
const { internal } = store.getState();
|
|
1351
|
+
const pointerState = internal.pointerMap.get(pointerId);
|
|
1352
|
+
if (pointerState) {
|
|
1353
|
+
for (const [, hoveredObj] of pointerState.hovered) {
|
|
1354
|
+
const eventObject = hoveredObj.eventObject;
|
|
1355
|
+
const instance = eventObject.__r3f;
|
|
1356
|
+
if (instance?.eventCount) {
|
|
1357
|
+
const handlers = instance.handlers;
|
|
1358
|
+
const data = { ...hoveredObj, intersections: [] };
|
|
1359
|
+
handlers.onPointerOut?.(data);
|
|
1360
|
+
handlers.onPointerLeave?.(data);
|
|
1361
|
+
}
|
|
1362
|
+
}
|
|
1363
|
+
internal.pointerMap.delete(pointerId);
|
|
1364
|
+
}
|
|
1365
|
+
internal.pointerDirty.delete(pointerId);
|
|
1366
|
+
}
|
|
1367
|
+
function processDeferredPointer(event, pointerId) {
|
|
1368
|
+
const state = store.getState();
|
|
1369
|
+
const { internal } = state;
|
|
1370
|
+
if (!state.events.enabled) return;
|
|
1371
|
+
const filter = filterPointerEvents;
|
|
1372
|
+
const hits = intersect(event, filter);
|
|
1373
|
+
cancelPointer(hits, pointerId);
|
|
1374
|
+
function onIntersect(data) {
|
|
1375
|
+
const eventObject = data.eventObject;
|
|
1376
|
+
const instance = eventObject.__r3f;
|
|
1377
|
+
if (!instance?.eventCount) return;
|
|
1378
|
+
const handlers = instance.handlers;
|
|
1379
|
+
if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
|
|
1380
|
+
const id = makeId(data);
|
|
1381
|
+
const pointerState = getPointerState(internal, pointerId);
|
|
1382
|
+
const hoveredItem = pointerState.hovered.get(id);
|
|
1383
|
+
if (!hoveredItem) {
|
|
1384
|
+
pointerState.hovered.set(id, data);
|
|
1385
|
+
handlers.onPointerOver?.(data);
|
|
1386
|
+
handlers.onPointerEnter?.(data);
|
|
1387
|
+
} else if (hoveredItem.stopped) {
|
|
1388
|
+
data.stopPropagation();
|
|
1389
|
+
}
|
|
1390
|
+
}
|
|
1391
|
+
handlers.onPointerMove?.(data);
|
|
1392
|
+
}
|
|
1393
|
+
handleIntersects(hits, event, 0, onIntersect);
|
|
1394
|
+
}
|
|
1230
1395
|
function handlePointer(name) {
|
|
1231
1396
|
switch (name) {
|
|
1232
1397
|
case "onPointerLeave":
|
|
1233
|
-
case "onPointerCancel":
|
|
1234
1398
|
case "onDragLeave":
|
|
1235
1399
|
return () => cancelPointer([]);
|
|
1400
|
+
// Global cancel of these events
|
|
1401
|
+
case "onPointerCancel":
|
|
1402
|
+
return (event) => {
|
|
1403
|
+
const pointerId = getPointerId(event);
|
|
1404
|
+
cleanupPointer(pointerId);
|
|
1405
|
+
};
|
|
1236
1406
|
case "onLostPointerCapture":
|
|
1237
1407
|
return (event) => {
|
|
1238
1408
|
const { internal } = store.getState();
|
|
1239
|
-
|
|
1409
|
+
const pointerId = getPointerId(event);
|
|
1410
|
+
const pointerState = internal.pointerMap.get(pointerId);
|
|
1411
|
+
if (pointerState?.captured.size) {
|
|
1240
1412
|
requestAnimationFrame(() => {
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1413
|
+
const pointerState2 = internal.pointerMap.get(pointerId);
|
|
1414
|
+
if (pointerState2?.captured.size) {
|
|
1415
|
+
pointerState2.captured.clear();
|
|
1244
1416
|
}
|
|
1417
|
+
cancelPointer([], pointerId);
|
|
1245
1418
|
});
|
|
1246
1419
|
}
|
|
1247
1420
|
};
|
|
1248
1421
|
}
|
|
1249
1422
|
return function handleEvent(event) {
|
|
1250
1423
|
const state = store.getState();
|
|
1251
|
-
const { onPointerMissed, onDragOverMissed, onDropMissed, internal } = state;
|
|
1424
|
+
const { onPointerMissed, onDragOverMissed, onDropMissed, internal, events } = state;
|
|
1425
|
+
const pointerId = getPointerId(event);
|
|
1252
1426
|
internal.lastEvent.current = event;
|
|
1253
|
-
if (!
|
|
1427
|
+
if (!events.enabled) return;
|
|
1254
1428
|
const isPointerMove = name === "onPointerMove";
|
|
1255
1429
|
const isDragOver = name === "onDragOver";
|
|
1256
1430
|
const isDrop = name === "onDrop";
|
|
1257
1431
|
const isClickEvent = name === "onClick" || name === "onContextMenu" || name === "onDoubleClick";
|
|
1432
|
+
const isPointerDown = name === "onPointerDown";
|
|
1433
|
+
const isPointerUp = name === "onPointerUp";
|
|
1434
|
+
const isWheel = name === "onWheel";
|
|
1435
|
+
const canDeferRaycasts = events.frameTimedRaycasts && state.frameloop === "always";
|
|
1436
|
+
if (isPointerMove && canDeferRaycasts) {
|
|
1437
|
+
events.compute?.(event, state);
|
|
1438
|
+
internal.pointerDirty.set(pointerId, event);
|
|
1439
|
+
return;
|
|
1440
|
+
}
|
|
1441
|
+
if (isWheel && canDeferRaycasts && !events.alwaysFireOnScroll) {
|
|
1442
|
+
events.compute?.(event, state);
|
|
1443
|
+
internal.pointerDirty.set(pointerId, event);
|
|
1444
|
+
return;
|
|
1445
|
+
}
|
|
1446
|
+
if ((isClickEvent || isPointerDown || isPointerUp) && internal.pointerDirty.has(pointerId)) {
|
|
1447
|
+
const deferredEvent = internal.pointerDirty.get(pointerId);
|
|
1448
|
+
internal.pointerDirty.delete(pointerId);
|
|
1449
|
+
processDeferredPointer(deferredEvent, pointerId);
|
|
1450
|
+
}
|
|
1258
1451
|
const filter = isPointerMove || isDragOver || isDrop ? filterPointerEvents : void 0;
|
|
1259
1452
|
const hits = intersect(event, filter);
|
|
1260
|
-
const delta = isClickEvent ? calculateDistance(event) : 0;
|
|
1261
|
-
if (
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1453
|
+
const delta = isClickEvent ? calculateDistance(event, pointerId) : 0;
|
|
1454
|
+
if (isPointerDown) {
|
|
1455
|
+
const pointerState2 = getPointerState(internal, pointerId);
|
|
1456
|
+
pointerState2.initialClick = [event.offsetX, event.offsetY];
|
|
1457
|
+
pointerState2.initialHits = hits.map((hit) => hit.eventObject);
|
|
1458
|
+
}
|
|
1459
|
+
const pointerState = internal.pointerMap.get(pointerId);
|
|
1460
|
+
const initialHits = pointerState?.initialHits ?? [];
|
|
1265
1461
|
if (isClickEvent && !hits.length) {
|
|
1266
1462
|
if (delta <= 2) {
|
|
1267
1463
|
pointerMissed(event, internal.interaction);
|
|
@@ -1276,7 +1472,9 @@ function createEvents(store) {
|
|
|
1276
1472
|
dropMissed(event, internal.interaction);
|
|
1277
1473
|
if (onDropMissed) onDropMissed(event);
|
|
1278
1474
|
}
|
|
1279
|
-
if (isPointerMove || isDragOver)
|
|
1475
|
+
if (isPointerMove || isDragOver) {
|
|
1476
|
+
cancelPointer(hits, pointerId);
|
|
1477
|
+
}
|
|
1280
1478
|
function onIntersect(data) {
|
|
1281
1479
|
const eventObject = data.eventObject;
|
|
1282
1480
|
const instance = eventObject.__r3f;
|
|
@@ -1285,9 +1483,10 @@ function createEvents(store) {
|
|
|
1285
1483
|
if (isPointerMove) {
|
|
1286
1484
|
if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
|
|
1287
1485
|
const id = makeId(data);
|
|
1288
|
-
const
|
|
1486
|
+
const pointerState2 = getPointerState(internal, pointerId);
|
|
1487
|
+
const hoveredItem = pointerState2.hovered.get(id);
|
|
1289
1488
|
if (!hoveredItem) {
|
|
1290
|
-
|
|
1489
|
+
pointerState2.hovered.set(id, data);
|
|
1291
1490
|
handlers.onPointerOver?.(data);
|
|
1292
1491
|
handlers.onPointerEnter?.(data);
|
|
1293
1492
|
} else if (hoveredItem.stopped) {
|
|
@@ -1297,9 +1496,10 @@ function createEvents(store) {
|
|
|
1297
1496
|
handlers.onPointerMove?.(data);
|
|
1298
1497
|
} else if (isDragOver) {
|
|
1299
1498
|
const id = makeId(data);
|
|
1300
|
-
const
|
|
1499
|
+
const pointerState2 = getPointerState(internal, pointerId);
|
|
1500
|
+
const hoveredItem = pointerState2.hovered.get(id);
|
|
1301
1501
|
if (!hoveredItem) {
|
|
1302
|
-
|
|
1502
|
+
pointerState2.hovered.set(id, data);
|
|
1303
1503
|
handlers.onDragOverEnter?.(data);
|
|
1304
1504
|
} else if (hoveredItem.stopped) {
|
|
1305
1505
|
data.stopPropagation();
|
|
@@ -1310,18 +1510,18 @@ function createEvents(store) {
|
|
|
1310
1510
|
} else {
|
|
1311
1511
|
const handler = handlers[name];
|
|
1312
1512
|
if (handler) {
|
|
1313
|
-
if (!isClickEvent ||
|
|
1513
|
+
if (!isClickEvent || initialHits.includes(eventObject)) {
|
|
1314
1514
|
pointerMissed(
|
|
1315
1515
|
event,
|
|
1316
|
-
internal.interaction.filter((object) => !
|
|
1516
|
+
internal.interaction.filter((object) => !initialHits.includes(object))
|
|
1317
1517
|
);
|
|
1318
1518
|
handler(data);
|
|
1319
1519
|
}
|
|
1320
1520
|
} else {
|
|
1321
|
-
if (isClickEvent &&
|
|
1521
|
+
if (isClickEvent && initialHits.includes(eventObject)) {
|
|
1322
1522
|
pointerMissed(
|
|
1323
1523
|
event,
|
|
1324
|
-
internal.interaction.filter((object) => !
|
|
1524
|
+
internal.interaction.filter((object) => !initialHits.includes(object))
|
|
1325
1525
|
);
|
|
1326
1526
|
}
|
|
1327
1527
|
}
|
|
@@ -1330,7 +1530,15 @@ function createEvents(store) {
|
|
|
1330
1530
|
handleIntersects(hits, event, delta, onIntersect);
|
|
1331
1531
|
};
|
|
1332
1532
|
}
|
|
1333
|
-
|
|
1533
|
+
function flushDeferredPointers() {
|
|
1534
|
+
const { internal, events } = store.getState();
|
|
1535
|
+
if (!events.frameTimedRaycasts) return;
|
|
1536
|
+
for (const [pointerId, event] of internal.pointerDirty) {
|
|
1537
|
+
processDeferredPointer(event, pointerId);
|
|
1538
|
+
}
|
|
1539
|
+
internal.pointerDirty.clear();
|
|
1540
|
+
}
|
|
1541
|
+
return { handlePointer, flushDeferredPointers, processDeferredPointer };
|
|
1334
1542
|
}
|
|
1335
1543
|
const DOM_EVENTS = {
|
|
1336
1544
|
onClick: ["click", false],
|
|
@@ -1349,10 +1557,15 @@ const DOM_EVENTS = {
|
|
|
1349
1557
|
onLostPointerCapture: ["lostpointercapture", true]
|
|
1350
1558
|
};
|
|
1351
1559
|
function createPointerEvents(store) {
|
|
1352
|
-
const { handlePointer } = createEvents(store);
|
|
1560
|
+
const { handlePointer, flushDeferredPointers, processDeferredPointer } = createEvents(store);
|
|
1561
|
+
let nextXRPointerId = XR_POINTER_ID_START;
|
|
1562
|
+
const xrPointers = /* @__PURE__ */ new Map();
|
|
1353
1563
|
return {
|
|
1354
1564
|
priority: 1,
|
|
1355
1565
|
enabled: true,
|
|
1566
|
+
frameTimedRaycasts: true,
|
|
1567
|
+
alwaysFireOnScroll: true,
|
|
1568
|
+
updateOnFrame: false,
|
|
1356
1569
|
compute(event, state) {
|
|
1357
1570
|
state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
|
|
1358
1571
|
state.raycaster.setFromCamera(state.pointer, state.camera);
|
|
@@ -1362,11 +1575,33 @@ function createPointerEvents(store) {
|
|
|
1362
1575
|
(acc, key) => ({ ...acc, [key]: handlePointer(key) }),
|
|
1363
1576
|
{}
|
|
1364
1577
|
),
|
|
1365
|
-
update: () => {
|
|
1578
|
+
update: (pointerId) => {
|
|
1366
1579
|
const { events, internal } = store.getState();
|
|
1367
|
-
if (
|
|
1580
|
+
if (!events.handlers) return;
|
|
1581
|
+
if (pointerId !== void 0) {
|
|
1582
|
+
const event = internal.pointerDirty.get(pointerId);
|
|
1583
|
+
if (event) {
|
|
1584
|
+
internal.pointerDirty.delete(pointerId);
|
|
1585
|
+
processDeferredPointer(event, pointerId);
|
|
1586
|
+
} else if (internal.lastEvent?.current) {
|
|
1587
|
+
processDeferredPointer(internal.lastEvent.current, pointerId);
|
|
1588
|
+
}
|
|
1589
|
+
} else {
|
|
1590
|
+
flushDeferredPointers();
|
|
1591
|
+
if (internal.lastEvent?.current) {
|
|
1592
|
+
events.handlers.onPointerMove(internal.lastEvent.current);
|
|
1593
|
+
}
|
|
1594
|
+
}
|
|
1595
|
+
},
|
|
1596
|
+
flush: () => {
|
|
1597
|
+
const { events, internal } = store.getState();
|
|
1598
|
+
flushDeferredPointers();
|
|
1599
|
+
if (events.updateOnFrame && internal.lastEvent?.current && events.handlers) {
|
|
1600
|
+
events.handlers.onPointerMove(internal.lastEvent.current);
|
|
1601
|
+
}
|
|
1368
1602
|
},
|
|
1369
1603
|
connect: (target) => {
|
|
1604
|
+
if (!target) return;
|
|
1370
1605
|
const { set, events } = store.getState();
|
|
1371
1606
|
events.disconnect?.();
|
|
1372
1607
|
set((state) => ({ events: { ...state.events, connected: target } }));
|
|
@@ -1390,6 +1625,33 @@ function createPointerEvents(store) {
|
|
|
1390
1625
|
}
|
|
1391
1626
|
set((state) => ({ events: { ...state.events, connected: void 0 } }));
|
|
1392
1627
|
}
|
|
1628
|
+
},
|
|
1629
|
+
// PREVIEW (A8): the XR pointer registration API may change before stable.
|
|
1630
|
+
registerPointer: (config) => {
|
|
1631
|
+
const pointerId = nextXRPointerId++;
|
|
1632
|
+
xrPointers.set(pointerId, config);
|
|
1633
|
+
const { internal } = store.getState();
|
|
1634
|
+
getPointerState(internal, pointerId);
|
|
1635
|
+
return pointerId;
|
|
1636
|
+
},
|
|
1637
|
+
unregisterPointer: (pointerId) => {
|
|
1638
|
+
xrPointers.delete(pointerId);
|
|
1639
|
+
const { internal } = store.getState();
|
|
1640
|
+
const pointerState = internal.pointerMap.get(pointerId);
|
|
1641
|
+
if (pointerState) {
|
|
1642
|
+
for (const [, hoveredObj] of pointerState.hovered) {
|
|
1643
|
+
const eventObject = hoveredObj.eventObject;
|
|
1644
|
+
const instance = eventObject.__r3f;
|
|
1645
|
+
if (instance?.eventCount) {
|
|
1646
|
+
const handlers = instance.handlers;
|
|
1647
|
+
const data = { ...hoveredObj, intersections: [] };
|
|
1648
|
+
handlers.onPointerOut?.(data);
|
|
1649
|
+
handlers.onPointerLeave?.(data);
|
|
1650
|
+
}
|
|
1651
|
+
}
|
|
1652
|
+
internal.pointerMap.delete(pointerId);
|
|
1653
|
+
}
|
|
1654
|
+
internal.pointerDirty.delete(pointerId);
|
|
1393
1655
|
}
|
|
1394
1656
|
};
|
|
1395
1657
|
}
|
|
@@ -1451,1036 +1713,11 @@ function notifyAlpha({ message, link }) {
|
|
|
1451
1713
|
}
|
|
1452
1714
|
}
|
|
1453
1715
|
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
const
|
|
1458
|
-
|
|
1459
|
-
constructor() {
|
|
1460
|
-
/** Ordered list of phase nodes */
|
|
1461
|
-
__publicField$1(this, "phases", []);
|
|
1462
|
-
/** Quick lookup by name */
|
|
1463
|
-
__publicField$1(this, "phaseMap", /* @__PURE__ */ new Map());
|
|
1464
|
-
/** Cached ordered names (invalidated on changes) */
|
|
1465
|
-
__publicField$1(this, "orderedNamesCache", null);
|
|
1466
|
-
this.initializeDefaultPhases();
|
|
1467
|
-
}
|
|
1468
|
-
//* Initialization --------------------------------
|
|
1469
|
-
initializeDefaultPhases() {
|
|
1470
|
-
for (const name of DEFAULT_PHASES) {
|
|
1471
|
-
const node = { name, isAutoGenerated: false };
|
|
1472
|
-
this.phases.push(node);
|
|
1473
|
-
this.phaseMap.set(name, node);
|
|
1474
|
-
}
|
|
1475
|
-
this.invalidateCache();
|
|
1476
|
-
}
|
|
1477
|
-
//* Public API --------------------------------
|
|
1478
|
-
/**
|
|
1479
|
-
* Add a named phase to the graph
|
|
1480
|
-
* @param name - Phase name (must be unique)
|
|
1481
|
-
* @param options - Position options (before or after another phase)
|
|
1482
|
-
*/
|
|
1483
|
-
addPhase(name, options = {}) {
|
|
1484
|
-
if (this.phaseMap.has(name)) {
|
|
1485
|
-
console.warn(`[useFrame] Phase "${name}" already exists`);
|
|
1486
|
-
return;
|
|
1487
|
-
}
|
|
1488
|
-
const { before, after } = options;
|
|
1489
|
-
const node = { name, isAutoGenerated: false };
|
|
1490
|
-
let insertIndex = this.phases.length;
|
|
1491
|
-
const targetIndex = this.getPhaseIndex(before ?? after);
|
|
1492
|
-
if (targetIndex !== -1) {
|
|
1493
|
-
insertIndex = before ? targetIndex : targetIndex + 1;
|
|
1494
|
-
} else {
|
|
1495
|
-
const constraintType = before ? "before" : "after";
|
|
1496
|
-
console.warn(`[useFrame] Phase "${before ?? after}" not found for '${constraintType}' constraint`);
|
|
1497
|
-
}
|
|
1498
|
-
this.phases.splice(insertIndex, 0, node);
|
|
1499
|
-
this.phaseMap.set(name, node);
|
|
1500
|
-
this.invalidateCache();
|
|
1501
|
-
}
|
|
1502
|
-
/**
|
|
1503
|
-
* Get ordered list of phase names
|
|
1504
|
-
*/
|
|
1505
|
-
getOrderedPhases() {
|
|
1506
|
-
if (this.orderedNamesCache === null) this.orderedNamesCache = this.phases.map((p) => p.name);
|
|
1507
|
-
return this.orderedNamesCache;
|
|
1508
|
-
}
|
|
1509
|
-
/**
|
|
1510
|
-
* Check if a phase exists
|
|
1511
|
-
*/
|
|
1512
|
-
hasPhase(name) {
|
|
1513
|
-
return this.phaseMap.has(name);
|
|
1514
|
-
}
|
|
1515
|
-
/**
|
|
1516
|
-
* Get the index of a phase (-1 if not found)
|
|
1517
|
-
*/
|
|
1518
|
-
getPhaseIndex(name) {
|
|
1519
|
-
if (!name) return -1;
|
|
1520
|
-
return this.phases.findIndex((p) => p.name === name);
|
|
1521
|
-
}
|
|
1522
|
-
/**
|
|
1523
|
-
* Ensure a phase exists, creating an auto-generated one if needed.
|
|
1524
|
-
* Used for resolving before/after constraints.
|
|
1525
|
-
*
|
|
1526
|
-
* @param name - The phase name to ensure exists
|
|
1527
|
-
* @returns The phase name (may be auto-generated like 'before:render')
|
|
1528
|
-
*/
|
|
1529
|
-
ensurePhase(name) {
|
|
1530
|
-
if (this.phaseMap.has(name)) return name;
|
|
1531
|
-
const node = { name, isAutoGenerated: true };
|
|
1532
|
-
this.phases.push(node);
|
|
1533
|
-
this.phaseMap.set(name, node);
|
|
1534
|
-
this.invalidateCache();
|
|
1535
|
-
return name;
|
|
1536
|
-
}
|
|
1537
|
-
/**
|
|
1538
|
-
* Resolve where a job with before/after constraints should go.
|
|
1539
|
-
* Creates auto-generated phases if needed.
|
|
1540
|
-
*
|
|
1541
|
-
* @param before - Phase(s) to run before
|
|
1542
|
-
* @param after - Phase(s) to run after
|
|
1543
|
-
* @returns The resolved phase name
|
|
1544
|
-
*/
|
|
1545
|
-
resolveConstraintPhase(before, after) {
|
|
1546
|
-
const beforeArr = before ? Array.isArray(before) ? before : [before] : [];
|
|
1547
|
-
const afterArr = after ? Array.isArray(after) ? after : [after] : [];
|
|
1548
|
-
if (beforeArr.length > 0) {
|
|
1549
|
-
return this.ensureAutoPhase(beforeArr[0], "before", 0);
|
|
1550
|
-
}
|
|
1551
|
-
if (afterArr.length > 0) {
|
|
1552
|
-
return this.ensureAutoPhase(afterArr[0], "after", 1);
|
|
1553
|
-
}
|
|
1554
|
-
return "update";
|
|
1555
|
-
}
|
|
1556
|
-
/**
|
|
1557
|
-
* Ensure an auto-generated phase exists relative to a target phase.
|
|
1558
|
-
* Creates the phase if it doesn't exist, inserting it at the correct position.
|
|
1559
|
-
*
|
|
1560
|
-
* @param target - The target phase name to position relative to
|
|
1561
|
-
* @param prefix - Prefix for auto-generated phase name ('before' or 'after')
|
|
1562
|
-
* @param offset - Insertion offset (0 for before, 1 for after)
|
|
1563
|
-
* @returns The auto-generated phase name
|
|
1564
|
-
*/
|
|
1565
|
-
ensureAutoPhase(target, prefix, offset) {
|
|
1566
|
-
const autoName = `${prefix}:${target}`;
|
|
1567
|
-
if (this.phaseMap.has(autoName)) return autoName;
|
|
1568
|
-
const node = { name: autoName, isAutoGenerated: true };
|
|
1569
|
-
const targetIndex = this.getPhaseIndex(target);
|
|
1570
|
-
if (targetIndex !== -1) this.phases.splice(targetIndex + offset, 0, node);
|
|
1571
|
-
else this.phases.push(node);
|
|
1572
|
-
this.phaseMap.set(autoName, node);
|
|
1573
|
-
this.invalidateCache();
|
|
1574
|
-
return autoName;
|
|
1575
|
-
}
|
|
1576
|
-
// Internal --------------------------------
|
|
1577
|
-
invalidateCache() {
|
|
1578
|
-
this.orderedNamesCache = null;
|
|
1579
|
-
}
|
|
1580
|
-
}
|
|
1581
|
-
|
|
1582
|
-
function rebuildSortedJobs(jobs, phaseGraph) {
|
|
1583
|
-
const orderedPhases = phaseGraph.getOrderedPhases();
|
|
1584
|
-
const buckets = /* @__PURE__ */ new Map();
|
|
1585
|
-
for (const phase of orderedPhases) {
|
|
1586
|
-
buckets.set(phase, []);
|
|
1587
|
-
}
|
|
1588
|
-
for (const job of jobs.values()) {
|
|
1589
|
-
if (!job.enabled) continue;
|
|
1590
|
-
let bucket = buckets.get(job.phase);
|
|
1591
|
-
if (!bucket) {
|
|
1592
|
-
bucket = [];
|
|
1593
|
-
buckets.set(job.phase, bucket);
|
|
1594
|
-
}
|
|
1595
|
-
bucket.push(job);
|
|
1596
|
-
}
|
|
1597
|
-
const sortedBuckets = [];
|
|
1598
|
-
for (const phase of orderedPhases) {
|
|
1599
|
-
const bucket = buckets.get(phase);
|
|
1600
|
-
if (!bucket || bucket.length === 0) continue;
|
|
1601
|
-
bucket.sort((a, b) => {
|
|
1602
|
-
if (a.priority !== b.priority) return b.priority - a.priority;
|
|
1603
|
-
return a.index - b.index;
|
|
1604
|
-
});
|
|
1605
|
-
sortedBuckets.push(hasCrossJobConstraints(bucket) ? topologicalSort(bucket) : bucket);
|
|
1606
|
-
}
|
|
1607
|
-
for (const [phase, bucket] of buckets) {
|
|
1608
|
-
if (!orderedPhases.includes(phase) && bucket.length > 0) {
|
|
1609
|
-
bucket.sort((a, b) => {
|
|
1610
|
-
if (a.priority !== b.priority) return b.priority - a.priority;
|
|
1611
|
-
return a.index - b.index;
|
|
1612
|
-
});
|
|
1613
|
-
sortedBuckets.push(bucket);
|
|
1614
|
-
}
|
|
1615
|
-
}
|
|
1616
|
-
return sortedBuckets.flat();
|
|
1617
|
-
}
|
|
1618
|
-
function hasCrossJobConstraints(bucket) {
|
|
1619
|
-
const jobIds = new Set(bucket.map((j) => j.id));
|
|
1620
|
-
for (const job of bucket) {
|
|
1621
|
-
for (const ref of job.before) {
|
|
1622
|
-
if (jobIds.has(ref)) return true;
|
|
1623
|
-
}
|
|
1624
|
-
for (const ref of job.after) {
|
|
1625
|
-
if (jobIds.has(ref)) return true;
|
|
1626
|
-
}
|
|
1627
|
-
}
|
|
1628
|
-
return false;
|
|
1629
|
-
}
|
|
1630
|
-
function topologicalSort(jobs) {
|
|
1631
|
-
const n = jobs.length;
|
|
1632
|
-
if (n <= 1) return jobs;
|
|
1633
|
-
const jobMap = /* @__PURE__ */ new Map();
|
|
1634
|
-
const inDegree = /* @__PURE__ */ new Map();
|
|
1635
|
-
const adjacency = /* @__PURE__ */ new Map();
|
|
1636
|
-
for (const job of jobs) {
|
|
1637
|
-
jobMap.set(job.id, job);
|
|
1638
|
-
inDegree.set(job.id, 0);
|
|
1639
|
-
adjacency.set(job.id, []);
|
|
1640
|
-
}
|
|
1641
|
-
for (const job of jobs) {
|
|
1642
|
-
for (const ref of job.before) {
|
|
1643
|
-
if (jobMap.has(ref)) {
|
|
1644
|
-
adjacency.get(job.id).push(ref);
|
|
1645
|
-
inDegree.set(ref, inDegree.get(ref) + 1);
|
|
1646
|
-
}
|
|
1647
|
-
}
|
|
1648
|
-
for (const ref of job.after) {
|
|
1649
|
-
if (jobMap.has(ref)) {
|
|
1650
|
-
adjacency.get(ref).push(job.id);
|
|
1651
|
-
inDegree.set(job.id, inDegree.get(job.id) + 1);
|
|
1652
|
-
}
|
|
1653
|
-
}
|
|
1654
|
-
}
|
|
1655
|
-
const queue = [];
|
|
1656
|
-
for (const job of jobs) {
|
|
1657
|
-
if (inDegree.get(job.id) === 0) {
|
|
1658
|
-
queue.push(job);
|
|
1659
|
-
}
|
|
1660
|
-
}
|
|
1661
|
-
queue.sort((a, b) => {
|
|
1662
|
-
if (a.priority !== b.priority) return b.priority - a.priority;
|
|
1663
|
-
return a.index - b.index;
|
|
1664
|
-
});
|
|
1665
|
-
const result = [];
|
|
1666
|
-
while (queue.length > 0) {
|
|
1667
|
-
const job = queue.shift();
|
|
1668
|
-
result.push(job);
|
|
1669
|
-
const neighbors = adjacency.get(job.id) || [];
|
|
1670
|
-
for (const neighborId of neighbors) {
|
|
1671
|
-
const newDegree = inDegree.get(neighborId) - 1;
|
|
1672
|
-
inDegree.set(neighborId, newDegree);
|
|
1673
|
-
if (newDegree === 0) {
|
|
1674
|
-
const neighbor = jobMap.get(neighborId);
|
|
1675
|
-
insertSorted(queue, neighbor);
|
|
1676
|
-
}
|
|
1677
|
-
}
|
|
1678
|
-
}
|
|
1679
|
-
if (result.length !== n) {
|
|
1680
|
-
console.warn("[useFrame] Circular dependency detected in job constraints");
|
|
1681
|
-
const resultIds = new Set(result.map((j) => j.id));
|
|
1682
|
-
for (const job of jobs) {
|
|
1683
|
-
if (!resultIds.has(job.id)) result.push(job);
|
|
1684
|
-
}
|
|
1685
|
-
}
|
|
1686
|
-
return result;
|
|
1687
|
-
}
|
|
1688
|
-
function insertSorted(arr, job) {
|
|
1689
|
-
let i = 0;
|
|
1690
|
-
while (i < arr.length) {
|
|
1691
|
-
const cmp = arr[i];
|
|
1692
|
-
if (job.priority > cmp.priority || job.priority === cmp.priority && job.index < cmp.index) {
|
|
1693
|
-
break;
|
|
1694
|
-
}
|
|
1695
|
-
i++;
|
|
1696
|
-
}
|
|
1697
|
-
arr.splice(i, 0, job);
|
|
1698
|
-
}
|
|
1699
|
-
|
|
1700
|
-
function shouldRun(job, now) {
|
|
1701
|
-
if (!job.enabled) return false;
|
|
1702
|
-
if (!job.fps) return true;
|
|
1703
|
-
const minInterval = 1e3 / job.fps;
|
|
1704
|
-
const lastRun = job.lastRun ?? 0;
|
|
1705
|
-
const elapsed = now - lastRun;
|
|
1706
|
-
if (elapsed < minInterval) return false;
|
|
1707
|
-
if (job.drop) {
|
|
1708
|
-
job.lastRun = now;
|
|
1709
|
-
} else {
|
|
1710
|
-
const steps = Math.floor(elapsed / minInterval);
|
|
1711
|
-
job.lastRun = lastRun + steps * minInterval;
|
|
1712
|
-
if (job.lastRun < now - minInterval) {
|
|
1713
|
-
job.lastRun = now;
|
|
1714
|
-
}
|
|
1715
|
-
}
|
|
1716
|
-
return true;
|
|
1717
|
-
}
|
|
1718
|
-
function resetJobTiming(job) {
|
|
1719
|
-
job.lastRun = void 0;
|
|
1720
|
-
}
|
|
1721
|
-
|
|
1722
|
-
var __defProp = Object.defineProperty;
|
|
1723
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1724
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
1725
|
-
const hmrData = (() => {
|
|
1726
|
-
if (typeof process !== "undefined" && process.env.NODE_ENV === "test") return void 0;
|
|
1727
|
-
if (typeof import_meta_hot !== "undefined") return import_meta_hot;
|
|
1728
|
-
try {
|
|
1729
|
-
return (0, eval)("import.meta.hot");
|
|
1730
|
-
} catch {
|
|
1731
|
-
return void 0;
|
|
1732
|
-
}
|
|
1733
|
-
})();
|
|
1734
|
-
const _Scheduler = class _Scheduler {
|
|
1735
|
-
//* Constructor ================================
|
|
1736
|
-
constructor() {
|
|
1737
|
-
//* Critical State ================================
|
|
1738
|
-
__publicField(this, "roots", /* @__PURE__ */ new Map());
|
|
1739
|
-
__publicField(this, "phaseGraph");
|
|
1740
|
-
__publicField(this, "loopState", {
|
|
1741
|
-
running: false,
|
|
1742
|
-
rafHandle: null,
|
|
1743
|
-
lastTime: null,
|
|
1744
|
-
// null = uninitialized, 0+ = valid timestamp
|
|
1745
|
-
frameCount: 0,
|
|
1746
|
-
elapsedTime: 0,
|
|
1747
|
-
createdAt: performance.now()
|
|
1748
|
-
});
|
|
1749
|
-
__publicField(this, "stoppedTime", 0);
|
|
1750
|
-
//* Private State ================================
|
|
1751
|
-
__publicField(this, "nextRootIndex", 0);
|
|
1752
|
-
__publicField(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
|
|
1753
|
-
__publicField(this, "globalAfterJobs", /* @__PURE__ */ new Map());
|
|
1754
|
-
__publicField(this, "nextGlobalIndex", 0);
|
|
1755
|
-
__publicField(this, "idleCallbacks", /* @__PURE__ */ new Set());
|
|
1756
|
-
__publicField(this, "nextJobIndex", 0);
|
|
1757
|
-
__publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
|
|
1758
|
-
__publicField(this, "pendingFrames", 0);
|
|
1759
|
-
__publicField(this, "_frameloop", "always");
|
|
1760
|
-
//* Independent Mode & Error Handling State ================================
|
|
1761
|
-
__publicField(this, "_independent", false);
|
|
1762
|
-
__publicField(this, "errorHandler", null);
|
|
1763
|
-
__publicField(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
|
|
1764
|
-
//* Core Loop Execution Methods ================================
|
|
1765
|
-
/**
|
|
1766
|
-
* Main RAF loop callback.
|
|
1767
|
-
* Executes frame, handles demand mode, and schedules next frame.
|
|
1768
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
1769
|
-
* @returns {void}
|
|
1770
|
-
* @private
|
|
1771
|
-
*/
|
|
1772
|
-
__publicField(this, "loop", (timestamp) => {
|
|
1773
|
-
if (!this.loopState.running) return;
|
|
1774
|
-
this.executeFrame(timestamp);
|
|
1775
|
-
if (this._frameloop === "demand") {
|
|
1776
|
-
this.pendingFrames = Math.max(0, this.pendingFrames - 1);
|
|
1777
|
-
if (this.pendingFrames === 0) {
|
|
1778
|
-
this.notifyIdle(timestamp);
|
|
1779
|
-
return this.stop();
|
|
1780
|
-
}
|
|
1781
|
-
}
|
|
1782
|
-
this.loopState.rafHandle = requestAnimationFrame(this.loop);
|
|
1783
|
-
});
|
|
1784
|
-
this.phaseGraph = new PhaseGraph();
|
|
1785
|
-
}
|
|
1786
|
-
static get instance() {
|
|
1787
|
-
return globalThis[_Scheduler.INSTANCE_KEY] ?? null;
|
|
1788
|
-
}
|
|
1789
|
-
static set instance(value) {
|
|
1790
|
-
globalThis[_Scheduler.INSTANCE_KEY] = value;
|
|
1791
|
-
}
|
|
1792
|
-
/**
|
|
1793
|
-
* Get the global scheduler instance (creates if doesn't exist).
|
|
1794
|
-
* Uses HMR data to preserve instance across hot reloads.
|
|
1795
|
-
* @returns {Scheduler} The singleton scheduler instance
|
|
1796
|
-
*/
|
|
1797
|
-
static get() {
|
|
1798
|
-
if (!_Scheduler.instance && hmrData?.data?.scheduler) {
|
|
1799
|
-
_Scheduler.instance = hmrData.data.scheduler;
|
|
1800
|
-
}
|
|
1801
|
-
if (!_Scheduler.instance) {
|
|
1802
|
-
_Scheduler.instance = new _Scheduler();
|
|
1803
|
-
if (hmrData?.data) {
|
|
1804
|
-
hmrData.data.scheduler = _Scheduler.instance;
|
|
1805
|
-
}
|
|
1806
|
-
}
|
|
1807
|
-
return _Scheduler.instance;
|
|
1808
|
-
}
|
|
1809
|
-
/**
|
|
1810
|
-
* Reset the singleton instance. Stops the loop and clears all state.
|
|
1811
|
-
* Primarily used for testing to ensure clean state between tests.
|
|
1812
|
-
* @returns {void}
|
|
1813
|
-
*/
|
|
1814
|
-
static reset() {
|
|
1815
|
-
if (_Scheduler.instance) {
|
|
1816
|
-
_Scheduler.instance.stop();
|
|
1817
|
-
_Scheduler.instance = null;
|
|
1818
|
-
}
|
|
1819
|
-
if (hmrData?.data) {
|
|
1820
|
-
hmrData.data.scheduler = null;
|
|
1821
|
-
}
|
|
1822
|
-
}
|
|
1823
|
-
//* Getters & Setters ================================
|
|
1824
|
-
get phases() {
|
|
1825
|
-
return this.phaseGraph.getOrderedPhases();
|
|
1826
|
-
}
|
|
1827
|
-
get frameloop() {
|
|
1828
|
-
return this._frameloop;
|
|
1829
|
-
}
|
|
1830
|
-
set frameloop(mode) {
|
|
1831
|
-
if (this._frameloop === mode) return;
|
|
1832
|
-
const wasAlways = this._frameloop === "always";
|
|
1833
|
-
this._frameloop = mode;
|
|
1834
|
-
if (mode === "always" && !this.loopState.running && this.roots.size > 0) this.start();
|
|
1835
|
-
else if (mode !== "always" && wasAlways) this.stop();
|
|
1836
|
-
}
|
|
1837
|
-
get isRunning() {
|
|
1838
|
-
return this.loopState.running;
|
|
1839
|
-
}
|
|
1840
|
-
get isReady() {
|
|
1841
|
-
return this.roots.size > 0;
|
|
1842
|
-
}
|
|
1843
|
-
get independent() {
|
|
1844
|
-
return this._independent;
|
|
1845
|
-
}
|
|
1846
|
-
set independent(value) {
|
|
1847
|
-
this._independent = value;
|
|
1848
|
-
if (value) this.ensureDefaultRoot();
|
|
1849
|
-
}
|
|
1850
|
-
//* Root Management Methods ================================
|
|
1851
|
-
/**
|
|
1852
|
-
* Register a root (Canvas) with the scheduler.
|
|
1853
|
-
* The first root to register starts the RAF loop (if frameloop='always').
|
|
1854
|
-
* @param {string} id - Unique identifier for this root
|
|
1855
|
-
* @param {RootOptions} [options] - Optional configuration with getState and onError callbacks
|
|
1856
|
-
* @returns {() => void} Unsubscribe function to remove this root
|
|
1857
|
-
*/
|
|
1858
|
-
registerRoot(id, options = {}) {
|
|
1859
|
-
if (this.roots.has(id)) {
|
|
1860
|
-
console.warn(`[Scheduler] Root "${id}" already registered`);
|
|
1861
|
-
return () => this.unregisterRoot(id);
|
|
1862
|
-
}
|
|
1863
|
-
const entry = {
|
|
1864
|
-
id,
|
|
1865
|
-
getState: options.getState ?? (() => ({})),
|
|
1866
|
-
jobs: /* @__PURE__ */ new Map(),
|
|
1867
|
-
sortedJobs: [],
|
|
1868
|
-
needsRebuild: false
|
|
1869
|
-
};
|
|
1870
|
-
if (options.onError) {
|
|
1871
|
-
this.errorHandler = options.onError;
|
|
1872
|
-
}
|
|
1873
|
-
this.roots.set(id, entry);
|
|
1874
|
-
if (this.roots.size === 1) {
|
|
1875
|
-
this.notifyRootReady();
|
|
1876
|
-
if (this._frameloop === "always") this.start();
|
|
1877
|
-
}
|
|
1878
|
-
return () => this.unregisterRoot(id);
|
|
1879
|
-
}
|
|
1880
|
-
/**
|
|
1881
|
-
* Unregister a root from the scheduler.
|
|
1882
|
-
* Cleans up all job state listeners for this root's jobs.
|
|
1883
|
-
* The last root to unregister stops the RAF loop.
|
|
1884
|
-
* @param {string} id - The root ID to unregister
|
|
1885
|
-
* @returns {void}
|
|
1886
|
-
*/
|
|
1887
|
-
unregisterRoot(id) {
|
|
1888
|
-
const root = this.roots.get(id);
|
|
1889
|
-
if (!root) return;
|
|
1890
|
-
for (const jobId of root.jobs.keys()) {
|
|
1891
|
-
this.jobStateListeners.delete(jobId);
|
|
1892
|
-
}
|
|
1893
|
-
this.roots.delete(id);
|
|
1894
|
-
if (this.roots.size === 0) {
|
|
1895
|
-
this.stop();
|
|
1896
|
-
this.errorHandler = null;
|
|
1897
|
-
}
|
|
1898
|
-
}
|
|
1899
|
-
/**
|
|
1900
|
-
* Subscribe to be notified when a root becomes available.
|
|
1901
|
-
* Fires immediately if a root already exists.
|
|
1902
|
-
* @param {() => void} callback - Function called when first root registers
|
|
1903
|
-
* @returns {() => void} Unsubscribe function
|
|
1904
|
-
*/
|
|
1905
|
-
onRootReady(callback) {
|
|
1906
|
-
if (this.roots.size > 0) {
|
|
1907
|
-
callback();
|
|
1908
|
-
return () => {
|
|
1909
|
-
};
|
|
1910
|
-
}
|
|
1911
|
-
this.rootReadyCallbacks.add(callback);
|
|
1912
|
-
return () => this.rootReadyCallbacks.delete(callback);
|
|
1913
|
-
}
|
|
1914
|
-
/**
|
|
1915
|
-
* Notify all registered root-ready callbacks.
|
|
1916
|
-
* Called when the first root registers.
|
|
1917
|
-
* @returns {void}
|
|
1918
|
-
* @private
|
|
1919
|
-
*/
|
|
1920
|
-
notifyRootReady() {
|
|
1921
|
-
for (const cb of this.rootReadyCallbacks) {
|
|
1922
|
-
try {
|
|
1923
|
-
cb();
|
|
1924
|
-
} catch (error) {
|
|
1925
|
-
console.error("[Scheduler] Error in root-ready callback:", error);
|
|
1926
|
-
}
|
|
1927
|
-
}
|
|
1928
|
-
this.rootReadyCallbacks.clear();
|
|
1929
|
-
}
|
|
1930
|
-
/**
|
|
1931
|
-
* Ensure a default root exists for independent mode.
|
|
1932
|
-
* Creates a minimal root with no state provider.
|
|
1933
|
-
* @returns {void}
|
|
1934
|
-
* @private
|
|
1935
|
-
*/
|
|
1936
|
-
ensureDefaultRoot() {
|
|
1937
|
-
if (!this.roots.has("__default__")) {
|
|
1938
|
-
this.registerRoot("__default__");
|
|
1939
|
-
}
|
|
1940
|
-
}
|
|
1941
|
-
/**
|
|
1942
|
-
* Trigger error handling for job errors.
|
|
1943
|
-
* Uses the bound error handler if available, otherwise logs to console.
|
|
1944
|
-
* @param {Error} error - The error to handle
|
|
1945
|
-
* @returns {void}
|
|
1946
|
-
*/
|
|
1947
|
-
triggerError(error) {
|
|
1948
|
-
if (this.errorHandler) this.errorHandler(error);
|
|
1949
|
-
else console.error("[Scheduler]", error);
|
|
1950
|
-
}
|
|
1951
|
-
//* Phase Management Methods ================================
|
|
1952
|
-
/**
|
|
1953
|
-
* Add a named phase to the scheduler's execution order.
|
|
1954
|
-
* Marks all roots for rebuild to incorporate the new phase.
|
|
1955
|
-
* @param {string} name - The phase name (e.g., 'physics', 'postprocess')
|
|
1956
|
-
* @param {AddPhaseOptions} [options] - Positioning options (before/after other phases)
|
|
1957
|
-
* @returns {void}
|
|
1958
|
-
* @example
|
|
1959
|
-
* scheduler.addPhase('physics', { before: 'update' });
|
|
1960
|
-
* scheduler.addPhase('postprocess', { after: 'render' });
|
|
1961
|
-
*/
|
|
1962
|
-
addPhase(name, options) {
|
|
1963
|
-
this.phaseGraph.addPhase(name, options);
|
|
1964
|
-
for (const root of this.roots.values()) {
|
|
1965
|
-
root.needsRebuild = true;
|
|
1966
|
-
}
|
|
1967
|
-
}
|
|
1968
|
-
/**
|
|
1969
|
-
* Check if a phase exists in the scheduler.
|
|
1970
|
-
* @param {string} name - The phase name to check
|
|
1971
|
-
* @returns {boolean} True if the phase exists
|
|
1972
|
-
*/
|
|
1973
|
-
hasPhase(name) {
|
|
1974
|
-
return this.phaseGraph.hasPhase(name);
|
|
1975
|
-
}
|
|
1976
|
-
//* Global Job Registration Methods (Deprecated APIs) ================================
|
|
1977
|
-
/**
|
|
1978
|
-
* Register a global job that runs once per frame (not per-root).
|
|
1979
|
-
* Used internally by deprecated addEffect/addAfterEffect APIs.
|
|
1980
|
-
* @param {'before' | 'after'} phase - When to run: 'before' all roots or 'after' all roots
|
|
1981
|
-
* @param {string} id - Unique identifier for this global job
|
|
1982
|
-
* @param {(timestamp: number) => void} callback - Function called each frame with RAF timestamp
|
|
1983
|
-
* @returns {() => void} Unsubscribe function to remove this global job
|
|
1984
|
-
* @deprecated Use useFrame with phases instead
|
|
1985
|
-
*/
|
|
1986
|
-
registerGlobal(phase, id, callback) {
|
|
1987
|
-
const job = { id, callback };
|
|
1988
|
-
if (phase === "before") {
|
|
1989
|
-
this.globalBeforeJobs.set(id, job);
|
|
1990
|
-
} else {
|
|
1991
|
-
this.globalAfterJobs.set(id, job);
|
|
1992
|
-
}
|
|
1993
|
-
return () => {
|
|
1994
|
-
if (phase === "before") this.globalBeforeJobs.delete(id);
|
|
1995
|
-
else this.globalAfterJobs.delete(id);
|
|
1996
|
-
};
|
|
1997
|
-
}
|
|
1998
|
-
//* Idle Callback Methods (Deprecated API) ================================
|
|
1999
|
-
/**
|
|
2000
|
-
* Register an idle callback that fires when the loop stops.
|
|
2001
|
-
* Used internally by deprecated addTail API.
|
|
2002
|
-
* @param {(timestamp: number) => void} callback - Function called when loop becomes idle
|
|
2003
|
-
* @returns {() => void} Unsubscribe function to remove this idle callback
|
|
2004
|
-
* @deprecated Use demand mode with invalidate() instead
|
|
2005
|
-
*/
|
|
2006
|
-
onIdle(callback) {
|
|
2007
|
-
this.idleCallbacks.add(callback);
|
|
2008
|
-
return () => this.idleCallbacks.delete(callback);
|
|
2009
|
-
}
|
|
2010
|
-
/**
|
|
2011
|
-
* Notify all registered idle callbacks.
|
|
2012
|
-
* Called when the loop stops in demand mode.
|
|
2013
|
-
* @param {number} timestamp - The RAF timestamp when idle occurred
|
|
2014
|
-
* @returns {void}
|
|
2015
|
-
* @private
|
|
2016
|
-
*/
|
|
2017
|
-
notifyIdle(timestamp) {
|
|
2018
|
-
for (const cb of this.idleCallbacks) {
|
|
2019
|
-
try {
|
|
2020
|
-
cb(timestamp);
|
|
2021
|
-
} catch (error) {
|
|
2022
|
-
console.error("[Scheduler] Error in idle callback:", error);
|
|
2023
|
-
}
|
|
2024
|
-
}
|
|
2025
|
-
}
|
|
2026
|
-
//* Job Registration & Management Methods ================================
|
|
2027
|
-
/**
|
|
2028
|
-
* Register a job (frame callback) with a specific root.
|
|
2029
|
-
* This is the core registration method used by useFrame internally.
|
|
2030
|
-
* @param {FrameNextCallback} callback - The function to call each frame
|
|
2031
|
-
* @param {JobOptions & { rootId?: string; system?: boolean }} [options] - Job configuration
|
|
2032
|
-
* @param {string} [options.rootId] - Target root ID (defaults to first registered root)
|
|
2033
|
-
* @param {string} [options.id] - Unique job ID (auto-generated if not provided)
|
|
2034
|
-
* @param {string} [options.phase] - Execution phase (defaults to 'update')
|
|
2035
|
-
* @param {number} [options.priority] - Priority within phase (higher = earlier, default 0)
|
|
2036
|
-
* @param {number} [options.fps] - FPS throttle limit
|
|
2037
|
-
* @param {boolean} [options.drop] - Drop frames when behind (default true)
|
|
2038
|
-
* @param {boolean} [options.enabled] - Whether job is active (default true)
|
|
2039
|
-
* @param {boolean} [options.system] - Internal flag for system jobs (not user-facing)
|
|
2040
|
-
* @returns {() => void} Unsubscribe function to remove this job
|
|
2041
|
-
*/
|
|
2042
|
-
register(callback, options = {}) {
|
|
2043
|
-
const rootId = options.rootId;
|
|
2044
|
-
const root = rootId ? this.roots.get(rootId) : this.roots.values().next().value;
|
|
2045
|
-
if (!root) {
|
|
2046
|
-
console.warn("[Scheduler] No root registered. Is this inside a Canvas?");
|
|
2047
|
-
return () => {
|
|
2048
|
-
};
|
|
2049
|
-
}
|
|
2050
|
-
const id = options.id ?? this.generateJobId();
|
|
2051
|
-
let phase = options.phase ?? "update";
|
|
2052
|
-
if (!options.phase && (options.before || options.after)) {
|
|
2053
|
-
phase = this.phaseGraph.resolveConstraintPhase(options.before, options.after);
|
|
2054
|
-
}
|
|
2055
|
-
const before = this.normalizeConstraints(options.before);
|
|
2056
|
-
const after = this.normalizeConstraints(options.after);
|
|
2057
|
-
const job = {
|
|
2058
|
-
id,
|
|
2059
|
-
callback,
|
|
2060
|
-
phase,
|
|
2061
|
-
before,
|
|
2062
|
-
after,
|
|
2063
|
-
priority: options.priority ?? 0,
|
|
2064
|
-
index: this.nextJobIndex++,
|
|
2065
|
-
fps: options.fps,
|
|
2066
|
-
drop: options.drop ?? true,
|
|
2067
|
-
enabled: options.enabled ?? true,
|
|
2068
|
-
system: options.system ?? false
|
|
2069
|
-
};
|
|
2070
|
-
if (root.jobs.has(id)) {
|
|
2071
|
-
console.warn(`[useFrame] Job with id "${id}" already exists, replacing`);
|
|
2072
|
-
}
|
|
2073
|
-
root.jobs.set(id, job);
|
|
2074
|
-
root.needsRebuild = true;
|
|
2075
|
-
return () => this.unregister(id, root.id);
|
|
2076
|
-
}
|
|
2077
|
-
/**
|
|
2078
|
-
* Unregister a job by its ID.
|
|
2079
|
-
* Searches all roots if rootId is not provided.
|
|
2080
|
-
* @param {string} id - The job ID to unregister
|
|
2081
|
-
* @param {string} [rootId] - Optional root ID to search (searches all if not provided)
|
|
2082
|
-
* @returns {void}
|
|
2083
|
-
*/
|
|
2084
|
-
unregister(id, rootId) {
|
|
2085
|
-
const root = rootId ? this.roots.get(rootId) : Array.from(this.roots.values()).find((r) => r.jobs.has(id));
|
|
2086
|
-
if (root?.jobs.delete(id)) {
|
|
2087
|
-
root.needsRebuild = true;
|
|
2088
|
-
this.jobStateListeners.delete(id);
|
|
2089
|
-
}
|
|
2090
|
-
}
|
|
2091
|
-
/**
|
|
2092
|
-
* Update a job's options dynamically.
|
|
2093
|
-
* Searches all roots to find the job by ID.
|
|
2094
|
-
* Phase/constraint changes trigger a rebuild of the sorted job list.
|
|
2095
|
-
* @param {string} id - The job ID to update
|
|
2096
|
-
* @param {Partial<JobOptions>} options - The options to update
|
|
2097
|
-
* @returns {void}
|
|
2098
|
-
*/
|
|
2099
|
-
updateJob(id, options) {
|
|
2100
|
-
let job;
|
|
2101
|
-
let root;
|
|
2102
|
-
for (const r of this.roots.values()) {
|
|
2103
|
-
job = r.jobs.get(id);
|
|
2104
|
-
if (job) {
|
|
2105
|
-
root = r;
|
|
2106
|
-
break;
|
|
2107
|
-
}
|
|
2108
|
-
}
|
|
2109
|
-
if (!job || !root) return;
|
|
2110
|
-
if (options.priority !== void 0) job.priority = options.priority;
|
|
2111
|
-
if (options.fps !== void 0) job.fps = options.fps;
|
|
2112
|
-
if (options.drop !== void 0) job.drop = options.drop;
|
|
2113
|
-
if (options.enabled !== void 0) {
|
|
2114
|
-
const wasEnabled = job.enabled;
|
|
2115
|
-
job.enabled = options.enabled;
|
|
2116
|
-
if (!wasEnabled && job.enabled) resetJobTiming(job);
|
|
2117
|
-
if (wasEnabled !== job.enabled) root.needsRebuild = true;
|
|
2118
|
-
}
|
|
2119
|
-
if (options.phase !== void 0 || options.before !== void 0 || options.after !== void 0) {
|
|
2120
|
-
if (options.phase) job.phase = options.phase;
|
|
2121
|
-
if (options.before !== void 0) job.before = this.normalizeConstraints(options.before);
|
|
2122
|
-
if (options.after !== void 0) job.after = this.normalizeConstraints(options.after);
|
|
2123
|
-
root.needsRebuild = true;
|
|
2124
|
-
}
|
|
2125
|
-
}
|
|
2126
|
-
//* Job State Management Methods ================================
|
|
2127
|
-
/**
|
|
2128
|
-
* Check if a job is currently paused (disabled).
|
|
2129
|
-
* @param {string} id - The job ID to check
|
|
2130
|
-
* @returns {boolean} True if the job exists and is paused
|
|
2131
|
-
*/
|
|
2132
|
-
isJobPaused(id) {
|
|
2133
|
-
for (const root of this.roots.values()) {
|
|
2134
|
-
const job = root.jobs.get(id);
|
|
2135
|
-
if (job) return !job.enabled;
|
|
2136
|
-
}
|
|
2137
|
-
return false;
|
|
2138
|
-
}
|
|
2139
|
-
/**
|
|
2140
|
-
* Subscribe to state changes for a specific job.
|
|
2141
|
-
* Listener is called when job is paused or resumed.
|
|
2142
|
-
* @param {string} id - The job ID to subscribe to
|
|
2143
|
-
* @param {() => void} listener - Callback invoked on state changes
|
|
2144
|
-
* @returns {() => void} Unsubscribe function
|
|
2145
|
-
*/
|
|
2146
|
-
subscribeJobState(id, listener) {
|
|
2147
|
-
if (!this.jobStateListeners.has(id)) {
|
|
2148
|
-
this.jobStateListeners.set(id, /* @__PURE__ */ new Set());
|
|
2149
|
-
}
|
|
2150
|
-
this.jobStateListeners.get(id).add(listener);
|
|
2151
|
-
return () => {
|
|
2152
|
-
this.jobStateListeners.get(id)?.delete(listener);
|
|
2153
|
-
if (this.jobStateListeners.get(id)?.size === 0) {
|
|
2154
|
-
this.jobStateListeners.delete(id);
|
|
2155
|
-
}
|
|
2156
|
-
};
|
|
2157
|
-
}
|
|
2158
|
-
/**
|
|
2159
|
-
* Notify all listeners that a job's state has changed.
|
|
2160
|
-
* @param {string} id - The job ID that changed
|
|
2161
|
-
* @returns {void}
|
|
2162
|
-
* @private
|
|
2163
|
-
*/
|
|
2164
|
-
notifyJobStateChange(id) {
|
|
2165
|
-
this.jobStateListeners.get(id)?.forEach((listener) => listener());
|
|
2166
|
-
}
|
|
2167
|
-
/**
|
|
2168
|
-
* Pause a job by ID (sets enabled=false).
|
|
2169
|
-
* Notifies any subscribed state listeners.
|
|
2170
|
-
* @param {string} id - The job ID to pause
|
|
2171
|
-
* @returns {void}
|
|
2172
|
-
*/
|
|
2173
|
-
pauseJob(id) {
|
|
2174
|
-
this.updateJob(id, { enabled: false });
|
|
2175
|
-
this.notifyJobStateChange(id);
|
|
2176
|
-
}
|
|
2177
|
-
/**
|
|
2178
|
-
* Resume a paused job by ID (sets enabled=true).
|
|
2179
|
-
* Resets job timing to prevent frame accumulation.
|
|
2180
|
-
* Notifies any subscribed state listeners.
|
|
2181
|
-
* @param {string} id - The job ID to resume
|
|
2182
|
-
* @returns {void}
|
|
2183
|
-
*/
|
|
2184
|
-
resumeJob(id) {
|
|
2185
|
-
this.updateJob(id, { enabled: true });
|
|
2186
|
-
this.notifyJobStateChange(id);
|
|
2187
|
-
}
|
|
2188
|
-
//* Frame Loop Control Methods ================================
|
|
2189
|
-
/**
|
|
2190
|
-
* Start the requestAnimationFrame loop.
|
|
2191
|
-
* Resets timing state (elapsedTime, frameCount) on start.
|
|
2192
|
-
* No-op if already running.
|
|
2193
|
-
* @returns {void}
|
|
2194
|
-
*/
|
|
2195
|
-
start() {
|
|
2196
|
-
if (this.loopState.running) return;
|
|
2197
|
-
const { elapsedTime, createdAt } = this.loopState;
|
|
2198
|
-
let adjustedCreated = 0;
|
|
2199
|
-
if (this.stoppedTime > 0) {
|
|
2200
|
-
adjustedCreated = createdAt - (performance.now() - this.stoppedTime);
|
|
2201
|
-
this.stoppedTime = 0;
|
|
2202
|
-
}
|
|
2203
|
-
Object.assign(this.loopState, {
|
|
2204
|
-
running: true,
|
|
2205
|
-
elapsedTime: elapsedTime ?? 0,
|
|
2206
|
-
lastTime: performance.now(),
|
|
2207
|
-
createdAt: adjustedCreated > 0 ? adjustedCreated : performance.now(),
|
|
2208
|
-
frameCount: 0,
|
|
2209
|
-
rafHandle: requestAnimationFrame(this.loop)
|
|
2210
|
-
});
|
|
2211
|
-
}
|
|
2212
|
-
/**
|
|
2213
|
-
* Stop the requestAnimationFrame loop.
|
|
2214
|
-
* Cancels any pending RAF callback.
|
|
2215
|
-
* No-op if not running.
|
|
2216
|
-
* @returns {void}
|
|
2217
|
-
*/
|
|
2218
|
-
stop() {
|
|
2219
|
-
if (!this.loopState.running) return;
|
|
2220
|
-
this.loopState.running = false;
|
|
2221
|
-
if (this.loopState.rafHandle !== null) {
|
|
2222
|
-
cancelAnimationFrame(this.loopState.rafHandle);
|
|
2223
|
-
this.loopState.rafHandle = null;
|
|
2224
|
-
}
|
|
2225
|
-
this.stoppedTime = performance.now();
|
|
2226
|
-
}
|
|
2227
|
-
/**
|
|
2228
|
-
* Request frames to be rendered in demand mode.
|
|
2229
|
-
* Accumulates pending frames (capped at 60) and starts the loop if not running.
|
|
2230
|
-
* No-op if frameloop is not 'demand'.
|
|
2231
|
-
* @param {number} [frames=1] - Number of frames to request
|
|
2232
|
-
* @param {boolean} [stackFrames=false] - Whether to add frames to existing pending count
|
|
2233
|
-
* - `false` (default): Sets pending frames to the specified value (replaces existing count)
|
|
2234
|
-
* - `true`: Adds frames to existing pending count (useful for accumulating invalidations)
|
|
2235
|
-
* @returns {void}
|
|
2236
|
-
* @example
|
|
2237
|
-
* // Request a single frame render
|
|
2238
|
-
* scheduler.invalidate();
|
|
2239
|
-
*
|
|
2240
|
-
* @example
|
|
2241
|
-
* // Request 5 frames (e.g., for animations)
|
|
2242
|
-
* scheduler.invalidate(5);
|
|
2243
|
-
*
|
|
2244
|
-
* @example
|
|
2245
|
-
* // Set pending frames to exactly 3 (don't stack with existing)
|
|
2246
|
-
* scheduler.invalidate(3, false);
|
|
2247
|
-
*
|
|
2248
|
-
* @example
|
|
2249
|
-
* // Add 2 more frames to existing pending count
|
|
2250
|
-
* scheduler.invalidate(2, true);
|
|
2251
|
-
*/
|
|
2252
|
-
invalidate(frames = 1, stackFrames = false) {
|
|
2253
|
-
if (this._frameloop !== "demand") return;
|
|
2254
|
-
const baseFrames = stackFrames ? this.pendingFrames : 0;
|
|
2255
|
-
this.pendingFrames = Math.min(60, baseFrames + frames);
|
|
2256
|
-
if (!this.loopState.running && this.pendingFrames > 0) this.start();
|
|
2257
|
-
}
|
|
2258
|
-
/**
|
|
2259
|
-
* Reset timing state for deterministic testing.
|
|
2260
|
-
* Preserves jobs and roots but resets lastTime, frameCount, elapsedTime, etc.
|
|
2261
|
-
* @returns {void}
|
|
2262
|
-
*/
|
|
2263
|
-
resetTiming() {
|
|
2264
|
-
this.loopState.lastTime = null;
|
|
2265
|
-
this.loopState.frameCount = 0;
|
|
2266
|
-
this.loopState.elapsedTime = 0;
|
|
2267
|
-
this.loopState.createdAt = performance.now();
|
|
2268
|
-
}
|
|
2269
|
-
//* Manual Stepping Methods ================================
|
|
2270
|
-
/**
|
|
2271
|
-
* Manually execute a single frame for all roots.
|
|
2272
|
-
* Useful for frameloop='never' mode or testing scenarios.
|
|
2273
|
-
* @param {number} [timestamp] - Optional timestamp (defaults to performance.now())
|
|
2274
|
-
* @returns {void}
|
|
2275
|
-
* @example
|
|
2276
|
-
* // Manual control mode
|
|
2277
|
-
* scheduler.frameloop = 'never';
|
|
2278
|
-
* scheduler.step(); // Execute one frame
|
|
2279
|
-
*/
|
|
2280
|
-
step(timestamp) {
|
|
2281
|
-
const now = timestamp ?? performance.now();
|
|
2282
|
-
this.executeFrame(now);
|
|
2283
|
-
}
|
|
2284
|
-
/**
|
|
2285
|
-
* Manually execute a single job by its ID.
|
|
2286
|
-
* Useful for testing individual job callbacks in isolation.
|
|
2287
|
-
* @param {string} id - The job ID to step
|
|
2288
|
-
* @param {number} [timestamp] - Optional timestamp (defaults to performance.now())
|
|
2289
|
-
* @returns {void}
|
|
2290
|
-
*/
|
|
2291
|
-
stepJob(id, timestamp) {
|
|
2292
|
-
let job;
|
|
2293
|
-
let root;
|
|
2294
|
-
for (const r of this.roots.values()) {
|
|
2295
|
-
job = r.jobs.get(id);
|
|
2296
|
-
if (job) {
|
|
2297
|
-
root = r;
|
|
2298
|
-
break;
|
|
2299
|
-
}
|
|
2300
|
-
}
|
|
2301
|
-
if (!job || !root) {
|
|
2302
|
-
console.warn(`[Scheduler] Job "${id}" not found`);
|
|
2303
|
-
return;
|
|
2304
|
-
}
|
|
2305
|
-
const now = timestamp ?? performance.now();
|
|
2306
|
-
const deltaMs = this.loopState.lastTime !== null ? now - this.loopState.lastTime : 0;
|
|
2307
|
-
const delta = deltaMs / 1e3;
|
|
2308
|
-
const elapsed = now - this.loopState.createdAt;
|
|
2309
|
-
const providedState = root.getState?.() ?? {};
|
|
2310
|
-
const frameState = {
|
|
2311
|
-
...providedState,
|
|
2312
|
-
time: now,
|
|
2313
|
-
delta,
|
|
2314
|
-
elapsed,
|
|
2315
|
-
frame: this.loopState.frameCount
|
|
2316
|
-
};
|
|
2317
|
-
try {
|
|
2318
|
-
job.callback(frameState, delta);
|
|
2319
|
-
} catch (error) {
|
|
2320
|
-
console.error(`[Scheduler] Error in job "${job.id}":`, error);
|
|
2321
|
-
this.triggerError(error instanceof Error ? error : new Error(String(error)));
|
|
2322
|
-
}
|
|
2323
|
-
}
|
|
2324
|
-
/**
|
|
2325
|
-
* Execute a single frame across all roots.
|
|
2326
|
-
* Order: globalBefore → each root's jobs → globalAfter
|
|
2327
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
2328
|
-
* @returns {void}
|
|
2329
|
-
* @private
|
|
2330
|
-
*/
|
|
2331
|
-
executeFrame(timestamp) {
|
|
2332
|
-
const deltaMs = this.loopState.lastTime !== null ? timestamp - this.loopState.lastTime : 0;
|
|
2333
|
-
const delta = deltaMs / 1e3;
|
|
2334
|
-
this.loopState.lastTime = timestamp;
|
|
2335
|
-
this.loopState.frameCount++;
|
|
2336
|
-
this.loopState.elapsedTime += deltaMs;
|
|
2337
|
-
this.runGlobalJobs(this.globalBeforeJobs, timestamp);
|
|
2338
|
-
for (const root of this.roots.values()) {
|
|
2339
|
-
this.tickRoot(root, timestamp, delta);
|
|
2340
|
-
}
|
|
2341
|
-
this.runGlobalJobs(this.globalAfterJobs, timestamp);
|
|
2342
|
-
}
|
|
2343
|
-
/**
|
|
2344
|
-
* Run all global jobs from a job map.
|
|
2345
|
-
* Catches and logs errors without stopping execution.
|
|
2346
|
-
* @param {Map<string, GlobalJob>} jobs - The global jobs map to execute
|
|
2347
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
2348
|
-
* @returns {void}
|
|
2349
|
-
* @private
|
|
2350
|
-
*/
|
|
2351
|
-
runGlobalJobs(jobs, timestamp) {
|
|
2352
|
-
for (const job of jobs.values()) {
|
|
2353
|
-
try {
|
|
2354
|
-
job.callback(timestamp);
|
|
2355
|
-
} catch (error) {
|
|
2356
|
-
console.error(`[Scheduler] Error in global job "${job.id}":`, error);
|
|
2357
|
-
}
|
|
2358
|
-
}
|
|
2359
|
-
}
|
|
2360
|
-
/**
|
|
2361
|
-
* Execute all jobs for a single root in sorted order.
|
|
2362
|
-
* Rebuilds sorted job list if needed, then dispatches each job.
|
|
2363
|
-
* Errors are caught and propagated via triggerError.
|
|
2364
|
-
* @param {RootEntry} root - The root entry to tick
|
|
2365
|
-
* @param {number} timestamp - RAF timestamp in milliseconds
|
|
2366
|
-
* @param {number} delta - Time since last frame in seconds
|
|
2367
|
-
* @returns {void}
|
|
2368
|
-
* @private
|
|
2369
|
-
*/
|
|
2370
|
-
tickRoot(root, timestamp, delta) {
|
|
2371
|
-
if (root.needsRebuild) {
|
|
2372
|
-
root.sortedJobs = rebuildSortedJobs(root.jobs, this.phaseGraph);
|
|
2373
|
-
root.needsRebuild = false;
|
|
2374
|
-
}
|
|
2375
|
-
const providedState = root.getState?.() ?? {};
|
|
2376
|
-
const frameState = {
|
|
2377
|
-
...providedState,
|
|
2378
|
-
time: timestamp,
|
|
2379
|
-
delta,
|
|
2380
|
-
elapsed: this.loopState.elapsedTime / 1e3,
|
|
2381
|
-
// Convert ms to seconds
|
|
2382
|
-
frame: this.loopState.frameCount
|
|
2383
|
-
};
|
|
2384
|
-
for (const job of root.sortedJobs) {
|
|
2385
|
-
if (!shouldRun(job, timestamp)) continue;
|
|
2386
|
-
try {
|
|
2387
|
-
job.callback(frameState, delta);
|
|
2388
|
-
} catch (error) {
|
|
2389
|
-
console.error(`[Scheduler] Error in job "${job.id}":`, error);
|
|
2390
|
-
this.triggerError(error instanceof Error ? error : new Error(String(error)));
|
|
2391
|
-
}
|
|
2392
|
-
}
|
|
2393
|
-
}
|
|
2394
|
-
//* Debug & Inspection Methods ================================
|
|
2395
|
-
/**
|
|
2396
|
-
* Get the total number of registered jobs across all roots.
|
|
2397
|
-
* Includes both per-root jobs and global before/after jobs.
|
|
2398
|
-
* @returns {number} Total job count
|
|
2399
|
-
*/
|
|
2400
|
-
getJobCount() {
|
|
2401
|
-
let count = 0;
|
|
2402
|
-
for (const root of this.roots.values()) {
|
|
2403
|
-
count += root.jobs.size;
|
|
2404
|
-
}
|
|
2405
|
-
return count + this.globalBeforeJobs.size + this.globalAfterJobs.size;
|
|
2406
|
-
}
|
|
2407
|
-
/**
|
|
2408
|
-
* Get all registered job IDs across all roots.
|
|
2409
|
-
* Includes both per-root jobs and global before/after jobs.
|
|
2410
|
-
* @returns {string[]} Array of all job IDs
|
|
2411
|
-
*/
|
|
2412
|
-
getJobIds() {
|
|
2413
|
-
const ids = [];
|
|
2414
|
-
for (const root of this.roots.values()) {
|
|
2415
|
-
ids.push(...root.jobs.keys());
|
|
2416
|
-
}
|
|
2417
|
-
ids.push(...this.globalBeforeJobs.keys());
|
|
2418
|
-
ids.push(...this.globalAfterJobs.keys());
|
|
2419
|
-
return ids;
|
|
2420
|
-
}
|
|
2421
|
-
/**
|
|
2422
|
-
* Get the number of registered roots (Canvas instances).
|
|
2423
|
-
* @returns {number} Number of registered roots
|
|
2424
|
-
*/
|
|
2425
|
-
getRootCount() {
|
|
2426
|
-
return this.roots.size;
|
|
2427
|
-
}
|
|
2428
|
-
/**
|
|
2429
|
-
* Check if any user (non-system) jobs are registered in a specific phase.
|
|
2430
|
-
* Used by the default render job to know if a user has taken over rendering.
|
|
2431
|
-
*
|
|
2432
|
-
* @param phase The phase to check
|
|
2433
|
-
* @param rootId Optional root ID to check (checks all roots if not provided)
|
|
2434
|
-
* @returns true if any user jobs exist in the phase
|
|
2435
|
-
*/
|
|
2436
|
-
hasUserJobsInPhase(phase, rootId) {
|
|
2437
|
-
const rootsToCheck = rootId ? [this.roots.get(rootId)].filter(Boolean) : Array.from(this.roots.values());
|
|
2438
|
-
return rootsToCheck.some((root) => {
|
|
2439
|
-
if (!root) return false;
|
|
2440
|
-
for (const job of root.jobs.values()) {
|
|
2441
|
-
if (job.phase === phase && !job.system && job.enabled) return true;
|
|
2442
|
-
}
|
|
2443
|
-
return false;
|
|
2444
|
-
});
|
|
2445
|
-
}
|
|
2446
|
-
//* Utility Methods ================================
|
|
2447
|
-
/**
|
|
2448
|
-
* Generate a unique root ID for automatic root registration.
|
|
2449
|
-
* @returns {string} A unique root ID in the format 'root_N'
|
|
2450
|
-
*/
|
|
2451
|
-
generateRootId() {
|
|
2452
|
-
return `root_${this.nextRootIndex++}`;
|
|
2453
|
-
}
|
|
2454
|
-
/**
|
|
2455
|
-
* Generate a unique job ID.
|
|
2456
|
-
* @returns {string} A unique job ID in the format 'job_N'
|
|
2457
|
-
* @private
|
|
2458
|
-
*/
|
|
2459
|
-
generateJobId() {
|
|
2460
|
-
return `job_${this.nextJobIndex}`;
|
|
2461
|
-
}
|
|
2462
|
-
/**
|
|
2463
|
-
* Normalize before/after constraints to a Set.
|
|
2464
|
-
* Handles undefined, single string, or array inputs.
|
|
2465
|
-
* @param {string | string[] | undefined} value - The constraint value(s)
|
|
2466
|
-
* @returns {Set<string>} Normalized Set of constraint strings
|
|
2467
|
-
* @private
|
|
2468
|
-
*/
|
|
2469
|
-
normalizeConstraints(value) {
|
|
2470
|
-
if (!value) return /* @__PURE__ */ new Set();
|
|
2471
|
-
if (Array.isArray(value)) return new Set(value);
|
|
2472
|
-
return /* @__PURE__ */ new Set([value]);
|
|
2473
|
-
}
|
|
2474
|
-
};
|
|
2475
|
-
//* Static State & Methods (Singleton Usage) ================================
|
|
2476
|
-
//* Cross-Bundle Singleton Key ==============================
|
|
2477
|
-
// Use Symbol.for() to ensure scheduler is shared across bundle boundaries
|
|
2478
|
-
// This prevents issues when mixing imports from @react-three/fiber and @react-three/fiber/webgpu
|
|
2479
|
-
__publicField(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
|
|
2480
|
-
let Scheduler = _Scheduler;
|
|
2481
|
-
const getScheduler = () => Scheduler.get();
|
|
2482
|
-
if (hmrData) {
|
|
2483
|
-
hmrData.accept?.();
|
|
1716
|
+
const INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
|
|
1717
|
+
function isInternalRendererAccess(stack, callerDepth = 2) {
|
|
1718
|
+
if (!stack) return false;
|
|
1719
|
+
const caller = stack.split("\n")[callerDepth] ?? "";
|
|
1720
|
+
return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
|
|
2484
1721
|
}
|
|
2485
1722
|
|
|
2486
1723
|
const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
|
|
@@ -2520,7 +1757,14 @@ const createStore = (invalidate, advance) => {
|
|
|
2520
1757
|
frustum: new webgpu.Frustum(),
|
|
2521
1758
|
autoUpdateFrustum: true,
|
|
2522
1759
|
raycaster: null,
|
|
2523
|
-
events: {
|
|
1760
|
+
events: {
|
|
1761
|
+
priority: 1,
|
|
1762
|
+
enabled: true,
|
|
1763
|
+
connected: false,
|
|
1764
|
+
frameTimedRaycasts: true,
|
|
1765
|
+
alwaysFireOnScroll: true,
|
|
1766
|
+
updateOnFrame: false
|
|
1767
|
+
},
|
|
2524
1768
|
scene: null,
|
|
2525
1769
|
rootScene: null,
|
|
2526
1770
|
xr: null,
|
|
@@ -2585,7 +1829,7 @@ const createStore = (invalidate, advance) => {
|
|
|
2585
1829
|
size: newSize,
|
|
2586
1830
|
viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
|
|
2587
1831
|
}));
|
|
2588
|
-
getScheduler().invalidate();
|
|
1832
|
+
scheduler.getScheduler().invalidate();
|
|
2589
1833
|
}
|
|
2590
1834
|
}
|
|
2591
1835
|
return;
|
|
@@ -2600,7 +1844,7 @@ const createStore = (invalidate, advance) => {
|
|
|
2600
1844
|
viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
|
|
2601
1845
|
_sizeImperative: true
|
|
2602
1846
|
}));
|
|
2603
|
-
getScheduler().invalidate();
|
|
1847
|
+
scheduler.getScheduler().invalidate();
|
|
2604
1848
|
},
|
|
2605
1849
|
setDpr: (dpr) => set((state2) => {
|
|
2606
1850
|
const resolved = calculateDpr(dpr);
|
|
@@ -2608,14 +1852,18 @@ const createStore = (invalidate, advance) => {
|
|
|
2608
1852
|
}),
|
|
2609
1853
|
setFrameloop: (frameloop = "always") => {
|
|
2610
1854
|
set(() => ({ frameloop }));
|
|
1855
|
+
scheduler.getScheduler().frameloop = frameloop;
|
|
2611
1856
|
},
|
|
2612
1857
|
setError: (error) => set(() => ({ error })),
|
|
2613
1858
|
error: null,
|
|
2614
|
-
//* TSL State (managed via hooks: useUniforms, useNodes, useTextures,
|
|
1859
|
+
//* TSL State (managed via hooks: useUniforms, useNodes, useBuffers, useGPUStorage, useTextures, useRenderPipeline) ==============================
|
|
2615
1860
|
uniforms: {},
|
|
2616
1861
|
nodes: {},
|
|
1862
|
+
buffers: {},
|
|
1863
|
+
gpuStorage: {},
|
|
2617
1864
|
textures: /* @__PURE__ */ new Map(),
|
|
2618
|
-
|
|
1865
|
+
_textureRefs: /* @__PURE__ */ new Map(),
|
|
1866
|
+
renderPipeline: null,
|
|
2619
1867
|
passes: {},
|
|
2620
1868
|
_hmrVersion: 0,
|
|
2621
1869
|
_sizeImperative: false,
|
|
@@ -2624,12 +1872,16 @@ const createStore = (invalidate, advance) => {
|
|
|
2624
1872
|
internal: {
|
|
2625
1873
|
// Events
|
|
2626
1874
|
interaction: [],
|
|
2627
|
-
hovered: /* @__PURE__ */ new Map(),
|
|
2628
1875
|
subscribers: [],
|
|
1876
|
+
// Per-pointer state (new unified structure)
|
|
1877
|
+
pointerMap: /* @__PURE__ */ new Map(),
|
|
1878
|
+
pointerDirty: /* @__PURE__ */ new Map(),
|
|
1879
|
+
lastEvent: React__namespace.createRef(),
|
|
1880
|
+
// Deprecated but kept for backwards compatibility
|
|
1881
|
+
hovered: /* @__PURE__ */ new Map(),
|
|
2629
1882
|
initialClick: [0, 0],
|
|
2630
1883
|
initialHits: [],
|
|
2631
1884
|
capturedMap: /* @__PURE__ */ new Map(),
|
|
2632
|
-
lastEvent: React__namespace.createRef(),
|
|
2633
1885
|
// Visibility tracking (onFramed, onOccluded, onVisible)
|
|
2634
1886
|
visibilityRegistry: /* @__PURE__ */ new Map(),
|
|
2635
1887
|
// Occlusion system (WebGPU only)
|
|
@@ -2668,8 +1920,7 @@ const createStore = (invalidate, advance) => {
|
|
|
2668
1920
|
const currentState = rootStore.getState();
|
|
2669
1921
|
if (!currentState.isLegacy && currentState.internal.actualRenderer) {
|
|
2670
1922
|
const stack = new Error().stack || "";
|
|
2671
|
-
|
|
2672
|
-
if (!isInternalAccess) {
|
|
1923
|
+
if (!isInternalRendererAccess(stack)) {
|
|
2673
1924
|
const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
|
|
2674
1925
|
notifyDepreciated({
|
|
2675
1926
|
heading: "Accessing state.gl in WebGPU mode",
|
|
@@ -2717,14 +1968,16 @@ const createStore = (invalidate, advance) => {
|
|
|
2717
1968
|
oldSize = size;
|
|
2718
1969
|
oldDpr = viewport.dpr;
|
|
2719
1970
|
updateCamera(camera, size);
|
|
2720
|
-
if (canvasTarget) {
|
|
1971
|
+
if (internal.isSecondary && canvasTarget) {
|
|
2721
1972
|
if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
|
|
2722
|
-
|
|
2723
|
-
canvasTarget.setSize(size.width, size.height, updateStyle);
|
|
1973
|
+
canvasTarget.setSize(size.width, size.height, false);
|
|
2724
1974
|
} else {
|
|
2725
1975
|
if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
|
|
2726
|
-
|
|
2727
|
-
|
|
1976
|
+
actualRenderer.setSize(size.width, size.height, false);
|
|
1977
|
+
if (canvasTarget) {
|
|
1978
|
+
if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
|
|
1979
|
+
canvasTarget.setSize(size.width, size.height, false);
|
|
1980
|
+
}
|
|
2728
1981
|
}
|
|
2729
1982
|
}
|
|
2730
1983
|
if (camera !== oldCamera) {
|
|
@@ -2780,26 +2033,32 @@ function loadingFn(extensions, onProgress) {
|
|
|
2780
2033
|
);
|
|
2781
2034
|
};
|
|
2782
2035
|
}
|
|
2783
|
-
function useLoader(loader, input, extensions, onProgress) {
|
|
2784
|
-
const
|
|
2036
|
+
function useLoader(loader, input, extensions, onProgress, cacheKey) {
|
|
2037
|
+
const inputs = Array.isArray(input) ? input : [input];
|
|
2038
|
+
const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
|
|
2785
2039
|
const fn = loadingFn(extensions, onProgress);
|
|
2786
|
-
const results =
|
|
2040
|
+
const results = cacheKeys.map(
|
|
2041
|
+
(key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
|
|
2042
|
+
);
|
|
2787
2043
|
return Array.isArray(input) ? results : results[0];
|
|
2788
2044
|
}
|
|
2789
|
-
useLoader.preload = function(loader, input, extensions, onProgress) {
|
|
2790
|
-
const
|
|
2791
|
-
|
|
2045
|
+
useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
|
|
2046
|
+
const inputs = Array.isArray(input) ? input : [input];
|
|
2047
|
+
const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
|
|
2048
|
+
cacheKeys.forEach(
|
|
2049
|
+
(key, index) => suspendReact.preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
|
|
2050
|
+
);
|
|
2792
2051
|
};
|
|
2793
|
-
useLoader.clear = function(loader, input) {
|
|
2794
|
-
const
|
|
2795
|
-
|
|
2052
|
+
useLoader.clear = function(loader, input, cacheKey) {
|
|
2053
|
+
const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
|
|
2054
|
+
cacheKeys.forEach((key) => suspendReact.clear([loader, key]));
|
|
2796
2055
|
};
|
|
2797
2056
|
useLoader.loader = getLoader;
|
|
2798
2057
|
|
|
2799
2058
|
function useFrame(callback, priorityOrOptions) {
|
|
2800
2059
|
const store = React__namespace.useContext(context);
|
|
2801
2060
|
const isInsideCanvas = store !== null;
|
|
2802
|
-
const scheduler = getScheduler();
|
|
2061
|
+
const scheduler$1 = scheduler.getScheduler();
|
|
2803
2062
|
const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
|
|
2804
2063
|
id: priorityOrOptions.id,
|
|
2805
2064
|
phase: priorityOrOptions.phase,
|
|
@@ -2847,7 +2106,7 @@ function useFrame(callback, priorityOrOptions) {
|
|
|
2847
2106
|
};
|
|
2848
2107
|
callbackRef.current?.(mergedState, delta);
|
|
2849
2108
|
};
|
|
2850
|
-
const unregister = scheduler.register(wrappedCallback, {
|
|
2109
|
+
const unregister = scheduler$1.register(wrappedCallback, {
|
|
2851
2110
|
id,
|
|
2852
2111
|
rootId,
|
|
2853
2112
|
...options
|
|
@@ -2868,37 +2127,31 @@ function useFrame(callback, priorityOrOptions) {
|
|
|
2868
2127
|
}
|
|
2869
2128
|
};
|
|
2870
2129
|
} else {
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
unregisterJob = registerOutside();
|
|
2880
|
-
});
|
|
2881
|
-
return () => {
|
|
2882
|
-
unsubReady();
|
|
2883
|
-
unregisterJob?.();
|
|
2884
|
-
};
|
|
2130
|
+
return scheduler$1.register(
|
|
2131
|
+
(state, delta) => {
|
|
2132
|
+
const frameState = state;
|
|
2133
|
+
if (!frameState.renderer) return;
|
|
2134
|
+
callbackRef.current?.(frameState, delta);
|
|
2135
|
+
},
|
|
2136
|
+
{ id, ...options }
|
|
2137
|
+
);
|
|
2885
2138
|
}
|
|
2886
|
-
}, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
|
|
2139
|
+
}, [store, scheduler$1, id, optionsKey, isLegacyPriority, isInsideCanvas]);
|
|
2887
2140
|
const isPaused = React__namespace.useSyncExternalStore(
|
|
2888
2141
|
// Subscribe function
|
|
2889
2142
|
React__namespace.useCallback(
|
|
2890
2143
|
(onStoreChange) => {
|
|
2891
|
-
return getScheduler().subscribeJobState(id, onStoreChange);
|
|
2144
|
+
return scheduler.getScheduler().subscribeJobState(id, onStoreChange);
|
|
2892
2145
|
},
|
|
2893
2146
|
[id]
|
|
2894
2147
|
),
|
|
2895
2148
|
// getSnapshot function
|
|
2896
|
-
React__namespace.useCallback(() => getScheduler().isJobPaused(id), [id]),
|
|
2149
|
+
React__namespace.useCallback(() => scheduler.getScheduler().isJobPaused(id), [id]),
|
|
2897
2150
|
// getServerSnapshot function (SSR)
|
|
2898
2151
|
React__namespace.useCallback(() => false, [])
|
|
2899
2152
|
);
|
|
2900
2153
|
const controls = React__namespace.useMemo(() => {
|
|
2901
|
-
const scheduler2 = getScheduler();
|
|
2154
|
+
const scheduler2 = scheduler.getScheduler();
|
|
2902
2155
|
return {
|
|
2903
2156
|
/** The job's unique ID */
|
|
2904
2157
|
id,
|
|
@@ -2913,7 +2166,7 @@ function useFrame(callback, priorityOrOptions) {
|
|
|
2913
2166
|
* @param timestamp Optional timestamp (defaults to performance.now())
|
|
2914
2167
|
*/
|
|
2915
2168
|
step: (timestamp) => {
|
|
2916
|
-
getScheduler().stepJob(id, timestamp);
|
|
2169
|
+
scheduler.getScheduler().stepJob(id, timestamp);
|
|
2917
2170
|
},
|
|
2918
2171
|
/**
|
|
2919
2172
|
* Manually step ALL jobs in the scheduler.
|
|
@@ -2921,20 +2174,20 @@ function useFrame(callback, priorityOrOptions) {
|
|
|
2921
2174
|
* @param timestamp Optional timestamp (defaults to performance.now())
|
|
2922
2175
|
*/
|
|
2923
2176
|
stepAll: (timestamp) => {
|
|
2924
|
-
getScheduler().step(timestamp);
|
|
2177
|
+
scheduler.getScheduler().step(timestamp);
|
|
2925
2178
|
},
|
|
2926
2179
|
/**
|
|
2927
2180
|
* Pause this job (set enabled=false).
|
|
2928
2181
|
* Job remains registered but won't run.
|
|
2929
2182
|
*/
|
|
2930
2183
|
pause: () => {
|
|
2931
|
-
getScheduler().pauseJob(id);
|
|
2184
|
+
scheduler.getScheduler().pauseJob(id);
|
|
2932
2185
|
},
|
|
2933
2186
|
/**
|
|
2934
2187
|
* Resume this job (set enabled=true).
|
|
2935
2188
|
*/
|
|
2936
2189
|
resume: () => {
|
|
2937
|
-
getScheduler().resumeJob(id);
|
|
2190
|
+
scheduler.getScheduler().resumeJob(id);
|
|
2938
2191
|
},
|
|
2939
2192
|
/**
|
|
2940
2193
|
* Reactive paused state - automatically updates when pause/resume is called.
|
|
@@ -2972,18 +2225,18 @@ function buildFromCache(input, textureCache) {
|
|
|
2972
2225
|
function useTexture(input, optionsOrOnLoad) {
|
|
2973
2226
|
const renderer = useThree((state) => state.internal.actualRenderer);
|
|
2974
2227
|
const store = useStore();
|
|
2975
|
-
const textureCache = useThree((state) => state.textures);
|
|
2976
2228
|
const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
|
|
2977
|
-
const { onLoad, cache =
|
|
2229
|
+
const { onLoad, cache = true } = options;
|
|
2978
2230
|
const onLoadRef = React.useRef(onLoad);
|
|
2979
2231
|
onLoadRef.current = onLoad;
|
|
2980
2232
|
const onLoadCalledForRef = React.useRef(null);
|
|
2981
2233
|
const urls = React.useMemo(() => getUrls(input), [input]);
|
|
2982
2234
|
const cachedResult = React.useMemo(() => {
|
|
2983
2235
|
if (!cache) return null;
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2236
|
+
const textures = store.getState().textures;
|
|
2237
|
+
if (!allUrlsCached(urls, textures)) return null;
|
|
2238
|
+
return buildFromCache(input, textures);
|
|
2239
|
+
}, [cache, urls, input, store]);
|
|
2987
2240
|
const loadedTextures = useLoader(
|
|
2988
2241
|
webgpu.TextureLoader,
|
|
2989
2242
|
IsObject(input) ? Object.values(input) : input
|
|
@@ -3027,8 +2280,6 @@ function useTexture(input, optionsOrOnLoad) {
|
|
|
3027
2280
|
}, [input, loadedTextures, cachedResult]);
|
|
3028
2281
|
React.useEffect(() => {
|
|
3029
2282
|
if (!cache) return;
|
|
3030
|
-
if (cachedResult) return;
|
|
3031
|
-
const set = store.setState;
|
|
3032
2283
|
const urlTextureMap = [];
|
|
3033
2284
|
if (typeof input === "string") {
|
|
3034
2285
|
urlTextureMap.push([input, mappedTextures]);
|
|
@@ -3042,18 +2293,32 @@ function useTexture(input, optionsOrOnLoad) {
|
|
|
3042
2293
|
urlTextureMap.push([url, textureRecord[key]]);
|
|
3043
2294
|
}
|
|
3044
2295
|
}
|
|
3045
|
-
|
|
3046
|
-
const
|
|
3047
|
-
let
|
|
2296
|
+
store.setState((state) => {
|
|
2297
|
+
const refs = new Map(state._textureRefs);
|
|
2298
|
+
let textures = state.textures;
|
|
2299
|
+
let added = false;
|
|
3048
2300
|
for (const [url, texture] of urlTextureMap) {
|
|
3049
|
-
if (!
|
|
3050
|
-
|
|
3051
|
-
|
|
2301
|
+
if (!textures.has(url)) {
|
|
2302
|
+
if (!added) {
|
|
2303
|
+
textures = new Map(textures);
|
|
2304
|
+
added = true;
|
|
2305
|
+
}
|
|
2306
|
+
textures.set(url, texture);
|
|
3052
2307
|
}
|
|
2308
|
+
refs.set(url, (refs.get(url) ?? 0) + 1);
|
|
3053
2309
|
}
|
|
3054
|
-
return
|
|
2310
|
+
return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
|
|
2311
|
+
});
|
|
2312
|
+
return () => store.setState((state) => {
|
|
2313
|
+
const refs = new Map(state._textureRefs);
|
|
2314
|
+
for (const [url] of urlTextureMap) {
|
|
2315
|
+
const next = (refs.get(url) ?? 0) - 1;
|
|
2316
|
+
if (next <= 0) refs.delete(url);
|
|
2317
|
+
else refs.set(url, next);
|
|
2318
|
+
}
|
|
2319
|
+
return { _textureRefs: refs };
|
|
3055
2320
|
});
|
|
3056
|
-
}, [cache, input, mappedTextures, store
|
|
2321
|
+
}, [cache, input, mappedTextures, store]);
|
|
3057
2322
|
return mappedTextures;
|
|
3058
2323
|
}
|
|
3059
2324
|
useTexture.preload = (url) => useLoader.preload(webgpu.TextureLoader, url);
|
|
@@ -3069,96 +2334,63 @@ const Texture = ({
|
|
|
3069
2334
|
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.(ret) });
|
|
3070
2335
|
};
|
|
3071
2336
|
|
|
3072
|
-
function
|
|
3073
|
-
if (entry instanceof webgpu.Texture) return entry;
|
|
3074
|
-
if (entry && typeof entry === "object" && "value" in entry && entry.value instanceof webgpu.Texture) {
|
|
3075
|
-
return entry.value;
|
|
3076
|
-
}
|
|
3077
|
-
return null;
|
|
3078
|
-
}
|
|
3079
|
-
function useTextures() {
|
|
2337
|
+
function useTextures(selector) {
|
|
3080
2338
|
const store = useStore();
|
|
3081
|
-
|
|
3082
|
-
const set = store.setState;
|
|
2339
|
+
const registry = React.useMemo(() => {
|
|
3083
2340
|
const getState = store.getState;
|
|
3084
|
-
const
|
|
3085
|
-
|
|
3086
|
-
const newMap = new Map(state.textures);
|
|
3087
|
-
newMap.set(key, value);
|
|
3088
|
-
return { textures: newMap };
|
|
3089
|
-
});
|
|
3090
|
-
};
|
|
3091
|
-
const addMultiple = (items) => {
|
|
3092
|
-
set((state) => {
|
|
3093
|
-
const newMap = new Map(state.textures);
|
|
3094
|
-
const entries = items instanceof Map ? items.entries() : Object.entries(items);
|
|
3095
|
-
for (const [key, value] of entries) {
|
|
3096
|
-
newMap.set(key, value);
|
|
3097
|
-
}
|
|
3098
|
-
return { textures: newMap };
|
|
3099
|
-
});
|
|
3100
|
-
};
|
|
3101
|
-
const remove = (key) => {
|
|
3102
|
-
set((state) => {
|
|
3103
|
-
const newMap = new Map(state.textures);
|
|
3104
|
-
newMap.delete(key);
|
|
3105
|
-
return { textures: newMap };
|
|
3106
|
-
});
|
|
3107
|
-
};
|
|
3108
|
-
const removeMultiple = (keys) => {
|
|
3109
|
-
set((state) => {
|
|
3110
|
-
const newMap = new Map(state.textures);
|
|
3111
|
-
for (const key of keys) newMap.delete(key);
|
|
3112
|
-
return { textures: newMap };
|
|
3113
|
-
});
|
|
3114
|
-
};
|
|
3115
|
-
const dispose = (key) => {
|
|
3116
|
-
const entry = getState().textures.get(key);
|
|
3117
|
-
if (entry) {
|
|
3118
|
-
const tex = getTextureValue(entry);
|
|
3119
|
-
tex?.dispose();
|
|
3120
|
-
}
|
|
3121
|
-
remove(key);
|
|
3122
|
-
};
|
|
3123
|
-
const disposeMultiple = (keys) => {
|
|
3124
|
-
const textures = getState().textures;
|
|
3125
|
-
for (const key of keys) {
|
|
3126
|
-
const entry = textures.get(key);
|
|
3127
|
-
if (entry) {
|
|
3128
|
-
const tex = getTextureValue(entry);
|
|
3129
|
-
tex?.dispose();
|
|
3130
|
-
}
|
|
3131
|
-
}
|
|
3132
|
-
removeMultiple(keys);
|
|
3133
|
-
};
|
|
3134
|
-
const disposeAll = () => {
|
|
3135
|
-
const textures = getState().textures;
|
|
3136
|
-
for (const entry of textures.values()) {
|
|
3137
|
-
const tex = getTextureValue(entry);
|
|
3138
|
-
tex?.dispose();
|
|
3139
|
-
}
|
|
3140
|
-
set({ textures: /* @__PURE__ */ new Map() });
|
|
3141
|
-
};
|
|
2341
|
+
const setState = store.setState;
|
|
2342
|
+
const getOne = (key) => getState().textures.get(key);
|
|
3142
2343
|
return {
|
|
3143
|
-
|
|
3144
|
-
get textures() {
|
|
2344
|
+
get all() {
|
|
3145
2345
|
return getState().textures;
|
|
3146
2346
|
},
|
|
3147
|
-
|
|
3148
|
-
|
|
2347
|
+
get(input) {
|
|
2348
|
+
if (typeof input === "string") return getOne(input);
|
|
2349
|
+
if (Array.isArray(input)) return input.map(getOne);
|
|
2350
|
+
const out = {};
|
|
2351
|
+
for (const name in input) out[name] = getOne(input[name]);
|
|
2352
|
+
return out;
|
|
2353
|
+
},
|
|
3149
2354
|
has: (key) => getState().textures.has(key),
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
2355
|
+
add(keyOrRecord, texture) {
|
|
2356
|
+
setState((state) => {
|
|
2357
|
+
const textures = new Map(state.textures);
|
|
2358
|
+
if (typeof keyOrRecord === "string") {
|
|
2359
|
+
textures.set(keyOrRecord, texture);
|
|
2360
|
+
} else {
|
|
2361
|
+
for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
|
|
2362
|
+
}
|
|
2363
|
+
return { textures };
|
|
2364
|
+
});
|
|
2365
|
+
},
|
|
2366
|
+
dispose(key, options) {
|
|
2367
|
+
const state = getState();
|
|
2368
|
+
const refs = state._textureRefs.get(key) ?? 0;
|
|
2369
|
+
if (refs > 0 && !options?.force) {
|
|
2370
|
+
console.warn(
|
|
2371
|
+
`[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
|
|
2372
|
+
);
|
|
2373
|
+
return false;
|
|
2374
|
+
}
|
|
2375
|
+
state.textures.get(key)?.dispose();
|
|
2376
|
+
setState((s) => {
|
|
2377
|
+
const textures = new Map(s.textures);
|
|
2378
|
+
textures.delete(key);
|
|
2379
|
+
const nextRefs = new Map(s._textureRefs);
|
|
2380
|
+
nextRefs.delete(key);
|
|
2381
|
+
return { textures, _textureRefs: nextRefs };
|
|
2382
|
+
});
|
|
2383
|
+
return true;
|
|
2384
|
+
},
|
|
2385
|
+
disposeAll() {
|
|
2386
|
+
for (const texture of getState().textures.values()) texture.dispose();
|
|
2387
|
+
setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
|
|
2388
|
+
}
|
|
3160
2389
|
};
|
|
3161
2390
|
}, [store]);
|
|
2391
|
+
const subscribe = selector ? () => selector(registry) : (state) => state.textures;
|
|
2392
|
+
const selected = useThree(subscribe);
|
|
2393
|
+
return selector ? selected : registry;
|
|
3162
2394
|
}
|
|
3163
2395
|
|
|
3164
2396
|
function useRenderTarget(widthOrOptions, heightOrOptions, options) {
|
|
@@ -3215,7 +2447,7 @@ function addEffect(callback) {
|
|
|
3215
2447
|
link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
|
|
3216
2448
|
});
|
|
3217
2449
|
const id = `legacy_effect_${effectId++}`;
|
|
3218
|
-
return getScheduler().registerGlobal("before", id, callback);
|
|
2450
|
+
return scheduler.getScheduler().registerGlobal("before", id, callback);
|
|
3219
2451
|
}
|
|
3220
2452
|
function addAfterEffect(callback) {
|
|
3221
2453
|
notifyDepreciated({
|
|
@@ -3224,7 +2456,7 @@ function addAfterEffect(callback) {
|
|
|
3224
2456
|
link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
|
|
3225
2457
|
});
|
|
3226
2458
|
const id = `legacy_afterEffect_${effectId++}`;
|
|
3227
|
-
return getScheduler().registerGlobal("after", id, callback);
|
|
2459
|
+
return scheduler.getScheduler().registerGlobal("after", id, callback);
|
|
3228
2460
|
}
|
|
3229
2461
|
function addTail(callback) {
|
|
3230
2462
|
notifyDepreciated({
|
|
@@ -3232,16 +2464,16 @@ function addTail(callback) {
|
|
|
3232
2464
|
body: "Use scheduler.onIdle(callback) instead.\naddTail will be removed in a future version.",
|
|
3233
2465
|
link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
|
|
3234
2466
|
});
|
|
3235
|
-
return getScheduler().onIdle(callback);
|
|
2467
|
+
return scheduler.getScheduler().onIdle(callback);
|
|
3236
2468
|
}
|
|
3237
2469
|
function invalidate(state, frames = 1, stackFrames = false) {
|
|
3238
|
-
getScheduler().invalidate(frames, stackFrames);
|
|
2470
|
+
scheduler.getScheduler().invalidate(frames, stackFrames);
|
|
3239
2471
|
}
|
|
3240
2472
|
function advance(timestamp) {
|
|
3241
|
-
getScheduler().step(timestamp);
|
|
2473
|
+
scheduler.getScheduler().step(timestamp);
|
|
3242
2474
|
}
|
|
3243
2475
|
|
|
3244
|
-
const version = "10.0.0-alpha.
|
|
2476
|
+
const version = "10.0.0-alpha.3";
|
|
3245
2477
|
const packageData = {
|
|
3246
2478
|
version: version};
|
|
3247
2479
|
|
|
@@ -14497,7 +13729,7 @@ function n0() {
|
|
|
14497
13729
|
var t0 = n0();
|
|
14498
13730
|
const r0 = Xb(t0);
|
|
14499
13731
|
|
|
14500
|
-
const t = 1, o = 8, r = 32, e = 2;
|
|
13732
|
+
const t = 1, o = 8, r = 32, e = 2, i$1 = 268435456;
|
|
14501
13733
|
|
|
14502
13734
|
function createReconciler(config) {
|
|
14503
13735
|
const reconciler2 = r0(config);
|
|
@@ -14662,7 +13894,15 @@ function setFiberRef(fiber, publicInstance) {
|
|
|
14662
13894
|
}
|
|
14663
13895
|
}
|
|
14664
13896
|
const reconstructed = [];
|
|
14665
|
-
function
|
|
13897
|
+
function flushReconstructedInstances() {
|
|
13898
|
+
if (reconstructed.length === 0) return;
|
|
13899
|
+
try {
|
|
13900
|
+
swapReconstructedInstances();
|
|
13901
|
+
} finally {
|
|
13902
|
+
reconstructed.length = 0;
|
|
13903
|
+
}
|
|
13904
|
+
}
|
|
13905
|
+
function swapReconstructedInstances() {
|
|
14666
13906
|
for (const [instance] of reconstructed) {
|
|
14667
13907
|
const parent = instance.parent;
|
|
14668
13908
|
if (parent) {
|
|
@@ -14680,6 +13920,9 @@ function swapInstances() {
|
|
|
14680
13920
|
}
|
|
14681
13921
|
}
|
|
14682
13922
|
if (instance.isHidden) unhideInstance(instance);
|
|
13923
|
+
if (isObject3D(instance.object) && !instance.parent) {
|
|
13924
|
+
removeInteractivity(findInitialRoot(instance), instance.object);
|
|
13925
|
+
}
|
|
14683
13926
|
if (instance.object.__r3f) delete instance.object.__r3f;
|
|
14684
13927
|
if (instance.type !== "primitive") disposeOnIdle(instance.object);
|
|
14685
13928
|
}
|
|
@@ -14688,10 +13931,16 @@ function swapInstances() {
|
|
|
14688
13931
|
const parent = instance.parent;
|
|
14689
13932
|
if (parent) {
|
|
14690
13933
|
const target = catalogue[toPascalCase(instance.type)];
|
|
13934
|
+
const prevObject = instance.object;
|
|
14691
13935
|
instance.object = instance.props.object ?? new target(...instance.props.args ?? []);
|
|
14692
13936
|
instance.object.__r3f = instance;
|
|
14693
13937
|
setFiberRef(fiber, instance.object);
|
|
13938
|
+
if (isObject3D(prevObject) && isObject3D(instance.object)) {
|
|
13939
|
+
swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
|
|
13940
|
+
}
|
|
14694
13941
|
delete instance.appliedOnce;
|
|
13942
|
+
instance.eventCount = 0;
|
|
13943
|
+
instance.handlers = {};
|
|
14695
13944
|
applyProps(instance.object, instance.props);
|
|
14696
13945
|
if (instance.props.attach) {
|
|
14697
13946
|
attach(parent, instance);
|
|
@@ -14708,14 +13957,114 @@ function swapInstances() {
|
|
|
14708
13957
|
invalidateInstance(instance);
|
|
14709
13958
|
}
|
|
14710
13959
|
}
|
|
14711
|
-
reconstructed.length = 0;
|
|
14712
13960
|
}
|
|
14713
13961
|
const handleTextInstance = () => {
|
|
14714
13962
|
};
|
|
14715
13963
|
const NO_CONTEXT = {};
|
|
14716
13964
|
let currentUpdatePriority = NoEventPriority;
|
|
14717
|
-
|
|
14718
|
-
|
|
13965
|
+
function getEventPriority(type) {
|
|
13966
|
+
switch (type) {
|
|
13967
|
+
case "beforetoggle":
|
|
13968
|
+
case "cancel":
|
|
13969
|
+
case "click":
|
|
13970
|
+
case "close":
|
|
13971
|
+
case "contextmenu":
|
|
13972
|
+
case "copy":
|
|
13973
|
+
case "cut":
|
|
13974
|
+
case "auxclick":
|
|
13975
|
+
case "dblclick":
|
|
13976
|
+
case "dragend":
|
|
13977
|
+
case "dragstart":
|
|
13978
|
+
case "drop":
|
|
13979
|
+
case "focusin":
|
|
13980
|
+
case "focusout":
|
|
13981
|
+
case "input":
|
|
13982
|
+
case "invalid":
|
|
13983
|
+
case "keydown":
|
|
13984
|
+
case "keypress":
|
|
13985
|
+
case "keyup":
|
|
13986
|
+
case "mousedown":
|
|
13987
|
+
case "mouseup":
|
|
13988
|
+
case "paste":
|
|
13989
|
+
case "pause":
|
|
13990
|
+
case "play":
|
|
13991
|
+
case "pointercancel":
|
|
13992
|
+
case "pointerdown":
|
|
13993
|
+
case "pointerup":
|
|
13994
|
+
case "ratechange":
|
|
13995
|
+
case "reset":
|
|
13996
|
+
case "resize":
|
|
13997
|
+
case "seeked":
|
|
13998
|
+
case "submit":
|
|
13999
|
+
case "touchcancel":
|
|
14000
|
+
case "touchend":
|
|
14001
|
+
case "touchstart":
|
|
14002
|
+
case "volumechange":
|
|
14003
|
+
case "change":
|
|
14004
|
+
case "selectionchange":
|
|
14005
|
+
case "compositionstart":
|
|
14006
|
+
case "compositionend":
|
|
14007
|
+
case "compositionupdate":
|
|
14008
|
+
case "beforeinput":
|
|
14009
|
+
case "blur":
|
|
14010
|
+
case "fullscreenchange":
|
|
14011
|
+
case "focus":
|
|
14012
|
+
case "hashchange":
|
|
14013
|
+
case "popstate":
|
|
14014
|
+
case "select":
|
|
14015
|
+
case "selectstart":
|
|
14016
|
+
return e;
|
|
14017
|
+
case "drag":
|
|
14018
|
+
case "dragenter":
|
|
14019
|
+
case "dragexit":
|
|
14020
|
+
case "dragleave":
|
|
14021
|
+
case "dragover":
|
|
14022
|
+
case "mousemove":
|
|
14023
|
+
case "mouseout":
|
|
14024
|
+
case "mouseover":
|
|
14025
|
+
case "pointermove":
|
|
14026
|
+
case "pointerout":
|
|
14027
|
+
case "pointerover":
|
|
14028
|
+
case "scroll":
|
|
14029
|
+
case "touchmove":
|
|
14030
|
+
case "wheel":
|
|
14031
|
+
case "mouseenter":
|
|
14032
|
+
case "mouseleave":
|
|
14033
|
+
case "pointerenter":
|
|
14034
|
+
case "pointerleave":
|
|
14035
|
+
return o;
|
|
14036
|
+
case "message": {
|
|
14037
|
+
switch (Tb.unstable_getCurrentPriorityLevel()) {
|
|
14038
|
+
case Tb.unstable_ImmediatePriority:
|
|
14039
|
+
return e;
|
|
14040
|
+
case Tb.unstable_UserBlockingPriority:
|
|
14041
|
+
return o;
|
|
14042
|
+
case Tb.unstable_NormalPriority:
|
|
14043
|
+
case Tb.unstable_LowPriority:
|
|
14044
|
+
return r;
|
|
14045
|
+
case Tb.unstable_IdlePriority:
|
|
14046
|
+
return i$1;
|
|
14047
|
+
default:
|
|
14048
|
+
return r;
|
|
14049
|
+
}
|
|
14050
|
+
}
|
|
14051
|
+
default:
|
|
14052
|
+
return r;
|
|
14053
|
+
}
|
|
14054
|
+
}
|
|
14055
|
+
function scheduleMicrotask(callback) {
|
|
14056
|
+
if (typeof queueMicrotask === "function") {
|
|
14057
|
+
queueMicrotask(callback);
|
|
14058
|
+
} else if (typeof Promise !== "undefined") {
|
|
14059
|
+
Promise.resolve().then(callback).catch((error) => {
|
|
14060
|
+
setTimeout(() => {
|
|
14061
|
+
throw error;
|
|
14062
|
+
});
|
|
14063
|
+
});
|
|
14064
|
+
} else {
|
|
14065
|
+
setTimeout(callback);
|
|
14066
|
+
}
|
|
14067
|
+
}
|
|
14719
14068
|
const reconciler = /* @__PURE__ */ createReconciler({
|
|
14720
14069
|
isPrimaryRenderer: false,
|
|
14721
14070
|
warnsIfNotActing: false,
|
|
@@ -14754,16 +14103,15 @@ const reconciler = /* @__PURE__ */ createReconciler({
|
|
|
14754
14103
|
else if (newProps.args?.length !== oldProps.args?.length) reconstruct = true;
|
|
14755
14104
|
else if (newProps.args?.some((value, index) => value !== oldProps.args?.[index])) reconstruct = true;
|
|
14756
14105
|
if (reconstruct) {
|
|
14757
|
-
reconstructed.push([instance,
|
|
14106
|
+
reconstructed.push([instance, getInstanceProps(newProps), fiber]);
|
|
14758
14107
|
} else {
|
|
14759
14108
|
const changedProps = diffProps(instance, newProps);
|
|
14760
|
-
|
|
14761
|
-
|
|
14762
|
-
|
|
14763
|
-
|
|
14109
|
+
const attach2 = instance.props.attach;
|
|
14110
|
+
instance.props = getInstanceProps(newProps);
|
|
14111
|
+
if (attach2 !== void 0) instance.props.attach = attach2;
|
|
14112
|
+
else delete instance.props.attach;
|
|
14113
|
+
if (Object.keys(changedProps).length) applyProps(instance.object, changedProps);
|
|
14764
14114
|
}
|
|
14765
|
-
const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
|
|
14766
|
-
if (isTailSibling) swapInstances();
|
|
14767
14115
|
},
|
|
14768
14116
|
finalizeInitialChildren: (instance) => {
|
|
14769
14117
|
for (const prop in instance.props) {
|
|
@@ -14788,8 +14136,9 @@ const reconciler = /* @__PURE__ */ createReconciler({
|
|
|
14788
14136
|
const target = container.getState().internal.container ?? container.getState().scene;
|
|
14789
14137
|
return prepare(target, container, "", {});
|
|
14790
14138
|
},
|
|
14791
|
-
|
|
14792
|
-
|
|
14139
|
+
// Reconstructed instances are swapped once all mutations are committed,
|
|
14140
|
+
// before layout effects run so refs point to the new objects
|
|
14141
|
+
resetAfterCommit: flushReconstructedInstances,
|
|
14793
14142
|
shouldSetTextContent: () => false,
|
|
14794
14143
|
clearContainer: () => false,
|
|
14795
14144
|
hideInstance,
|
|
@@ -14797,6 +14146,9 @@ const reconciler = /* @__PURE__ */ createReconciler({
|
|
|
14797
14146
|
createTextInstance: handleTextInstance,
|
|
14798
14147
|
hideTextInstance: handleTextInstance,
|
|
14799
14148
|
unhideTextInstance: handleTextInstance,
|
|
14149
|
+
// Mirrors react-dom, which flushes discrete work in microtasks
|
|
14150
|
+
supportsMicrotasks: true,
|
|
14151
|
+
scheduleMicrotask,
|
|
14800
14152
|
scheduleTimeout: typeof setTimeout === "function" ? setTimeout : void 0,
|
|
14801
14153
|
cancelTimeout: typeof clearTimeout === "function" ? clearTimeout : void 0,
|
|
14802
14154
|
noTimeout: -1,
|
|
@@ -14837,28 +14189,9 @@ const reconciler = /* @__PURE__ */ createReconciler({
|
|
|
14837
14189
|
},
|
|
14838
14190
|
resolveUpdatePriority() {
|
|
14839
14191
|
if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
|
|
14840
|
-
|
|
14841
|
-
|
|
14842
|
-
|
|
14843
|
-
case "dblclick":
|
|
14844
|
-
case "dragenter":
|
|
14845
|
-
case "dragleave":
|
|
14846
|
-
case "drop":
|
|
14847
|
-
case "pointercancel":
|
|
14848
|
-
case "pointerdown":
|
|
14849
|
-
case "pointerup":
|
|
14850
|
-
return e;
|
|
14851
|
-
case "dragover":
|
|
14852
|
-
case "pointermove":
|
|
14853
|
-
case "pointerout":
|
|
14854
|
-
case "pointerover":
|
|
14855
|
-
case "pointerenter":
|
|
14856
|
-
case "pointerleave":
|
|
14857
|
-
case "wheel":
|
|
14858
|
-
return o;
|
|
14859
|
-
default:
|
|
14860
|
-
return r;
|
|
14861
|
-
}
|
|
14192
|
+
const eventType = typeof window !== "undefined" ? window.event?.type : void 0;
|
|
14193
|
+
if (eventType === void 0) return r;
|
|
14194
|
+
return getEventPriority(eventType);
|
|
14862
14195
|
},
|
|
14863
14196
|
resetFormInstance() {
|
|
14864
14197
|
},
|
|
@@ -14907,11 +14240,15 @@ const reconciler = /* @__PURE__ */ createReconciler({
|
|
|
14907
14240
|
cloneMutableTextInstance(textInstance) {
|
|
14908
14241
|
return textInstance;
|
|
14909
14242
|
},
|
|
14243
|
+
// React 19.2 added these for root-level view transitions. They only run for hosts that opt into
|
|
14244
|
+
// view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
|
|
14245
|
+
// into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
|
|
14246
|
+
// React never calls them. They stay as no-ops rather than throws: the host config is shared by
|
|
14247
|
+
// every root, and a throw here would turn a React-internal probe into a hard crash for users.
|
|
14248
|
+
// Guarded by a test asserting a full render + unmount never reaches them.
|
|
14910
14249
|
cloneRootViewTransitionContainer(_rootContainer) {
|
|
14911
|
-
throw new Error("Not implemented.");
|
|
14912
14250
|
},
|
|
14913
14251
|
removeRootViewTransitionClone(_rootContainer, _clone) {
|
|
14914
|
-
throw new Error("Not implemented.");
|
|
14915
14252
|
},
|
|
14916
14253
|
// https://github.com/facebook/react/pull/32465
|
|
14917
14254
|
createFragmentInstance: (_fiber) => null,
|
|
@@ -14996,6 +14333,7 @@ function createRoot(canvas) {
|
|
|
14996
14333
|
const lastConfiguredProps = {};
|
|
14997
14334
|
let configured = false;
|
|
14998
14335
|
let pending = null;
|
|
14336
|
+
let rendererSetup = null;
|
|
14999
14337
|
return {
|
|
15000
14338
|
async configure(props = {}) {
|
|
15001
14339
|
let resolve;
|
|
@@ -15011,7 +14349,6 @@ function createRoot(canvas) {
|
|
|
15011
14349
|
events,
|
|
15012
14350
|
onCreated: onCreatedCallback,
|
|
15013
14351
|
shadows = false,
|
|
15014
|
-
textureColorSpace = webgpu.SRGBColorSpace,
|
|
15015
14352
|
orthographic = false,
|
|
15016
14353
|
frameloop = "always",
|
|
15017
14354
|
dpr = [1, 2],
|
|
@@ -15026,7 +14363,8 @@ function createRoot(canvas) {
|
|
|
15026
14363
|
_sizeProps,
|
|
15027
14364
|
forceEven
|
|
15028
14365
|
} = props;
|
|
15029
|
-
const
|
|
14366
|
+
const textureColorSpace = is.obj(glConfig) && !is.fun(glConfig) && !isRenderer(glConfig) && glConfig.textureColorSpace || is.obj(rendererConfig) && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && rendererConfig.textureColorSpace || webgpu.SRGBColorSpace;
|
|
14367
|
+
let state = store.getState();
|
|
15030
14368
|
const defaultGLProps = {
|
|
15031
14369
|
canvas,
|
|
15032
14370
|
powerPreference: "high-performance",
|
|
@@ -15054,50 +14392,68 @@ function createRoot(canvas) {
|
|
|
15054
14392
|
"The `primaryCanvas` prop for multi-canvas rendering cannot be used with WebGL. Remove the `gl` prop or use WebGPU."
|
|
15055
14393
|
);
|
|
15056
14394
|
}
|
|
15057
|
-
if (
|
|
15058
|
-
|
|
15059
|
-
|
|
15060
|
-
|
|
15061
|
-
|
|
15062
|
-
|
|
15063
|
-
|
|
15064
|
-
|
|
15065
|
-
|
|
15066
|
-
|
|
15067
|
-
|
|
15068
|
-
|
|
15069
|
-
|
|
15070
|
-
|
|
15071
|
-
|
|
15072
|
-
|
|
15073
|
-
|
|
15074
|
-
|
|
15075
|
-
|
|
15076
|
-
|
|
15077
|
-
|
|
15078
|
-
|
|
15079
|
-
|
|
15080
|
-
|
|
15081
|
-
|
|
15082
|
-
|
|
15083
|
-
|
|
15084
|
-
|
|
15085
|
-
|
|
15086
|
-
|
|
15087
|
-
|
|
15088
|
-
|
|
15089
|
-
|
|
15090
|
-
|
|
15091
|
-
|
|
15092
|
-
|
|
15093
|
-
|
|
15094
|
-
|
|
15095
|
-
|
|
15096
|
-
|
|
15097
|
-
|
|
14395
|
+
if (!state.internal.actualRenderer) {
|
|
14396
|
+
if (!rendererSetup) {
|
|
14397
|
+
rendererSetup = (async () => {
|
|
14398
|
+
if (wantsGL) {
|
|
14399
|
+
renderer = await resolveRenderer(glConfig, defaultGLProps, three.WebGLRenderer);
|
|
14400
|
+
state.internal.actualRenderer = renderer;
|
|
14401
|
+
state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
|
|
14402
|
+
} else if (!wantsGL && primaryCanvas) {
|
|
14403
|
+
const primary = await waitForPrimary(primaryCanvas);
|
|
14404
|
+
renderer = primary.renderer;
|
|
14405
|
+
state.internal.actualRenderer = renderer;
|
|
14406
|
+
const canvasTarget = new webgpu.CanvasTarget(canvas);
|
|
14407
|
+
primary.store.setState((prev) => ({
|
|
14408
|
+
internal: { ...prev.internal, isMultiCanvas: true }
|
|
14409
|
+
}));
|
|
14410
|
+
state.set((prev) => ({
|
|
14411
|
+
webGPUSupported: primary.store.getState().webGPUSupported,
|
|
14412
|
+
renderer,
|
|
14413
|
+
primaryStore: primary.store,
|
|
14414
|
+
internal: {
|
|
14415
|
+
...prev.internal,
|
|
14416
|
+
canvasTarget,
|
|
14417
|
+
isMultiCanvas: true,
|
|
14418
|
+
isSecondary: true,
|
|
14419
|
+
targetId: primaryCanvas
|
|
14420
|
+
}
|
|
14421
|
+
}));
|
|
14422
|
+
} else if (!wantsGL) {
|
|
14423
|
+
renderer = await resolveRenderer(rendererConfig, defaultGPUProps, webgpu.WebGPURenderer);
|
|
14424
|
+
if (!renderer.hasInitialized?.()) {
|
|
14425
|
+
const size2 = computeInitialSize(canvas, propsSize);
|
|
14426
|
+
if (size2.width > 0 && size2.height > 0) {
|
|
14427
|
+
const pixelRatio = calculateDpr(dpr);
|
|
14428
|
+
canvas.width = size2.width * pixelRatio;
|
|
14429
|
+
canvas.height = size2.height * pixelRatio;
|
|
14430
|
+
}
|
|
14431
|
+
await renderer.init();
|
|
14432
|
+
}
|
|
14433
|
+
const backend = renderer.backend;
|
|
14434
|
+
const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
|
|
14435
|
+
state.internal.actualRenderer = renderer;
|
|
14436
|
+
state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
|
|
14437
|
+
if (canvasId && !state.internal.isSecondary) {
|
|
14438
|
+
const canvasTarget = new webgpu.CanvasTarget(canvas);
|
|
14439
|
+
const unregisterPrimary = registerPrimary(canvasId, renderer, store);
|
|
14440
|
+
state.set((prev) => ({
|
|
14441
|
+
internal: {
|
|
14442
|
+
...prev.internal,
|
|
14443
|
+
canvasTarget,
|
|
14444
|
+
unregisterPrimary
|
|
14445
|
+
}
|
|
14446
|
+
}));
|
|
14447
|
+
}
|
|
15098
14448
|
}
|
|
15099
|
-
}))
|
|
14449
|
+
})().catch((err) => {
|
|
14450
|
+
rendererSetup = null;
|
|
14451
|
+
throw err;
|
|
14452
|
+
});
|
|
15100
14453
|
}
|
|
14454
|
+
await rendererSetup;
|
|
14455
|
+
state = store.getState();
|
|
14456
|
+
renderer = state.internal.actualRenderer;
|
|
15101
14457
|
}
|
|
15102
14458
|
let raycaster = state.raycaster;
|
|
15103
14459
|
if (!raycaster) state.set({ raycaster: raycaster = new webgpu.Raycaster() });
|
|
@@ -15190,7 +14546,7 @@ function createRoot(canvas) {
|
|
|
15190
14546
|
lastConfiguredProps.performance = performance;
|
|
15191
14547
|
}
|
|
15192
14548
|
if (!state.xr) {
|
|
15193
|
-
const handleXRFrame = (timestamp,
|
|
14549
|
+
const handleXRFrame = (timestamp, _frame) => {
|
|
15194
14550
|
const state2 = store.getState();
|
|
15195
14551
|
if (state2.frameloop === "never") return;
|
|
15196
14552
|
advance(timestamp);
|
|
@@ -15226,15 +14582,22 @@ function createRoot(canvas) {
|
|
|
15226
14582
|
const oldType = renderer.shadowMap.type;
|
|
15227
14583
|
renderer.shadowMap.enabled = !!shadows;
|
|
15228
14584
|
if (is.boo(shadows)) {
|
|
15229
|
-
renderer.shadowMap.type = webgpu.
|
|
14585
|
+
renderer.shadowMap.type = webgpu.PCFShadowMap;
|
|
15230
14586
|
} else if (is.str(shadows)) {
|
|
14587
|
+
if (shadows === "soft") {
|
|
14588
|
+
notifyDepreciated({
|
|
14589
|
+
heading: 'shadows="soft" is deprecated',
|
|
14590
|
+
body: "Three has depreciated soft and improved basic PCFShadows, we converted for you.",
|
|
14591
|
+
link: "https://github.com/mrdoob/three.js/wiki/Migration-Guide?utm_source=chatgpt.com#181--182"
|
|
14592
|
+
});
|
|
14593
|
+
}
|
|
15231
14594
|
const types = {
|
|
15232
14595
|
basic: webgpu.BasicShadowMap,
|
|
15233
14596
|
percentage: webgpu.PCFShadowMap,
|
|
15234
|
-
soft: webgpu.
|
|
14597
|
+
soft: webgpu.PCFShadowMap,
|
|
15235
14598
|
variance: webgpu.VSMShadowMap
|
|
15236
14599
|
};
|
|
15237
|
-
renderer.shadowMap.type = types[shadows] ?? webgpu.
|
|
14600
|
+
renderer.shadowMap.type = types[shadows] ?? webgpu.PCFShadowMap;
|
|
15238
14601
|
} else if (is.obj(shadows)) {
|
|
15239
14602
|
Object.assign(renderer.shadowMap, shadows);
|
|
15240
14603
|
}
|
|
@@ -15250,24 +14613,35 @@ function createRoot(canvas) {
|
|
|
15250
14613
|
if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
|
|
15251
14614
|
lastConfiguredProps.textureColorSpace = textureColorSpace;
|
|
15252
14615
|
}
|
|
14616
|
+
const r3fProps = ["textureColorSpace"];
|
|
14617
|
+
const constructorOnlyProps = ["samples", "antialias", "alpha", "canvas", "powerPreference"];
|
|
14618
|
+
const nonApplyProps = [...r3fProps, ...constructorOnlyProps];
|
|
15253
14619
|
if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
|
|
15254
|
-
|
|
14620
|
+
const glProps = {};
|
|
14621
|
+
for (const key in glConfig) {
|
|
14622
|
+
if (!nonApplyProps.includes(key)) glProps[key] = glConfig[key];
|
|
14623
|
+
}
|
|
14624
|
+
applyProps(renderer, glProps);
|
|
15255
14625
|
}
|
|
15256
14626
|
if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
|
|
15257
14627
|
const currentRenderer = state.renderer;
|
|
15258
14628
|
if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
|
|
15259
|
-
|
|
14629
|
+
const rendererProps = {};
|
|
14630
|
+
for (const key in rendererConfig) {
|
|
14631
|
+
if (!nonApplyProps.includes(key)) rendererProps[key] = rendererConfig[key];
|
|
14632
|
+
}
|
|
14633
|
+
applyProps(currentRenderer, rendererProps);
|
|
15260
14634
|
}
|
|
15261
14635
|
}
|
|
15262
|
-
const scheduler = getScheduler();
|
|
14636
|
+
const scheduler$1 = scheduler.getScheduler();
|
|
15263
14637
|
const rootId = state.internal.rootId;
|
|
15264
14638
|
if (!rootId) {
|
|
15265
|
-
const newRootId = canvasId || scheduler.generateRootId();
|
|
15266
|
-
const unregisterRoot = scheduler.registerRoot(newRootId, {
|
|
14639
|
+
const newRootId = canvasId || scheduler$1.generateRootId();
|
|
14640
|
+
const unregisterRoot = scheduler$1.registerRoot(newRootId, {
|
|
15267
14641
|
getState: () => store.getState(),
|
|
15268
14642
|
onError: (err) => store.getState().setError(err)
|
|
15269
14643
|
});
|
|
15270
|
-
const unregisterCanvasTarget = scheduler.register(
|
|
14644
|
+
const unregisterCanvasTarget = scheduler$1.register(
|
|
15271
14645
|
() => {
|
|
15272
14646
|
const state2 = store.getState();
|
|
15273
14647
|
if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
|
|
@@ -15282,7 +14656,19 @@ function createRoot(canvas) {
|
|
|
15282
14656
|
system: true
|
|
15283
14657
|
}
|
|
15284
14658
|
);
|
|
15285
|
-
const
|
|
14659
|
+
const unregisterEventsFlush = scheduler$1.register(
|
|
14660
|
+
() => {
|
|
14661
|
+
const state2 = store.getState();
|
|
14662
|
+
state2.events.flush?.();
|
|
14663
|
+
},
|
|
14664
|
+
{
|
|
14665
|
+
id: `${newRootId}_events`,
|
|
14666
|
+
rootId: newRootId,
|
|
14667
|
+
phase: "input",
|
|
14668
|
+
system: true
|
|
14669
|
+
}
|
|
14670
|
+
);
|
|
14671
|
+
const unregisterFrustum = scheduler$1.register(
|
|
15286
14672
|
() => {
|
|
15287
14673
|
const state2 = store.getState();
|
|
15288
14674
|
if (state2.autoUpdateFrustum && state2.camera) {
|
|
@@ -15292,11 +14678,11 @@ function createRoot(canvas) {
|
|
|
15292
14678
|
{
|
|
15293
14679
|
id: `${newRootId}_frustum`,
|
|
15294
14680
|
rootId: newRootId,
|
|
15295
|
-
|
|
14681
|
+
before: "render",
|
|
15296
14682
|
system: true
|
|
15297
14683
|
}
|
|
15298
14684
|
);
|
|
15299
|
-
const unregisterVisibility = scheduler.register(
|
|
14685
|
+
const unregisterVisibility = scheduler$1.register(
|
|
15300
14686
|
() => {
|
|
15301
14687
|
const state2 = store.getState();
|
|
15302
14688
|
checkVisibility(state2);
|
|
@@ -15304,19 +14690,19 @@ function createRoot(canvas) {
|
|
|
15304
14690
|
{
|
|
15305
14691
|
id: `${newRootId}_visibility`,
|
|
15306
14692
|
rootId: newRootId,
|
|
15307
|
-
|
|
14693
|
+
before: "render",
|
|
15308
14694
|
system: true,
|
|
15309
14695
|
after: `${newRootId}_frustum`
|
|
15310
14696
|
}
|
|
15311
14697
|
);
|
|
15312
|
-
const unregisterRender = scheduler.register(
|
|
14698
|
+
const unregisterRender = scheduler$1.register(
|
|
15313
14699
|
() => {
|
|
15314
14700
|
const state2 = store.getState();
|
|
15315
14701
|
const renderer2 = state2.internal.actualRenderer;
|
|
15316
|
-
const userHandlesRender = scheduler.hasUserJobsInPhase("render", newRootId);
|
|
14702
|
+
const userHandlesRender = scheduler$1.hasUserJobsInPhase("render", newRootId);
|
|
15317
14703
|
if (userHandlesRender || state2.internal.priority) return;
|
|
15318
14704
|
try {
|
|
15319
|
-
if (state2.
|
|
14705
|
+
if (state2.renderPipeline?.render) state2.renderPipeline.render();
|
|
15320
14706
|
else if (renderer2?.render) renderer2.render(state2.scene, state2.camera);
|
|
15321
14707
|
} catch (error) {
|
|
15322
14708
|
state2.setError(error instanceof Error ? error : new Error(String(error)));
|
|
@@ -15341,15 +14727,16 @@ function createRoot(canvas) {
|
|
|
15341
14727
|
unregisterRoot: () => {
|
|
15342
14728
|
unregisterRoot();
|
|
15343
14729
|
unregisterCanvasTarget();
|
|
14730
|
+
unregisterEventsFlush();
|
|
15344
14731
|
unregisterFrustum();
|
|
15345
14732
|
unregisterVisibility();
|
|
15346
14733
|
unregisterRender();
|
|
15347
14734
|
},
|
|
15348
|
-
scheduler
|
|
14735
|
+
scheduler: scheduler$1
|
|
15349
14736
|
}
|
|
15350
14737
|
}));
|
|
15351
14738
|
}
|
|
15352
|
-
scheduler.frameloop = frameloop;
|
|
14739
|
+
scheduler$1.frameloop = frameloop;
|
|
15353
14740
|
onCreated = onCreatedCallback;
|
|
15354
14741
|
configured = true;
|
|
15355
14742
|
resolve();
|
|
@@ -15416,7 +14803,8 @@ function unmountComponentAtNode(canvas, callback) {
|
|
|
15416
14803
|
dispose(state.scene);
|
|
15417
14804
|
_roots.delete(canvas);
|
|
15418
14805
|
if (callback) callback(canvas);
|
|
15419
|
-
} catch {
|
|
14806
|
+
} catch (error) {
|
|
14807
|
+
console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
|
|
15420
14808
|
}
|
|
15421
14809
|
}, 500);
|
|
15422
14810
|
}
|
|
@@ -15479,6 +14867,7 @@ function PortalInner({ state = {}, children, container }) {
|
|
|
15479
14867
|
viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), resolvedSize);
|
|
15480
14868
|
if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
|
|
15481
14869
|
}
|
|
14870
|
+
const set = injectState.set;
|
|
15482
14871
|
return {
|
|
15483
14872
|
// The intersect consists of the previous root state
|
|
15484
14873
|
...rootState,
|
|
@@ -15497,7 +14886,7 @@ function PortalInner({ state = {}, children, container }) {
|
|
|
15497
14886
|
size: resolvedSize,
|
|
15498
14887
|
viewport: { ...rootState.viewport, ...viewport },
|
|
15499
14888
|
// Layers are allowed to override events
|
|
15500
|
-
setEvents: (events2) =>
|
|
14889
|
+
setEvents: (events2) => set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
|
|
15501
14890
|
// Container for child attachment - the portalScene (injected or container itself)
|
|
15502
14891
|
internal: { ...rootState.internal, ...injectState.internal, container: portalScene }
|
|
15503
14892
|
};
|
|
@@ -15506,9 +14895,13 @@ function PortalInner({ state = {}, children, container }) {
|
|
|
15506
14895
|
const store = traditional.createWithEqualityFn((set, get) => ({ ...rest, set, get }));
|
|
15507
14896
|
const onMutate = (prev) => store.setState((state2) => inject.current(prev, state2));
|
|
15508
14897
|
onMutate(previousRoot.getState());
|
|
15509
|
-
previousRoot.subscribe(onMutate);
|
|
15510
14898
|
return store;
|
|
15511
14899
|
}, [previousRoot, container]);
|
|
14900
|
+
useIsomorphicLayoutEffect(() => {
|
|
14901
|
+
const onMutate = (prev) => usePortalStore.setState((state2) => inject.current(prev, state2));
|
|
14902
|
+
const unsubscribe = previousRoot.subscribe(onMutate);
|
|
14903
|
+
return unsubscribe;
|
|
14904
|
+
}, [previousRoot, usePortalStore]);
|
|
15512
14905
|
return (
|
|
15513
14906
|
// @ts-ignore, reconciler types are not maintained
|
|
15514
14907
|
/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reconciler.createPortal(
|
|
@@ -15522,6 +14915,81 @@ function flushSync(fn) {
|
|
|
15522
14915
|
return reconciler.flushSyncFromReconciler(fn);
|
|
15523
14916
|
}
|
|
15524
14917
|
|
|
14918
|
+
function parseBackground(background) {
|
|
14919
|
+
if (!background) return null;
|
|
14920
|
+
if (typeof background === "object" && !background.isColor) {
|
|
14921
|
+
const { backgroundMap, envMap, files, preset, ...rest } = background;
|
|
14922
|
+
return {
|
|
14923
|
+
...rest,
|
|
14924
|
+
preset,
|
|
14925
|
+
files: envMap || files,
|
|
14926
|
+
backgroundFiles: backgroundMap,
|
|
14927
|
+
background: true
|
|
14928
|
+
};
|
|
14929
|
+
}
|
|
14930
|
+
if (typeof background === "number") {
|
|
14931
|
+
return { color: background, background: true };
|
|
14932
|
+
}
|
|
14933
|
+
if (typeof background === "string") {
|
|
14934
|
+
if (background in presetsObj) {
|
|
14935
|
+
return { preset: background, background: true };
|
|
14936
|
+
}
|
|
14937
|
+
if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
|
|
14938
|
+
return { files: background, background: true };
|
|
14939
|
+
}
|
|
14940
|
+
return { color: background, background: true };
|
|
14941
|
+
}
|
|
14942
|
+
if (background.isColor) {
|
|
14943
|
+
return { color: background, background: true };
|
|
14944
|
+
}
|
|
14945
|
+
return null;
|
|
14946
|
+
}
|
|
14947
|
+
|
|
14948
|
+
function parseRendererConfig(rendererProp) {
|
|
14949
|
+
const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
|
|
14950
|
+
if (isRendererConfig) {
|
|
14951
|
+
const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
|
|
14952
|
+
return {
|
|
14953
|
+
primaryCanvas: pc,
|
|
14954
|
+
scheduler: sc,
|
|
14955
|
+
renderer: Object.keys(rest).length > 0 ? rest : rendererProp
|
|
14956
|
+
};
|
|
14957
|
+
}
|
|
14958
|
+
return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
|
|
14959
|
+
}
|
|
14960
|
+
|
|
14961
|
+
const RESOURCE_KINDS = ["nodes", "uniforms", "buffers", "gpuStorage"];
|
|
14962
|
+
const registries = /* @__PURE__ */ new WeakMap();
|
|
14963
|
+
function getKindRegistry(store, kind) {
|
|
14964
|
+
let registry = registries.get(store);
|
|
14965
|
+
if (!registry) {
|
|
14966
|
+
registry = {
|
|
14967
|
+
nodes: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
|
|
14968
|
+
uniforms: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
|
|
14969
|
+
buffers: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
|
|
14970
|
+
gpuStorage: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() }
|
|
14971
|
+
};
|
|
14972
|
+
registries.set(store, registry);
|
|
14973
|
+
}
|
|
14974
|
+
return registry[kind];
|
|
14975
|
+
}
|
|
14976
|
+
function invalidateResource(store, kind, scopeKey) {
|
|
14977
|
+
const registry = getKindRegistry(store, kind);
|
|
14978
|
+
{
|
|
14979
|
+
registry.valid.clear();
|
|
14980
|
+
registry.staged.clear();
|
|
14981
|
+
}
|
|
14982
|
+
}
|
|
14983
|
+
function invalidateAllResources(store) {
|
|
14984
|
+
for (const kind of RESOURCE_KINDS) invalidateResource(store, kind);
|
|
14985
|
+
}
|
|
14986
|
+
|
|
14987
|
+
function clearHmrCaches(store) {
|
|
14988
|
+
const primary = store.getState().primaryStore ?? store;
|
|
14989
|
+
invalidateAllResources(primary);
|
|
14990
|
+
primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
|
|
14991
|
+
}
|
|
14992
|
+
|
|
15525
14993
|
function CanvasImpl({
|
|
15526
14994
|
ref,
|
|
15527
14995
|
children,
|
|
@@ -15542,6 +15010,8 @@ function CanvasImpl({
|
|
|
15542
15010
|
raycaster,
|
|
15543
15011
|
camera,
|
|
15544
15012
|
scene,
|
|
15013
|
+
autoUpdateFrustum,
|
|
15014
|
+
occlusion,
|
|
15545
15015
|
onPointerMissed,
|
|
15546
15016
|
onDragOverMissed,
|
|
15547
15017
|
onDropMissed,
|
|
@@ -15553,39 +15023,10 @@ function CanvasImpl({
|
|
|
15553
15023
|
forceEven,
|
|
15554
15024
|
...props
|
|
15555
15025
|
}) {
|
|
15556
|
-
const { primaryCanvas, scheduler,
|
|
15557
|
-
const renderer = Object.keys(rendererConfig).length > 0 ? rendererConfig : rendererProp;
|
|
15026
|
+
const { primaryCanvas, scheduler, renderer } = parseRendererConfig(rendererProp);
|
|
15558
15027
|
React__namespace.useMemo(() => extend(THREE), []);
|
|
15559
15028
|
const Bridge = useBridge();
|
|
15560
|
-
const backgroundProps = React__namespace.useMemo(() =>
|
|
15561
|
-
if (!background) return null;
|
|
15562
|
-
if (typeof background === "object" && !background.isColor) {
|
|
15563
|
-
const { backgroundMap, envMap, files, preset, ...rest } = background;
|
|
15564
|
-
return {
|
|
15565
|
-
...rest,
|
|
15566
|
-
preset,
|
|
15567
|
-
files: envMap || files,
|
|
15568
|
-
backgroundFiles: backgroundMap,
|
|
15569
|
-
background: true
|
|
15570
|
-
};
|
|
15571
|
-
}
|
|
15572
|
-
if (typeof background === "number") {
|
|
15573
|
-
return { color: background, background: true };
|
|
15574
|
-
}
|
|
15575
|
-
if (typeof background === "string") {
|
|
15576
|
-
if (background in presetsObj) {
|
|
15577
|
-
return { preset: background, background: true };
|
|
15578
|
-
}
|
|
15579
|
-
if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
|
|
15580
|
-
return { files: background, background: true };
|
|
15581
|
-
}
|
|
15582
|
-
return { color: background, background: true };
|
|
15583
|
-
}
|
|
15584
|
-
if (background.isColor) {
|
|
15585
|
-
return { color: background, background: true };
|
|
15586
|
-
}
|
|
15587
|
-
return null;
|
|
15588
|
-
}, [background]);
|
|
15029
|
+
const backgroundProps = React__namespace.useMemo(() => parseBackground(background), [background]);
|
|
15589
15030
|
const hasInitialSizeRef = React__namespace.useRef(false);
|
|
15590
15031
|
const measureConfig = React__namespace.useMemo(() => {
|
|
15591
15032
|
if (!hasInitialSizeRef.current) {
|
|
@@ -15627,6 +15068,7 @@ function CanvasImpl({
|
|
|
15627
15068
|
const handleDropMissed = useMutableCallback(onDropMissed);
|
|
15628
15069
|
const [block, setBlock] = React__namespace.useState(false);
|
|
15629
15070
|
const [error, setError] = React__namespace.useState(false);
|
|
15071
|
+
const [fallbackVisible, setFallbackVisible] = React__namespace.useState(false);
|
|
15630
15072
|
if (block) throw block;
|
|
15631
15073
|
if (error) throw error;
|
|
15632
15074
|
const root = React__namespace.useRef(null);
|
|
@@ -15634,6 +15076,7 @@ function CanvasImpl({
|
|
|
15634
15076
|
const unsubscribeErrorRef = React__namespace.useRef(null);
|
|
15635
15077
|
useIsomorphicLayoutEffect(() => {
|
|
15636
15078
|
effectActiveRef.current = true;
|
|
15079
|
+
if (fallbackVisible) return;
|
|
15637
15080
|
const canvas = canvasRef.current;
|
|
15638
15081
|
if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
|
|
15639
15082
|
if (!root.current) {
|
|
@@ -15654,7 +15097,7 @@ function CanvasImpl({
|
|
|
15654
15097
|
}
|
|
15655
15098
|
async function run() {
|
|
15656
15099
|
if (!effectActiveRef.current || !root.current) return;
|
|
15657
|
-
await root.current.configure({
|
|
15100
|
+
const configured = await root.current.configure({
|
|
15658
15101
|
id,
|
|
15659
15102
|
primaryCanvas,
|
|
15660
15103
|
scheduler,
|
|
@@ -15669,6 +15112,8 @@ function CanvasImpl({
|
|
|
15669
15112
|
performance,
|
|
15670
15113
|
raycaster,
|
|
15671
15114
|
camera,
|
|
15115
|
+
autoUpdateFrustum,
|
|
15116
|
+
occlusion,
|
|
15672
15117
|
size: effectiveSize,
|
|
15673
15118
|
// Store size props for reset functionality
|
|
15674
15119
|
_sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
|
|
@@ -15693,8 +15138,20 @@ function CanvasImpl({
|
|
|
15693
15138
|
}
|
|
15694
15139
|
onCreated?.(state);
|
|
15695
15140
|
}
|
|
15696
|
-
})
|
|
15697
|
-
|
|
15141
|
+
}).then(
|
|
15142
|
+
() => true,
|
|
15143
|
+
// Renderer setup failed (e.g. no WebGL/WebGPU support). The `fallback` prop lives
|
|
15144
|
+
// inside <canvas>, which browsers don't display, so surface it as visible DOM
|
|
15145
|
+
// instead; with no fallback, rethrow to an external error boundary. (#3757)
|
|
15146
|
+
(setupError) => {
|
|
15147
|
+
if (effectActiveRef.current) {
|
|
15148
|
+
if (fallback != null) setFallbackVisible(true);
|
|
15149
|
+
else setError(setupError);
|
|
15150
|
+
}
|
|
15151
|
+
return false;
|
|
15152
|
+
}
|
|
15153
|
+
);
|
|
15154
|
+
if (!configured || !effectActiveRef.current || !root.current) return;
|
|
15698
15155
|
root.current.render(
|
|
15699
15156
|
/* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Block, { set: setBlock }), children: [
|
|
15700
15157
|
backgroundProps && /* @__PURE__ */ jsxRuntime.jsx(Environment, { ...backgroundProps }),
|
|
@@ -15728,20 +15185,13 @@ function CanvasImpl({
|
|
|
15728
15185
|
const handleHMR = () => {
|
|
15729
15186
|
queueMicrotask(() => {
|
|
15730
15187
|
const rootEntry = _roots.get(canvas);
|
|
15731
|
-
if (rootEntry?.store)
|
|
15732
|
-
rootEntry.store.setState((state) => ({
|
|
15733
|
-
nodes: {},
|
|
15734
|
-
uniforms: {},
|
|
15735
|
-
_hmrVersion: state._hmrVersion + 1
|
|
15736
|
-
}));
|
|
15737
|
-
}
|
|
15188
|
+
if (rootEntry?.store) clearHmrCaches(rootEntry.store);
|
|
15738
15189
|
});
|
|
15739
15190
|
};
|
|
15740
15191
|
if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)) }) !== "undefined" && undefined) {
|
|
15741
15192
|
const hot = undefined;
|
|
15742
15193
|
hot.on("vite:afterUpdate", handleHMR);
|
|
15743
|
-
return () => hot.
|
|
15744
|
-
});
|
|
15194
|
+
return () => hot.off?.("vite:afterUpdate", handleHMR);
|
|
15745
15195
|
}
|
|
15746
15196
|
if (typeof module !== "undefined" && module.hot) {
|
|
15747
15197
|
const hot = module.hot;
|
|
@@ -15764,7 +15214,20 @@ function CanvasImpl({
|
|
|
15764
15214
|
...style
|
|
15765
15215
|
},
|
|
15766
15216
|
...props,
|
|
15767
|
-
children:
|
|
15217
|
+
children: fallbackVisible ? (
|
|
15218
|
+
// Renderer setup failed: render the fallback as visible DOM. Inside <canvas> (below)
|
|
15219
|
+
// it exists in the tree but browsers never paint it, which is the whole bug (#3757).
|
|
15220
|
+
fallback
|
|
15221
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
15222
|
+
"canvas",
|
|
15223
|
+
{
|
|
15224
|
+
ref: canvasRef,
|
|
15225
|
+
id,
|
|
15226
|
+
className: "r3f-canvas",
|
|
15227
|
+
style: { display: "block", width: "100%", height: "100%" },
|
|
15228
|
+
children: fallback
|
|
15229
|
+
}
|
|
15230
|
+
) })
|
|
15768
15231
|
}
|
|
15769
15232
|
);
|
|
15770
15233
|
}
|
|
@@ -15774,6 +15237,8 @@ function Canvas(props) {
|
|
|
15774
15237
|
|
|
15775
15238
|
extend(THREE);
|
|
15776
15239
|
|
|
15240
|
+
exports.Scheduler = scheduler.Scheduler;
|
|
15241
|
+
exports.getScheduler = scheduler.getScheduler;
|
|
15777
15242
|
exports.Block = Block;
|
|
15778
15243
|
exports.Canvas = Canvas;
|
|
15779
15244
|
exports.Environment = Environment;
|
|
@@ -15789,10 +15254,8 @@ exports.R3F_BUILD_LEGACY = R3F_BUILD_LEGACY;
|
|
|
15789
15254
|
exports.R3F_BUILD_WEBGPU = R3F_BUILD_WEBGPU;
|
|
15790
15255
|
exports.REACT_INTERNAL_PROPS = REACT_INTERNAL_PROPS;
|
|
15791
15256
|
exports.RESERVED_PROPS = RESERVED_PROPS;
|
|
15792
|
-
exports.Scheduler = Scheduler;
|
|
15793
15257
|
exports.Texture = Texture;
|
|
15794
15258
|
exports._roots = _roots;
|
|
15795
|
-
exports.act = act;
|
|
15796
15259
|
exports.addAfterEffect = addAfterEffect;
|
|
15797
15260
|
exports.addEffect = addEffect;
|
|
15798
15261
|
exports.addTail = addTail;
|
|
@@ -15819,7 +15282,6 @@ exports.getInstanceProps = getInstanceProps;
|
|
|
15819
15282
|
exports.getPrimary = getPrimary;
|
|
15820
15283
|
exports.getPrimaryIds = getPrimaryIds;
|
|
15821
15284
|
exports.getRootState = getRootState;
|
|
15822
|
-
exports.getScheduler = getScheduler;
|
|
15823
15285
|
exports.getUuidPrefix = getUuidPrefix;
|
|
15824
15286
|
exports.hasConstructor = hasConstructor;
|
|
15825
15287
|
exports.hasPrimary = hasPrimary;
|
|
@@ -15843,6 +15305,7 @@ exports.reconciler = reconciler;
|
|
|
15843
15305
|
exports.registerPrimary = registerPrimary;
|
|
15844
15306
|
exports.removeInteractivity = removeInteractivity;
|
|
15845
15307
|
exports.resolve = resolve;
|
|
15308
|
+
exports.swapInteractivity = swapInteractivity;
|
|
15846
15309
|
exports.unmountComponentAtNode = unmountComponentAtNode;
|
|
15847
15310
|
exports.unregisterPrimary = unregisterPrimary;
|
|
15848
15311
|
exports.updateCamera = updateCamera;
|