@react-three/fiber 10.0.0-canary.604355a → 10.0.0-canary.76d2134

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 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 gl = fiber.useThree((state) => state.gl);
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 webgpu.WebGLCubeRenderTarget(resolution);
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 = gl.autoClear;
352
- gl.autoClear = true;
353
- camera.current.update(gl, virtualScene);
354
- gl.autoClear = autoClear;
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
- }, [children, virtualScene, fbo.texture, scene, defaultScene, background, frames, gl]);
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 = gl.autoClear;
368
- gl.autoClear = true;
369
- camera.current.update(gl, virtualScene);
370
- gl.autoClear = autoClear;
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$2 = Object.defineProperty;
435
- var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
436
- var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
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$2(this, "state", { error: false });
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$2(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
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[key] = ctor[key];
960
+ if (!is.und(ctor)) changedProps[prop] = ctor[key];
932
961
  } else {
933
- changedProps[key] = 0;
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
- registerVisibility(root, object2, visibilityHandlers);
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(capturedMap, obj, captures, pointerId) {
1036
- const captureData = captures.get(obj);
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
- captures.delete(obj);
1039
- if (captures.size === 0) {
1040
- capturedMap.delete(pointerId);
1041
- captureData.target.releasePointerCapture(pointerId);
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
- internal.initialHits = internal.initialHits.filter((o) => o !== object);
1049
- internal.hovered.forEach((value, key) => {
1050
- if (value.eventObject === object || value.object === object) {
1051
- internal.hovered.delete(key);
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 dx = event.offsetX - internal.initialClick[0];
1063
- const dy = event.offsetY - internal.initialClick[1];
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 && state.internal.capturedMap.has(event.pointerId)) {
1121
- for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
1122
- if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
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) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
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
- if (internal.capturedMap.has(id)) {
1139
- internal.capturedMap.get(id).set(hit.eventObject, captureData);
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
- const captures = internal.capturedMap.get(id);
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 capturesForPointer = "pointerId" in event && internal.capturedMap.get(event.pointerId);
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
- !capturesForPointer || // ... or if the hit object is capturing the pointer
1172
- capturesForPointer.has(hit.eventObject)
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 (internal.hovered.size && Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
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
- for (const hoveredObj of internal.hovered.values()) {
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
- internal.hovered.delete(makeId(hoveredObj));
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
- if ("pointerId" in event && internal.capturedMap.has(event.pointerId)) {
1409
+ const pointerId = getPointerId(event);
1410
+ const pointerState = internal.pointerMap.get(pointerId);
1411
+ if (pointerState?.captured.size) {
1240
1412
  requestAnimationFrame(() => {
1241
- if (internal.capturedMap.has(event.pointerId)) {
1242
- internal.capturedMap.delete(event.pointerId);
1243
- cancelPointer([]);
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 (!state.events.enabled) return;
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 (name === "onPointerDown") {
1262
- internal.initialClick = [event.offsetX, event.offsetY];
1263
- internal.initialHits = hits.map((hit) => hit.eventObject);
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) cancelPointer(hits);
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 hoveredItem = internal.hovered.get(id);
1486
+ const pointerState2 = getPointerState(internal, pointerId);
1487
+ const hoveredItem = pointerState2.hovered.get(id);
1289
1488
  if (!hoveredItem) {
1290
- internal.hovered.set(id, data);
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 hoveredItem = internal.hovered.get(id);
1499
+ const pointerState2 = getPointerState(internal, pointerId);
1500
+ const hoveredItem = pointerState2.hovered.get(id);
1301
1501
  if (!hoveredItem) {
1302
- internal.hovered.set(id, data);
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 || internal.initialHits.includes(eventObject)) {
1513
+ if (!isClickEvent || initialHits.includes(eventObject)) {
1314
1514
  pointerMissed(
1315
1515
  event,
1316
- internal.interaction.filter((object) => !internal.initialHits.includes(object))
1516
+ internal.interaction.filter((object) => !initialHits.includes(object))
1317
1517
  );
1318
1518
  handler(data);
1319
1519
  }
1320
1520
  } else {
1321
- if (isClickEvent && internal.initialHits.includes(eventObject)) {
1521
+ if (isClickEvent && initialHits.includes(eventObject)) {
1322
1522
  pointerMissed(
1323
1523
  event,
1324
- internal.interaction.filter((object) => !internal.initialHits.includes(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
- return { handlePointer };
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 (internal.lastEvent?.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
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
- var __defProp$1 = Object.defineProperty;
1455
- var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1456
- var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
1457
- const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
1458
- class PhaseGraph {
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: { priority: 1, enabled: true, connected: false },
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, usePostProcessing) ==============================
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
- postProcessing: null,
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
- const isInternalAccess = stack.includes("zustand") || stack.includes("setState") || stack.includes("Object.assign") || stack.includes("react-three-fiber/packages/fiber/src/core");
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
- const updateStyle = typeof HTMLCanvasElement !== "undefined" && canvasTarget.domElement instanceof HTMLCanvasElement;
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
- const updateStyle = typeof HTMLCanvasElement !== "undefined" && actualRenderer.domElement instanceof HTMLCanvasElement;
2727
- actualRenderer.setSize(size.width, size.height, updateStyle);
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 keys = Array.isArray(input) ? input : [input];
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 = keys.map((key) => suspendReact.suspend(fn, [loader, key], { equal: is.equ }));
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 keys = Array.isArray(input) ? input : [input];
2791
- keys.forEach((key) => suspendReact.preload(loadingFn(extensions, onProgress), [loader, key]));
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 keys = Array.isArray(input) ? input : [input];
2795
- keys.forEach((key) => suspendReact.clear([loader, key]));
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
- const registerOutside = () => {
2872
- return scheduler.register((state, delta) => callbackRef.current?.(state, delta), { id, ...options });
2873
- };
2874
- if (scheduler.independent || scheduler.isReady) {
2875
- return registerOutside();
2876
- }
2877
- let unregisterJob = null;
2878
- const unsubReady = scheduler.onRootReady(() => {
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 = false } = options;
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
- if (!allUrlsCached(urls, textureCache)) return null;
2985
- return buildFromCache(input, textureCache);
2986
- }, [cache, urls, textureCache, input]);
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
- set((state) => {
3046
- const newMap = new Map(state.textures);
3047
- let changed = false;
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 (!newMap.has(url)) {
3050
- newMap.set(url, texture);
3051
- changed = true;
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 changed ? { textures: newMap } : state;
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, cachedResult]);
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 getTextureValue(entry) {
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
- return React.useMemo(() => {
3082
- const set = store.setState;
2339
+ const registry = React.useMemo(() => {
3083
2340
  const getState = store.getState;
3084
- const add = (key, value) => {
3085
- set((state) => {
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
- // Getter for the textures Map (reactive via getState)
3144
- get textures() {
2344
+ get all() {
3145
2345
  return getState().textures;
3146
2346
  },
3147
- // Read
3148
- get: (key) => getState().textures.get(key),
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
- // Write
3151
- add,
3152
- addMultiple,
3153
- // Remove (cache only)
3154
- remove,
3155
- removeMultiple,
3156
- // Dispose (GPU + cache)
3157
- dispose,
3158
- disposeMultiple,
3159
- disposeAll
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.2";
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 swapInstances() {
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
- const NoFlags = 0;
14718
- const Update = 4;
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, { ...newProps }, fiber]);
14106
+ reconstructed.push([instance, getInstanceProps(newProps), fiber]);
14758
14107
  } else {
14759
14108
  const changedProps = diffProps(instance, newProps);
14760
- if (Object.keys(changedProps).length) {
14761
- Object.assign(instance.props, changedProps);
14762
- applyProps(instance.object, changedProps);
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
- resetAfterCommit: () => {
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
- switch (typeof window !== "undefined" && window.event?.type) {
14841
- case "click":
14842
- case "contextmenu":
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 state = store.getState();
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 (wantsGL && !state.internal.actualRenderer) {
15058
- renderer = await resolveRenderer(glConfig, defaultGLProps, three.WebGLRenderer);
15059
- state.internal.actualRenderer = renderer;
15060
- state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
15061
- } else if (!wantsGL && primaryCanvas && !state.internal.actualRenderer) {
15062
- const primary = await waitForPrimary(primaryCanvas);
15063
- renderer = primary.renderer;
15064
- state.internal.actualRenderer = renderer;
15065
- const canvasTarget = new webgpu.CanvasTarget(canvas);
15066
- primary.store.setState((prev) => ({
15067
- internal: { ...prev.internal, isMultiCanvas: true }
15068
- }));
15069
- state.set((prev) => ({
15070
- webGPUSupported: primary.store.getState().webGPUSupported,
15071
- renderer,
15072
- primaryStore: primary.store,
15073
- internal: {
15074
- ...prev.internal,
15075
- canvasTarget,
15076
- isMultiCanvas: true,
15077
- isSecondary: true,
15078
- targetId: primaryCanvas
15079
- }
15080
- }));
15081
- } else if (!wantsGL && !state.internal.actualRenderer) {
15082
- renderer = await resolveRenderer(rendererConfig, defaultGPUProps, webgpu.WebGPURenderer);
15083
- if (!renderer.hasInitialized?.()) {
15084
- await renderer.init();
15085
- }
15086
- const backend = renderer.backend;
15087
- const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
15088
- state.internal.actualRenderer = renderer;
15089
- state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
15090
- if (canvasId && !state.internal.isSecondary) {
15091
- const canvasTarget = new webgpu.CanvasTarget(canvas);
15092
- const unregisterPrimary = registerPrimary(canvasId, renderer, store);
15093
- state.set((prev) => ({
15094
- internal: {
15095
- ...prev.internal,
15096
- canvasTarget,
15097
- unregisterPrimary
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, frame) => {
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.PCFSoftShadowMap;
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.PCFSoftShadowMap,
14597
+ soft: webgpu.PCFShadowMap,
15235
14598
  variance: webgpu.VSMShadowMap
15236
14599
  };
15237
- renderer.shadowMap.type = types[shadows] ?? webgpu.PCFSoftShadowMap;
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
- applyProps(renderer, glConfig);
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
- applyProps(currentRenderer, rendererConfig);
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 unregisterFrustum = scheduler.register(
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
- phase: "preRender",
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
- phase: "preRender",
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.postProcessing?.render) state2.postProcessing.render();
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) => injectState.set((state2) => ({ ...state2, events: { ...state2.events, ...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, ...rendererConfig } = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp) ? rendererProp : { primaryCanvas: void 0, scheduler: void 0 };
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
- if (!effectActiveRef.current || !root.current) return;
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.dispose?.(() => {
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: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, id, className: "r3f-canvas", style: { display: "block" }, children: fallback }) })
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;