@react-three/fiber 10.0.0-canary.c3fa45d → 10.0.0-canary.c49d4cb

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/legacy.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as three from 'three';
2
- import { WebGLRenderTarget, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, Scene, WebGLCubeRenderTarget, HalfFloatType, Color, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, Raycaster, OrthographicCamera, PerspectiveCamera, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGLRenderer } from 'three';
2
+ import { WebGLCubeRenderTarget, WebGLRenderTarget, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, Scene, HalfFloatType, Color, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, Raycaster, OrthographicCamera, PerspectiveCamera, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGLRenderer } from 'three';
3
3
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
4
4
  import * as React from 'react';
5
5
  import React__default, { useLayoutEffect, useRef, useMemo, useEffect, useContext, useImperativeHandle, useCallback, useState } from 'react';
@@ -13,6 +13,8 @@ import { UltraHDRLoader } from 'three/examples/jsm/loaders/UltraHDRLoader.js';
13
13
  import { GainMapLoader } from '@monogrid/gainmap-js';
14
14
  import Tb, { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
15
15
  import { createWithEqualityFn } from 'zustand/traditional';
16
+ import { getScheduler } from '@pmndrs/scheduler';
17
+ export { Scheduler, getScheduler } from '@pmndrs/scheduler';
16
18
  import { suspend, preload, clear } from 'suspend-react';
17
19
 
18
20
  function _mergeNamespaces(n, m) {
@@ -40,9 +42,12 @@ const WebGPURenderer = class WebGPURenderer2 {
40
42
  }
41
43
  };
42
44
  const RenderTarget = null;
45
+ const CubeRenderTarget = null;
43
46
 
44
47
  const THREE = /*#__PURE__*/_mergeNamespaces({
45
48
  __proto__: null,
49
+ CubeRenderTarget: CubeRenderTarget,
50
+ CubeRenderTargetCompat: WebGLCubeRenderTarget,
46
51
  Inspector: Inspector,
47
52
  R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
48
53
  R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
@@ -320,15 +325,16 @@ function EnvironmentPortal({
320
325
  preset = void 0,
321
326
  extensions
322
327
  }) {
323
- const gl = useThree$1((state) => state.gl);
328
+ const renderer = useThree$1((state) => state.renderer);
329
+ const isLegacy = useThree$1((state) => state.isLegacy);
324
330
  const defaultScene = useThree$1((state) => state.scene);
325
331
  const camera = React.useRef(null);
326
332
  const [virtualScene] = React.useState(() => new Scene());
327
333
  const fbo = React.useMemo(() => {
328
- const fbo2 = new WebGLCubeRenderTarget(resolution);
334
+ const fbo2 = isLegacy ? new WebGLCubeRenderTarget(resolution) : new CubeRenderTarget(resolution);
329
335
  fbo2.texture.type = HalfFloatType;
330
336
  return fbo2;
331
- }, [resolution]);
337
+ }, [resolution, isLegacy]);
332
338
  React.useEffect(() => {
333
339
  return () => {
334
340
  fbo.dispose();
@@ -336,10 +342,10 @@ function EnvironmentPortal({
336
342
  }, [fbo]);
337
343
  React.useLayoutEffect(() => {
338
344
  if (frames === 1) {
339
- const autoClear = gl.autoClear;
340
- gl.autoClear = true;
341
- camera.current.update(gl, virtualScene);
342
- gl.autoClear = autoClear;
345
+ const autoClear = renderer.autoClear;
346
+ renderer.autoClear = true;
347
+ camera.current.update(renderer, virtualScene);
348
+ renderer.autoClear = autoClear;
343
349
  }
344
350
  return setEnvProps(background, scene, defaultScene, fbo.texture, {
345
351
  backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -356,7 +362,7 @@ function EnvironmentPortal({
356
362
  defaultScene,
357
363
  background,
358
364
  frames,
359
- gl,
365
+ renderer,
360
366
  blur,
361
367
  backgroundBlurriness,
362
368
  backgroundIntensity,
@@ -367,10 +373,10 @@ function EnvironmentPortal({
367
373
  let count = 1;
368
374
  useFrame$1(() => {
369
375
  if (frames === Infinity || count < frames) {
370
- const autoClear = gl.autoClear;
371
- gl.autoClear = true;
372
- camera.current.update(gl, virtualScene);
373
- gl.autoClear = autoClear;
376
+ const autoClear = renderer.autoClear;
377
+ renderer.autoClear = true;
378
+ camera.current.update(renderer, virtualScene);
379
+ renderer.autoClear = autoClear;
374
380
  count++;
375
381
  }
376
382
  });
@@ -434,9 +440,9 @@ function Environment(props) {
434
440
  return props.ground ? /* @__PURE__ */ jsx(EnvironmentGround, { ...props }) : props.map ? /* @__PURE__ */ jsx(EnvironmentMap, { ...props }) : props.children ? /* @__PURE__ */ jsx(EnvironmentPortal, { ...props }) : /* @__PURE__ */ jsx(EnvironmentCube, { ...props });
435
441
  }
436
442
 
437
- var __defProp$2 = Object.defineProperty;
438
- var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
439
- var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
443
+ var __defProp = Object.defineProperty;
444
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
445
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
440
446
  const act = React["act"];
441
447
  const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React.useLayoutEffect : React.useEffect;
442
448
  function useMutableCallback(fn) {
@@ -468,7 +474,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
468
474
  return _a = class extends React.Component {
469
475
  constructor() {
470
476
  super(...arguments);
471
- __publicField$2(this, "state", { error: false });
477
+ __publicField(this, "state", { error: false });
472
478
  }
473
479
  componentDidCatch(err) {
474
480
  this.props.set(err);
@@ -476,7 +482,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
476
482
  render() {
477
483
  return this.state.error ? null : this.props.children;
478
484
  }
479
- }, __publicField$2(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
485
+ }, __publicField(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
480
486
  })();
481
487
 
482
488
  const is = {
@@ -613,8 +619,7 @@ function prepare(target, root, type, props) {
613
619
  object,
614
620
  eventCount: 0,
615
621
  handlers: {},
616
- isHidden: false,
617
- deferredRefs: []
622
+ isHidden: false
618
623
  };
619
624
  if (object) object.__r3f = instance;
620
625
  }
@@ -771,6 +776,17 @@ function unregisterVisibility(store, object) {
771
776
  internal.visibilityRegistry.delete(object.uuid);
772
777
  internal.occlusionCache.delete(object);
773
778
  }
779
+ function updateVisibilityHandlers(store, object, handlers) {
780
+ const { internal } = store.getState();
781
+ const entry = internal.visibilityRegistry.get(object.uuid);
782
+ if (!entry) return false;
783
+ entry.handlers = handlers;
784
+ if ((handlers.onOccluded || handlers.onVisible) && !internal.occlusionEnabled) {
785
+ object.occlusionTest = true;
786
+ enableOcclusion(store);
787
+ }
788
+ return true;
789
+ }
774
790
  function checkVisibility(state) {
775
791
  const { internal, camera } = state;
776
792
  const registry = internal.visibilityRegistry;
@@ -958,10 +974,7 @@ function applyProps(object, props) {
958
974
  continue;
959
975
  }
960
976
  if (value === void 0) continue;
961
- if (isFromRef(value)) {
962
- instance?.deferredRefs?.push({ prop, ref: value[FROM_REF] });
963
- continue;
964
- }
977
+ if (isFromRef(value)) continue;
965
978
  if (isOnce(value)) {
966
979
  if (instance?.appliedOnce?.has(prop)) continue;
967
980
  if (instance) {
@@ -997,6 +1010,19 @@ function applyProps(object, props) {
997
1010
  } else if (isVectorLike(target) && is.num(value)) {
998
1011
  if ("setScalar" in target && typeof target.setScalar === "function") target.setScalar(value);
999
1012
  else target.set(value);
1013
+ } else if (root instanceof ShaderMaterial && key === "uniforms" && is.obj(value)) {
1014
+ if (!is.obj(root.uniforms)) root.uniforms = {};
1015
+ const uniforms = root.uniforms;
1016
+ const nextUniforms = value;
1017
+ for (const name in nextUniforms) {
1018
+ const uniform = nextUniforms[name];
1019
+ const targetUniform = uniforms[name];
1020
+ if (targetUniform) Object.assign(targetUniform, uniform);
1021
+ else {
1022
+ const nextUniform = uniform instanceof Uniform ? uniform.clone() : new Uniform(uniform.value);
1023
+ uniforms[name] = nextUniform;
1024
+ }
1025
+ }
1000
1026
  } else {
1001
1027
  root[key] = value;
1002
1028
  if (key.endsWith("Node") && root.isMaterial) {
@@ -1015,6 +1041,9 @@ function applyProps(object, props) {
1015
1041
  if (instance.eventCount && object2.raycast !== null) {
1016
1042
  rootState.internal.interaction.push(object2);
1017
1043
  }
1044
+ }
1045
+ if (instance?.parent && rootState?.internal && instance.object?.isObject3D) {
1046
+ const object2 = instance.object;
1018
1047
  const root = findInitialRoot(instance);
1019
1048
  const visibilityHandlers = {
1020
1049
  onFramed: instance.handlers.onFramed,
@@ -1022,7 +1051,9 @@ function applyProps(object, props) {
1022
1051
  onVisible: instance.handlers.onVisible
1023
1052
  };
1024
1053
  if (hasVisibilityHandlers(visibilityHandlers)) {
1025
- registerVisibility(root, object2, visibilityHandlers);
1054
+ if (!updateVisibilityHandlers(root, object2, visibilityHandlers)) {
1055
+ registerVisibility(root, object2, visibilityHandlers);
1056
+ }
1026
1057
  } else {
1027
1058
  unregisterVisibility(root, object2);
1028
1059
  }
@@ -1550,6 +1581,7 @@ function createPointerEvents(store) {
1550
1581
  set((state) => ({ events: { ...state.events, connected: void 0 } }));
1551
1582
  }
1552
1583
  },
1584
+ // PREVIEW (A8): the XR pointer registration API may change before stable.
1553
1585
  registerPointer: (config) => {
1554
1586
  const pointerId = nextXRPointerId++;
1555
1587
  xrPointers.set(pointerId, config);
@@ -1636,1036 +1668,11 @@ function notifyAlpha({ message, link }) {
1636
1668
  }
1637
1669
  }
1638
1670
 
1639
- var __defProp$1 = Object.defineProperty;
1640
- var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1641
- var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
1642
- const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
1643
- class PhaseGraph {
1644
- constructor() {
1645
- /** Ordered list of phase nodes */
1646
- __publicField$1(this, "phases", []);
1647
- /** Quick lookup by name */
1648
- __publicField$1(this, "phaseMap", /* @__PURE__ */ new Map());
1649
- /** Cached ordered names (invalidated on changes) */
1650
- __publicField$1(this, "orderedNamesCache", null);
1651
- this.initializeDefaultPhases();
1652
- }
1653
- //* Initialization --------------------------------
1654
- initializeDefaultPhases() {
1655
- for (const name of DEFAULT_PHASES) {
1656
- const node = { name, isAutoGenerated: false };
1657
- this.phases.push(node);
1658
- this.phaseMap.set(name, node);
1659
- }
1660
- this.invalidateCache();
1661
- }
1662
- //* Public API --------------------------------
1663
- /**
1664
- * Add a named phase to the graph
1665
- * @param name - Phase name (must be unique)
1666
- * @param options - Position options (before or after another phase)
1667
- */
1668
- addPhase(name, options = {}) {
1669
- if (this.phaseMap.has(name)) {
1670
- console.warn(`[useFrame] Phase "${name}" already exists`);
1671
- return;
1672
- }
1673
- const { before, after } = options;
1674
- const node = { name, isAutoGenerated: false };
1675
- let insertIndex = this.phases.length;
1676
- const targetIndex = this.getPhaseIndex(before ?? after);
1677
- if (targetIndex !== -1) {
1678
- insertIndex = before ? targetIndex : targetIndex + 1;
1679
- } else {
1680
- const constraintType = before ? "before" : "after";
1681
- console.warn(`[useFrame] Phase "${before ?? after}" not found for '${constraintType}' constraint`);
1682
- }
1683
- this.phases.splice(insertIndex, 0, node);
1684
- this.phaseMap.set(name, node);
1685
- this.invalidateCache();
1686
- }
1687
- /**
1688
- * Get ordered list of phase names
1689
- */
1690
- getOrderedPhases() {
1691
- if (this.orderedNamesCache === null) this.orderedNamesCache = this.phases.map((p) => p.name);
1692
- return this.orderedNamesCache;
1693
- }
1694
- /**
1695
- * Check if a phase exists
1696
- */
1697
- hasPhase(name) {
1698
- return this.phaseMap.has(name);
1699
- }
1700
- /**
1701
- * Get the index of a phase (-1 if not found)
1702
- */
1703
- getPhaseIndex(name) {
1704
- if (!name) return -1;
1705
- return this.phases.findIndex((p) => p.name === name);
1706
- }
1707
- /**
1708
- * Ensure a phase exists, creating an auto-generated one if needed.
1709
- * Used for resolving before/after constraints.
1710
- *
1711
- * @param name - The phase name to ensure exists
1712
- * @returns The phase name (may be auto-generated like 'before:render')
1713
- */
1714
- ensurePhase(name) {
1715
- if (this.phaseMap.has(name)) return name;
1716
- const node = { name, isAutoGenerated: true };
1717
- this.phases.push(node);
1718
- this.phaseMap.set(name, node);
1719
- this.invalidateCache();
1720
- return name;
1721
- }
1722
- /**
1723
- * Resolve where a job with before/after constraints should go.
1724
- * Creates auto-generated phases if needed.
1725
- *
1726
- * @param before - Phase(s) to run before
1727
- * @param after - Phase(s) to run after
1728
- * @returns The resolved phase name
1729
- */
1730
- resolveConstraintPhase(before, after) {
1731
- const beforeArr = before ? Array.isArray(before) ? before : [before] : [];
1732
- const afterArr = after ? Array.isArray(after) ? after : [after] : [];
1733
- if (beforeArr.length > 0) {
1734
- return this.ensureAutoPhase(beforeArr[0], "before", 0);
1735
- }
1736
- if (afterArr.length > 0) {
1737
- return this.ensureAutoPhase(afterArr[0], "after", 1);
1738
- }
1739
- return "update";
1740
- }
1741
- /**
1742
- * Ensure an auto-generated phase exists relative to a target phase.
1743
- * Creates the phase if it doesn't exist, inserting it at the correct position.
1744
- *
1745
- * @param target - The target phase name to position relative to
1746
- * @param prefix - Prefix for auto-generated phase name ('before' or 'after')
1747
- * @param offset - Insertion offset (0 for before, 1 for after)
1748
- * @returns The auto-generated phase name
1749
- */
1750
- ensureAutoPhase(target, prefix, offset) {
1751
- const autoName = `${prefix}:${target}`;
1752
- if (this.phaseMap.has(autoName)) return autoName;
1753
- const node = { name: autoName, isAutoGenerated: true };
1754
- const targetIndex = this.getPhaseIndex(target);
1755
- if (targetIndex !== -1) this.phases.splice(targetIndex + offset, 0, node);
1756
- else this.phases.push(node);
1757
- this.phaseMap.set(autoName, node);
1758
- this.invalidateCache();
1759
- return autoName;
1760
- }
1761
- // Internal --------------------------------
1762
- invalidateCache() {
1763
- this.orderedNamesCache = null;
1764
- }
1765
- }
1766
-
1767
- function rebuildSortedJobs(jobs, phaseGraph) {
1768
- const orderedPhases = phaseGraph.getOrderedPhases();
1769
- const buckets = /* @__PURE__ */ new Map();
1770
- for (const phase of orderedPhases) {
1771
- buckets.set(phase, []);
1772
- }
1773
- for (const job of jobs.values()) {
1774
- if (!job.enabled) continue;
1775
- let bucket = buckets.get(job.phase);
1776
- if (!bucket) {
1777
- bucket = [];
1778
- buckets.set(job.phase, bucket);
1779
- }
1780
- bucket.push(job);
1781
- }
1782
- const sortedBuckets = [];
1783
- for (const phase of orderedPhases) {
1784
- const bucket = buckets.get(phase);
1785
- if (!bucket || bucket.length === 0) continue;
1786
- bucket.sort((a, b) => {
1787
- if (a.priority !== b.priority) return b.priority - a.priority;
1788
- return a.index - b.index;
1789
- });
1790
- sortedBuckets.push(hasCrossJobConstraints(bucket) ? topologicalSort(bucket) : bucket);
1791
- }
1792
- for (const [phase, bucket] of buckets) {
1793
- if (!orderedPhases.includes(phase) && bucket.length > 0) {
1794
- bucket.sort((a, b) => {
1795
- if (a.priority !== b.priority) return b.priority - a.priority;
1796
- return a.index - b.index;
1797
- });
1798
- sortedBuckets.push(bucket);
1799
- }
1800
- }
1801
- return sortedBuckets.flat();
1802
- }
1803
- function hasCrossJobConstraints(bucket) {
1804
- const jobIds = new Set(bucket.map((j) => j.id));
1805
- for (const job of bucket) {
1806
- for (const ref of job.before) {
1807
- if (jobIds.has(ref)) return true;
1808
- }
1809
- for (const ref of job.after) {
1810
- if (jobIds.has(ref)) return true;
1811
- }
1812
- }
1813
- return false;
1814
- }
1815
- function topologicalSort(jobs) {
1816
- const n = jobs.length;
1817
- if (n <= 1) return jobs;
1818
- const jobMap = /* @__PURE__ */ new Map();
1819
- const inDegree = /* @__PURE__ */ new Map();
1820
- const adjacency = /* @__PURE__ */ new Map();
1821
- for (const job of jobs) {
1822
- jobMap.set(job.id, job);
1823
- inDegree.set(job.id, 0);
1824
- adjacency.set(job.id, []);
1825
- }
1826
- for (const job of jobs) {
1827
- for (const ref of job.before) {
1828
- if (jobMap.has(ref)) {
1829
- adjacency.get(job.id).push(ref);
1830
- inDegree.set(ref, inDegree.get(ref) + 1);
1831
- }
1832
- }
1833
- for (const ref of job.after) {
1834
- if (jobMap.has(ref)) {
1835
- adjacency.get(ref).push(job.id);
1836
- inDegree.set(job.id, inDegree.get(job.id) + 1);
1837
- }
1838
- }
1839
- }
1840
- const queue = [];
1841
- for (const job of jobs) {
1842
- if (inDegree.get(job.id) === 0) {
1843
- queue.push(job);
1844
- }
1845
- }
1846
- queue.sort((a, b) => {
1847
- if (a.priority !== b.priority) return b.priority - a.priority;
1848
- return a.index - b.index;
1849
- });
1850
- const result = [];
1851
- while (queue.length > 0) {
1852
- const job = queue.shift();
1853
- result.push(job);
1854
- const neighbors = adjacency.get(job.id) || [];
1855
- for (const neighborId of neighbors) {
1856
- const newDegree = inDegree.get(neighborId) - 1;
1857
- inDegree.set(neighborId, newDegree);
1858
- if (newDegree === 0) {
1859
- const neighbor = jobMap.get(neighborId);
1860
- insertSorted(queue, neighbor);
1861
- }
1862
- }
1863
- }
1864
- if (result.length !== n) {
1865
- console.warn("[useFrame] Circular dependency detected in job constraints");
1866
- const resultIds = new Set(result.map((j) => j.id));
1867
- for (const job of jobs) {
1868
- if (!resultIds.has(job.id)) result.push(job);
1869
- }
1870
- }
1871
- return result;
1872
- }
1873
- function insertSorted(arr, job) {
1874
- let i = 0;
1875
- while (i < arr.length) {
1876
- const cmp = arr[i];
1877
- if (job.priority > cmp.priority || job.priority === cmp.priority && job.index < cmp.index) {
1878
- break;
1879
- }
1880
- i++;
1881
- }
1882
- arr.splice(i, 0, job);
1883
- }
1884
-
1885
- function shouldRun(job, now) {
1886
- if (!job.enabled) return false;
1887
- if (!job.fps) return true;
1888
- const minInterval = 1e3 / job.fps;
1889
- const lastRun = job.lastRun ?? 0;
1890
- const elapsed = now - lastRun;
1891
- if (elapsed < minInterval - 1) return false;
1892
- if (job.drop) {
1893
- job.lastRun = now;
1894
- } else {
1895
- const steps = Math.floor(elapsed / minInterval);
1896
- job.lastRun = lastRun + steps * minInterval;
1897
- if (job.lastRun < now - minInterval) {
1898
- job.lastRun = now;
1899
- }
1900
- }
1901
- return true;
1902
- }
1903
- function resetJobTiming(job) {
1904
- job.lastRun = void 0;
1905
- }
1906
-
1907
- var __defProp = Object.defineProperty;
1908
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1909
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
1910
- const hmrData = (() => {
1911
- if (typeof process !== "undefined" && process.env.NODE_ENV === "test") return void 0;
1912
- if (typeof import_meta_hot !== "undefined") return import_meta_hot;
1913
- try {
1914
- return (0, eval)("import.meta.hot");
1915
- } catch {
1916
- return void 0;
1917
- }
1918
- })();
1919
- const _Scheduler = class _Scheduler {
1920
- //* Constructor ================================
1921
- constructor() {
1922
- //* Critical State ================================
1923
- __publicField(this, "roots", /* @__PURE__ */ new Map());
1924
- __publicField(this, "phaseGraph");
1925
- __publicField(this, "loopState", {
1926
- running: false,
1927
- rafHandle: null,
1928
- lastTime: null,
1929
- // null = uninitialized, 0+ = valid timestamp
1930
- frameCount: 0,
1931
- elapsedTime: 0,
1932
- createdAt: performance.now()
1933
- });
1934
- __publicField(this, "stoppedTime", 0);
1935
- //* Private State ================================
1936
- __publicField(this, "nextRootIndex", 0);
1937
- __publicField(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
1938
- __publicField(this, "globalAfterJobs", /* @__PURE__ */ new Map());
1939
- __publicField(this, "nextGlobalIndex", 0);
1940
- __publicField(this, "idleCallbacks", /* @__PURE__ */ new Set());
1941
- __publicField(this, "nextJobIndex", 0);
1942
- __publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
1943
- __publicField(this, "pendingFrames", 0);
1944
- __publicField(this, "_frameloop", "always");
1945
- //* Independent Mode & Error Handling State ================================
1946
- __publicField(this, "_independent", false);
1947
- __publicField(this, "errorHandler", null);
1948
- __publicField(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
1949
- //* Core Loop Execution Methods ================================
1950
- /**
1951
- * Main RAF loop callback.
1952
- * Executes frame, handles demand mode, and schedules next frame.
1953
- * @param {number} timestamp - RAF timestamp in milliseconds
1954
- * @returns {void}
1955
- * @private
1956
- */
1957
- __publicField(this, "loop", (timestamp) => {
1958
- if (!this.loopState.running) return;
1959
- this.executeFrame(timestamp);
1960
- if (this._frameloop === "demand") {
1961
- this.pendingFrames = Math.max(0, this.pendingFrames - 1);
1962
- if (this.pendingFrames === 0) {
1963
- this.notifyIdle(timestamp);
1964
- return this.stop();
1965
- }
1966
- }
1967
- this.loopState.rafHandle = requestAnimationFrame(this.loop);
1968
- });
1969
- this.phaseGraph = new PhaseGraph();
1970
- }
1971
- static get instance() {
1972
- return globalThis[_Scheduler.INSTANCE_KEY] ?? null;
1973
- }
1974
- static set instance(value) {
1975
- globalThis[_Scheduler.INSTANCE_KEY] = value;
1976
- }
1977
- /**
1978
- * Get the global scheduler instance (creates if doesn't exist).
1979
- * Uses HMR data to preserve instance across hot reloads.
1980
- * @returns {Scheduler} The singleton scheduler instance
1981
- */
1982
- static get() {
1983
- if (!_Scheduler.instance && hmrData?.data?.scheduler) {
1984
- _Scheduler.instance = hmrData.data.scheduler;
1985
- }
1986
- if (!_Scheduler.instance) {
1987
- _Scheduler.instance = new _Scheduler();
1988
- if (hmrData?.data) {
1989
- hmrData.data.scheduler = _Scheduler.instance;
1990
- }
1991
- }
1992
- return _Scheduler.instance;
1993
- }
1994
- /**
1995
- * Reset the singleton instance. Stops the loop and clears all state.
1996
- * Primarily used for testing to ensure clean state between tests.
1997
- * @returns {void}
1998
- */
1999
- static reset() {
2000
- if (_Scheduler.instance) {
2001
- _Scheduler.instance.stop();
2002
- _Scheduler.instance = null;
2003
- }
2004
- if (hmrData?.data) {
2005
- hmrData.data.scheduler = null;
2006
- }
2007
- }
2008
- //* Getters & Setters ================================
2009
- get phases() {
2010
- return this.phaseGraph.getOrderedPhases();
2011
- }
2012
- get frameloop() {
2013
- return this._frameloop;
2014
- }
2015
- set frameloop(mode) {
2016
- if (this._frameloop === mode) return;
2017
- const wasAlways = this._frameloop === "always";
2018
- this._frameloop = mode;
2019
- if (mode === "always" && !this.loopState.running && this.roots.size > 0) this.start();
2020
- else if (mode !== "always" && wasAlways) this.stop();
2021
- }
2022
- get isRunning() {
2023
- return this.loopState.running;
2024
- }
2025
- get isReady() {
2026
- return this.roots.size > 0;
2027
- }
2028
- get independent() {
2029
- return this._independent;
2030
- }
2031
- set independent(value) {
2032
- this._independent = value;
2033
- if (value) this.ensureDefaultRoot();
2034
- }
2035
- //* Root Management Methods ================================
2036
- /**
2037
- * Register a root (Canvas) with the scheduler.
2038
- * The first root to register starts the RAF loop (if frameloop='always').
2039
- * @param {string} id - Unique identifier for this root
2040
- * @param {RootOptions} [options] - Optional configuration with getState and onError callbacks
2041
- * @returns {() => void} Unsubscribe function to remove this root
2042
- */
2043
- registerRoot(id, options = {}) {
2044
- if (this.roots.has(id)) {
2045
- console.warn(`[Scheduler] Root "${id}" already registered`);
2046
- return () => this.unregisterRoot(id);
2047
- }
2048
- const entry = {
2049
- id,
2050
- getState: options.getState ?? (() => ({})),
2051
- jobs: /* @__PURE__ */ new Map(),
2052
- sortedJobs: [],
2053
- needsRebuild: false
2054
- };
2055
- if (options.onError) {
2056
- this.errorHandler = options.onError;
2057
- }
2058
- this.roots.set(id, entry);
2059
- if (this.roots.size === 1) {
2060
- this.notifyRootReady();
2061
- if (this._frameloop === "always") this.start();
2062
- }
2063
- return () => this.unregisterRoot(id);
2064
- }
2065
- /**
2066
- * Unregister a root from the scheduler.
2067
- * Cleans up all job state listeners for this root's jobs.
2068
- * The last root to unregister stops the RAF loop.
2069
- * @param {string} id - The root ID to unregister
2070
- * @returns {void}
2071
- */
2072
- unregisterRoot(id) {
2073
- const root = this.roots.get(id);
2074
- if (!root) return;
2075
- for (const jobId of root.jobs.keys()) {
2076
- this.jobStateListeners.delete(jobId);
2077
- }
2078
- this.roots.delete(id);
2079
- if (this.roots.size === 0) {
2080
- this.stop();
2081
- this.errorHandler = null;
2082
- }
2083
- }
2084
- /**
2085
- * Subscribe to be notified when a root becomes available.
2086
- * Fires immediately if a root already exists.
2087
- * @param {() => void} callback - Function called when first root registers
2088
- * @returns {() => void} Unsubscribe function
2089
- */
2090
- onRootReady(callback) {
2091
- if (this.roots.size > 0) {
2092
- callback();
2093
- return () => {
2094
- };
2095
- }
2096
- this.rootReadyCallbacks.add(callback);
2097
- return () => this.rootReadyCallbacks.delete(callback);
2098
- }
2099
- /**
2100
- * Notify all registered root-ready callbacks.
2101
- * Called when the first root registers.
2102
- * @returns {void}
2103
- * @private
2104
- */
2105
- notifyRootReady() {
2106
- for (const cb of this.rootReadyCallbacks) {
2107
- try {
2108
- cb();
2109
- } catch (error) {
2110
- console.error("[Scheduler] Error in root-ready callback:", error);
2111
- }
2112
- }
2113
- this.rootReadyCallbacks.clear();
2114
- }
2115
- /**
2116
- * Ensure a default root exists for independent mode.
2117
- * Creates a minimal root with no state provider.
2118
- * @returns {void}
2119
- * @private
2120
- */
2121
- ensureDefaultRoot() {
2122
- if (!this.roots.has("__default__")) {
2123
- this.registerRoot("__default__");
2124
- }
2125
- }
2126
- /**
2127
- * Trigger error handling for job errors.
2128
- * Uses the bound error handler if available, otherwise logs to console.
2129
- * @param {Error} error - The error to handle
2130
- * @returns {void}
2131
- */
2132
- triggerError(error) {
2133
- if (this.errorHandler) this.errorHandler(error);
2134
- else console.error("[Scheduler]", error);
2135
- }
2136
- //* Phase Management Methods ================================
2137
- /**
2138
- * Add a named phase to the scheduler's execution order.
2139
- * Marks all roots for rebuild to incorporate the new phase.
2140
- * @param {string} name - The phase name (e.g., 'physics', 'postprocess')
2141
- * @param {AddPhaseOptions} [options] - Positioning options (before/after other phases)
2142
- * @returns {void}
2143
- * @example
2144
- * scheduler.addPhase('physics', { before: 'update' });
2145
- * scheduler.addPhase('postprocess', { after: 'render' });
2146
- */
2147
- addPhase(name, options) {
2148
- this.phaseGraph.addPhase(name, options);
2149
- for (const root of this.roots.values()) {
2150
- root.needsRebuild = true;
2151
- }
2152
- }
2153
- /**
2154
- * Check if a phase exists in the scheduler.
2155
- * @param {string} name - The phase name to check
2156
- * @returns {boolean} True if the phase exists
2157
- */
2158
- hasPhase(name) {
2159
- return this.phaseGraph.hasPhase(name);
2160
- }
2161
- //* Global Job Registration Methods (Deprecated APIs) ================================
2162
- /**
2163
- * Register a global job that runs once per frame (not per-root).
2164
- * Used internally by deprecated addEffect/addAfterEffect APIs.
2165
- * @param {'before' | 'after'} phase - When to run: 'before' all roots or 'after' all roots
2166
- * @param {string} id - Unique identifier for this global job
2167
- * @param {(timestamp: number) => void} callback - Function called each frame with RAF timestamp
2168
- * @returns {() => void} Unsubscribe function to remove this global job
2169
- * @deprecated Use useFrame with phases instead
2170
- */
2171
- registerGlobal(phase, id, callback) {
2172
- const job = { id, callback };
2173
- if (phase === "before") {
2174
- this.globalBeforeJobs.set(id, job);
2175
- } else {
2176
- this.globalAfterJobs.set(id, job);
2177
- }
2178
- return () => {
2179
- if (phase === "before") this.globalBeforeJobs.delete(id);
2180
- else this.globalAfterJobs.delete(id);
2181
- };
2182
- }
2183
- //* Idle Callback Methods (Deprecated API) ================================
2184
- /**
2185
- * Register an idle callback that fires when the loop stops.
2186
- * Used internally by deprecated addTail API.
2187
- * @param {(timestamp: number) => void} callback - Function called when loop becomes idle
2188
- * @returns {() => void} Unsubscribe function to remove this idle callback
2189
- * @deprecated Use demand mode with invalidate() instead
2190
- */
2191
- onIdle(callback) {
2192
- this.idleCallbacks.add(callback);
2193
- return () => this.idleCallbacks.delete(callback);
2194
- }
2195
- /**
2196
- * Notify all registered idle callbacks.
2197
- * Called when the loop stops in demand mode.
2198
- * @param {number} timestamp - The RAF timestamp when idle occurred
2199
- * @returns {void}
2200
- * @private
2201
- */
2202
- notifyIdle(timestamp) {
2203
- for (const cb of this.idleCallbacks) {
2204
- try {
2205
- cb(timestamp);
2206
- } catch (error) {
2207
- console.error("[Scheduler] Error in idle callback:", error);
2208
- }
2209
- }
2210
- }
2211
- //* Job Registration & Management Methods ================================
2212
- /**
2213
- * Register a job (frame callback) with a specific root.
2214
- * This is the core registration method used by useFrame internally.
2215
- * @param {FrameNextCallback} callback - The function to call each frame
2216
- * @param {JobOptions & { rootId?: string; system?: boolean }} [options] - Job configuration
2217
- * @param {string} [options.rootId] - Target root ID (defaults to first registered root)
2218
- * @param {string} [options.id] - Unique job ID (auto-generated if not provided)
2219
- * @param {string} [options.phase] - Execution phase (defaults to 'update')
2220
- * @param {number} [options.priority] - Priority within phase (higher = earlier, default 0)
2221
- * @param {number} [options.fps] - FPS throttle limit
2222
- * @param {boolean} [options.drop] - Drop frames when behind (default true)
2223
- * @param {boolean} [options.enabled] - Whether job is active (default true)
2224
- * @param {boolean} [options.system] - Internal flag for system jobs (not user-facing)
2225
- * @returns {() => void} Unsubscribe function to remove this job
2226
- */
2227
- register(callback, options = {}) {
2228
- const rootId = options.rootId;
2229
- const root = rootId ? this.roots.get(rootId) : this.roots.values().next().value;
2230
- if (!root) {
2231
- console.warn("[Scheduler] No root registered. Is this inside a Canvas?");
2232
- return () => {
2233
- };
2234
- }
2235
- const id = options.id ?? this.generateJobId();
2236
- let phase = options.phase ?? "update";
2237
- if (!options.phase && (options.before || options.after)) {
2238
- phase = this.phaseGraph.resolveConstraintPhase(options.before, options.after);
2239
- }
2240
- const before = this.normalizeConstraints(options.before);
2241
- const after = this.normalizeConstraints(options.after);
2242
- const job = {
2243
- id,
2244
- callback,
2245
- phase,
2246
- before,
2247
- after,
2248
- priority: options.priority ?? 0,
2249
- index: this.nextJobIndex++,
2250
- fps: options.fps,
2251
- drop: options.drop ?? true,
2252
- enabled: options.enabled ?? true,
2253
- system: options.system ?? false
2254
- };
2255
- if (root.jobs.has(id)) {
2256
- console.warn(`[useFrame] Job with id "${id}" already exists, replacing`);
2257
- }
2258
- root.jobs.set(id, job);
2259
- root.needsRebuild = true;
2260
- return () => this.unregister(id, root.id);
2261
- }
2262
- /**
2263
- * Unregister a job by its ID.
2264
- * Searches all roots if rootId is not provided.
2265
- * @param {string} id - The job ID to unregister
2266
- * @param {string} [rootId] - Optional root ID to search (searches all if not provided)
2267
- * @returns {void}
2268
- */
2269
- unregister(id, rootId) {
2270
- const root = rootId ? this.roots.get(rootId) : Array.from(this.roots.values()).find((r) => r.jobs.has(id));
2271
- if (root?.jobs.delete(id)) {
2272
- root.needsRebuild = true;
2273
- this.jobStateListeners.delete(id);
2274
- }
2275
- }
2276
- /**
2277
- * Update a job's options dynamically.
2278
- * Searches all roots to find the job by ID.
2279
- * Phase/constraint changes trigger a rebuild of the sorted job list.
2280
- * @param {string} id - The job ID to update
2281
- * @param {Partial<JobOptions>} options - The options to update
2282
- * @returns {void}
2283
- */
2284
- updateJob(id, options) {
2285
- let job;
2286
- let root;
2287
- for (const r of this.roots.values()) {
2288
- job = r.jobs.get(id);
2289
- if (job) {
2290
- root = r;
2291
- break;
2292
- }
2293
- }
2294
- if (!job || !root) return;
2295
- if (options.priority !== void 0) job.priority = options.priority;
2296
- if (options.fps !== void 0) job.fps = options.fps;
2297
- if (options.drop !== void 0) job.drop = options.drop;
2298
- if (options.enabled !== void 0) {
2299
- const wasEnabled = job.enabled;
2300
- job.enabled = options.enabled;
2301
- if (!wasEnabled && job.enabled) resetJobTiming(job);
2302
- if (wasEnabled !== job.enabled) root.needsRebuild = true;
2303
- }
2304
- if (options.phase !== void 0 || options.before !== void 0 || options.after !== void 0) {
2305
- if (options.phase) job.phase = options.phase;
2306
- if (options.before !== void 0) job.before = this.normalizeConstraints(options.before);
2307
- if (options.after !== void 0) job.after = this.normalizeConstraints(options.after);
2308
- root.needsRebuild = true;
2309
- }
2310
- }
2311
- //* Job State Management Methods ================================
2312
- /**
2313
- * Check if a job is currently paused (disabled).
2314
- * @param {string} id - The job ID to check
2315
- * @returns {boolean} True if the job exists and is paused
2316
- */
2317
- isJobPaused(id) {
2318
- for (const root of this.roots.values()) {
2319
- const job = root.jobs.get(id);
2320
- if (job) return !job.enabled;
2321
- }
2322
- return false;
2323
- }
2324
- /**
2325
- * Subscribe to state changes for a specific job.
2326
- * Listener is called when job is paused or resumed.
2327
- * @param {string} id - The job ID to subscribe to
2328
- * @param {() => void} listener - Callback invoked on state changes
2329
- * @returns {() => void} Unsubscribe function
2330
- */
2331
- subscribeJobState(id, listener) {
2332
- if (!this.jobStateListeners.has(id)) {
2333
- this.jobStateListeners.set(id, /* @__PURE__ */ new Set());
2334
- }
2335
- this.jobStateListeners.get(id).add(listener);
2336
- return () => {
2337
- this.jobStateListeners.get(id)?.delete(listener);
2338
- if (this.jobStateListeners.get(id)?.size === 0) {
2339
- this.jobStateListeners.delete(id);
2340
- }
2341
- };
2342
- }
2343
- /**
2344
- * Notify all listeners that a job's state has changed.
2345
- * @param {string} id - The job ID that changed
2346
- * @returns {void}
2347
- * @private
2348
- */
2349
- notifyJobStateChange(id) {
2350
- this.jobStateListeners.get(id)?.forEach((listener) => listener());
2351
- }
2352
- /**
2353
- * Pause a job by ID (sets enabled=false).
2354
- * Notifies any subscribed state listeners.
2355
- * @param {string} id - The job ID to pause
2356
- * @returns {void}
2357
- */
2358
- pauseJob(id) {
2359
- this.updateJob(id, { enabled: false });
2360
- this.notifyJobStateChange(id);
2361
- }
2362
- /**
2363
- * Resume a paused job by ID (sets enabled=true).
2364
- * Resets job timing to prevent frame accumulation.
2365
- * Notifies any subscribed state listeners.
2366
- * @param {string} id - The job ID to resume
2367
- * @returns {void}
2368
- */
2369
- resumeJob(id) {
2370
- this.updateJob(id, { enabled: true });
2371
- this.notifyJobStateChange(id);
2372
- }
2373
- //* Frame Loop Control Methods ================================
2374
- /**
2375
- * Start the requestAnimationFrame loop.
2376
- * Resets timing state (elapsedTime, frameCount) on start.
2377
- * No-op if already running.
2378
- * @returns {void}
2379
- */
2380
- start() {
2381
- if (this.loopState.running) return;
2382
- const { elapsedTime, createdAt } = this.loopState;
2383
- let adjustedCreated = 0;
2384
- if (this.stoppedTime > 0) {
2385
- adjustedCreated = createdAt - (performance.now() - this.stoppedTime);
2386
- this.stoppedTime = 0;
2387
- }
2388
- Object.assign(this.loopState, {
2389
- running: true,
2390
- elapsedTime: elapsedTime ?? 0,
2391
- lastTime: performance.now(),
2392
- createdAt: adjustedCreated > 0 ? adjustedCreated : performance.now(),
2393
- frameCount: 0,
2394
- rafHandle: requestAnimationFrame(this.loop)
2395
- });
2396
- }
2397
- /**
2398
- * Stop the requestAnimationFrame loop.
2399
- * Cancels any pending RAF callback.
2400
- * No-op if not running.
2401
- * @returns {void}
2402
- */
2403
- stop() {
2404
- if (!this.loopState.running) return;
2405
- this.loopState.running = false;
2406
- if (this.loopState.rafHandle !== null) {
2407
- cancelAnimationFrame(this.loopState.rafHandle);
2408
- this.loopState.rafHandle = null;
2409
- }
2410
- this.stoppedTime = performance.now();
2411
- }
2412
- /**
2413
- * Request frames to be rendered in demand mode.
2414
- * Accumulates pending frames (capped at 60) and starts the loop if not running.
2415
- * No-op if frameloop is not 'demand'.
2416
- * @param {number} [frames=1] - Number of frames to request
2417
- * @param {boolean} [stackFrames=false] - Whether to add frames to existing pending count
2418
- * - `false` (default): Sets pending frames to the specified value (replaces existing count)
2419
- * - `true`: Adds frames to existing pending count (useful for accumulating invalidations)
2420
- * @returns {void}
2421
- * @example
2422
- * // Request a single frame render
2423
- * scheduler.invalidate();
2424
- *
2425
- * @example
2426
- * // Request 5 frames (e.g., for animations)
2427
- * scheduler.invalidate(5);
2428
- *
2429
- * @example
2430
- * // Set pending frames to exactly 3 (don't stack with existing)
2431
- * scheduler.invalidate(3, false);
2432
- *
2433
- * @example
2434
- * // Add 2 more frames to existing pending count
2435
- * scheduler.invalidate(2, true);
2436
- */
2437
- invalidate(frames = 1, stackFrames = false) {
2438
- if (this._frameloop !== "demand") return;
2439
- const baseFrames = stackFrames ? this.pendingFrames : 0;
2440
- this.pendingFrames = Math.min(60, baseFrames + frames);
2441
- if (!this.loopState.running && this.pendingFrames > 0) this.start();
2442
- }
2443
- /**
2444
- * Reset timing state for deterministic testing.
2445
- * Preserves jobs and roots but resets lastTime, frameCount, elapsedTime, etc.
2446
- * @returns {void}
2447
- */
2448
- resetTiming() {
2449
- this.loopState.lastTime = null;
2450
- this.loopState.frameCount = 0;
2451
- this.loopState.elapsedTime = 0;
2452
- this.loopState.createdAt = performance.now();
2453
- }
2454
- //* Manual Stepping Methods ================================
2455
- /**
2456
- * Manually execute a single frame for all roots.
2457
- * Useful for frameloop='never' mode or testing scenarios.
2458
- * @param {number} [timestamp] - Optional timestamp (defaults to performance.now())
2459
- * @returns {void}
2460
- * @example
2461
- * // Manual control mode
2462
- * scheduler.frameloop = 'never';
2463
- * scheduler.step(); // Execute one frame
2464
- */
2465
- step(timestamp) {
2466
- const now = timestamp ?? performance.now();
2467
- this.executeFrame(now);
2468
- }
2469
- /**
2470
- * Manually execute a single job by its ID.
2471
- * Useful for testing individual job callbacks in isolation.
2472
- * @param {string} id - The job ID to step
2473
- * @param {number} [timestamp] - Optional timestamp (defaults to performance.now())
2474
- * @returns {void}
2475
- */
2476
- stepJob(id, timestamp) {
2477
- let job;
2478
- let root;
2479
- for (const r of this.roots.values()) {
2480
- job = r.jobs.get(id);
2481
- if (job) {
2482
- root = r;
2483
- break;
2484
- }
2485
- }
2486
- if (!job || !root) {
2487
- console.warn(`[Scheduler] Job "${id}" not found`);
2488
- return;
2489
- }
2490
- const now = timestamp ?? performance.now();
2491
- const deltaMs = this.loopState.lastTime !== null ? now - this.loopState.lastTime : 0;
2492
- const delta = deltaMs / 1e3;
2493
- const elapsed = now - this.loopState.createdAt;
2494
- const providedState = root.getState?.() ?? {};
2495
- const frameState = {
2496
- ...providedState,
2497
- time: now,
2498
- delta,
2499
- elapsed,
2500
- frame: this.loopState.frameCount
2501
- };
2502
- try {
2503
- job.callback(frameState, delta);
2504
- } catch (error) {
2505
- console.error(`[Scheduler] Error in job "${job.id}":`, error);
2506
- this.triggerError(error instanceof Error ? error : new Error(String(error)));
2507
- }
2508
- }
2509
- /**
2510
- * Execute a single frame across all roots.
2511
- * Order: globalBefore → each root's jobs → globalAfter
2512
- * @param {number} timestamp - RAF timestamp in milliseconds
2513
- * @returns {void}
2514
- * @private
2515
- */
2516
- executeFrame(timestamp) {
2517
- const deltaMs = this.loopState.lastTime !== null ? timestamp - this.loopState.lastTime : 0;
2518
- const delta = deltaMs / 1e3;
2519
- this.loopState.lastTime = timestamp;
2520
- this.loopState.frameCount++;
2521
- this.loopState.elapsedTime += deltaMs;
2522
- this.runGlobalJobs(this.globalBeforeJobs, timestamp);
2523
- for (const root of this.roots.values()) {
2524
- this.tickRoot(root, timestamp, delta);
2525
- }
2526
- this.runGlobalJobs(this.globalAfterJobs, timestamp);
2527
- }
2528
- /**
2529
- * Run all global jobs from a job map.
2530
- * Catches and logs errors without stopping execution.
2531
- * @param {Map<string, GlobalJob>} jobs - The global jobs map to execute
2532
- * @param {number} timestamp - RAF timestamp in milliseconds
2533
- * @returns {void}
2534
- * @private
2535
- */
2536
- runGlobalJobs(jobs, timestamp) {
2537
- for (const job of jobs.values()) {
2538
- try {
2539
- job.callback(timestamp);
2540
- } catch (error) {
2541
- console.error(`[Scheduler] Error in global job "${job.id}":`, error);
2542
- }
2543
- }
2544
- }
2545
- /**
2546
- * Execute all jobs for a single root in sorted order.
2547
- * Rebuilds sorted job list if needed, then dispatches each job.
2548
- * Errors are caught and propagated via triggerError.
2549
- * @param {RootEntry} root - The root entry to tick
2550
- * @param {number} timestamp - RAF timestamp in milliseconds
2551
- * @param {number} delta - Time since last frame in seconds
2552
- * @returns {void}
2553
- * @private
2554
- */
2555
- tickRoot(root, timestamp, delta) {
2556
- if (root.needsRebuild) {
2557
- root.sortedJobs = rebuildSortedJobs(root.jobs, this.phaseGraph);
2558
- root.needsRebuild = false;
2559
- }
2560
- const providedState = root.getState?.() ?? {};
2561
- const frameState = {
2562
- ...providedState,
2563
- time: timestamp,
2564
- delta,
2565
- elapsed: this.loopState.elapsedTime / 1e3,
2566
- // Convert ms to seconds
2567
- frame: this.loopState.frameCount
2568
- };
2569
- for (const job of root.sortedJobs) {
2570
- if (!shouldRun(job, timestamp)) continue;
2571
- try {
2572
- job.callback(frameState, delta);
2573
- } catch (error) {
2574
- console.error(`[Scheduler] Error in job "${job.id}":`, error);
2575
- this.triggerError(error instanceof Error ? error : new Error(String(error)));
2576
- }
2577
- }
2578
- }
2579
- //* Debug & Inspection Methods ================================
2580
- /**
2581
- * Get the total number of registered jobs across all roots.
2582
- * Includes both per-root jobs and global before/after jobs.
2583
- * @returns {number} Total job count
2584
- */
2585
- getJobCount() {
2586
- let count = 0;
2587
- for (const root of this.roots.values()) {
2588
- count += root.jobs.size;
2589
- }
2590
- return count + this.globalBeforeJobs.size + this.globalAfterJobs.size;
2591
- }
2592
- /**
2593
- * Get all registered job IDs across all roots.
2594
- * Includes both per-root jobs and global before/after jobs.
2595
- * @returns {string[]} Array of all job IDs
2596
- */
2597
- getJobIds() {
2598
- const ids = [];
2599
- for (const root of this.roots.values()) {
2600
- ids.push(...root.jobs.keys());
2601
- }
2602
- ids.push(...this.globalBeforeJobs.keys());
2603
- ids.push(...this.globalAfterJobs.keys());
2604
- return ids;
2605
- }
2606
- /**
2607
- * Get the number of registered roots (Canvas instances).
2608
- * @returns {number} Number of registered roots
2609
- */
2610
- getRootCount() {
2611
- return this.roots.size;
2612
- }
2613
- /**
2614
- * Check if any user (non-system) jobs are registered in a specific phase.
2615
- * Used by the default render job to know if a user has taken over rendering.
2616
- *
2617
- * @param phase The phase to check
2618
- * @param rootId Optional root ID to check (checks all roots if not provided)
2619
- * @returns true if any user jobs exist in the phase
2620
- */
2621
- hasUserJobsInPhase(phase, rootId) {
2622
- const rootsToCheck = rootId ? [this.roots.get(rootId)].filter(Boolean) : Array.from(this.roots.values());
2623
- return rootsToCheck.some((root) => {
2624
- if (!root) return false;
2625
- for (const job of root.jobs.values()) {
2626
- if (job.phase === phase && !job.system && job.enabled) return true;
2627
- }
2628
- return false;
2629
- });
2630
- }
2631
- //* Utility Methods ================================
2632
- /**
2633
- * Generate a unique root ID for automatic root registration.
2634
- * @returns {string} A unique root ID in the format 'root_N'
2635
- */
2636
- generateRootId() {
2637
- return `root_${this.nextRootIndex++}`;
2638
- }
2639
- /**
2640
- * Generate a unique job ID.
2641
- * @returns {string} A unique job ID in the format 'job_N'
2642
- * @private
2643
- */
2644
- generateJobId() {
2645
- return `job_${this.nextJobIndex}`;
2646
- }
2647
- /**
2648
- * Normalize before/after constraints to a Set.
2649
- * Handles undefined, single string, or array inputs.
2650
- * @param {string | string[] | undefined} value - The constraint value(s)
2651
- * @returns {Set<string>} Normalized Set of constraint strings
2652
- * @private
2653
- */
2654
- normalizeConstraints(value) {
2655
- if (!value) return /* @__PURE__ */ new Set();
2656
- if (Array.isArray(value)) return new Set(value);
2657
- return /* @__PURE__ */ new Set([value]);
2658
- }
2659
- };
2660
- //* Static State & Methods (Singleton Usage) ================================
2661
- //* Cross-Bundle Singleton Key ==============================
2662
- // Use Symbol.for() to ensure scheduler is shared across bundle boundaries
2663
- // This prevents issues when mixing imports from @react-three/fiber and @react-three/fiber/webgpu
2664
- __publicField(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
2665
- let Scheduler = _Scheduler;
2666
- const getScheduler = () => Scheduler.get();
2667
- if (hmrData) {
2668
- hmrData.accept?.();
1671
+ const INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
1672
+ function isInternalRendererAccess(stack, callerDepth = 2) {
1673
+ if (!stack) return false;
1674
+ const caller = stack.split("\n")[callerDepth] ?? "";
1675
+ return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
2669
1676
  }
2670
1677
 
2671
1678
  const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
@@ -2800,6 +1807,7 @@ const createStore = (invalidate, advance) => {
2800
1807
  }),
2801
1808
  setFrameloop: (frameloop = "always") => {
2802
1809
  set(() => ({ frameloop }));
1810
+ getScheduler().frameloop = frameloop;
2803
1811
  },
2804
1812
  setError: (error) => set(() => ({ error })),
2805
1813
  error: null,
@@ -2809,6 +1817,7 @@ const createStore = (invalidate, advance) => {
2809
1817
  buffers: {},
2810
1818
  gpuStorage: {},
2811
1819
  textures: /* @__PURE__ */ new Map(),
1820
+ _textureRefs: /* @__PURE__ */ new Map(),
2812
1821
  renderPipeline: null,
2813
1822
  passes: {},
2814
1823
  _hmrVersion: 0,
@@ -2866,8 +1875,7 @@ const createStore = (invalidate, advance) => {
2866
1875
  const currentState = rootStore.getState();
2867
1876
  if (!currentState.isLegacy && currentState.internal.actualRenderer) {
2868
1877
  const stack = new Error().stack || "";
2869
- const isInternalAccess = stack.includes("zustand") || stack.includes("setState") || stack.includes("Object.assign") || stack.includes("react-three-fiber/packages/fiber/src/core");
2870
- if (!isInternalAccess) {
1878
+ if (!isInternalRendererAccess(stack)) {
2871
1879
  const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
2872
1880
  notifyDepreciated({
2873
1881
  heading: "Accessing state.gl in WebGPU mode",
@@ -2980,19 +1988,25 @@ function loadingFn(extensions, onProgress) {
2980
1988
  );
2981
1989
  };
2982
1990
  }
2983
- function useLoader(loader, input, extensions, onProgress) {
2984
- const keys = Array.isArray(input) ? input : [input];
1991
+ function useLoader(loader, input, extensions, onProgress, cacheKey) {
1992
+ const inputs = Array.isArray(input) ? input : [input];
1993
+ const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
2985
1994
  const fn = loadingFn(extensions, onProgress);
2986
- const results = keys.map((key) => suspend(fn, [loader, key], { equal: is.equ }));
1995
+ const results = cacheKeys.map(
1996
+ (key, index) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
1997
+ );
2987
1998
  return Array.isArray(input) ? results : results[0];
2988
1999
  }
2989
- useLoader.preload = function(loader, input, extensions, onProgress) {
2990
- const keys = Array.isArray(input) ? input : [input];
2991
- keys.forEach((key) => preload(loadingFn(extensions, onProgress), [loader, key]));
2000
+ useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
2001
+ const inputs = Array.isArray(input) ? input : [input];
2002
+ const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
2003
+ cacheKeys.forEach(
2004
+ (key, index) => preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
2005
+ );
2992
2006
  };
2993
- useLoader.clear = function(loader, input) {
2994
- const keys = Array.isArray(input) ? input : [input];
2995
- keys.forEach((key) => clear([loader, key]));
2007
+ useLoader.clear = function(loader, input, cacheKey) {
2008
+ const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
2009
+ cacheKeys.forEach((key) => clear([loader, key]));
2996
2010
  };
2997
2011
  useLoader.loader = getLoader;
2998
2012
 
@@ -3068,20 +2082,14 @@ function useFrame(callback, priorityOrOptions) {
3068
2082
  }
3069
2083
  };
3070
2084
  } else {
3071
- const registerOutside = () => {
3072
- return scheduler.register((state, delta) => callbackRef.current?.(state, delta), { id, ...options });
3073
- };
3074
- if (scheduler.independent || scheduler.isReady) {
3075
- return registerOutside();
3076
- }
3077
- let unregisterJob = null;
3078
- const unsubReady = scheduler.onRootReady(() => {
3079
- unregisterJob = registerOutside();
3080
- });
3081
- return () => {
3082
- unsubReady();
3083
- unregisterJob?.();
3084
- };
2085
+ return scheduler.register(
2086
+ (state, delta) => {
2087
+ const frameState = state;
2088
+ if (!frameState.renderer) return;
2089
+ callbackRef.current?.(frameState, delta);
2090
+ },
2091
+ { id, ...options }
2092
+ );
3085
2093
  }
3086
2094
  }, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
3087
2095
  const isPaused = React.useSyncExternalStore(
@@ -3172,18 +2180,18 @@ function buildFromCache(input, textureCache) {
3172
2180
  function useTexture(input, optionsOrOnLoad) {
3173
2181
  const renderer = useThree((state) => state.internal.actualRenderer);
3174
2182
  const store = useStore();
3175
- const textureCache = useThree((state) => state.textures);
3176
2183
  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
3177
- const { onLoad, cache = false } = options;
2184
+ const { onLoad, cache = true } = options;
3178
2185
  const onLoadRef = useRef(onLoad);
3179
2186
  onLoadRef.current = onLoad;
3180
2187
  const onLoadCalledForRef = useRef(null);
3181
2188
  const urls = useMemo(() => getUrls(input), [input]);
3182
2189
  const cachedResult = useMemo(() => {
3183
2190
  if (!cache) return null;
3184
- if (!allUrlsCached(urls, textureCache)) return null;
3185
- return buildFromCache(input, textureCache);
3186
- }, [cache, urls, textureCache, input]);
2191
+ const textures = store.getState().textures;
2192
+ if (!allUrlsCached(urls, textures)) return null;
2193
+ return buildFromCache(input, textures);
2194
+ }, [cache, urls, input, store]);
3187
2195
  const loadedTextures = useLoader(
3188
2196
  TextureLoader,
3189
2197
  IsObject(input) ? Object.values(input) : input
@@ -3227,8 +2235,6 @@ function useTexture(input, optionsOrOnLoad) {
3227
2235
  }, [input, loadedTextures, cachedResult]);
3228
2236
  useEffect(() => {
3229
2237
  if (!cache) return;
3230
- if (cachedResult) return;
3231
- const set = store.setState;
3232
2238
  const urlTextureMap = [];
3233
2239
  if (typeof input === "string") {
3234
2240
  urlTextureMap.push([input, mappedTextures]);
@@ -3242,18 +2248,32 @@ function useTexture(input, optionsOrOnLoad) {
3242
2248
  urlTextureMap.push([url, textureRecord[key]]);
3243
2249
  }
3244
2250
  }
3245
- set((state) => {
3246
- const newMap = new Map(state.textures);
3247
- let changed = false;
2251
+ store.setState((state) => {
2252
+ const refs = new Map(state._textureRefs);
2253
+ let textures = state.textures;
2254
+ let added = false;
3248
2255
  for (const [url, texture] of urlTextureMap) {
3249
- if (!newMap.has(url)) {
3250
- newMap.set(url, texture);
3251
- changed = true;
2256
+ if (!textures.has(url)) {
2257
+ if (!added) {
2258
+ textures = new Map(textures);
2259
+ added = true;
2260
+ }
2261
+ textures.set(url, texture);
3252
2262
  }
2263
+ refs.set(url, (refs.get(url) ?? 0) + 1);
3253
2264
  }
3254
- return changed ? { textures: newMap } : state;
2265
+ return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
2266
+ });
2267
+ return () => store.setState((state) => {
2268
+ const refs = new Map(state._textureRefs);
2269
+ for (const [url] of urlTextureMap) {
2270
+ const next = (refs.get(url) ?? 0) - 1;
2271
+ if (next <= 0) refs.delete(url);
2272
+ else refs.set(url, next);
2273
+ }
2274
+ return { _textureRefs: refs };
3255
2275
  });
3256
- }, [cache, input, mappedTextures, store, cachedResult]);
2276
+ }, [cache, input, mappedTextures, store]);
3257
2277
  return mappedTextures;
3258
2278
  }
3259
2279
  useTexture.preload = (url) => useLoader.preload(TextureLoader, url);
@@ -3269,96 +2289,63 @@ const Texture = ({
3269
2289
  return /* @__PURE__ */ jsx(Fragment, { children: children?.(ret) });
3270
2290
  };
3271
2291
 
3272
- function getTextureValue(entry) {
3273
- if (entry instanceof Texture$1) return entry;
3274
- if (entry && typeof entry === "object" && "value" in entry && entry.value instanceof Texture$1) {
3275
- return entry.value;
3276
- }
3277
- return null;
3278
- }
3279
- function useTextures() {
2292
+ function useTextures(selector) {
3280
2293
  const store = useStore();
3281
- return useMemo(() => {
3282
- const set = store.setState;
2294
+ const registry = useMemo(() => {
3283
2295
  const getState = store.getState;
3284
- const add = (key, value) => {
3285
- set((state) => {
3286
- const newMap = new Map(state.textures);
3287
- newMap.set(key, value);
3288
- return { textures: newMap };
3289
- });
3290
- };
3291
- const addMultiple = (items) => {
3292
- set((state) => {
3293
- const newMap = new Map(state.textures);
3294
- const entries = items instanceof Map ? items.entries() : Object.entries(items);
3295
- for (const [key, value] of entries) {
3296
- newMap.set(key, value);
3297
- }
3298
- return { textures: newMap };
3299
- });
3300
- };
3301
- const remove = (key) => {
3302
- set((state) => {
3303
- const newMap = new Map(state.textures);
3304
- newMap.delete(key);
3305
- return { textures: newMap };
3306
- });
3307
- };
3308
- const removeMultiple = (keys) => {
3309
- set((state) => {
3310
- const newMap = new Map(state.textures);
3311
- for (const key of keys) newMap.delete(key);
3312
- return { textures: newMap };
3313
- });
3314
- };
3315
- const dispose = (key) => {
3316
- const entry = getState().textures.get(key);
3317
- if (entry) {
3318
- const tex = getTextureValue(entry);
3319
- tex?.dispose();
3320
- }
3321
- remove(key);
3322
- };
3323
- const disposeMultiple = (keys) => {
3324
- const textures = getState().textures;
3325
- for (const key of keys) {
3326
- const entry = textures.get(key);
3327
- if (entry) {
3328
- const tex = getTextureValue(entry);
3329
- tex?.dispose();
3330
- }
3331
- }
3332
- removeMultiple(keys);
3333
- };
3334
- const disposeAll = () => {
3335
- const textures = getState().textures;
3336
- for (const entry of textures.values()) {
3337
- const tex = getTextureValue(entry);
3338
- tex?.dispose();
3339
- }
3340
- set({ textures: /* @__PURE__ */ new Map() });
3341
- };
2296
+ const setState = store.setState;
2297
+ const getOne = (key) => getState().textures.get(key);
3342
2298
  return {
3343
- // Getter for the textures Map (reactive via getState)
3344
- get textures() {
2299
+ get all() {
3345
2300
  return getState().textures;
3346
2301
  },
3347
- // Read
3348
- get: (key) => getState().textures.get(key),
2302
+ get(input) {
2303
+ if (typeof input === "string") return getOne(input);
2304
+ if (Array.isArray(input)) return input.map(getOne);
2305
+ const out = {};
2306
+ for (const name in input) out[name] = getOne(input[name]);
2307
+ return out;
2308
+ },
3349
2309
  has: (key) => getState().textures.has(key),
3350
- // Write
3351
- add,
3352
- addMultiple,
3353
- // Remove (cache only)
3354
- remove,
3355
- removeMultiple,
3356
- // Dispose (GPU + cache)
3357
- dispose,
3358
- disposeMultiple,
3359
- disposeAll
2310
+ add(keyOrRecord, texture) {
2311
+ setState((state) => {
2312
+ const textures = new Map(state.textures);
2313
+ if (typeof keyOrRecord === "string") {
2314
+ textures.set(keyOrRecord, texture);
2315
+ } else {
2316
+ for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
2317
+ }
2318
+ return { textures };
2319
+ });
2320
+ },
2321
+ dispose(key, options) {
2322
+ const state = getState();
2323
+ const refs = state._textureRefs.get(key) ?? 0;
2324
+ if (refs > 0 && !options?.force) {
2325
+ console.warn(
2326
+ `[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
2327
+ );
2328
+ return false;
2329
+ }
2330
+ state.textures.get(key)?.dispose();
2331
+ setState((s) => {
2332
+ const textures = new Map(s.textures);
2333
+ textures.delete(key);
2334
+ const nextRefs = new Map(s._textureRefs);
2335
+ nextRefs.delete(key);
2336
+ return { textures, _textureRefs: nextRefs };
2337
+ });
2338
+ return true;
2339
+ },
2340
+ disposeAll() {
2341
+ for (const texture of getState().textures.values()) texture.dispose();
2342
+ setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
2343
+ }
3360
2344
  };
3361
2345
  }, [store]);
2346
+ const subscribe = selector ? () => selector(registry) : (state) => state.textures;
2347
+ const selected = useThree(subscribe);
2348
+ return selector ? selected : registry;
3362
2349
  }
3363
2350
 
3364
2351
  function useRenderTarget(widthOrOptions, heightOrOptions, options) {
@@ -3439,7 +2426,7 @@ function advance(timestamp) {
3439
2426
  getScheduler().step(timestamp);
3440
2427
  }
3441
2428
 
3442
- const version = "10.0.0-alpha.2";
2429
+ const version = "10.0.0-alpha.3";
3443
2430
  const packageData = {
3444
2431
  version: version};
3445
2432
 
@@ -14878,6 +13865,7 @@ function swapInstances() {
14878
13865
  }
14879
13866
  }
14880
13867
  if (instance.isHidden) unhideInstance(instance);
13868
+ if (isObject3D(instance.object)) removeInteractivity(findInitialRoot(instance), instance.object);
14881
13869
  if (instance.object.__r3f) delete instance.object.__r3f;
14882
13870
  if (instance.type !== "primitive") disposeOnIdle(instance.object);
14883
13871
  }
@@ -14890,6 +13878,8 @@ function swapInstances() {
14890
13878
  instance.object.__r3f = instance;
14891
13879
  setFiberRef(fiber, instance.object);
14892
13880
  delete instance.appliedOnce;
13881
+ instance.eventCount = 0;
13882
+ instance.handlers = {};
14893
13883
  applyProps(instance.object, instance.props);
14894
13884
  if (instance.props.attach) {
14895
13885
  attach(parent, instance);
@@ -15105,11 +14095,15 @@ const reconciler = /* @__PURE__ */ createReconciler({
15105
14095
  cloneMutableTextInstance(textInstance) {
15106
14096
  return textInstance;
15107
14097
  },
14098
+ // React 19.2 added these for root-level view transitions. They only run for hosts that opt into
14099
+ // view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
14100
+ // into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
14101
+ // React never calls them. They stay as no-ops rather than throws: the host config is shared by
14102
+ // every root, and a throw here would turn a React-internal probe into a hard crash for users.
14103
+ // Guarded by a test asserting a full render + unmount never reaches them.
15108
14104
  cloneRootViewTransitionContainer(_rootContainer) {
15109
- throw new Error("Not implemented.");
15110
14105
  },
15111
14106
  removeRootViewTransitionClone(_rootContainer, _clone) {
15112
- throw new Error("Not implemented.");
15113
14107
  },
15114
14108
  // https://github.com/facebook/react/pull/32465
15115
14109
  createFragmentInstance: (_fiber) => null,
@@ -15194,6 +14188,7 @@ function createRoot(canvas) {
15194
14188
  const lastConfiguredProps = {};
15195
14189
  let configured = false;
15196
14190
  let pending = null;
14191
+ let rendererSetup = null;
15197
14192
  return {
15198
14193
  async configure(props = {}) {
15199
14194
  let resolve;
@@ -15224,7 +14219,7 @@ function createRoot(canvas) {
15224
14219
  forceEven
15225
14220
  } = props;
15226
14221
  const textureColorSpace = is.obj(glConfig) && !is.fun(glConfig) && !isRenderer(glConfig) && glConfig.textureColorSpace || is.obj(rendererConfig) && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && rendererConfig.textureColorSpace || SRGBColorSpace;
15227
- const state = store.getState();
14222
+ let state = store.getState();
15228
14223
  const defaultGLProps = {
15229
14224
  canvas,
15230
14225
  powerPreference: "high-performance",
@@ -15252,9 +14247,21 @@ function createRoot(canvas) {
15252
14247
  );
15253
14248
  }
15254
14249
  if (!state.internal.actualRenderer) {
15255
- renderer = await resolveRenderer(glConfig, defaultGLProps, WebGLRenderer);
15256
- state.internal.actualRenderer = renderer;
15257
- state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
14250
+ if (!rendererSetup) {
14251
+ rendererSetup = (async () => {
14252
+ {
14253
+ renderer = await resolveRenderer(glConfig, defaultGLProps, WebGLRenderer);
14254
+ state.internal.actualRenderer = renderer;
14255
+ state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
14256
+ }
14257
+ })().catch((err) => {
14258
+ rendererSetup = null;
14259
+ throw err;
14260
+ });
14261
+ }
14262
+ await rendererSetup;
14263
+ state = store.getState();
14264
+ renderer = state.internal.actualRenderer;
15258
14265
  }
15259
14266
  let raycaster = state.raycaster;
15260
14267
  if (!raycaster) state.set({ raycaster: raycaster = new Raycaster() });
@@ -15479,7 +14486,7 @@ function createRoot(canvas) {
15479
14486
  {
15480
14487
  id: `${newRootId}_frustum`,
15481
14488
  rootId: newRootId,
15482
- phase: "preRender",
14489
+ before: "render",
15483
14490
  system: true
15484
14491
  }
15485
14492
  );
@@ -15491,7 +14498,7 @@ function createRoot(canvas) {
15491
14498
  {
15492
14499
  id: `${newRootId}_visibility`,
15493
14500
  rootId: newRootId,
15494
- phase: "preRender",
14501
+ before: "render",
15495
14502
  system: true,
15496
14503
  after: `${newRootId}_frustum`
15497
14504
  }
@@ -15604,7 +14611,8 @@ function unmountComponentAtNode(canvas, callback) {
15604
14611
  dispose(state.scene);
15605
14612
  _roots.delete(canvas);
15606
14613
  if (callback) callback(canvas);
15607
- } catch {
14614
+ } catch (error) {
14615
+ console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
15608
14616
  }
15609
14617
  }, 500);
15610
14618
  }
@@ -15667,6 +14675,7 @@ function PortalInner({ state = {}, children, container }) {
15667
14675
  viewport = rootState.viewport.getCurrentViewport(camera, new Vector3(), resolvedSize);
15668
14676
  if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
15669
14677
  }
14678
+ const set = injectState.set;
15670
14679
  return {
15671
14680
  // The intersect consists of the previous root state
15672
14681
  ...rootState,
@@ -15685,7 +14694,7 @@ function PortalInner({ state = {}, children, container }) {
15685
14694
  size: resolvedSize,
15686
14695
  viewport: { ...rootState.viewport, ...viewport },
15687
14696
  // Layers are allowed to override events
15688
- setEvents: (events2) => injectState.set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
14697
+ setEvents: (events2) => set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
15689
14698
  // Container for child attachment - the portalScene (injected or container itself)
15690
14699
  internal: { ...rootState.internal, ...injectState.internal, container: portalScene }
15691
14700
  };
@@ -15714,6 +14723,59 @@ function flushSync(fn) {
15714
14723
  return reconciler.flushSyncFromReconciler(fn);
15715
14724
  }
15716
14725
 
14726
+ function parseBackground(background) {
14727
+ if (!background) return null;
14728
+ if (typeof background === "object" && !background.isColor) {
14729
+ const { backgroundMap, envMap, files, preset, ...rest } = background;
14730
+ return {
14731
+ ...rest,
14732
+ preset,
14733
+ files: envMap || files,
14734
+ backgroundFiles: backgroundMap,
14735
+ background: true
14736
+ };
14737
+ }
14738
+ if (typeof background === "number") {
14739
+ return { color: background, background: true };
14740
+ }
14741
+ if (typeof background === "string") {
14742
+ if (background in presetsObj) {
14743
+ return { preset: background, background: true };
14744
+ }
14745
+ if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
14746
+ return { files: background, background: true };
14747
+ }
14748
+ return { color: background, background: true };
14749
+ }
14750
+ if (background.isColor) {
14751
+ return { color: background, background: true };
14752
+ }
14753
+ return null;
14754
+ }
14755
+
14756
+ function parseRendererConfig(rendererProp) {
14757
+ const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
14758
+ if (isRendererConfig) {
14759
+ const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
14760
+ return {
14761
+ primaryCanvas: pc,
14762
+ scheduler: sc,
14763
+ renderer: Object.keys(rest).length > 0 ? rest : rendererProp
14764
+ };
14765
+ }
14766
+ return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
14767
+ }
14768
+
14769
+ function clearHmrCaches(store) {
14770
+ store.setState((state) => ({
14771
+ nodes: {},
14772
+ uniforms: {},
14773
+ buffers: {},
14774
+ gpuStorage: {},
14775
+ _hmrVersion: state._hmrVersion + 1
14776
+ }));
14777
+ }
14778
+
15717
14779
  function CanvasImpl({
15718
14780
  ref,
15719
14781
  children,
@@ -15734,6 +14796,8 @@ function CanvasImpl({
15734
14796
  raycaster,
15735
14797
  camera,
15736
14798
  scene,
14799
+ autoUpdateFrustum,
14800
+ occlusion,
15737
14801
  onPointerMissed,
15738
14802
  onDragOverMissed,
15739
14803
  onDropMissed,
@@ -15745,49 +14809,10 @@ function CanvasImpl({
15745
14809
  forceEven,
15746
14810
  ...props
15747
14811
  }) {
15748
- const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
15749
- let primaryCanvas;
15750
- let scheduler;
15751
- let renderer;
15752
- if (isRendererConfig) {
15753
- const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
15754
- primaryCanvas = pc;
15755
- scheduler = sc;
15756
- renderer = Object.keys(rest).length > 0 ? rest : rendererProp;
15757
- } else {
15758
- renderer = rendererProp;
15759
- }
14812
+ const { primaryCanvas, scheduler, renderer } = parseRendererConfig(rendererProp);
15760
14813
  React.useMemo(() => extend(THREE), []);
15761
14814
  const Bridge = useBridge();
15762
- const backgroundProps = React.useMemo(() => {
15763
- if (!background) return null;
15764
- if (typeof background === "object" && !background.isColor) {
15765
- const { backgroundMap, envMap, files, preset, ...rest } = background;
15766
- return {
15767
- ...rest,
15768
- preset,
15769
- files: envMap || files,
15770
- backgroundFiles: backgroundMap,
15771
- background: true
15772
- };
15773
- }
15774
- if (typeof background === "number") {
15775
- return { color: background, background: true };
15776
- }
15777
- if (typeof background === "string") {
15778
- if (background in presetsObj) {
15779
- return { preset: background, background: true };
15780
- }
15781
- if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
15782
- return { files: background, background: true };
15783
- }
15784
- return { color: background, background: true };
15785
- }
15786
- if (background.isColor) {
15787
- return { color: background, background: true };
15788
- }
15789
- return null;
15790
- }, [background]);
14815
+ const backgroundProps = React.useMemo(() => parseBackground(background), [background]);
15791
14816
  const hasInitialSizeRef = React.useRef(false);
15792
14817
  const measureConfig = React.useMemo(() => {
15793
14818
  if (!hasInitialSizeRef.current) {
@@ -15829,6 +14854,7 @@ function CanvasImpl({
15829
14854
  const handleDropMissed = useMutableCallback(onDropMissed);
15830
14855
  const [block, setBlock] = React.useState(false);
15831
14856
  const [error, setError] = React.useState(false);
14857
+ const [fallbackVisible, setFallbackVisible] = React.useState(false);
15832
14858
  if (block) throw block;
15833
14859
  if (error) throw error;
15834
14860
  const root = React.useRef(null);
@@ -15836,6 +14862,7 @@ function CanvasImpl({
15836
14862
  const unsubscribeErrorRef = React.useRef(null);
15837
14863
  useIsomorphicLayoutEffect(() => {
15838
14864
  effectActiveRef.current = true;
14865
+ if (fallbackVisible) return;
15839
14866
  const canvas = canvasRef.current;
15840
14867
  if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
15841
14868
  if (!root.current) {
@@ -15856,7 +14883,7 @@ function CanvasImpl({
15856
14883
  }
15857
14884
  async function run() {
15858
14885
  if (!effectActiveRef.current || !root.current) return;
15859
- await root.current.configure({
14886
+ const configured = await root.current.configure({
15860
14887
  id,
15861
14888
  primaryCanvas,
15862
14889
  scheduler,
@@ -15871,6 +14898,8 @@ function CanvasImpl({
15871
14898
  performance,
15872
14899
  raycaster,
15873
14900
  camera,
14901
+ autoUpdateFrustum,
14902
+ occlusion,
15874
14903
  size: effectiveSize,
15875
14904
  // Store size props for reset functionality
15876
14905
  _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
@@ -15895,8 +14924,20 @@ function CanvasImpl({
15895
14924
  }
15896
14925
  onCreated?.(state);
15897
14926
  }
15898
- });
15899
- if (!effectActiveRef.current || !root.current) return;
14927
+ }).then(
14928
+ () => true,
14929
+ // Renderer setup failed (e.g. no WebGL/WebGPU support). The `fallback` prop lives
14930
+ // inside <canvas>, which browsers don't display, so surface it as visible DOM
14931
+ // instead; with no fallback, rethrow to an external error boundary. (#3757)
14932
+ (setupError) => {
14933
+ if (effectActiveRef.current) {
14934
+ if (fallback != null) setFallbackVisible(true);
14935
+ else setError(setupError);
14936
+ }
14937
+ return false;
14938
+ }
14939
+ );
14940
+ if (!configured || !effectActiveRef.current || !root.current) return;
15900
14941
  root.current.render(
15901
14942
  /* @__PURE__ */ jsx(Bridge, { children: /* @__PURE__ */ jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxs(React.Suspense, { fallback: /* @__PURE__ */ jsx(Block, { set: setBlock }), children: [
15902
14943
  backgroundProps && /* @__PURE__ */ jsx(Environment, { ...backgroundProps }),
@@ -15930,14 +14971,7 @@ function CanvasImpl({
15930
14971
  const handleHMR = () => {
15931
14972
  queueMicrotask(() => {
15932
14973
  const rootEntry = _roots.get(canvas);
15933
- if (rootEntry?.store) {
15934
- console.log("[R3F] HMR detected \u2014 rebuilding nodes/uniforms");
15935
- rootEntry.store.setState((state) => ({
15936
- nodes: {},
15937
- uniforms: {},
15938
- _hmrVersion: state._hmrVersion + 1
15939
- }));
15940
- }
14974
+ if (rootEntry?.store) clearHmrCaches(rootEntry.store);
15941
14975
  });
15942
14976
  };
15943
14977
  if (typeof import.meta !== "undefined" && import.meta.hot) {
@@ -15966,7 +15000,11 @@ function CanvasImpl({
15966
15000
  ...style
15967
15001
  },
15968
15002
  ...props,
15969
- children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
15003
+ children: fallbackVisible ? (
15004
+ // Renderer setup failed: render the fallback as visible DOM. Inside <canvas> (below)
15005
+ // it exists in the tree but browsers never paint it, which is the whole bug (#3757).
15006
+ fallback
15007
+ ) : /* @__PURE__ */ jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
15970
15008
  "canvas",
15971
15009
  {
15972
15010
  ref: canvasRef,
@@ -15985,4 +15023,4 @@ function Canvas(props) {
15985
15023
 
15986
15024
  extend(THREE);
15987
15025
 
15988
- export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getScheduler, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, reconciler, registerPrimary, removeInteractivity, resolve, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useMutableCallback, useRenderTarget, useStore, useTexture, useTextures, useThree, waitForPrimary };
15026
+ export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, reconciler, registerPrimary, removeInteractivity, resolve, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useMutableCallback, useRenderTarget, useStore, useTexture, useTextures, useThree, waitForPrimary };