@react-three/fiber 10.0.0-canary.5c62eb9 → 10.0.0-canary.60e7a38

package/dist/index.cjs

@@ -56,10 +56,13 @@ const R3F_BUILD_WEBGPU = true;
 
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
+  CubeRenderTarget: webgpu.CubeRenderTarget,
+  CubeRenderTargetCompat: webgpu.CubeRenderTarget,
   Inspector: Inspector_js.Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: webgpu.RenderTarget,
+  WebGLCubeRenderTarget: three.WebGLCubeRenderTarget,
   WebGLRenderTarget: three.WebGLRenderTarget,
   WebGLRenderer: three.WebGLRenderer
 }, [webgpu__namespace]);
@@ -333,15 +336,16 @@ function EnvironmentPortal({
   preset = void 0,
   extensions
 }) {
-  const gl = fiber.useThree((state) => state.gl);
+  const renderer = fiber.useThree((state) => state.renderer);
+  const isLegacy = fiber.useThree((state) => state.isLegacy);
   const defaultScene = fiber.useThree((state) => state.scene);
   const camera = React__namespace.useRef(null);
   const [virtualScene] = React__namespace.useState(() => new webgpu.Scene());
   const fbo = React__namespace.useMemo(() => {
-    const fbo2 = new webgpu.WebGLCubeRenderTarget(resolution);
+    const fbo2 = isLegacy ? new three.WebGLCubeRenderTarget(resolution) : new webgpu.CubeRenderTarget(resolution);
     fbo2.texture.type = webgpu.HalfFloatType;
     return fbo2;
-  }, [resolution]);
+  }, [resolution, isLegacy]);
   React__namespace.useEffect(() => {
     return () => {
       fbo.dispose();
@@ -349,10 +353,10 @@ function EnvironmentPortal({
   }, [fbo]);
   React__namespace.useLayoutEffect(() => {
     if (frames === 1) {
-      const autoClear = gl.autoClear;
-      gl.autoClear = true;
-      camera.current.update(gl, virtualScene);
-      gl.autoClear = autoClear;
+      const autoClear = renderer.autoClear;
+      renderer.autoClear = true;
+      camera.current.update(renderer, virtualScene);
+      renderer.autoClear = autoClear;
     }
     return setEnvProps(background, scene, defaultScene, fbo.texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -369,7 +373,7 @@ function EnvironmentPortal({
     defaultScene,
     background,
     frames,
-    gl,
+    renderer,
     blur,
     backgroundBlurriness,
     backgroundIntensity,
@@ -380,10 +384,10 @@ function EnvironmentPortal({
   let count = 1;
   fiber.useFrame(() => {
     if (frames === Infinity || count < frames) {
-      const autoClear = gl.autoClear;
-      gl.autoClear = true;
-      camera.current.update(gl, virtualScene);
-      gl.autoClear = autoClear;
+      const autoClear = renderer.autoClear;
+      renderer.autoClear = true;
+      camera.current.update(renderer, virtualScene);
+      renderer.autoClear = autoClear;
       count++;
     }
   });
@@ -450,7 +454,6 @@ function Environment(props) {
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const act = React__namespace["act"];
 const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
   const ref = React__namespace.useRef(fn);
@@ -626,8 +629,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
-      isHidden: false,
-      deferredRefs: []
+      isHidden: false
     };
     if (object) object.__r3f = instance;
   }
@@ -784,6 +786,17 @@ function unregisterVisibility(store, object) {
   internal.visibilityRegistry.delete(object.uuid);
   internal.occlusionCache.delete(object);
 }
+function updateVisibilityHandlers(store, object, handlers) {
+  const { internal } = store.getState();
+  const entry = internal.visibilityRegistry.get(object.uuid);
+  if (!entry) return false;
+  entry.handlers = handlers;
+  if ((handlers.onOccluded || handlers.onVisible) && !internal.occlusionEnabled) {
+    object.occlusionTest = true;
+    enableOcclusion(store);
+  }
+  return true;
+}
 function checkVisibility(state) {
   const { internal, camera } = state;
   const registry = internal.visibilityRegistry;
@@ -944,9 +957,9 @@ function diffProps(instance, newProps) {
     const { root, key } = resolve(instance.object, prop);
     if (root.constructor && root.constructor.length === 0) {
       const ctor = getMemoizedPrototype(root);
-      if (!is.und(ctor)) changedProps[key] = ctor[key];
+      if (!is.und(ctor)) changedProps[prop] = ctor[key];
     } else {
-      changedProps[key] = 0;
+      changedProps[prop] = 0;
     }
   }
   return changedProps;
@@ -971,10 +984,7 @@ function applyProps(object, props) {
       continue;
     }
     if (value === void 0) continue;
-    if (isFromRef(value)) {
-      instance?.deferredRefs?.push({ prop, ref: value[FROM_REF] });
-      continue;
-    }
+    if (isFromRef(value)) continue;
     if (isOnce(value)) {
       if (instance?.appliedOnce?.has(prop)) continue;
       if (instance) {
@@ -1010,6 +1020,19 @@ function applyProps(object, props) {
     } else if (isVectorLike(target) && is.num(value)) {
       if ("setScalar" in target && typeof target.setScalar === "function") target.setScalar(value);
       else target.set(value);
+    } else if (root instanceof webgpu.ShaderMaterial && key === "uniforms" && is.obj(value)) {
+      if (!is.obj(root.uniforms)) root.uniforms = {};
+      const uniforms = root.uniforms;
+      const nextUniforms = value;
+      for (const name in nextUniforms) {
+        const uniform = nextUniforms[name];
+        const targetUniform = uniforms[name];
+        if (targetUniform) Object.assign(targetUniform, uniform);
+        else {
+          const nextUniform = uniform instanceof webgpu.Uniform ? uniform.clone() : new webgpu.Uniform(uniform.value);
+          uniforms[name] = nextUniform;
+        }
+      }
     } else {
       root[key] = value;
       if (key.endsWith("Node") && root.isMaterial) {
@@ -1028,6 +1051,9 @@ function applyProps(object, props) {
     if (instance.eventCount && object2.raycast !== null) {
       rootState.internal.interaction.push(object2);
     }
+  }
+  if (instance?.parent && rootState?.internal && instance.object?.isObject3D) {
+    const object2 = instance.object;
     const root = findInitialRoot(instance);
     const visibilityHandlers = {
       onFramed: instance.handlers.onFramed,
@@ -1035,7 +1061,9 @@ function applyProps(object, props) {
       onVisible: instance.handlers.onVisible
     };
     if (hasVisibilityHandlers(visibilityHandlers)) {
-      registerVisibility(root, object2, visibilityHandlers);
+      if (!updateVisibilityHandlers(root, object2, visibilityHandlers)) {
+        registerVisibility(root, object2, visibilityHandlers);
+      }
     } else {
       unregisterVisibility(root, object2);
     }
@@ -1078,6 +1106,41 @@ function releaseInternalPointerCapture(internal, obj, pointerId) {
     captureData.target.releasePointerCapture(pointerId);
   }
 }
+function swapInteractivity(store, object, newObject) {
+  const { internal } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (const pointerState of internal.pointerMap.values()) {
+    for (let i = 0; i < pointerState.initialHits.length; i++) {
+      if (pointerState.initialHits[i] === object) pointerState.initialHits[i] = newObject;
+    }
+    pointerState.hovered.forEach((value, key) => {
+      if (value.eventObject === object || value.object === object) {
+        pointerState.hovered.delete(key);
+        const next = {
+          ...value,
+          eventObject: value.eventObject === object ? newObject : value.eventObject,
+          object: value.object === object ? newObject : value.object
+        };
+        pointerState.hovered.set(makeId(next), next);
+      }
+    });
+    const captureData = pointerState.captured.get(object);
+    if (captureData) {
+      pointerState.captured.delete(object);
+      pointerState.captured.set(newObject, {
+        ...captureData,
+        intersection: {
+          ...captureData.intersection,
+          object: captureData.intersection.object === object ? newObject : captureData.intersection.object,
+          eventObject: captureData.intersection.eventObject === object ? newObject : captureData.intersection.eventObject
+        }
+      });
+    }
+  }
+  unregisterVisibility(store, object);
+}
 function removeInteractivity(store, object) {
   const { internal } = store.getState();
   internal.interaction = internal.interaction.filter((o) => o !== object);
@@ -1563,6 +1626,7 @@ function createPointerEvents(store) {
         set((state) => ({ events: { ...state.events, connected: void 0 } }));
       }
     },
+    // PREVIEW (A8): the XR pointer registration API may change before stable.
     registerPointer: (config) => {
       const pointerId = nextXRPointerId++;
       xrPointers.set(pointerId, config);
@@ -1650,11 +1714,10 @@ function notifyAlpha({ message, link }) {
 }
 
 const INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
-const INTERNAL_FIBER_MARKERS = ["packages/fiber/src", "packages/fiber/dist", "@react-three/fiber", "@react-three_fiber"];
 function isInternalRendererAccess(stack, callerDepth = 2) {
   if (!stack) return false;
   const caller = stack.split("\n")[callerDepth] ?? "";
-  return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m)) || INTERNAL_FIBER_MARKERS.some((m) => caller.includes(m));
+  return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
 }
 
 const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
@@ -1789,6 +1852,7 @@ const createStore = (invalidate, advance) => {
       }),
       setFrameloop: (frameloop = "always") => {
         set(() => ({ frameloop }));
+        scheduler.getScheduler().frameloop = frameloop;
       },
       setError: (error) => set(() => ({ error })),
       error: null,
@@ -1969,19 +2033,25 @@ function loadingFn(extensions, onProgress) {
     );
   };
 }
-function useLoader(loader, input, extensions, onProgress) {
-  const keys = Array.isArray(input) ? input : [input];
+function useLoader(loader, input, extensions, onProgress, cacheKey) {
+  const inputs = Array.isArray(input) ? input : [input];
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
   const fn = loadingFn(extensions, onProgress);
-  const results = keys.map((key) => suspendReact.suspend(fn, [loader, key], { equal: is.equ }));
+  const results = cacheKeys.map(
+    (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
+  );
   return Array.isArray(input) ? results : results[0];
 }
-useLoader.preload = function(loader, input, extensions, onProgress) {
-  const keys = Array.isArray(input) ? input : [input];
-  keys.forEach((key) => suspendReact.preload(loadingFn(extensions, onProgress), [loader, key]));
+useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
+  const inputs = Array.isArray(input) ? input : [input];
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  cacheKeys.forEach(
+    (key, index) => suspendReact.preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
+  );
 };
-useLoader.clear = function(loader, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  keys.forEach((key) => suspendReact.clear([loader, key]));
+useLoader.clear = function(loader, input, cacheKey) {
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  cacheKeys.forEach((key) => suspendReact.clear([loader, key]));
 };
 useLoader.loader = getLoader;
 
@@ -2403,7 +2473,7 @@ function advance(timestamp) {
   scheduler.getScheduler().step(timestamp);
 }
 
-const version = "10.0.0-alpha.2";
+const version = "10.0.0-alpha.3";
 const packageData = {
 	version: version};
 
@@ -13659,7 +13729,7 @@ function n0() {
 var t0 = n0();
 const r0 = Xb(t0);
 
-const t = 1, o = 8, r = 32, e = 2;
+const t = 1, o = 8, r = 32, e = 2, i$1 = 268435456;
 
 function createReconciler(config) {
   const reconciler2 = r0(config);
@@ -13824,7 +13894,15 @@ function setFiberRef(fiber, publicInstance) {
   }
 }
 const reconstructed = [];
-function swapInstances() {
+function flushReconstructedInstances() {
+  if (reconstructed.length === 0) return;
+  try {
+    swapReconstructedInstances();
+  } finally {
+    reconstructed.length = 0;
+  }
+}
+function swapReconstructedInstances() {
   for (const [instance] of reconstructed) {
     const parent = instance.parent;
     if (parent) {
@@ -13842,6 +13920,9 @@ function swapInstances() {
       }
     }
     if (instance.isHidden) unhideInstance(instance);
+    if (isObject3D(instance.object) && !instance.parent) {
+      removeInteractivity(findInitialRoot(instance), instance.object);
+    }
     if (instance.object.__r3f) delete instance.object.__r3f;
     if (instance.type !== "primitive") disposeOnIdle(instance.object);
   }
@@ -13850,10 +13931,16 @@ function swapInstances() {
     const parent = instance.parent;
     if (parent) {
       const target = catalogue[toPascalCase(instance.type)];
+      const prevObject = instance.object;
       instance.object = instance.props.object ?? new target(...instance.props.args ?? []);
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
+      if (isObject3D(prevObject) && isObject3D(instance.object)) {
+        swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
+      }
       delete instance.appliedOnce;
+      instance.eventCount = 0;
+      instance.handlers = {};
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -13870,14 +13957,114 @@ function swapInstances() {
       invalidateInstance(instance);
     }
   }
-  reconstructed.length = 0;
 }
 const handleTextInstance = () => {
 };
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
-const NoFlags = 0;
-const Update = 4;
+function getEventPriority(type) {
+  switch (type) {
+    case "beforetoggle":
+    case "cancel":
+    case "click":
+    case "close":
+    case "contextmenu":
+    case "copy":
+    case "cut":
+    case "auxclick":
+    case "dblclick":
+    case "dragend":
+    case "dragstart":
+    case "drop":
+    case "focusin":
+    case "focusout":
+    case "input":
+    case "invalid":
+    case "keydown":
+    case "keypress":
+    case "keyup":
+    case "mousedown":
+    case "mouseup":
+    case "paste":
+    case "pause":
+    case "play":
+    case "pointercancel":
+    case "pointerdown":
+    case "pointerup":
+    case "ratechange":
+    case "reset":
+    case "resize":
+    case "seeked":
+    case "submit":
+    case "touchcancel":
+    case "touchend":
+    case "touchstart":
+    case "volumechange":
+    case "change":
+    case "selectionchange":
+    case "compositionstart":
+    case "compositionend":
+    case "compositionupdate":
+    case "beforeinput":
+    case "blur":
+    case "fullscreenchange":
+    case "focus":
+    case "hashchange":
+    case "popstate":
+    case "select":
+    case "selectstart":
+      return e;
+    case "drag":
+    case "dragenter":
+    case "dragexit":
+    case "dragleave":
+    case "dragover":
+    case "mousemove":
+    case "mouseout":
+    case "mouseover":
+    case "pointermove":
+    case "pointerout":
+    case "pointerover":
+    case "scroll":
+    case "touchmove":
+    case "wheel":
+    case "mouseenter":
+    case "mouseleave":
+    case "pointerenter":
+    case "pointerleave":
+      return o;
+    case "message": {
+      switch (Tb.unstable_getCurrentPriorityLevel()) {
+        case Tb.unstable_ImmediatePriority:
+          return e;
+        case Tb.unstable_UserBlockingPriority:
+          return o;
+        case Tb.unstable_NormalPriority:
+        case Tb.unstable_LowPriority:
+          return r;
+        case Tb.unstable_IdlePriority:
+          return i$1;
+        default:
+          return r;
+      }
+    }
+    default:
+      return r;
+  }
+}
+function scheduleMicrotask(callback) {
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(callback);
+  } else if (typeof Promise !== "undefined") {
+    Promise.resolve().then(callback).catch((error) => {
+      setTimeout(() => {
+        throw error;
+      });
+    });
+  } else {
+    setTimeout(callback);
+  }
+}
 const reconciler = /* @__PURE__ */ createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
@@ -13916,16 +14103,15 @@ const reconciler = /* @__PURE__ */ createReconciler({
     else if (newProps.args?.length !== oldProps.args?.length) reconstruct = true;
     else if (newProps.args?.some((value, index) => value !== oldProps.args?.[index])) reconstruct = true;
     if (reconstruct) {
-      reconstructed.push([instance, { ...newProps }, fiber]);
+      reconstructed.push([instance, getInstanceProps(newProps), fiber]);
     } else {
       const changedProps = diffProps(instance, newProps);
-      if (Object.keys(changedProps).length) {
-        Object.assign(instance.props, changedProps);
-        applyProps(instance.object, changedProps);
-      }
+      const attach2 = instance.props.attach;
+      instance.props = getInstanceProps(newProps);
+      if (attach2 !== void 0) instance.props.attach = attach2;
+      else delete instance.props.attach;
+      if (Object.keys(changedProps).length) applyProps(instance.object, changedProps);
     }
-    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
-    if (isTailSibling) swapInstances();
   },
   finalizeInitialChildren: (instance) => {
     for (const prop in instance.props) {
@@ -13950,8 +14136,9 @@ const reconciler = /* @__PURE__ */ createReconciler({
     const target = container.getState().internal.container ?? container.getState().scene;
     return prepare(target, container, "", {});
   },
-  resetAfterCommit: () => {
-  },
+  // Reconstructed instances are swapped once all mutations are committed,
+  // before layout effects run so refs point to the new objects
+  resetAfterCommit: flushReconstructedInstances,
   shouldSetTextContent: () => false,
   clearContainer: () => false,
   hideInstance,
@@ -13959,6 +14146,9 @@ const reconciler = /* @__PURE__ */ createReconciler({
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
+  // Mirrors react-dom, which flushes discrete work in microtasks
+  supportsMicrotasks: true,
+  scheduleMicrotask,
   scheduleTimeout: typeof setTimeout === "function" ? setTimeout : void 0,
   cancelTimeout: typeof clearTimeout === "function" ? clearTimeout : void 0,
   noTimeout: -1,
@@ -13999,28 +14189,9 @@ const reconciler = /* @__PURE__ */ createReconciler({
   },
   resolveUpdatePriority() {
     if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
-    switch (typeof window !== "undefined" && window.event?.type) {
-      case "click":
-      case "contextmenu":
-      case "dblclick":
-      case "dragenter":
-      case "dragleave":
-      case "drop":
-      case "pointercancel":
-      case "pointerdown":
-      case "pointerup":
-        return e;
-      case "dragover":
-      case "pointermove":
-      case "pointerout":
-      case "pointerover":
-      case "pointerenter":
-      case "pointerleave":
-      case "wheel":
-        return o;
-      default:
-        return r;
-    }
+    const eventType = typeof window !== "undefined" ? window.event?.type : void 0;
+    if (eventType === void 0) return r;
+    return getEventPriority(eventType);
   },
   resetFormInstance() {
   },
@@ -14069,11 +14240,15 @@ const reconciler = /* @__PURE__ */ createReconciler({
   cloneMutableTextInstance(textInstance) {
     return textInstance;
   },
+  // React 19.2 added these for root-level view transitions. They only run for hosts that opt into
+  // view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
+  // into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
+  // React never calls them. They stay as no-ops rather than throws: the host config is shared by
+  // every root, and a throw here would turn a React-internal probe into a hard crash for users.
+  // Guarded by a test asserting a full render + unmount never reaches them.
   cloneRootViewTransitionContainer(_rootContainer) {
-    throw new Error("Not implemented.");
   },
   removeRootViewTransitionClone(_rootContainer, _clone) {
-    throw new Error("Not implemented.");
   },
   // https://github.com/facebook/react/pull/32465
   createFragmentInstance: (_fiber) => null,
@@ -14158,6 +14333,7 @@ function createRoot(canvas) {
   const lastConfiguredProps = {};
   let configured = false;
   let pending = null;
+  let rendererSetup = null;
   return {
     async configure(props = {}) {
       let resolve;
@@ -14188,7 +14364,7 @@ function createRoot(canvas) {
         forceEven
       } = props;
       const textureColorSpace = is.obj(glConfig) && !is.fun(glConfig) && !isRenderer(glConfig) && glConfig.textureColorSpace || is.obj(rendererConfig) && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && rendererConfig.textureColorSpace || webgpu.SRGBColorSpace;
-      const state = store.getState();
+      let state = store.getState();
       const defaultGLProps = {
         canvas,
         powerPreference: "high-performance",
@@ -14216,56 +14392,68 @@ function createRoot(canvas) {
           "The `primaryCanvas` prop for multi-canvas rendering cannot be used with WebGL. Remove the `gl` prop or use WebGPU."
         );
       }
-      if (wantsGL && !state.internal.actualRenderer) {
-        renderer = await resolveRenderer(glConfig, defaultGLProps, three.WebGLRenderer);
-        state.internal.actualRenderer = renderer;
-        state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
-      } else if (!wantsGL && primaryCanvas && !state.internal.actualRenderer) {
-        const primary = await waitForPrimary(primaryCanvas);
-        renderer = primary.renderer;
-        state.internal.actualRenderer = renderer;
-        const canvasTarget = new webgpu.CanvasTarget(canvas);
-        primary.store.setState((prev) => ({
-          internal: { ...prev.internal, isMultiCanvas: true }
-        }));
-        state.set((prev) => ({
-          webGPUSupported: primary.store.getState().webGPUSupported,
-          renderer,
-          primaryStore: primary.store,
-          internal: {
-            ...prev.internal,
-            canvasTarget,
-            isMultiCanvas: true,
-            isSecondary: true,
-            targetId: primaryCanvas
-          }
-        }));
-      } else if (!wantsGL && !state.internal.actualRenderer) {
-        renderer = await resolveRenderer(rendererConfig, defaultGPUProps, webgpu.WebGPURenderer);
-        if (!renderer.hasInitialized?.()) {
-          const size2 = computeInitialSize(canvas, propsSize);
-          if (size2.width > 0 && size2.height > 0) {
-            const pixelRatio = calculateDpr(dpr);
-            canvas.width = size2.width * pixelRatio;
-            canvas.height = size2.height * pixelRatio;
-          }
-          await renderer.init();
-        }
-        const backend = renderer.backend;
-        const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
-        state.internal.actualRenderer = renderer;
-        state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
-        if (canvasId && !state.internal.isSecondary) {
-          const canvasTarget = new webgpu.CanvasTarget(canvas);
-          const unregisterPrimary = registerPrimary(canvasId, renderer, store);
-          state.set((prev) => ({
-            internal: {
-              ...prev.internal,
-              canvasTarget,
-              unregisterPrimary
+      if (!state.internal.actualRenderer) {
+        if (!rendererSetup) {
+          rendererSetup = (async () => {
+            if (wantsGL) {
+              renderer = await resolveRenderer(glConfig, defaultGLProps, three.WebGLRenderer);
+              state.internal.actualRenderer = renderer;
+              state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
+            } else if (!wantsGL && primaryCanvas) {
+              const primary = await waitForPrimary(primaryCanvas);
+              renderer = primary.renderer;
+              state.internal.actualRenderer = renderer;
+              const canvasTarget = new webgpu.CanvasTarget(canvas);
+              primary.store.setState((prev) => ({
+                internal: { ...prev.internal, isMultiCanvas: true }
+              }));
+              state.set((prev) => ({
+                webGPUSupported: primary.store.getState().webGPUSupported,
+                renderer,
+                primaryStore: primary.store,
+                internal: {
+                  ...prev.internal,
+                  canvasTarget,
+                  isMultiCanvas: true,
+                  isSecondary: true,
+                  targetId: primaryCanvas
+                }
+              }));
+            } else if (!wantsGL) {
+              renderer = await resolveRenderer(rendererConfig, defaultGPUProps, webgpu.WebGPURenderer);
+              if (!renderer.hasInitialized?.()) {
+                const size2 = computeInitialSize(canvas, propsSize);
+                if (size2.width > 0 && size2.height > 0) {
+                  const pixelRatio = calculateDpr(dpr);
+                  canvas.width = size2.width * pixelRatio;
+                  canvas.height = size2.height * pixelRatio;
+                }
+                await renderer.init();
+              }
+              const backend = renderer.backend;
+              const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
+              state.internal.actualRenderer = renderer;
+              state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
+              if (canvasId && !state.internal.isSecondary) {
+                const canvasTarget = new webgpu.CanvasTarget(canvas);
+                const unregisterPrimary = registerPrimary(canvasId, renderer, store);
+                state.set((prev) => ({
+                  internal: {
+                    ...prev.internal,
+                    canvasTarget,
+                    unregisterPrimary
+                  }
+                }));
+              }
             }
-          }));
+          })().catch((err) => {
+            rendererSetup = null;
+            throw err;
+          });
         }
+        await rendererSetup;
+        state = store.getState();
+        renderer = state.internal.actualRenderer;
       }
       let raycaster = state.raycaster;
       if (!raycaster) state.set({ raycaster: raycaster = new webgpu.Raycaster() });
@@ -14615,7 +14803,8 @@ function unmountComponentAtNode(canvas, callback) {
             dispose(state.scene);
             _roots.delete(canvas);
             if (callback) callback(canvas);
-          } catch {
+          } catch (error) {
+            console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
           }
         }, 500);
       }
@@ -14678,6 +14867,7 @@ function PortalInner({ state = {}, children, container }) {
       viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), resolvedSize);
       if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
     }
+    const set = injectState.set;
     return {
       // The intersect consists of the previous root state
       ...rootState,
@@ -14696,7 +14886,7 @@ function PortalInner({ state = {}, children, container }) {
       size: resolvedSize,
       viewport: { ...rootState.viewport, ...viewport },
       // Layers are allowed to override events
-      setEvents: (events2) => injectState.set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
+      setEvents: (events2) => set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
       // Container for child attachment - the portalScene (injected or container itself)
       internal: { ...rootState.internal, ...injectState.internal, container: portalScene }
     };
@@ -14768,14 +14958,36 @@ function parseRendererConfig(rendererProp) {
   return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
 }
 
+const RESOURCE_KINDS = ["nodes", "uniforms", "buffers", "gpuStorage"];
+const registries = /* @__PURE__ */ new WeakMap();
+function getKindRegistry(store, kind) {
+  let registry = registries.get(store);
+  if (!registry) {
+    registry = {
+      nodes: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
+      uniforms: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
+      buffers: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
+      gpuStorage: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() }
+    };
+    registries.set(store, registry);
+  }
+  return registry[kind];
+}
+function invalidateResource(store, kind, scopeKey) {
+  const registry = getKindRegistry(store, kind);
+  {
+    registry.valid.clear();
+    registry.staged.clear();
+  }
+}
+function invalidateAllResources(store) {
+  for (const kind of RESOURCE_KINDS) invalidateResource(store, kind);
+}
+
 function clearHmrCaches(store) {
-  store.setState((state) => ({
-    nodes: {},
-    uniforms: {},
-    buffers: {},
-    gpuStorage: {},
-    _hmrVersion: state._hmrVersion + 1
-  }));
+  const primary = store.getState().primaryStore ?? store;
+  invalidateAllResources(primary);
+  primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
 }
 
 function CanvasImpl({
@@ -14856,6 +15068,7 @@ function CanvasImpl({
   const handleDropMissed = useMutableCallback(onDropMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
+  const [fallbackVisible, setFallbackVisible] = React__namespace.useState(false);
   if (block) throw block;
   if (error) throw error;
   const root = React__namespace.useRef(null);
@@ -14863,6 +15076,7 @@ function CanvasImpl({
   const unsubscribeErrorRef = React__namespace.useRef(null);
   useIsomorphicLayoutEffect(() => {
     effectActiveRef.current = true;
+    if (fallbackVisible) return;
     const canvas = canvasRef.current;
     if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
       if (!root.current) {
@@ -14883,7 +15097,7 @@ function CanvasImpl({
       }
       async function run() {
         if (!effectActiveRef.current || !root.current) return;
-        await root.current.configure({
+        const configured = await root.current.configure({
           id,
           primaryCanvas,
           scheduler,
@@ -14924,8 +15138,20 @@ function CanvasImpl({
             }
             onCreated?.(state);
           }
-        });
-        if (!effectActiveRef.current || !root.current) return;
+        }).then(
+          () => true,
+          // Renderer setup failed (e.g. no WebGL/WebGPU support). The `fallback` prop lives
+          // inside <canvas>, which browsers don't display, so surface it as visible DOM
+          // instead; with no fallback, rethrow to an external error boundary. (#3757)
+          (setupError) => {
+            if (effectActiveRef.current) {
+              if (fallback != null) setFallbackVisible(true);
+              else setError(setupError);
+            }
+            return false;
+          }
+        );
+        if (!configured || !effectActiveRef.current || !root.current) return;
         root.current.render(
           /* @__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: [
             backgroundProps && /* @__PURE__ */ jsxRuntime.jsx(Environment, { ...backgroundProps }),
@@ -14988,7 +15214,11 @@ function CanvasImpl({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: fallbackVisible ? (
+        // Renderer setup failed: render the fallback as visible DOM. Inside <canvas> (below)
+        // it exists in the tree but browsers never paint it, which is the whole bug (#3757).
+        fallback
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
         "canvas",
         {
           ref: canvasRef,
@@ -15026,7 +15256,6 @@ exports.REACT_INTERNAL_PROPS = REACT_INTERNAL_PROPS;
 exports.RESERVED_PROPS = RESERVED_PROPS;
 exports.Texture = Texture;
 exports._roots = _roots;
-exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
 exports.addTail = addTail;
@@ -15076,6 +15305,7 @@ exports.reconciler = reconciler;
 exports.registerPrimary = registerPrimary;
 exports.removeInteractivity = removeInteractivity;
 exports.resolve = resolve;
+exports.swapInteractivity = swapInteractivity;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.unregisterPrimary = unregisterPrimary;
 exports.updateCamera = updateCamera;