@react-three/fiber 10.0.0-alpha.2 → 10.0.0-canary.1b98c17

package/dist/webgpu/index.cjs

@@ -6,6 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useMeasure = require('react-use-measure');
 const itsFine = require('its-fine');
+const fiber = require('@react-three/fiber');
+const GroundedSkybox_js = require('three/examples/jsm/objects/GroundedSkybox.js');
+const HDRLoader_js = require('three/examples/jsm/loaders/HDRLoader.js');
+const EXRLoader_js = require('three/examples/jsm/loaders/EXRLoader.js');
+const UltraHDRLoader_js = require('three/examples/jsm/loaders/UltraHDRLoader.js');
+const gainmapJs = require('@monogrid/gainmap-js');
 const Tb = require('scheduler');
 const traditional = require('zustand/traditional');
 const suspendReact = require('suspend-react');
@@ -67,6 +73,389 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderer: WebGLRenderer
 }, [webgpu__namespace]);
 
+const primaryRegistry = /* @__PURE__ */ new Map();
+const pendingSubscribers = /* @__PURE__ */ new Map();
+function registerPrimary(id, renderer, store) {
+  if (primaryRegistry.has(id)) {
+    console.warn(`Canvas with id="${id}" already registered. Overwriting.`);
+  }
+  const entry = { renderer, store };
+  primaryRegistry.set(id, entry);
+  const subscribers = pendingSubscribers.get(id);
+  if (subscribers) {
+    subscribers.forEach((callback) => callback(entry));
+    pendingSubscribers.delete(id);
+  }
+  return () => {
+    const currentEntry = primaryRegistry.get(id);
+    if (currentEntry?.renderer === renderer) {
+      primaryRegistry.delete(id);
+    }
+  };
+}
+function getPrimary(id) {
+  return primaryRegistry.get(id);
+}
+function waitForPrimary(id, timeout = 5e3) {
+  const existing = primaryRegistry.get(id);
+  if (existing) {
+    return Promise.resolve(existing);
+  }
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      const subscribers = pendingSubscribers.get(id);
+      if (subscribers) {
+        const index = subscribers.indexOf(callback);
+        if (index !== -1) subscribers.splice(index, 1);
+        if (subscribers.length === 0) pendingSubscribers.delete(id);
+      }
+      reject(new Error(`Timeout waiting for canvas with id="${id}". Make sure a <Canvas id="${id}"> is mounted.`));
+    }, timeout);
+    const callback = (entry) => {
+      clearTimeout(timeoutId);
+      resolve(entry);
+    };
+    if (!pendingSubscribers.has(id)) {
+      pendingSubscribers.set(id, []);
+    }
+    pendingSubscribers.get(id).push(callback);
+  });
+}
+function hasPrimary(id) {
+  return primaryRegistry.has(id);
+}
+function unregisterPrimary(id) {
+  primaryRegistry.delete(id);
+}
+function getPrimaryIds() {
+  return Array.from(primaryRegistry.keys());
+}
+
+const presetsObj = {
+  apartment: "lebombo_1k.hdr",
+  city: "potsdamer_platz_1k.hdr",
+  dawn: "kiara_1_dawn_1k.hdr",
+  forest: "forest_slope_1k.hdr",
+  lobby: "st_fagans_interior_1k.hdr",
+  night: "dikhololo_night_1k.hdr",
+  park: "rooitou_park_1k.hdr",
+  studio: "studio_small_03_1k.hdr",
+  sunset: "venice_sunset_1k.hdr",
+  warehouse: "empty_warehouse_01_1k.hdr"
+};
+
+const CUBEMAP_ROOT = "https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/";
+const isArray = (arr) => Array.isArray(arr);
+const defaultFiles = ["/px.png", "/nx.png", "/py.png", "/ny.png", "/pz.png", "/nz.png"];
+function useEnvironment({
+  files = defaultFiles,
+  path = "",
+  preset = void 0,
+  colorSpace = void 0,
+  extensions
+} = {}) {
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  }
+  const multiFile = isArray(files);
+  const { extension, isCubemap } = getExtension(files);
+  const loader = getLoader$1(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  const renderer = fiber.useThree((state) => state.renderer);
+  React.useLayoutEffect(() => {
+    if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
+    function clearGainmapTexture() {
+      fiber.useLoader.clear(loader, multiFile ? [files] : files);
+    }
+    renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
+  }, [extension, files, loader, multiFile, renderer.domElement]);
+  const loaderResult = fiber.useLoader(
+    loader,
+    multiFile ? [files] : files,
+    (loader2) => {
+      if (extension === "webp" || extension === "jpg" || extension === "jpeg") {
+        loader2.setRenderer?.(renderer);
+      }
+      loader2.setPath?.(path);
+      if (extensions) extensions(loader2);
+    }
+  );
+  let texture = multiFile ? (
+    // @ts-ignore
+    loaderResult[0]
+  ) : loaderResult;
+  if (extension === "jpg" || extension === "jpeg" || extension === "webp") {
+    texture = texture.renderTarget?.texture;
+  }
+  texture.mapping = isCubemap ? webgpu.CubeReflectionMapping : webgpu.EquirectangularReflectionMapping;
+  texture.colorSpace = colorSpace ?? (isCubemap ? "srgb" : "srgb-linear");
+  return texture;
+}
+const preloadDefaultOptions = {
+  files: defaultFiles,
+  path: "",
+  preset: void 0,
+  extensions: void 0
+};
+useEnvironment.preload = (preloadOptions) => {
+  const options = { ...preloadDefaultOptions, ...preloadOptions };
+  let { files, path = "" } = options;
+  const { preset, extensions } = options;
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  }
+  const { extension } = getExtension(files);
+  if (extension === "webp" || extension === "jpg" || extension === "jpeg") {
+    throw new Error("useEnvironment: Preloading gainmaps is not supported");
+  }
+  const loader = getLoader$1(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  fiber.useLoader.preload(loader, isArray(files) ? [files] : files, (loader2) => {
+    loader2.setPath?.(path);
+    if (extensions) extensions(loader2);
+  });
+};
+const clearDefaultOptins = {
+  files: defaultFiles,
+  preset: void 0
+};
+useEnvironment.clear = (clearOptions) => {
+  const options = { ...clearDefaultOptins, ...clearOptions };
+  let { files } = options;
+  const { preset } = options;
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+  }
+  const { extension } = getExtension(files);
+  const loader = getLoader$1(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  fiber.useLoader.clear(loader, isArray(files) ? [files] : files);
+};
+function validatePreset(preset) {
+  if (!(preset in presetsObj)) throw new Error("Preset must be one of: " + Object.keys(presetsObj).join(", "));
+}
+function getExtension(files) {
+  const isCubemap = isArray(files) && files.length === 6;
+  const isGainmap = isArray(files) && files.length === 3 && files.some((file) => file.endsWith("json"));
+  const firstEntry = isArray(files) ? files[0] : files;
+  const extension = isCubemap ? "cube" : isGainmap ? "webp" : firstEntry.startsWith("data:application/exr") ? "exr" : firstEntry.startsWith("data:application/hdr") ? "hdr" : firstEntry.startsWith("data:image/jpeg") ? "jpg" : firstEntry.split(".").pop()?.split("?")?.shift()?.toLowerCase();
+  return { extension, isCubemap, isGainmap };
+}
+function getLoader$1(extension) {
+  const loader = extension === "cube" ? webgpu.CubeTextureLoader : extension === "hdr" ? HDRLoader_js.HDRLoader : extension === "exr" ? EXRLoader_js.EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader_js.UltraHDRLoader : extension === "webp" ? gainmapJs.GainMapLoader : null;
+  return loader;
+}
+
+const isRef$1 = (obj) => obj.current && obj.current.isScene;
+const resolveScene = (scene) => isRef$1(scene) ? scene.current : scene;
+function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
+  sceneProps = {
+    backgroundBlurriness: 0,
+    backgroundIntensity: 1,
+    backgroundRotation: [0, 0, 0],
+    environmentIntensity: 1,
+    environmentRotation: [0, 0, 0],
+    ...sceneProps
+  };
+  const target = resolveScene(scene || defaultScene);
+  const oldbg = target.background;
+  const oldenv = target.environment;
+  const oldSceneProps = {
+    // @ts-ignore
+    backgroundBlurriness: target.backgroundBlurriness,
+    // @ts-ignore
+    backgroundIntensity: target.backgroundIntensity,
+    // @ts-ignore
+    backgroundRotation: target.backgroundRotation?.clone?.() ?? [0, 0, 0],
+    // @ts-ignore
+    environmentIntensity: target.environmentIntensity,
+    // @ts-ignore
+    environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0]
+  };
+  if (background !== "only") target.environment = texture;
+  if (background) target.background = texture;
+  fiber.applyProps(target, sceneProps);
+  return () => {
+    if (background !== "only") target.environment = oldenv;
+    if (background) target.background = oldbg;
+    fiber.applyProps(target, oldSceneProps);
+  };
+}
+function EnvironmentMap({ scene, background = false, map, ...config }) {
+  const defaultScene = fiber.useThree((state) => state.scene);
+  React__namespace.useLayoutEffect(() => {
+    if (map) return setEnvProps(background, scene, defaultScene, map, config);
+  });
+  return null;
+}
+function EnvironmentCube({
+  background = false,
+  scene,
+  blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
+  ...rest
+}) {
+  const texture = useEnvironment(rest);
+  const defaultScene = fiber.useThree((state) => state.scene);
+  React__namespace.useLayoutEffect(() => {
+    return setEnvProps(background, scene, defaultScene, texture, {
+      backgroundBlurriness: blur ?? backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
+  });
+  React__namespace.useEffect(() => {
+    return () => {
+      texture.dispose();
+    };
+  }, [texture]);
+  return null;
+}
+function EnvironmentPortal({
+  children,
+  near = 0.1,
+  far = 1e3,
+  resolution = 256,
+  frames = 1,
+  map,
+  background = false,
+  blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
+  scene,
+  files,
+  path,
+  preset = void 0,
+  extensions
+}) {
+  const gl = fiber.useThree((state) => state.gl);
+  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);
+    fbo2.texture.type = webgpu.HalfFloatType;
+    return fbo2;
+  }, [resolution]);
+  React__namespace.useEffect(() => {
+    return () => {
+      fbo.dispose();
+    };
+  }, [fbo]);
+  React__namespace.useLayoutEffect(() => {
+    if (frames === 1) {
+      const autoClear = gl.autoClear;
+      gl.autoClear = true;
+      camera.current.update(gl, virtualScene);
+      gl.autoClear = autoClear;
+    }
+    return setEnvProps(background, scene, defaultScene, fbo.texture, {
+      backgroundBlurriness: blur ?? backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
+  }, [
+    children,
+    virtualScene,
+    fbo.texture,
+    scene,
+    defaultScene,
+    background,
+    frames,
+    gl,
+    blur,
+    backgroundBlurriness,
+    backgroundIntensity,
+    backgroundRotation,
+    environmentIntensity,
+    environmentRotation
+  ]);
+  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;
+      count++;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fiber.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx("cubeCamera", { ref: camera, args: [near, far, fbo] }),
+      files || preset ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { background: true, files, preset, path, extensions }) : map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { background: true, map, extensions }) : null
+    ] }),
+    virtualScene
+  ) });
+}
+function EnvironmentGround(props) {
+  const textureDefault = useEnvironment(props);
+  const texture = props.map || textureDefault;
+  React__namespace.useMemo(() => fiber.extend({ GroundProjectedEnvImpl: GroundedSkybox_js.GroundedSkybox }), []);
+  React__namespace.useEffect(() => {
+    return () => {
+      textureDefault.dispose();
+    };
+  }, [textureDefault]);
+  const height = props.ground?.height ?? 15;
+  const radius = props.ground?.radius ?? 60;
+  const scale = props.ground?.scale ?? 1e3;
+  const args = React__namespace.useMemo(
+    () => [texture, height, radius],
+    [texture, height, radius]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { ...props, map: texture }),
+    /* @__PURE__ */ jsxRuntime.jsx("groundProjectedEnvImpl", { args, scale })
+  ] });
+}
+function EnvironmentColor({ color, scene }) {
+  const defaultScene = fiber.useThree((state) => state.scene);
+  React__namespace.useLayoutEffect(() => {
+    if (color === void 0) return;
+    const target = resolveScene(scene || defaultScene);
+    const oldBg = target.background;
+    target.background = new webgpu.Color(color);
+    return () => {
+      target.background = oldBg;
+    };
+  });
+  return null;
+}
+function EnvironmentDualSource(props) {
+  const { backgroundFiles, ...envProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...envProps, background: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props, files: backgroundFiles, background: "only" })
+  ] });
+}
+function Environment(props) {
+  if (props.color && !props.files && !props.preset && !props.map) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentColor, { ...props });
+  }
+  if (props.backgroundFiles && props.backgroundFiles !== props.files) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentDualSource, { ...props });
+  }
+  return props.ground ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentGround, { ...props }) : props.map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { ...props }) : props.children ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentPortal, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props });
+}
+
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -246,7 +635,8 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
-      isHidden: false
+      isHidden: false,
+      deferredRefs: []
     };
     if (object) object.__r3f = instance;
   }
@@ -295,7 +685,7 @@ function createOcclusionObserverNode(store, uniform) {
 let occlusionSetupPromise = null;
 function enableOcclusion(store) {
   const state = store.getState();
-  const { internal, renderer, rootScene } = state;
+  const { internal, renderer } = state;
   if (internal.occlusionEnabled || occlusionSetupPromise) return;
   const hasOcclusionSupport = typeof renderer?.isOccluded === "function";
   if (!hasOcclusionSupport) {
@@ -458,6 +848,22 @@ function hasVisibilityHandlers(handlers) {
   return !!(handlers.onFramed || handlers.onOccluded || handlers.onVisible);
 }
 
+const FROM_REF = Symbol.for("@react-three/fiber.fromRef");
+function fromRef(ref) {
+  return { [FROM_REF]: ref };
+}
+function isFromRef(value) {
+  return value !== null && typeof value === "object" && FROM_REF in value;
+}
+
+const ONCE = Symbol.for("@react-three/fiber.once");
+function once(...args) {
+  return { [ONCE]: args.length ? args : true };
+}
+function isOnce(value) {
+  return value !== null && typeof value === "object" && ONCE in value;
+}
+
 const RESERVED_PROPS = [
   "children",
   "key",
@@ -528,7 +934,7 @@ function getMemoizedPrototype(root) {
       ctor = new root.constructor();
       MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
     }
-  } catch (e) {
+  } catch {
   }
   return ctor;
 }
@@ -574,6 +980,25 @@ function applyProps(object, props) {
       continue;
     }
     if (value === void 0) continue;
+    if (isFromRef(value)) {
+      instance?.deferredRefs?.push({ prop, ref: value[FROM_REF] });
+      continue;
+    }
+    if (isOnce(value)) {
+      if (instance?.appliedOnce?.has(prop)) continue;
+      if (instance) {
+        instance.appliedOnce ?? (instance.appliedOnce = /* @__PURE__ */ new Set());
+        instance.appliedOnce.add(prop);
+      }
+      const { root: targetRoot, key: targetKey } = resolve(object, prop);
+      const args = value[ONCE];
+      if (typeof targetRoot[targetKey] === "function") {
+        targetRoot[targetKey](...args === true ? [] : args);
+      } else if (args !== true && args.length > 0) {
+        targetRoot[targetKey] = args[0];
+      }
+      continue;
+    }
     let { root, key, target } = resolve(object, prop);
     if (target === void 0 && (typeof root !== "object" || root === null)) {
       throw Error(`R3F: Cannot set "${prop}". Ensure it is an object before setting "${key}".`);
@@ -596,7 +1021,10 @@ function applyProps(object, props) {
       else target.set(value);
     } else {
       root[key] = value;
-      if (rootState && !rootState.linear && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
+      if (key.endsWith("Node") && root.isMaterial) {
+        root.needsUpdate = true;
+      }
+      if (rootState && rootState.renderer?.outputColorSpace === webgpu.SRGBColorSpace && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
       root[key].format === webgpu.RGBAFormat && root[key].type === webgpu.UnsignedByteType) {
         root[key].colorSpace = rootState.textureColorSpace;
       }
@@ -629,38 +1057,60 @@ function applyProps(object, props) {
   return object;
 }
 
+const DEFAULT_POINTER_ID = 0;
+const XR_POINTER_ID_START = 1e3;
+function getPointerState(internal, pointerId) {
+  let state = internal.pointerMap.get(pointerId);
+  if (!state) {
+    state = {
+      hovered: /* @__PURE__ */ new Map(),
+      captured: /* @__PURE__ */ new Map(),
+      initialClick: [0, 0],
+      initialHits: []
+    };
+    internal.pointerMap.set(pointerId, state);
+  }
+  return state;
+}
+function getPointerId(event) {
+  return "pointerId" in event ? event.pointerId : DEFAULT_POINTER_ID;
+}
 function makeId(event) {
   return (event.eventObject || event.object).uuid + "/" + event.index + event.instanceId;
 }
-function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
-  const captureData = captures.get(obj);
+function releaseInternalPointerCapture(internal, obj, pointerId) {
+  const pointerState = internal.pointerMap.get(pointerId);
+  if (!pointerState) return;
+  const captureData = pointerState.captured.get(obj);
   if (captureData) {
-    captures.delete(obj);
-    if (captures.size === 0) {
-      capturedMap.delete(pointerId);
-      captureData.target.releasePointerCapture(pointerId);
-    }
+    pointerState.captured.delete(obj);
+    captureData.target.releasePointerCapture(pointerId);
   }
 }
 function removeInteractivity(store, object) {
   const { internal } = store.getState();
   internal.interaction = internal.interaction.filter((o) => o !== object);
-  internal.initialHits = internal.initialHits.filter((o) => o !== object);
-  internal.hovered.forEach((value, key) => {
-    if (value.eventObject === object || value.object === object) {
-      internal.hovered.delete(key);
+  for (const [pointerId, pointerState] of internal.pointerMap) {
+    pointerState.initialHits = pointerState.initialHits.filter((o) => o !== object);
+    pointerState.hovered.forEach((value, key) => {
+      if (value.eventObject === object || value.object === object) {
+        pointerState.hovered.delete(key);
+      }
+    });
+    if (pointerState.captured.has(object)) {
+      releaseInternalPointerCapture(internal, object, pointerId);
     }
-  });
-  internal.capturedMap.forEach((captures, pointerId) => {
-    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
-  });
+  }
   unregisterVisibility(store, object);
 }
 function createEvents(store) {
-  function calculateDistance(event) {
+  function calculateDistance(event, pointerId) {
     const { internal } = store.getState();
-    const dx = event.offsetX - internal.initialClick[0];
-    const dy = event.offsetY - internal.initialClick[1];
+    const pointerState = internal.pointerMap.get(pointerId);
+    if (!pointerState) return 0;
+    const [initialX, initialY] = pointerState.initialClick;
+    const dx = event.offsetX - initialX;
+    const dy = event.offsetY - initialY;
     return Math.round(Math.sqrt(dx * dx + dy * dy));
   }
   function filterPointerEvents(objects) {
@@ -696,6 +1146,15 @@ function createEvents(store) {
       return state2.raycaster.camera ? state2.raycaster.intersectObject(obj, true) : [];
     }
     let hits = eventsObjects.flatMap(handleRaycast).sort((a, b) => {
+      const aInteractivePriority = a.object.userData?.interactivePriority;
+      const bInteractivePriority = b.object.userData?.interactivePriority;
+      if (aInteractivePriority !== void 0 || bInteractivePriority !== void 0) {
+        if (aInteractivePriority !== void 0 && bInteractivePriority === void 0) return -1;
+        if (bInteractivePriority !== void 0 && aInteractivePriority === void 0) return 1;
+        if (aInteractivePriority !== bInteractivePriority) {
+          return (bInteractivePriority ?? 0) - (aInteractivePriority ?? 0);
+        }
+      }
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
       const aPriority = aState?.events?.priority ?? 1;
@@ -717,9 +1176,13 @@ function createEvents(store) {
         eventObject = eventObject.parent;
       }
     }
-    if ("pointerId" in event && state.internal.capturedMap.has(event.pointerId)) {
-      for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
+    if ("pointerId" in event) {
+      const pointerId = event.pointerId;
+      const pointerState = state.internal.pointerMap.get(pointerId);
+      if (pointerState?.captured.size) {
+        for (const captureData of pointerState.captured.values()) {
+          if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
+        }
       }
     }
     return intersections;
@@ -732,27 +1195,25 @@ function createEvents(store) {
         if (state) {
           const { raycaster, pointer, camera, internal } = state;
           const unprojectedPoint = new webgpu.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-          const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
+          const hasPointerCapture = (id) => {
+            const pointerState = internal.pointerMap.get(id);
+            return pointerState?.captured.has(hit.eventObject) ?? false;
+          };
           const setPointerCapture = (id) => {
             const captureData = { intersection: hit, target: event.target };
-            if (internal.capturedMap.has(id)) {
-              internal.capturedMap.get(id).set(hit.eventObject, captureData);
-            } else {
-              internal.capturedMap.set(id, /* @__PURE__ */ new Map([[hit.eventObject, captureData]]));
-            }
+            const pointerState = getPointerState(internal, id);
+            pointerState.captured.set(hit.eventObject, captureData);
             event.target.setPointerCapture(id);
           };
           const releasePointerCapture = (id) => {
-            const captures = internal.capturedMap.get(id);
-            if (captures) {
-              releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-            }
+            releaseInternalPointerCapture(internal, hit.eventObject, id);
           };
           const extractEventProps = {};
           for (const prop in event) {
             const property = event[prop];
             if (typeof property !== "function") extractEventProps[prop] = property;
           }
+          const eventPointerId = "pointerId" in event ? event.pointerId : void 0;
           const raycastEvent = {
             ...hit,
             ...extractEventProps,
@@ -763,18 +1224,19 @@ function createEvents(store) {
             unprojectedPoint,
             ray: raycaster.ray,
             camera,
+            pointerId: eventPointerId,
             // Hijack stopPropagation, which just sets a flag
             stopPropagation() {
-              const capturesForPointer = "pointerId" in event && internal.capturedMap.get(event.pointerId);
+              const pointerState = eventPointerId !== void 0 ? internal.pointerMap.get(eventPointerId) : void 0;
               if (
                 // ...if this pointer hasn't been captured
-                !capturesForPointer || // ... or if the hit object is capturing the pointer
-                capturesForPointer.has(hit.eventObject)
+                !pointerState?.captured.size || // ... or if the hit object is capturing the pointer
+                pointerState.captured.has(hit.eventObject)
               ) {
                 raycastEvent.stopped = localState.stopped = true;
-                if (internal.hovered.size && Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
+                if (pointerState?.hovered.size && Array.from(pointerState.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
                   const higher = intersections.slice(0, intersections.indexOf(hit));
-                  cancelPointer([...higher, hit]);
+                  cancelPointer([...higher, hit], eventPointerId);
                 }
               }
             },
@@ -790,15 +1252,18 @@ function createEvents(store) {
     }
     return intersections;
   }
-  function cancelPointer(intersections) {
+  function cancelPointer(intersections, pointerId) {
     const { internal } = store.getState();
-    for (const hoveredObj of internal.hovered.values()) {
+    const pid = pointerId ?? DEFAULT_POINTER_ID;
+    const pointerState = internal.pointerMap.get(pid);
+    if (!pointerState) return;
+    for (const [hoveredId, hoveredObj] of pointerState.hovered) {
       if (!intersections.length || !intersections.find(
         (hit) => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId
       )) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
-        internal.hovered.delete(makeId(hoveredObj));
+        pointerState.hovered.delete(hoveredId);
         if (instance?.eventCount) {
           const handlers = instance.handlers;
           const data = { ...hoveredObj, intersections };
@@ -827,41 +1292,118 @@ function createEvents(store) {
       instance?.handlers.onDropMissed?.(event);
     }
   }
+  function cleanupPointer(pointerId) {
+    const { internal } = store.getState();
+    const pointerState = internal.pointerMap.get(pointerId);
+    if (pointerState) {
+      for (const [, hoveredObj] of pointerState.hovered) {
+        const eventObject = hoveredObj.eventObject;
+        const instance = eventObject.__r3f;
+        if (instance?.eventCount) {
+          const handlers = instance.handlers;
+          const data = { ...hoveredObj, intersections: [] };
+          handlers.onPointerOut?.(data);
+          handlers.onPointerLeave?.(data);
+        }
+      }
+      internal.pointerMap.delete(pointerId);
+    }
+    internal.pointerDirty.delete(pointerId);
+  }
+  function processDeferredPointer(event, pointerId) {
+    const state = store.getState();
+    const { internal } = state;
+    if (!state.events.enabled) return;
+    const filter = filterPointerEvents;
+    const hits = intersect(event, filter);
+    cancelPointer(hits, pointerId);
+    function onIntersect(data) {
+      const eventObject = data.eventObject;
+      const instance = eventObject.__r3f;
+      if (!instance?.eventCount) return;
+      const handlers = instance.handlers;
+      if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
+        const id = makeId(data);
+        const pointerState = getPointerState(internal, pointerId);
+        const hoveredItem = pointerState.hovered.get(id);
+        if (!hoveredItem) {
+          pointerState.hovered.set(id, data);
+          handlers.onPointerOver?.(data);
+          handlers.onPointerEnter?.(data);
+        } else if (hoveredItem.stopped) {
+          data.stopPropagation();
+        }
+      }
+      handlers.onPointerMove?.(data);
+    }
+    handleIntersects(hits, event, 0, onIntersect);
+  }
   function handlePointer(name) {
     switch (name) {
       case "onPointerLeave":
-      case "onPointerCancel":
       case "onDragLeave":
         return () => cancelPointer([]);
+      // Global cancel of these events
+      case "onPointerCancel":
+        return (event) => {
+          const pointerId = getPointerId(event);
+          cleanupPointer(pointerId);
+        };
       case "onLostPointerCapture":
         return (event) => {
           const { internal } = store.getState();
-          if ("pointerId" in event && internal.capturedMap.has(event.pointerId)) {
+          const pointerId = getPointerId(event);
+          const pointerState = internal.pointerMap.get(pointerId);
+          if (pointerState?.captured.size) {
             requestAnimationFrame(() => {
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
+              const pointerState2 = internal.pointerMap.get(pointerId);
+              if (pointerState2?.captured.size) {
+                pointerState2.captured.clear();
               }
+              cancelPointer([], pointerId);
             });
           }
         };
     }
     return function handleEvent(event) {
       const state = store.getState();
-      const { onPointerMissed, onDragOverMissed, onDropMissed, internal } = state;
+      const { onPointerMissed, onDragOverMissed, onDropMissed, internal, events } = state;
+      const pointerId = getPointerId(event);
       internal.lastEvent.current = event;
-      if (!state.events.enabled) return;
+      if (!events.enabled) return;
       const isPointerMove = name === "onPointerMove";
       const isDragOver = name === "onDragOver";
       const isDrop = name === "onDrop";
       const isClickEvent = name === "onClick" || name === "onContextMenu" || name === "onDoubleClick";
+      const isPointerDown = name === "onPointerDown";
+      const isPointerUp = name === "onPointerUp";
+      const isWheel = name === "onWheel";
+      const canDeferRaycasts = events.frameTimedRaycasts && state.frameloop === "always";
+      if (isPointerMove && canDeferRaycasts) {
+        events.compute?.(event, state);
+        internal.pointerDirty.set(pointerId, event);
+        return;
+      }
+      if (isWheel && canDeferRaycasts && !events.alwaysFireOnScroll) {
+        events.compute?.(event, state);
+        internal.pointerDirty.set(pointerId, event);
+        return;
+      }
+      if ((isClickEvent || isPointerDown || isPointerUp) && internal.pointerDirty.has(pointerId)) {
+        const deferredEvent = internal.pointerDirty.get(pointerId);
+        internal.pointerDirty.delete(pointerId);
+        processDeferredPointer(deferredEvent, pointerId);
+      }
       const filter = isPointerMove || isDragOver || isDrop ? filterPointerEvents : void 0;
       const hits = intersect(event, filter);
-      const delta = isClickEvent ? calculateDistance(event) : 0;
-      if (name === "onPointerDown") {
-        internal.initialClick = [event.offsetX, event.offsetY];
-        internal.initialHits = hits.map((hit) => hit.eventObject);
-      }
+      const delta = isClickEvent ? calculateDistance(event, pointerId) : 0;
+      if (isPointerDown) {
+        const pointerState2 = getPointerState(internal, pointerId);
+        pointerState2.initialClick = [event.offsetX, event.offsetY];
+        pointerState2.initialHits = hits.map((hit) => hit.eventObject);
+      }
+      const pointerState = internal.pointerMap.get(pointerId);
+      const initialHits = pointerState?.initialHits ?? [];
       if (isClickEvent && !hits.length) {
         if (delta <= 2) {
           pointerMissed(event, internal.interaction);
@@ -876,7 +1418,9 @@ function createEvents(store) {
         dropMissed(event, internal.interaction);
         if (onDropMissed) onDropMissed(event);
       }
-      if (isPointerMove || isDragOver) cancelPointer(hits);
+      if (isPointerMove || isDragOver) {
+        cancelPointer(hits, pointerId);
+      }
       function onIntersect(data) {
         const eventObject = data.eventObject;
         const instance = eventObject.__r3f;
@@ -885,9 +1429,10 @@ function createEvents(store) {
         if (isPointerMove) {
           if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
             const id = makeId(data);
-            const hoveredItem = internal.hovered.get(id);
+            const pointerState2 = getPointerState(internal, pointerId);
+            const hoveredItem = pointerState2.hovered.get(id);
             if (!hoveredItem) {
-              internal.hovered.set(id, data);
+              pointerState2.hovered.set(id, data);
               handlers.onPointerOver?.(data);
               handlers.onPointerEnter?.(data);
             } else if (hoveredItem.stopped) {
@@ -897,9 +1442,10 @@ function createEvents(store) {
           handlers.onPointerMove?.(data);
         } else if (isDragOver) {
           const id = makeId(data);
-          const hoveredItem = internal.hovered.get(id);
+          const pointerState2 = getPointerState(internal, pointerId);
+          const hoveredItem = pointerState2.hovered.get(id);
           if (!hoveredItem) {
-            internal.hovered.set(id, data);
+            pointerState2.hovered.set(id, data);
             handlers.onDragOverEnter?.(data);
           } else if (hoveredItem.stopped) {
             data.stopPropagation();
@@ -910,18 +1456,18 @@ function createEvents(store) {
         } else {
           const handler = handlers[name];
           if (handler) {
-            if (!isClickEvent || internal.initialHits.includes(eventObject)) {
+            if (!isClickEvent || initialHits.includes(eventObject)) {
               pointerMissed(
                 event,
-                internal.interaction.filter((object) => !internal.initialHits.includes(object))
+                internal.interaction.filter((object) => !initialHits.includes(object))
               );
               handler(data);
             }
           } else {
-            if (isClickEvent && internal.initialHits.includes(eventObject)) {
+            if (isClickEvent && initialHits.includes(eventObject)) {
               pointerMissed(
                 event,
-                internal.interaction.filter((object) => !internal.initialHits.includes(object))
+                internal.interaction.filter((object) => !initialHits.includes(object))
               );
             }
           }
@@ -930,7 +1476,15 @@ function createEvents(store) {
       handleIntersects(hits, event, delta, onIntersect);
     };
   }
-  return { handlePointer };
+  function flushDeferredPointers() {
+    const { internal, events } = store.getState();
+    if (!events.frameTimedRaycasts) return;
+    for (const [pointerId, event] of internal.pointerDirty) {
+      processDeferredPointer(event, pointerId);
+    }
+    internal.pointerDirty.clear();
+  }
+  return { handlePointer, flushDeferredPointers, processDeferredPointer };
 }
 const DOM_EVENTS = {
   onClick: ["click", false],
@@ -949,11 +1503,16 @@ const DOM_EVENTS = {
   onLostPointerCapture: ["lostpointercapture", true]
 };
 function createPointerEvents(store) {
-  const { handlePointer } = createEvents(store);
+  const { handlePointer, flushDeferredPointers, processDeferredPointer } = createEvents(store);
+  let nextXRPointerId = XR_POINTER_ID_START;
+  const xrPointers = /* @__PURE__ */ new Map();
   return {
     priority: 1,
     enabled: true,
-    compute(event, state, previous) {
+    frameTimedRaycasts: true,
+    alwaysFireOnScroll: true,
+    updateOnFrame: false,
+    compute(event, state) {
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
@@ -962,11 +1521,33 @@ function createPointerEvents(store) {
       (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
       {}
     ),
-    update: () => {
+    update: (pointerId) => {
+      const { events, internal } = store.getState();
+      if (!events.handlers) return;
+      if (pointerId !== void 0) {
+        const event = internal.pointerDirty.get(pointerId);
+        if (event) {
+          internal.pointerDirty.delete(pointerId);
+          processDeferredPointer(event, pointerId);
+        } else if (internal.lastEvent?.current) {
+          processDeferredPointer(internal.lastEvent.current, pointerId);
+        }
+      } else {
+        flushDeferredPointers();
+        if (internal.lastEvent?.current) {
+          events.handlers.onPointerMove(internal.lastEvent.current);
+        }
+      }
+    },
+    flush: () => {
       const { events, internal } = store.getState();
-      if (internal.lastEvent?.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+      flushDeferredPointers();
+      if (events.updateOnFrame && internal.lastEvent?.current && events.handlers) {
+        events.handlers.onPointerMove(internal.lastEvent.current);
+      }
     },
     connect: (target) => {
+      if (!target) return;
       const { set, events } = store.getState();
       events.disconnect?.();
       set((state) => ({ events: { ...state.events, connected: target } }));
@@ -990,6 +1571,32 @@ function createPointerEvents(store) {
         }
         set((state) => ({ events: { ...state.events, connected: void 0 } }));
       }
+    },
+    registerPointer: (config) => {
+      const pointerId = nextXRPointerId++;
+      xrPointers.set(pointerId, config);
+      const { internal } = store.getState();
+      getPointerState(internal, pointerId);
+      return pointerId;
+    },
+    unregisterPointer: (pointerId) => {
+      xrPointers.delete(pointerId);
+      const { internal } = store.getState();
+      const pointerState = internal.pointerMap.get(pointerId);
+      if (pointerState) {
+        for (const [, hoveredObj] of pointerState.hovered) {
+          const eventObject = hoveredObj.eventObject;
+          const instance = eventObject.__r3f;
+          if (instance?.eventCount) {
+            const handlers = instance.handlers;
+            const data = { ...hoveredObj, intersections: [] };
+            handlers.onPointerOut?.(data);
+            handlers.onPointerLeave?.(data);
+          }
+        }
+        internal.pointerMap.delete(pointerId);
+      }
+      internal.pointerDirty.delete(pointerId);
     }
   };
 }
@@ -1051,331 +1658,26 @@ function notifyAlpha({ message, link }) {
   }
 }
 
-const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
-const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
-const createStore = (invalidate, advance) => {
-  const rootStore = traditional.createWithEqualityFn((set, get) => {
-    const position = new webgpu.Vector3();
-    const defaultTarget = new webgpu.Vector3();
-    const tempTarget = new webgpu.Vector3();
-    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
-      const { width, height, top, left } = size;
-      const aspect = width / height;
-      if (target.isVector3) tempTarget.copy(target);
-      else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-      if (isOrthographicCamera(camera)) {
-        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
-      } else {
-        const fov = camera.fov * Math.PI / 180;
-        const h = 2 * Math.tan(fov / 2) * distance;
-        const w = h * (width / height);
-        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
-      }
-    }
-    let performanceTimeout = void 0;
-    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
-    const pointer = new webgpu.Vector2();
-    const rootState = {
-      set,
-      get,
-      // Mock objects that have to be configured
-      gl: null,
-      renderer: null,
-      camera: null,
-      frustum: new webgpu.Frustum(),
-      autoUpdateFrustum: true,
-      raycaster: null,
-      events: { priority: 1, enabled: true, connected: false },
-      scene: null,
-      rootScene: null,
-      xr: null,
-      inspector: null,
-      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
-      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      legacy: false,
-      linear: false,
-      flat: false,
-      textureColorSpace: "srgb",
-      isLegacy: false,
-      webGPUSupported: false,
-      isNative: false,
-      controls: null,
-      pointer,
-      mouse: pointer,
-      frameloop: "always",
-      onPointerMissed: void 0,
-      onDragOverMissed: void 0,
-      onDropMissed: void 0,
-      performance: {
-        current: 1,
-        min: 0.5,
-        max: 1,
-        debounce: 200,
-        regress: () => {
-          const state2 = get();
-          if (performanceTimeout) clearTimeout(performanceTimeout);
-          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
-          performanceTimeout = setTimeout(
-            () => setPerformanceCurrent(get().performance.max),
-            state2.performance.debounce
-          );
-        }
-      },
-      size: { width: 0, height: 0, top: 0, left: 0 },
-      viewport: {
-        initialDpr: 0,
-        dpr: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        aspect: 0,
-        distance: 0,
-        factor: 0,
-        getCurrentViewport
-      },
-      setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
-      setSize: (width, height, top, left) => {
-        const state2 = get();
-        if (width === void 0) {
-          set({ _sizeImperative: false });
-          if (state2._sizeProps) {
-            const { width: propW, height: propH } = state2._sizeProps;
-            if (propW !== void 0 || propH !== void 0) {
-              const currentSize = state2.size;
-              const newSize = {
-                width: propW ?? currentSize.width,
-                height: propH ?? currentSize.height,
-                top: currentSize.top,
-                left: currentSize.left
-              };
-              set((s) => ({
-                size: newSize,
-                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
-              }));
-            }
-          }
-          return;
-        }
-        const w = width;
-        const h = height ?? width;
-        const t = top ?? state2.size.top;
-        const l = left ?? state2.size.left;
-        const size = { width: w, height: h, top: t, left: l };
-        set((s) => ({
-          size,
-          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
-          _sizeImperative: true
-        }));
-      },
-      setDpr: (dpr) => set((state2) => {
-        const resolved = calculateDpr(dpr);
-        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
-      }),
-      setFrameloop: (frameloop = "always") => {
-        set(() => ({ frameloop }));
-      },
-      setError: (error) => set(() => ({ error })),
-      error: null,
-      //* TSL State (managed via hooks: useUniforms, useNodes, useTextures, usePostProcessing) ==============================
-      uniforms: {},
-      nodes: {},
-      textures: /* @__PURE__ */ new Map(),
-      postProcessing: null,
-      passes: {},
-      _hmrVersion: 0,
-      _sizeImperative: false,
-      _sizeProps: null,
-      previousRoot: void 0,
-      internal: {
-        // Events
-        interaction: [],
-        hovered: /* @__PURE__ */ new Map(),
-        subscribers: [],
-        initialClick: [0, 0],
-        initialHits: [],
-        capturedMap: /* @__PURE__ */ new Map(),
-        lastEvent: React__namespace.createRef(),
-        // Visibility tracking (onFramed, onOccluded, onVisible)
-        visibilityRegistry: /* @__PURE__ */ new Map(),
-        // Occlusion system (WebGPU only)
-        occlusionEnabled: false,
-        occlusionObserver: null,
-        occlusionCache: /* @__PURE__ */ new Map(),
-        helperGroup: null,
-        // Updates
-        active: false,
-        frames: 0,
-        priority: 0,
-        subscribe: (ref, priority, store) => {
-          const internal = get().internal;
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
-          internal.subscribers.push({ ref, priority, store });
-          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
-          return () => {
-            const internal2 = get().internal;
-            if (internal2?.subscribers) {
-              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
-              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
-            }
-          };
-        },
-        // Renderer Storage (single source of truth)
-        actualRenderer: null,
-        // Scheduler for useFrameNext (initialized in renderer.tsx)
-        scheduler: null
-      }
-    };
-    return rootState;
-  });
-  const state = rootStore.getState();
-  Object.defineProperty(state, "gl", {
-    get() {
-      const currentState = rootStore.getState();
-      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
-        const stack = new Error().stack || "";
-        const isInternalAccess = stack.includes("zustand") || stack.includes("setState") || stack.includes("Object.assign") || stack.includes("react-three-fiber/packages/fiber/src/core");
-        if (!isInternalAccess) {
-          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
-          notifyDepreciated({
-            heading: "Accessing state.gl in WebGPU mode",
-            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
-          });
-        }
-      }
-      return currentState.internal.actualRenderer;
-    },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(state, "renderer", {
-    get() {
-      return rootStore.getState().internal.actualRenderer;
-    },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  let oldScene = state.scene;
-  rootStore.subscribe(() => {
-    const currentState = rootStore.getState();
-    const { scene, rootScene, set } = currentState;
-    if (scene !== oldScene) {
-      oldScene = scene;
-      if (scene?.isScene && scene !== rootScene) {
-        set({ rootScene: scene });
-      }
-    }
-  });
-  let oldSize = state.size;
-  let oldDpr = state.viewport.dpr;
-  let oldCamera = state.camera;
-  rootStore.subscribe(() => {
-    const { camera, size, viewport, set, internal } = rootStore.getState();
-    const actualRenderer = internal.actualRenderer;
-    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
-      oldSize = size;
-      oldDpr = viewport.dpr;
-      updateCamera(camera, size);
-      if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
-      const updateStyle = typeof HTMLCanvasElement !== "undefined" && actualRenderer.domElement instanceof HTMLCanvasElement;
-      actualRenderer.setSize(size.width, size.height, updateStyle);
-    }
-    if (camera !== oldCamera) {
-      oldCamera = camera;
-      const { rootScene } = rootStore.getState();
-      if (camera && rootScene && !camera.parent) {
-        rootScene.add(camera);
-      }
-      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
-      const currentState = rootStore.getState();
-      if (currentState.autoUpdateFrustum && camera) {
-        updateFrustum(camera, currentState.frustum);
-      }
-    }
-  });
-  rootStore.subscribe((state2) => invalidate(state2));
-  return rootStore;
-};
-
-const memoizedLoaders = /* @__PURE__ */ new WeakMap();
-const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
-function getLoader(Proto) {
-  if (isConstructor$1(Proto)) {
-    let loader = memoizedLoaders.get(Proto);
-    if (!loader) {
-      loader = new Proto();
-      memoizedLoaders.set(Proto, loader);
-    }
-    return loader;
-  }
-  return Proto;
-}
-function loadingFn(extensions, onProgress) {
-  return function(Proto, input) {
-    const loader = getLoader(Proto);
-    if (extensions) extensions(loader);
-    if ("loadAsync" in loader && typeof loader.loadAsync === "function") {
-      return loader.loadAsync(input, onProgress).then((data) => {
-        if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
-        return data;
-      });
-    }
-    return new Promise(
-      (res, reject) => loader.load(
-        input,
-        (data) => {
-          if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
-          res(data);
-        },
-        onProgress,
-        (error) => reject(new Error(`Could not load ${input}: ${error?.message}`))
-      )
-    );
-  };
-}
-function useLoader(loader, input, extensions, onProgress) {
-  const keys = Array.isArray(input) ? input : [input];
-  const fn = loadingFn(extensions, onProgress);
-  const results = keys.map((key) => suspendReact.suspend(fn, [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.clear = function(loader, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  keys.forEach((key) => suspendReact.clear([loader, key]));
-};
-useLoader.loader = getLoader;
-
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
-class PhaseGraph {
-  constructor() {
-    /** Ordered list of phase nodes */
-    __publicField$2(this, "phases", []);
-    /** Quick lookup by name */
-    __publicField$2(this, "phaseMap", /* @__PURE__ */ new Map());
-    /** Cached ordered names (invalidated on changes) */
-    __publicField$2(this, "orderedNamesCache", null);
-    this.initializeDefaultPhases();
-  }
-  //* Initialization --------------------------------
-  initializeDefaultPhases() {
-    for (const name of DEFAULT_PHASES) {
-      const node = { name, isAutoGenerated: false };
-      this.phases.push(node);
-      this.phaseMap.set(name, node);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
+class PhaseGraph {
+  constructor() {
+    /** Ordered list of phase nodes */
+    __publicField$2(this, "phases", []);
+    /** Quick lookup by name */
+    __publicField$2(this, "phaseMap", /* @__PURE__ */ new Map());
+    /** Cached ordered names (invalidated on changes) */
+    __publicField$2(this, "orderedNamesCache", null);
+    this.initializeDefaultPhases();
+  }
+  //* Initialization --------------------------------
+  initializeDefaultPhases() {
+    for (const name of DEFAULT_PHASES) {
+      const node = { name, isAutoGenerated: false };
+      this.phases.push(node);
+      this.phaseMap.set(name, node);
     }
     this.invalidateCache();
   }
@@ -1608,7 +1910,7 @@ function shouldRun(job, now) {
   const minInterval = 1e3 / job.fps;
   const lastRun = job.lastRun ?? 0;
   const elapsed = now - lastRun;
-  if (elapsed < minInterval) return false;
+  if (elapsed < minInterval - 1) return false;
   if (job.drop) {
     job.lastRun = now;
   } else {
@@ -2388,36 +2690,364 @@ if (hmrData) {
   hmrData.accept?.();
 }
 
-function useFrame(callback, priorityOrOptions) {
-  const store = React__namespace.useContext(context);
-  const isInsideCanvas = store !== null;
-  const scheduler = getScheduler();
-  const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
-    id: priorityOrOptions.id,
-    phase: priorityOrOptions.phase,
-    priority: priorityOrOptions.priority,
-    fps: priorityOrOptions.fps,
-    drop: priorityOrOptions.drop,
-    enabled: priorityOrOptions.enabled,
-    before: priorityOrOptions.before,
-    after: priorityOrOptions.after
-  }) : "";
-  const options = React__namespace.useMemo(() => {
-    return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
-  }, [optionsKey]);
-  const reactId = React__namespace.useId();
-  const id = options.id ?? reactId;
-  const callbackRef = useMutableCallback(callback);
-  const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
-  useIsomorphicLayoutEffect(() => {
-    if (!callback) return;
-    if (isInsideCanvas) {
-      const state = store.getState();
-      const rootId = state.internal.rootId;
-      if (isLegacyPriority) {
-        state.internal.priority++;
-        let parentRoot = state.previousRoot;
-        while (parentRoot) {
+const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
+const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
+const createStore = (invalidate, advance) => {
+  const rootStore = traditional.createWithEqualityFn((set, get) => {
+    const position = new webgpu.Vector3();
+    const defaultTarget = new webgpu.Vector3();
+    const tempTarget = new webgpu.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const { width, height, top, left } = size;
+      const aspect = width / height;
+      if (target.isVector3) tempTarget.copy(target);
+      else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
+      } else {
+        const fov = camera.fov * Math.PI / 180;
+        const h = 2 * Math.tan(fov / 2) * distance;
+        const w = h * (width / height);
+        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
+      }
+    }
+    let performanceTimeout = void 0;
+    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
+    const pointer = new webgpu.Vector2();
+    const rootState = {
+      set,
+      get,
+      // Mock objects that have to be configured
+      // primaryStore is set after store creation (self-reference for primary, primary's store for secondary)
+      primaryStore: null,
+      gl: null,
+      renderer: null,
+      camera: null,
+      frustum: new webgpu.Frustum(),
+      autoUpdateFrustum: true,
+      raycaster: null,
+      events: {
+        priority: 1,
+        enabled: true,
+        connected: false,
+        frameTimedRaycasts: true,
+        alwaysFireOnScroll: true,
+        updateOnFrame: false
+      },
+      scene: null,
+      rootScene: null,
+      xr: null,
+      inspector: null,
+      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
+      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
+      textureColorSpace: webgpu.SRGBColorSpace,
+      isLegacy: false,
+      webGPUSupported: false,
+      isNative: false,
+      controls: null,
+      pointer,
+      mouse: pointer,
+      frameloop: "always",
+      onPointerMissed: void 0,
+      onDragOverMissed: void 0,
+      onDropMissed: void 0,
+      performance: {
+        current: 1,
+        min: 0.5,
+        max: 1,
+        debounce: 200,
+        regress: () => {
+          const state2 = get();
+          if (performanceTimeout) clearTimeout(performanceTimeout);
+          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
+          performanceTimeout = setTimeout(
+            () => setPerformanceCurrent(get().performance.max),
+            state2.performance.debounce
+          );
+        }
+      },
+      size: { width: 0, height: 0, top: 0, left: 0 },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
+      setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
+      setSize: (width, height, top, left) => {
+        const state2 = get();
+        if (width === void 0) {
+          set({ _sizeImperative: false });
+          if (state2._sizeProps) {
+            const { width: propW, height: propH } = state2._sizeProps;
+            if (propW !== void 0 || propH !== void 0) {
+              const currentSize = state2.size;
+              const newSize = {
+                width: propW ?? currentSize.width,
+                height: propH ?? currentSize.height,
+                top: currentSize.top,
+                left: currentSize.left
+              };
+              set((s) => ({
+                size: newSize,
+                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
+              }));
+              getScheduler().invalidate();
+            }
+          }
+          return;
+        }
+        const w = width;
+        const h = height ?? width;
+        const t = top ?? state2.size.top;
+        const l = left ?? state2.size.left;
+        const size = { width: w, height: h, top: t, left: l };
+        set((s) => ({
+          size,
+          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
+          _sizeImperative: true
+        }));
+        getScheduler().invalidate();
+      },
+      setDpr: (dpr) => set((state2) => {
+        const resolved = calculateDpr(dpr);
+        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
+      }),
+      setFrameloop: (frameloop = "always") => {
+        set(() => ({ frameloop }));
+      },
+      setError: (error) => set(() => ({ error })),
+      error: null,
+      //* TSL State (managed via hooks: useUniforms, useNodes, useBuffers, useGPUStorage, useTextures, useRenderPipeline) ==============================
+      uniforms: {},
+      nodes: {},
+      buffers: {},
+      gpuStorage: {},
+      textures: /* @__PURE__ */ new Map(),
+      renderPipeline: null,
+      passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
+      previousRoot: void 0,
+      internal: {
+        // Events
+        interaction: [],
+        subscribers: [],
+        // Per-pointer state (new unified structure)
+        pointerMap: /* @__PURE__ */ new Map(),
+        pointerDirty: /* @__PURE__ */ new Map(),
+        lastEvent: React__namespace.createRef(),
+        // Deprecated but kept for backwards compatibility
+        hovered: /* @__PURE__ */ new Map(),
+        initialClick: [0, 0],
+        initialHits: [],
+        capturedMap: /* @__PURE__ */ new Map(),
+        // Visibility tracking (onFramed, onOccluded, onVisible)
+        visibilityRegistry: /* @__PURE__ */ new Map(),
+        // Occlusion system (WebGPU only)
+        occlusionEnabled: false,
+        occlusionObserver: null,
+        occlusionCache: /* @__PURE__ */ new Map(),
+        helperGroup: null,
+        // Updates
+        active: false,
+        frames: 0,
+        priority: 0,
+        subscribe: (ref, priority, store) => {
+          const internal = get().internal;
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({ ref, priority, store });
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
+          return () => {
+            const internal2 = get().internal;
+            if (internal2?.subscribers) {
+              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
+              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
+            }
+          };
+        },
+        // Renderer Storage (single source of truth)
+        actualRenderer: null,
+        // Scheduler for useFrameNext (initialized in renderer.tsx)
+        scheduler: null
+      }
+    };
+    return rootState;
+  });
+  const state = rootStore.getState();
+  Object.defineProperty(state, "gl", {
+    get() {
+      const currentState = rootStore.getState();
+      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
+        const stack = new Error().stack || "";
+        const isInternalAccess = stack.includes("zustand") || stack.includes("setState") || stack.includes("Object.assign") || stack.includes("react-three-fiber/packages/fiber/src/core");
+        if (!isInternalAccess) {
+          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
+          notifyDepreciated({
+            heading: "Accessing state.gl in WebGPU mode",
+            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
+          });
+        }
+      }
+      return currentState.internal.actualRenderer;
+    },
+    set(value) {
+      rootStore.getState().internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(state, "renderer", {
+    get() {
+      return rootStore.getState().internal.actualRenderer;
+    },
+    set(value) {
+      rootStore.getState().internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  let oldScene = state.scene;
+  rootStore.subscribe(() => {
+    const currentState = rootStore.getState();
+    const { scene, rootScene, set } = currentState;
+    if (scene !== oldScene) {
+      oldScene = scene;
+      if (scene?.isScene && scene !== rootScene) {
+        set({ rootScene: scene });
+      }
+    }
+  });
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const { camera, size, viewport, set, internal } = rootStore.getState();
+    const actualRenderer = internal.actualRenderer;
+    const canvasTarget = internal.canvasTarget;
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
+      oldSize = size;
+      oldDpr = viewport.dpr;
+      updateCamera(camera, size);
+      if (internal.isSecondary && canvasTarget) {
+        if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
+        canvasTarget.setSize(size.width, size.height, false);
+      } else {
+        if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
+        actualRenderer.setSize(size.width, size.height, false);
+        if (canvasTarget) {
+          if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
+          canvasTarget.setSize(size.width, size.height, false);
+        }
+      }
+    }
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      const { rootScene } = rootStore.getState();
+      if (camera && rootScene && !camera.parent) {
+        rootScene.add(camera);
+      }
+      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
+      const currentState = rootStore.getState();
+      if (currentState.autoUpdateFrustum && camera) {
+        updateFrustum(camera, currentState.frustum);
+      }
+    }
+  });
+  rootStore.subscribe((state2) => invalidate(state2));
+  return rootStore;
+};
+
+const memoizedLoaders = /* @__PURE__ */ new WeakMap();
+const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
+function getLoader(Proto) {
+  if (isConstructor$1(Proto)) {
+    let loader = memoizedLoaders.get(Proto);
+    if (!loader) {
+      loader = new Proto();
+      memoizedLoaders.set(Proto, loader);
+    }
+    return loader;
+  }
+  return Proto;
+}
+function loadingFn(extensions, onProgress) {
+  return function(Proto, input) {
+    const loader = getLoader(Proto);
+    if (extensions) extensions(loader);
+    if ("loadAsync" in loader && typeof loader.loadAsync === "function") {
+      return loader.loadAsync(input, onProgress).then((data) => {
+        if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
+        return data;
+      });
+    }
+    return new Promise(
+      (res, reject) => loader.load(
+        input,
+        (data) => {
+          if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
+          res(data);
+        },
+        onProgress,
+        (error) => reject(new Error(`Could not load ${input}: ${error?.message}`))
+      )
+    );
+  };
+}
+function useLoader(loader, input, extensions, onProgress) {
+  const keys = Array.isArray(input) ? input : [input];
+  const fn = loadingFn(extensions, onProgress);
+  const results = keys.map((key) => suspendReact.suspend(fn, [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.clear = function(loader, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  keys.forEach((key) => suspendReact.clear([loader, key]));
+};
+useLoader.loader = getLoader;
+
+function useFrame(callback, priorityOrOptions) {
+  const store = React__namespace.useContext(context);
+  const isInsideCanvas = store !== null;
+  const scheduler = getScheduler();
+  const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
+    id: priorityOrOptions.id,
+    phase: priorityOrOptions.phase,
+    priority: priorityOrOptions.priority,
+    fps: priorityOrOptions.fps,
+    drop: priorityOrOptions.drop,
+    enabled: priorityOrOptions.enabled,
+    before: priorityOrOptions.before,
+    after: priorityOrOptions.after
+  }) : "";
+  const options = React__namespace.useMemo(() => {
+    return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
+  }, [optionsKey]);
+  const reactId = React__namespace.useId();
+  const id = options.id ?? reactId;
+  const callbackRef = useMutableCallback(callback);
+  const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
+  useIsomorphicLayoutEffect(() => {
+    if (!callback) return;
+    if (isInsideCanvas) {
+      const state = store.getState();
+      const rootId = state.internal.rootId;
+      if (isLegacyPriority) {
+        state.internal.priority++;
+        let parentRoot = state.previousRoot;
+        while (parentRoot) {
           const parentState = parentRoot.getState();
           if (parentState?.internal) parentState.internal.priority++;
           parentRoot = parentState?.previousRoot;
@@ -2567,6 +3197,9 @@ function useTexture(input, optionsOrOnLoad) {
   const textureCache = useThree((state) => state.textures);
   const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
   const { onLoad, cache = false } = options;
+  const onLoadRef = React.useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onLoadCalledForRef = React.useRef(null);
   const urls = React.useMemo(() => getUrls(input), [input]);
   const cachedResult = React.useMemo(() => {
     if (!cache) return null;
@@ -2577,9 +3210,13 @@ function useTexture(input, optionsOrOnLoad) {
     webgpu.TextureLoader,
     IsObject(input) ? Object.values(input) : input
   );
+  const inputKey = urls.join("\0");
   React.useLayoutEffect(() => {
-    if (!cachedResult) onLoad?.(loadedTextures);
-  }, [onLoad, cachedResult, loadedTextures]);
+    if (cachedResult) return;
+    if (onLoadCalledForRef.current === inputKey) return;
+    onLoadCalledForRef.current = inputKey;
+    onLoadRef.current?.(loadedTextures);
+  }, [cachedResult, loadedTextures, inputKey]);
   React.useEffect(() => {
     if (cachedResult) return;
     if ("initTexture" in renderer) {
@@ -2746,14 +3383,31 @@ function useTextures() {
   }, [store]);
 }
 
-function useRenderTarget(width, height, options) {
+function useRenderTarget(widthOrOptions, heightOrOptions, options) {
   const isLegacy = useThree((s) => s.isLegacy);
   const size = useThree((s) => s.size);
+  let width;
+  let height;
+  let opts;
+  if (typeof widthOrOptions === "object") {
+    opts = widthOrOptions;
+  } else if (typeof widthOrOptions === "number") {
+    width = widthOrOptions;
+    if (typeof heightOrOptions === "object") {
+      height = widthOrOptions;
+      opts = heightOrOptions;
+    } else if (typeof heightOrOptions === "number") {
+      height = heightOrOptions;
+      opts = options;
+    } else {
+      height = widthOrOptions;
+    }
+  }
   return React.useMemo(() => {
     const w = width ?? size.width;
     const h = height ?? size.height;
-    return new webgpu.RenderTarget(w, h, options);
-  }, [width, height, size.width, size.height, options, isLegacy]);
+    return new webgpu.RenderTarget(w, h, opts);
+  }, [width, height, size.width, size.height, opts, isLegacy]);
 }
 
 function useStore() {
@@ -2803,7 +3457,7 @@ function addTail(callback) {
 function invalidate(state, frames = 1, stackFrames = false) {
   getScheduler().invalidate(frames, stackFrames);
 }
-function advance(timestamp, runGlobalEffects = true, state, frame) {
+function advance(timestamp) {
   getScheduler().step(timestamp);
 }
 
@@ -14257,6 +14911,7 @@ function swapInstances() {
       instance.object = instance.props.object ?? new target(...instance.props.args ?? []);
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
+      delete instance.appliedOnce;
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -14330,8 +14985,22 @@ const reconciler = /* @__PURE__ */ createReconciler({
     const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
     if (isTailSibling) swapInstances();
   },
-  finalizeInitialChildren: () => false,
-  commitMount() {
+  finalizeInitialChildren: (instance) => {
+    for (const prop in instance.props) {
+      if (isFromRef(instance.props[prop])) return true;
+    }
+    return false;
+  },
+  commitMount(instance) {
+    const resolved = {};
+    for (const prop in instance.props) {
+      const value = instance.props[prop];
+      if (isFromRef(value)) {
+        const ref = value[FROM_REF];
+        if (ref.current != null) resolved[prop] = ref.current;
+      }
+    }
+    if (Object.keys(resolved).length) applyProps(instance.object, resolved);
   },
   getPublicInstance: (instance) => instance?.object,
   prepareForCommit: () => null,
@@ -14552,6 +15221,9 @@ function createRoot(canvas) {
       let resolve;
       pending = new Promise((_resolve) => resolve = _resolve);
       const {
+        id: canvasId,
+        primaryCanvas,
+        scheduler: schedulerConfig,
         gl: glConfig,
         renderer: rendererConfig,
         size: propsSize,
@@ -14559,10 +15231,6 @@ function createRoot(canvas) {
         events,
         onCreated: onCreatedCallback,
         shadows = false,
-        linear = false,
-        flat = false,
-        textureColorSpace = webgpu.SRGBColorSpace,
-        legacy = false,
         orthographic = false,
         frameloop = "always",
         dpr = [1, 2],
@@ -14574,11 +15242,14 @@ function createRoot(canvas) {
         onDropMissed,
         autoUpdateFrustum = true,
         occlusion = false,
-        _sizeProps
+        _sizeProps,
+        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();
       const defaultGPUProps = {
-        canvas
+        canvas,
+        antialias: true
       };
       if (glConfig && !R3F_BUILD_LEGACY) {
         throw new Error(
@@ -14589,15 +15260,52 @@ function createRoot(canvas) {
         throw new Error("Cannot use both gl and renderer props at the same time");
       }
       let renderer = state.internal.actualRenderer;
-      if (!state.internal.actualRenderer) {
+      if (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 (!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 });
+        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
+            }
+          }));
+        }
       }
       let raycaster = state.raycaster;
       if (!raycaster) state.set({ raycaster: raycaster = new webgpu.Raycaster() });
@@ -14606,6 +15314,7 @@ function createRoot(canvas) {
       if (!is.equ(params, raycaster.params, shallowLoose)) {
         applyProps(raycaster, { params: { ...raycaster.params, ...params } });
       }
+      let tempCamera = state.camera;
       if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
         lastCamera = cameraOptions;
         const isCamera = cameraOptions?.isCamera;
@@ -14625,6 +15334,7 @@ function createRoot(canvas) {
           if (!state.camera && !cameraOptions?.rotation) camera.lookAt(0, 0, 0);
         }
         state.set({ camera });
+        tempCamera = camera;
         raycaster.camera = camera;
       }
       if (!state.scene) {
@@ -14642,7 +15352,7 @@ function createRoot(canvas) {
           rootScene: scene,
           internal: { ...prev.internal, container: scene }
         }));
-        const camera = state.camera;
+        const camera = tempCamera;
         if (camera && !camera.parent) scene.add(camera);
       }
       if (events && !state.events.handlers) {
@@ -14659,6 +15369,9 @@ function createRoot(canvas) {
       if (_sizeProps !== void 0) {
         state.set({ _sizeProps });
       }
+      if (forceEven !== void 0 && state.internal.forceEven !== forceEven) {
+        state.set((prev) => ({ internal: { ...prev.internal, forceEven } }));
+      }
       const size = computeInitialSize(canvas, propsSize);
       if (!state._sizeImperative && !is.equ(size, state.size, shallowLoose)) {
         const wasImperative = state._sizeImperative;
@@ -14685,10 +15398,10 @@ function createRoot(canvas) {
         lastConfiguredProps.performance = performance;
       }
       if (!state.xr) {
-        const handleXRFrame = (timestamp, frame) => {
+        const handleXRFrame = (timestamp, _frame) => {
           const state2 = store.getState();
           if (state2.frameloop === "never") return;
-          advance(timestamp, true);
+          advance(timestamp);
         };
         const actualRenderer = state.internal.actualRenderer;
         const handleSessionChange = () => {
@@ -14700,16 +15413,16 @@ function createRoot(canvas) {
         };
         const xr = {
           connect() {
-            const { gl, renderer: renderer2, isLegacy } = store.getState();
-            const actualRenderer2 = renderer2 || gl;
-            actualRenderer2.xr.addEventListener("sessionstart", handleSessionChange);
-            actualRenderer2.xr.addEventListener("sessionend", handleSessionChange);
+            const { gl, renderer: renderer2 } = store.getState();
+            const xrManager = (renderer2 || gl).xr;
+            xrManager.addEventListener("sessionstart", handleSessionChange);
+            xrManager.addEventListener("sessionend", handleSessionChange);
           },
           disconnect() {
-            const { gl, renderer: renderer2, isLegacy } = store.getState();
-            const actualRenderer2 = renderer2 || gl;
-            actualRenderer2.xr.removeEventListener("sessionstart", handleSessionChange);
-            actualRenderer2.xr.removeEventListener("sessionend", handleSessionChange);
+            const { gl, renderer: renderer2 } = store.getState();
+            const xrManager = (renderer2 || gl).xr;
+            xrManager.removeEventListener("sessionstart", handleSessionChange);
+            xrManager.removeEventListener("sessionend", handleSessionChange);
           }
         };
         if (typeof renderer.xr?.addEventListener === "function") xr.connect();
@@ -14721,15 +15434,22 @@ function createRoot(canvas) {
         const oldType = renderer.shadowMap.type;
         renderer.shadowMap.enabled = !!shadows;
         if (is.boo(shadows)) {
-          renderer.shadowMap.type = webgpu.PCFSoftShadowMap;
+          renderer.shadowMap.type = webgpu.PCFShadowMap;
         } else if (is.str(shadows)) {
+          if (shadows === "soft") {
+            notifyDepreciated({
+              heading: 'shadows="soft" is deprecated',
+              body: "Three has depreciated soft and improved basic PCFShadows, we converted for you.",
+              link: "https://github.com/mrdoob/three.js/wiki/Migration-Guide?utm_source=chatgpt.com#181--182"
+            });
+          }
           const types = {
             basic: webgpu.BasicShadowMap,
             percentage: webgpu.PCFShadowMap,
-            soft: webgpu.PCFSoftShadowMap,
+            soft: webgpu.PCFShadowMap,
             variance: webgpu.VSMShadowMap
           };
-          renderer.shadowMap.type = types[shadows] ?? webgpu.PCFSoftShadowMap;
+          renderer.shadowMap.type = types[shadows] ?? webgpu.PCFShadowMap;
         } else if (is.obj(shadows)) {
           Object.assign(renderer.shadowMap, shadows);
         }
@@ -14737,27 +15457,69 @@ function createRoot(canvas) {
           renderer.shadowMap.needsUpdate = true;
         }
       }
+      if (!configured) {
+        renderer.outputColorSpace = webgpu.SRGBColorSpace;
+        renderer.toneMapping = webgpu.ACESFilmicToneMapping;
+      }
       if (textureColorSpace !== lastConfiguredProps.textureColorSpace) {
         if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
         lastConfiguredProps.textureColorSpace = textureColorSpace;
       }
+      const r3fProps = ["textureColorSpace"];
+      const constructorOnlyProps = ["samples", "antialias", "alpha", "canvas", "powerPreference"];
+      const nonApplyProps = [...r3fProps, ...constructorOnlyProps];
       if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
-        applyProps(renderer, glConfig);
+        const glProps = {};
+        for (const key in glConfig) {
+          if (!nonApplyProps.includes(key)) glProps[key] = glConfig[key];
+        }
+        applyProps(renderer, glProps);
       }
       if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
         const currentRenderer = state.renderer;
         if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
-          applyProps(currentRenderer, rendererConfig);
+          const rendererProps = {};
+          for (const key in rendererConfig) {
+            if (!nonApplyProps.includes(key)) rendererProps[key] = rendererConfig[key];
+          }
+          applyProps(currentRenderer, rendererProps);
         }
       }
       const scheduler = getScheduler();
       const rootId = state.internal.rootId;
       if (!rootId) {
-        const newRootId = scheduler.generateRootId();
+        const newRootId = canvasId || scheduler.generateRootId();
         const unregisterRoot = scheduler.registerRoot(newRootId, {
           getState: () => store.getState(),
           onError: (err) => store.getState().setError(err)
         });
+        const unregisterCanvasTarget = scheduler.register(
+          () => {
+            const state2 = store.getState();
+            if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
+              const renderer2 = state2.internal.actualRenderer;
+              renderer2.setCanvasTarget(state2.internal.canvasTarget);
+            }
+          },
+          {
+            id: `${newRootId}_canvasTarget`,
+            rootId: newRootId,
+            phase: "start",
+            system: true
+          }
+        );
+        const unregisterEventsFlush = scheduler.register(
+          () => {
+            const state2 = store.getState();
+            state2.events.flush?.();
+          },
+          {
+            id: `${newRootId}_events`,
+            rootId: newRootId,
+            phase: "input",
+            system: true
+          }
+        );
         const unregisterFrustum = scheduler.register(
           () => {
             const state2 = store.getState();
@@ -14792,18 +15554,22 @@ function createRoot(canvas) {
             const userHandlesRender = scheduler.hasUserJobsInPhase("render", newRootId);
             if (userHandlesRender || state2.internal.priority) return;
             try {
-              if (state2.postProcessing?.render) state2.postProcessing.render();
+              if (state2.renderPipeline?.render) state2.renderPipeline.render();
               else if (renderer2?.render) renderer2.render(state2.scene, state2.camera);
             } catch (error) {
               state2.setError(error instanceof Error ? error : new Error(String(error)));
             }
           },
           {
-            id: `${newRootId}_render`,
+            // Use canvas ID directly as job ID if available, otherwise use generated rootId
+            id: canvasId || `${newRootId}_render`,
             rootId: newRootId,
             phase: "render",
-            system: true
+            system: true,
             // Internal flag: this is a system job, not user-controlled
+            // Apply scheduler config for render ordering and rate limiting
+            ...schedulerConfig?.after && { after: schedulerConfig.after },
+            ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
           }
         );
         state.set((state2) => ({
@@ -14812,6 +15578,8 @@ function createRoot(canvas) {
             rootId: newRootId,
             unregisterRoot: () => {
               unregisterRoot();
+              unregisterCanvasTarget();
+              unregisterEventsFlush();
               unregisterFrustum();
               unregisterVisibility();
               unregisterRender();
@@ -14870,15 +15638,24 @@ function unmountComponentAtNode(canvas, callback) {
             const renderer = state.internal.actualRenderer;
             const unregisterRoot = state.internal.unregisterRoot;
             if (unregisterRoot) unregisterRoot();
+            const unregisterPrimary = state.internal.unregisterPrimary;
+            if (unregisterPrimary) unregisterPrimary();
+            const canvasTarget = state.internal.canvasTarget;
+            if (canvasTarget?.dispose) canvasTarget.dispose();
             state.events.disconnect?.();
             cleanupHelperGroup(root.store);
-            renderer?.renderLists?.dispose?.();
-            renderer?.forceContextLoss?.();
-            if (renderer?.xr) state.xr.disconnect();
+            if (state.isLegacy && renderer) {
+              ;
+              renderer.renderLists?.dispose?.();
+              renderer.forceContextLoss?.();
+            }
+            if (!state.internal.isSecondary) {
+              if (renderer?.xr) state.xr.disconnect();
+            }
             dispose(state.scene);
             _roots.delete(canvas);
             if (callback) callback(canvas);
-          } catch (e) {
+          } catch {
           }
         }, 500);
       }
@@ -14886,36 +15663,34 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalWrapper, { children, container, state });
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children, container, state });
 }
-function PortalWrapper({ children, container, state }) {
+function Portal({ children, container, state }) {
   const isRef = React.useCallback((obj) => obj && "current" in obj, []);
-  const [resolvedContainer, setResolvedContainer] = React.useState(() => {
+  const [resolvedContainer, _setResolvedContainer] = React.useState(() => {
     if (isRef(container)) return container.current ?? null;
     return container;
   });
+  const setResolvedContainer = React.useCallback(
+    (newContainer) => {
+      if (!newContainer || newContainer === resolvedContainer) return;
+      _setResolvedContainer(isRef(newContainer) ? newContainer.current : newContainer);
+    },
+    [resolvedContainer, _setResolvedContainer, isRef]
+  );
   React.useMemo(() => {
-    if (isRef(container)) {
-      const current = container.current;
-      if (!current) {
-        queueMicrotask(() => {
-          const updated = container.current;
-          if (updated && updated !== resolvedContainer) {
-            setResolvedContainer(updated);
-          }
-        });
-      } else if (current !== resolvedContainer) {
-        setResolvedContainer(current);
-      }
-    } else if (container !== resolvedContainer) {
-      setResolvedContainer(container);
+    if (isRef(container) && !container.current) {
+      return queueMicrotask(() => {
+        setResolvedContainer(container.current);
+      });
     }
-  }, [container, resolvedContainer, isRef]);
+    setResolvedContainer(container);
+  }, [container, isRef, setResolvedContainer]);
   if (!resolvedContainer) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   const portalKey = resolvedContainer.uuid ?? `portal-${resolvedContainer.id ?? "unknown"}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children, container: resolvedContainer, state }, portalKey);
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalInner, { children, container: resolvedContainer, state }, portalKey);
 }
-function Portal({ state = {}, children, container }) {
+function PortalInner({ state = {}, children, container }) {
   const { events, size, injectScene = true, ...rest } = state;
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new webgpu.Raycaster());
@@ -14936,11 +15711,12 @@ function Portal({ state = {}, children, container }) {
     };
   }, [portalScene, container, injectScene]);
   const inject = useMutableCallback((rootState, injectState) => {
+    const resolvedSize = { ...rootState.size, ...injectState.size, ...size };
     let viewport = void 0;
-    if (injectState.camera && size) {
+    if (injectState.camera && (size || injectState.size)) {
       const camera = injectState.camera;
-      viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), size);
-      if (camera !== rootState.camera) updateCamera(camera, size);
+      viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), resolvedSize);
+      if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
     }
     return {
       // The intersect consists of the previous root state
@@ -14957,7 +15733,7 @@ function Portal({ state = {}, children, container }) {
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
       events: { ...rootState.events, ...injectState.events, ...events },
-      size: { ...rootState.size, ...size },
+      size: resolvedSize,
       viewport: { ...rootState.viewport, ...viewport },
       // Layers are allowed to override events
       setEvents: (events2) => injectState.set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
@@ -14969,9 +15745,13 @@ function Portal({ state = {}, children, container }) {
     const store = traditional.createWithEqualityFn((set, get) => ({ ...rest, set, get }));
     const onMutate = (prev) => store.setState((state2) => inject.current(prev, state2));
     onMutate(previousRoot.getState());
-    previousRoot.subscribe(onMutate);
     return store;
   }, [previousRoot, container]);
+  useIsomorphicLayoutEffect(() => {
+    const onMutate = (prev) => usePortalStore.setState((state2) => inject.current(prev, state2));
+    const unsubscribe = previousRoot.subscribe(onMutate);
+    return unsubscribe;
+  }, [previousRoot, usePortalStore]);
   return (
     // @ts-ignore, reconciler types are not maintained
     /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reconciler.createPortal(
@@ -14991,15 +15771,13 @@ function CanvasImpl({
   fallback,
   resize,
   style,
+  id,
   gl,
-  renderer,
+  renderer: rendererProp,
   events = createPointerEvents,
   eventSource,
   eventPrefix,
   shadows,
-  linear,
-  flat,
-  legacy,
   orthographic,
   frameloop,
   dpr,
@@ -15014,10 +15792,53 @@ function CanvasImpl({
   hmr,
   width,
   height,
+  background,
+  forceEven,
   ...props
 }) {
+  const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
+  let primaryCanvas;
+  let scheduler;
+  let renderer;
+  if (isRendererConfig) {
+    const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
+    primaryCanvas = pc;
+    scheduler = sc;
+    renderer = Object.keys(rest).length > 0 ? rest : rendererProp;
+  } else {
+    renderer = rendererProp;
+  }
   React__namespace.useMemo(() => extend(THREE), []);
   const Bridge = useBridge();
+  const backgroundProps = React__namespace.useMemo(() => {
+    if (!background) return null;
+    if (typeof background === "object" && !background.isColor) {
+      const { backgroundMap, envMap, files, preset, ...rest } = background;
+      return {
+        ...rest,
+        preset,
+        files: envMap || files,
+        backgroundFiles: backgroundMap,
+        background: true
+      };
+    }
+    if (typeof background === "number") {
+      return { color: background, background: true };
+    }
+    if (typeof background === "string") {
+      if (background in presetsObj) {
+        return { preset: background, background: true };
+      }
+      if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
+        return { files: background, background: true };
+      }
+      return { color: background, background: true };
+    }
+    if (background.isColor) {
+      return { color: background, background: true };
+    }
+    return null;
+  }, [background]);
   const hasInitialSizeRef = React__namespace.useRef(false);
   const measureConfig = React__namespace.useMemo(() => {
     if (!hasInitialSizeRef.current) {
@@ -15034,15 +15855,20 @@ function CanvasImpl({
     };
   }, [resize, hasInitialSizeRef.current]);
   const [containerRef, containerRect] = useMeasure__default(measureConfig);
-  const effectiveSize = React__namespace.useMemo(
-    () => ({
-      width: width ?? containerRect.width,
-      height: height ?? containerRect.height,
+  const effectiveSize = React__namespace.useMemo(() => {
+    let w = width ?? containerRect.width;
+    let h = height ?? containerRect.height;
+    if (forceEven) {
+      w = Math.ceil(w / 2) * 2;
+      h = Math.ceil(h / 2) * 2;
+    }
+    return {
+      width: w,
+      height: h,
       top: containerRect.top,
       left: containerRect.left
-    }),
-    [width, height, containerRect]
-  );
+    };
+  }, [width, height, containerRect, forceEven]);
   if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
     hasInitialSizeRef.current = true;
   }
@@ -15082,14 +15908,14 @@ function CanvasImpl({
       async function run() {
         if (!effectActiveRef.current || !root.current) return;
         await root.current.configure({
+          id,
+          primaryCanvas,
+          scheduler,
           gl,
           renderer,
           scene,
           events,
           shadows,
-          linear,
-          flat,
-          legacy,
           orthographic,
           frameloop,
           dpr,
@@ -15099,6 +15925,7 @@ function CanvasImpl({
           size: effectiveSize,
           // Store size props for reset functionality
           _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
+          forceEven,
           // Pass mutable reference to onPointerMissed so it's free to update
           onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
           onDragOverMissed: (...args) => handleDragOverMissed.current?.(...args),
@@ -15122,7 +15949,10 @@ function CanvasImpl({
         });
         if (!effectActiveRef.current || !root.current) return;
         root.current.render(
-          /* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Block, { set: setBlock }), children: children ?? null }) }) })
+          /* @__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 }),
+            children ?? null
+          ] }) }) })
         );
       }
       run();
@@ -15149,20 +15979,22 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const handleHMR = () => {
-      const rootEntry = _roots.get(canvas);
-      if (rootEntry?.store) {
-        rootEntry.store.setState((state) => ({
-          nodes: {},
-          uniforms: {},
-          _hmrVersion: state._hmrVersion + 1
-        }));
-      }
+      queueMicrotask(() => {
+        const rootEntry = _roots.get(canvas);
+        if (rootEntry?.store) {
+          console.log("[R3F] HMR detected \u2014 rebuilding nodes/uniforms");
+          rootEntry.store.setState((state) => ({
+            nodes: {},
+            uniforms: {},
+            _hmrVersion: state._hmrVersion + 1
+          }));
+        }
+      });
     };
     if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)) }) !== "undefined" && undefined) {
       const hot = undefined;
       hot.on("vite:afterUpdate", handleHMR);
-      return () => hot.dispose?.(() => {
-      });
+      return () => hot.off?.("vite:afterUpdate", handleHMR);
     }
     if (typeof module !== "undefined" && module.hot) {
       const hot = module.hot;
@@ -15185,7 +16017,16 @@ function CanvasImpl({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "r3f-canvas", style: { display: "block" }, children: fallback }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          id,
+          className: "r3f-canvas",
+          style: { display: "block", width: "100%", height: "100%" },
+          children: fallback
+        }
+      ) })
     }
   );
 }
@@ -15258,6 +16099,34 @@ let ScopedStore = _ScopedStore;
 function createScopedStore(data) {
   return new ScopedStore(data);
 }
+function createLazyCreatorState(state) {
+  let _uniforms = null;
+  let _nodes = null;
+  let _buffers = null;
+  let _gpuStorage = null;
+  return Object.create(state, {
+    uniforms: {
+      get() {
+        return _uniforms ?? (_uniforms = createScopedStore(state.uniforms));
+      }
+    },
+    nodes: {
+      get() {
+        return _nodes ?? (_nodes = createScopedStore(state.nodes));
+      }
+    },
+    buffers: {
+      get() {
+        return _buffers ?? (_buffers = createScopedStore(state.buffers));
+      }
+    },
+    gpuStorage: {
+      get() {
+        return _gpuStorage ?? (_gpuStorage = createScopedStore(state.gpuStorage));
+      }
+    }
+  });
+}
 
 function addTexture(set, key, value) {
   set((state) => {
@@ -15298,6 +16167,27 @@ function createTextureOperations(set) {
     removeMultiple: (keys) => removeTextures(set, keys)
   };
 }
+function extractTSLValue(value) {
+  if (value === null || value === void 0) return value;
+  if (typeof value !== "object") return value;
+  const node = value;
+  if (!node.isNode) return value;
+  if (node.isConstNode) {
+    return node.value;
+  }
+  if ("value" in node) {
+    let extractedValue = node.value;
+    if (typeof node.traverse === "function") {
+      node.traverse((n) => {
+        if (n.isConstNode) {
+          extractedValue = n.value;
+        }
+      });
+    }
+    return extractedValue;
+  }
+  return value;
+}
 function vectorize(inObject) {
   if (inObject === null || inObject === void 0) return inObject;
   if (typeof inObject === "string") {
@@ -15310,9 +16200,16 @@ function vectorize(inObject) {
   }
   if (typeof inObject !== "object") return inObject;
   const obj = inObject;
+  if (obj.isNode) {
+    return extractTSLValue(inObject);
+  }
   if (obj.isVector2 || obj.isVector3 || obj.isVector4) return inObject;
   if (obj.isMatrix3 || obj.isMatrix4) return inObject;
   if (obj.isColor || obj.isEuler || obj.isQuaternion || obj.isSpherical) return inObject;
+  if ("r" in obj && "g" in obj && "b" in obj && typeof obj.r === "number" && typeof obj.g === "number" && typeof obj.b === "number") {
+    const scale = obj.r > 1 || obj.g > 1 || obj.b > 1 ? 1 / 255 : 1;
+    return new webgpu.Color(obj.r * scale, obj.g * scale, obj.b * scale);
+  }
   if ("x" in obj && "y" in obj && typeof obj.x === "number" && typeof obj.y === "number") {
     if ("w" in obj && typeof obj.w === "number" && "z" in obj && typeof obj.z === "number") {
       return new webgpu.Vector4(obj.x, obj.y, obj.z, obj.w);
@@ -15375,17 +16272,14 @@ function useUniforms(creatorOrScope, scope) {
   const rebuildUniforms = React.useCallback(
     (targetScope) => {
       store.setState((state) => {
-        let newUniforms = state.uniforms;
+        let newUniforms = {};
         if (targetScope && targetScope !== "root") {
           const { [targetScope]: _, ...rest } = state.uniforms;
           newUniforms = rest;
         } else if (targetScope === "root") {
-          newUniforms = {};
           for (const [key, value] of Object.entries(state.uniforms)) {
             if (!isUniformNode$1(value)) newUniforms[key] = value;
           }
-        } else {
-          newUniforms = {};
         }
         return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
       });
@@ -15393,20 +16287,26 @@ function useUniforms(creatorOrScope, scope) {
     [store]
   );
   const inputForMemoization = React.useMemo(() => {
+    let raw = creatorOrScope;
     if (is.fun(creatorOrScope)) {
-      const state = store.getState();
-      const wrappedState = {
-        ...state,
-        uniforms: createScopedStore(state.uniforms),
-        nodes: createScopedStore(state.nodes)
-      };
-      return creatorOrScope(wrappedState);
+      const wrappedState = createLazyCreatorState(store.getState());
+      raw = creatorOrScope(wrappedState);
+    }
+    if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+      const normalized = {};
+      for (const [key, value] of Object.entries(raw)) {
+        normalized[key] = vectorize(value);
+      }
+      return normalized;
     }
-    return creatorOrScope;
+    return raw;
   }, [creatorOrScope, store]);
   const memoizedInput = useCompareMemoize(inputForMemoization);
   const isReader = memoizedInput === void 0 || typeof memoizedInput === "string";
   const storeUniforms = useThree((s) => s.uniforms);
+  const hmrVersion = useThree((s) => s._hmrVersion);
+  const readerDep = isReader ? storeUniforms : null;
+  const creatorDep = isReader ? null : hmrVersion;
   const uniforms = React.useMemo(() => {
     if (memoizedInput === void 0) {
       return storeUniforms;
@@ -15461,28 +16361,19 @@ function useUniforms(creatorOrScope, scope) {
       }
     }
     return result;
-  }, [
-    store,
-    memoizedInput,
-    scope,
-    // Only include storeUniforms in deps for reader modes to enable reactivity
-    isReader ? storeUniforms : null
-  ]);
+  }, [store, memoizedInput, scope, readerDep, creatorDep]);
   return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms, rebuildUniforms };
 }
 function rebuildAllUniforms(store, scope) {
   store.setState((state) => {
-    let newUniforms = state.uniforms;
+    let newUniforms = {};
     if (scope && scope !== "root") {
       const { [scope]: _, ...rest } = state.uniforms;
       newUniforms = rest;
     } else if (scope === "root") {
-      newUniforms = {};
       for (const [key, value] of Object.entries(state.uniforms)) {
         if (!isUniformNode$1(value)) newUniforms[key] = value;
       }
-    } else {
-      newUniforms = {};
     }
     return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
   });
@@ -15550,15 +16441,17 @@ function isSameThreeType(a, b) {
 }
 
 const isUniformNode = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
+const isTSLNode$1 = (value) => value !== null && typeof value === "object" && "uuid" in value && "nodeType" in value;
 function useUniform(name, value) {
   const store = useStore();
+  const hmrVersion = useThree((s) => s._hmrVersion);
   return React.useMemo(() => {
     const state = store.getState();
     const set = store.setState;
     const existing = state.uniforms[name];
     if (existing && isUniformNode(existing)) {
-      if (value !== void 0) {
-        existing.value = value;
+      if (value !== void 0 && !isTSLNode$1(value) && !isUniformNode(value)) {
+        existing.value = typeof value === "string" ? new webgpu.Color(value) : value;
       }
       return existing;
     }
@@ -15567,7 +16460,24 @@ function useUniform(name, value) {
         `[useUniform] Uniform "${name}" not found. Create it first with: useUniform('${name}', initialValue)`
       );
     }
-    const node = tsl.uniform(value);
+    if (isUniformNode(value)) {
+      const node2 = value;
+      if (typeof node2.setName === "function") {
+        node2.setName(name);
+      }
+      set((s) => ({
+        uniforms: { ...s.uniforms, [name]: node2 }
+      }));
+      return node2;
+    }
+    let node;
+    if (isTSLNode$1(value)) {
+      node = tsl.uniform(value);
+    } else if (typeof value === "string") {
+      node = tsl.uniform(new webgpu.Color(value));
+    } else {
+      node = tsl.uniform(value);
+    }
     if (typeof node.setName === "function") {
       node.setName(name);
     }
@@ -15578,7 +16488,7 @@ function useUniform(name, value) {
       }
     }));
     return node;
-  }, [store, name]);
+  }, [store, name, hmrVersion]);
 }
 
 const isTSLNode = (value) => value !== null && typeof value === "object" && ("uuid" in value || "nodeType" in value);
@@ -15642,6 +16552,9 @@ function useNodes(creatorOrScope, scope) {
   const isReader = creatorOrScope === void 0 || typeof creatorOrScope === "string";
   const storeNodes = useThree((s) => s.nodes);
   const hmrVersion = useThree((s) => s._hmrVersion);
+  const scopeDep = typeof creatorOrScope === "string" ? creatorOrScope : scope;
+  const readerDep = isReader ? storeNodes : null;
+  const creatorDep = isReader ? null : hmrVersion;
   const nodes = React.useMemo(() => {
     if (creatorOrScope === void 0) {
       return storeNodes;
@@ -15654,11 +16567,7 @@ function useNodes(creatorOrScope, scope) {
     const state = store.getState();
     const set = store.setState;
     const creator = creatorOrScope;
-    const wrappedState = {
-      ...state,
-      uniforms: createScopedStore(state.uniforms),
-      nodes: createScopedStore(state.nodes)
-    };
+    const wrappedState = createLazyCreatorState(state);
     const created = creator(wrappedState);
     const result = {};
     let hasNewNodes = false;
@@ -15668,7 +16577,7 @@ function useNodes(creatorOrScope, scope) {
         if (currentScope[name]) {
           result[name] = currentScope[name];
         } else {
-          if (typeof node.label === "function") node.setName(`${scope}.${name}`);
+          node.setName?.(`${scope}.${name}`);
           result[name] = node;
           hasNewNodes = true;
         }
@@ -15688,7 +16597,7 @@ function useNodes(creatorOrScope, scope) {
       if (existing && isTSLNode(existing)) {
         result[name] = existing;
       } else {
-        if (typeof node.label === "function") node.setName(name);
+        node.setName?.(name);
         result[name] = node;
         hasNewNodes = true;
       }
@@ -15697,15 +16606,7 @@ function useNodes(creatorOrScope, scope) {
       set((s) => ({ nodes: { ...s.nodes, ...result } }));
     }
     return result;
-  }, [
-    store,
-    typeof creatorOrScope === "string" ? creatorOrScope : scope,
-    // Only include storeNodes in deps for reader modes to enable reactivity
-    // Creator mode intentionally excludes it to avoid re-running creator on unrelated changes
-    isReader ? storeNodes : null,
-    // Include hmrVersion for creator modes to allow rebuildNodes() to bust the cache
-    isReader ? null : hmrVersion
-  ]);
+  }, [store, scopeDep, readerDep, creatorDep]);
   return { ...nodes, removeNodes: removeNodes2, clearNodes, rebuildNodes };
 }
 function rebuildAllNodes(store, scope) {
@@ -15757,18 +16658,358 @@ function useLocalNodes(creator) {
   const uniforms = useThree((s) => s.uniforms);
   const nodes = useThree((s) => s.nodes);
   const textures = useThree((s) => s.textures);
+  const hmrVersion = useThree((s) => s._hmrVersion);
   return React.useMemo(() => {
-    const state = store.getState();
-    const wrappedState = {
-      ...state,
-      uniforms: createScopedStore(state.uniforms),
-      nodes: createScopedStore(state.nodes)
-    };
+    const wrappedState = createLazyCreatorState(store.getState());
     return creator(wrappedState);
-  }, [store, creator, uniforms, nodes, textures]);
+  }, [store, creator, uniforms, nodes, textures, hmrVersion]);
+}
+
+const isBufferLike = (value) => {
+  if (value === null || typeof value !== "object") return false;
+  if (ArrayBuffer.isView(value)) return true;
+  if ("isBufferAttribute" in value) return true;
+  if ("uuid" in value || "nodeType" in value) return true;
+  return false;
+};
+const disposeBuffer = (buffer) => {
+  if (buffer === null || typeof buffer !== "object") return;
+  if ("dispose" in buffer && typeof buffer.dispose === "function") {
+    buffer.dispose();
+  }
+};
+function useBuffers(creatorOrScope, scope) {
+  const store = useStore();
+  const removeBuffers = React.useCallback(
+    (names, targetScope) => {
+      const nameArray = Array.isArray(names) ? names : [names];
+      store.setState((state) => {
+        if (targetScope) {
+          const currentScope = { ...state.buffers[targetScope] };
+          for (const name of nameArray) delete currentScope[name];
+          return { buffers: { ...state.buffers, [targetScope]: currentScope } };
+        }
+        const buffers2 = { ...state.buffers };
+        for (const name of nameArray) if (isBufferLike(buffers2[name])) delete buffers2[name];
+        return { buffers: buffers2 };
+      });
+    },
+    [store]
+  );
+  const clearBuffers = React.useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.buffers;
+          return { buffers: rest };
+        }
+        if (targetScope === "root") {
+          const buffers2 = {};
+          for (const [key, value] of Object.entries(state.buffers)) {
+            if (!isBufferLike(value)) buffers2[key] = value;
+          }
+          return { buffers: buffers2 };
+        }
+        return { buffers: {} };
+      });
+    },
+    [store]
+  );
+  const rebuildBuffers = React.useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newBuffers = state.buffers;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.buffers;
+          newBuffers = rest;
+        } else if (targetScope === "root") {
+          newBuffers = {};
+          for (const [key, value] of Object.entries(state.buffers)) {
+            if (!isBufferLike(value)) newBuffers[key] = value;
+          }
+        } else {
+          newBuffers = {};
+        }
+        return { buffers: newBuffers, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
+  const disposeBuffers = React.useCallback(
+    (names, targetScope) => {
+      const nameArray = Array.isArray(names) ? names : [names];
+      const state = store.getState();
+      for (const name of nameArray) {
+        const buffer = targetScope ? state.buffers[targetScope]?.[name] : state.buffers[name];
+        if (buffer && isBufferLike(buffer)) {
+          disposeBuffer(buffer);
+        }
+      }
+      removeBuffers(names, targetScope);
+    },
+    [store, removeBuffers]
+  );
+  const isReader = creatorOrScope === void 0 || typeof creatorOrScope === "string";
+  const storeBuffers = useThree((s) => s.buffers);
+  const hmrVersion = useThree((s) => s._hmrVersion);
+  const scopeDep = typeof creatorOrScope === "string" ? creatorOrScope : scope;
+  const readerDep = isReader ? storeBuffers : null;
+  const creatorDep = isReader ? null : hmrVersion;
+  const buffers = React.useMemo(() => {
+    if (creatorOrScope === void 0) {
+      return storeBuffers;
+    }
+    if (typeof creatorOrScope === "string") {
+      const scopeData = storeBuffers[creatorOrScope];
+      if (scopeData && !isBufferLike(scopeData)) return scopeData;
+      return {};
+    }
+    const state = store.getState();
+    const set = store.setState;
+    const creator = creatorOrScope;
+    const wrappedState = createLazyCreatorState(state);
+    const created = creator(wrappedState);
+    const result = {};
+    let hasNewBuffers = false;
+    if (scope) {
+      const currentScope = state.buffers[scope] ?? {};
+      for (const [name, buffer] of Object.entries(created)) {
+        if (currentScope[name]) {
+          result[name] = currentScope[name];
+        } else {
+          if ("setName" in buffer && typeof buffer.setName === "function") {
+            buffer.setName(`${scope}.${name}`);
+          }
+          result[name] = buffer;
+          hasNewBuffers = true;
+        }
+      }
+      if (hasNewBuffers) {
+        set((s) => ({
+          buffers: {
+            ...s.buffers,
+            [scope]: { ...s.buffers[scope], ...result }
+          }
+        }));
+      }
+      return result;
+    }
+    for (const [name, buffer] of Object.entries(created)) {
+      const existing = state.buffers[name];
+      if (existing && isBufferLike(existing)) {
+        result[name] = existing;
+      } else {
+        if ("setName" in buffer && typeof buffer.setName === "function") {
+          buffer.setName(name);
+        }
+        result[name] = buffer;
+        hasNewBuffers = true;
+      }
+    }
+    if (hasNewBuffers) {
+      set((s) => ({ buffers: { ...s.buffers, ...result } }));
+    }
+    return result;
+  }, [store, scopeDep, readerDep, creatorDep]);
+  return { ...buffers, removeBuffers, clearBuffers, rebuildBuffers, disposeBuffers };
+}
+function rebuildAllBuffers(store, scope) {
+  store.setState((state) => {
+    let newBuffers = state.buffers;
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = state.buffers;
+      newBuffers = rest;
+    } else if (scope === "root") {
+      newBuffers = {};
+      for (const [key, value] of Object.entries(state.buffers)) {
+        if (!isBufferLike(value)) newBuffers[key] = value;
+      }
+    } else {
+      newBuffers = {};
+    }
+    return { buffers: newBuffers, _hmrVersion: state._hmrVersion + 1 };
+  });
+}
+
+const isStorageLike = (value) => {
+  if (value === null || typeof value !== "object") return false;
+  if ("isTexture" in value) return true;
+  if ("isData3DTexture" in value) return true;
+  if ("uuid" in value || "nodeType" in value) return true;
+  return false;
+};
+const disposeStorage = (storage) => {
+  if (storage === null || typeof storage !== "object") return;
+  if ("dispose" in storage && typeof storage.dispose === "function") {
+    storage.dispose();
+  }
+};
+function useGPUStorage(creatorOrScope, scope) {
+  const store = useStore();
+  const removeStorage = React.useCallback(
+    (names, targetScope) => {
+      const nameArray = Array.isArray(names) ? names : [names];
+      store.setState((state) => {
+        if (targetScope) {
+          const currentScope = { ...state.gpuStorage[targetScope] };
+          for (const name of nameArray) delete currentScope[name];
+          return { gpuStorage: { ...state.gpuStorage, [targetScope]: currentScope } };
+        }
+        const gpuStorage2 = { ...state.gpuStorage };
+        for (const name of nameArray) if (isStorageLike(gpuStorage2[name])) delete gpuStorage2[name];
+        return { gpuStorage: gpuStorage2 };
+      });
+    },
+    [store]
+  );
+  const clearStorage = React.useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.gpuStorage;
+          return { gpuStorage: rest };
+        }
+        if (targetScope === "root") {
+          const gpuStorage2 = {};
+          for (const [key, value] of Object.entries(state.gpuStorage)) {
+            if (!isStorageLike(value)) gpuStorage2[key] = value;
+          }
+          return { gpuStorage: gpuStorage2 };
+        }
+        return { gpuStorage: {} };
+      });
+    },
+    [store]
+  );
+  const rebuildStorage = React.useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newStorage = state.gpuStorage;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.gpuStorage;
+          newStorage = rest;
+        } else if (targetScope === "root") {
+          newStorage = {};
+          for (const [key, value] of Object.entries(state.gpuStorage)) {
+            if (!isStorageLike(value)) newStorage[key] = value;
+          }
+        } else {
+          newStorage = {};
+        }
+        return { gpuStorage: newStorage, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
+  const disposeStorageFn = React.useCallback(
+    (names, targetScope) => {
+      const nameArray = Array.isArray(names) ? names : [names];
+      const state = store.getState();
+      for (const name of nameArray) {
+        const storage = targetScope ? state.gpuStorage[targetScope]?.[name] : state.gpuStorage[name];
+        if (storage && isStorageLike(storage)) {
+          disposeStorage(storage);
+        }
+      }
+      removeStorage(names, targetScope);
+    },
+    [store, removeStorage]
+  );
+  const isReader = creatorOrScope === void 0 || typeof creatorOrScope === "string";
+  const storeStorage = useThree((s) => s.gpuStorage);
+  const hmrVersion = useThree((s) => s._hmrVersion);
+  const scopeDep = typeof creatorOrScope === "string" ? creatorOrScope : scope;
+  const readerDep = isReader ? storeStorage : null;
+  const creatorDep = isReader ? null : hmrVersion;
+  const gpuStorage = React.useMemo(() => {
+    if (creatorOrScope === void 0) {
+      return storeStorage;
+    }
+    if (typeof creatorOrScope === "string") {
+      const scopeData = storeStorage[creatorOrScope];
+      if (scopeData && !isStorageLike(scopeData)) return scopeData;
+      return {};
+    }
+    const state = store.getState();
+    const set = store.setState;
+    const creator = creatorOrScope;
+    const wrappedState = createLazyCreatorState(state);
+    const created = creator(wrappedState);
+    const result = {};
+    let hasNewStorage = false;
+    if (scope) {
+      const currentScope = state.gpuStorage[scope] ?? {};
+      for (const [name, storage] of Object.entries(created)) {
+        if (currentScope[name]) {
+          result[name] = currentScope[name];
+        } else {
+          if ("setName" in storage && typeof storage.setName === "function") {
+            storage.setName(`${scope}.${name}`);
+          }
+          if ("name" in storage && typeof storage.name === "string") {
+            storage.name = `${scope}.${name}`;
+          }
+          result[name] = storage;
+          hasNewStorage = true;
+        }
+      }
+      if (hasNewStorage) {
+        set((s) => ({
+          gpuStorage: {
+            ...s.gpuStorage,
+            [scope]: { ...s.gpuStorage[scope], ...result }
+          }
+        }));
+      }
+      return result;
+    }
+    for (const [name, storage] of Object.entries(created)) {
+      const existing = state.gpuStorage[name];
+      if (existing && isStorageLike(existing)) {
+        result[name] = existing;
+      } else {
+        if ("setName" in storage && typeof storage.setName === "function") {
+          storage.setName(name);
+        }
+        if ("name" in storage && typeof storage.name === "string") {
+          storage.name = name;
+        }
+        result[name] = storage;
+        hasNewStorage = true;
+      }
+    }
+    if (hasNewStorage) {
+      set((s) => ({ gpuStorage: { ...s.gpuStorage, ...result } }));
+    }
+    return result;
+  }, [store, scopeDep, readerDep, creatorDep]);
+  return {
+    ...gpuStorage,
+    removeStorage,
+    clearStorage,
+    rebuildStorage,
+    disposeStorage: disposeStorageFn
+  };
+}
+function rebuildAllStorage(store, scope) {
+  store.setState((state) => {
+    let newStorage = state.gpuStorage;
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = state.gpuStorage;
+      newStorage = rest;
+    } else if (scope === "root") {
+      newStorage = {};
+      for (const [key, value] of Object.entries(state.gpuStorage)) {
+        if (!isStorageLike(value)) newStorage[key] = value;
+      }
+    } else {
+      newStorage = {};
+    }
+    return { gpuStorage: newStorage, _hmrVersion: state._hmrVersion + 1 };
+  });
 }
 
-function usePostProcessing(mainCB, setupCB) {
+function useRenderPipeline(mainCB, setupCB) {
   const store = useStore();
   const { scene, camera, renderer, isLegacy } = useThree();
   const callbacksRanRef = React.useRef(false);
@@ -15787,7 +17028,7 @@ function usePostProcessing(mainCB, setupCB) {
   }, [store]);
   const reset = React.useCallback(() => {
     store.setState({
-      postProcessing: null,
+      renderPipeline: null,
       passes: {}
     });
     callbacksRanRef.current = false;
@@ -15800,13 +17041,13 @@ function usePostProcessing(mainCB, setupCB) {
   }, []);
   React.useLayoutEffect(() => {
     if (isLegacy) {
-      throw new Error("usePostProcessing is only available with WebGPU renderer. Set renderer prop on Canvas.");
+      throw new Error("useRenderPipeline is only available with WebGPU renderer. Set renderer prop on Canvas.");
     }
     if (!renderer || !scene || !camera) return;
     const state = store.getState();
     const set = store.setState;
     try {
-      let pp = state.postProcessing;
+      let pp = state.renderPipeline;
       let currentPasses = { ...state.passes };
       let justCreatedPP = false;
       if (!pp) {
@@ -15823,7 +17064,7 @@ function usePostProcessing(mainCB, setupCB) {
       }
       currentPasses.scenePass = scenePass;
       if (!pp.outputNode || justCreatedPP) pp.outputNode = scenePass;
-      set({ postProcessing: pp, passes: currentPasses });
+      set({ renderPipeline: pp, passes: currentPasses });
       const shouldRunCallbacks = justCreatedPP || !callbacksRanRef.current || !cacheValid;
       if (shouldRunCallbacks) {
         if (setupCBRef.current) {
@@ -15845,19 +17086,19 @@ function usePostProcessing(mainCB, setupCB) {
         callbacksRanRef.current = true;
       }
     } catch (error) {
-      console.error("[usePostProcessing] Setup error:", error);
+      console.error("[useRenderPipeline] Setup error:", error);
     }
   }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
   const passes = useThree((s) => s.passes);
-  const postProcessing = useThree((s) => s.postProcessing);
+  const renderPipeline = useThree((s) => s.renderPipeline);
   return {
     passes,
-    postProcessing,
+    renderPipeline,
     clearPasses,
     reset,
     rebuild,
-    // isReady indicates if PostProcessing is configured and ready for rendering
-    isReady: postProcessing !== null
+    // isReady indicates if RenderPipeline is configured and ready for rendering
+    isReady: renderPipeline !== null
   };
 }
 
@@ -15865,8 +17106,15 @@ extend(THREE);
 
 exports.Block = Block;
 exports.Canvas = Canvas;
+exports.Environment = Environment;
+exports.EnvironmentCube = EnvironmentCube;
+exports.EnvironmentMap = EnvironmentMap;
+exports.EnvironmentPortal = EnvironmentPortal;
 exports.ErrorBoundary = ErrorBoundary;
+exports.FROM_REF = FROM_REF;
 exports.IsObject = IsObject;
+exports.ONCE = ONCE;
+exports.Portal = Portal;
 exports.R3F_BUILD_LEGACY = R3F_BUILD_LEGACY;
 exports.R3F_BUILD_WEBGPU = R3F_BUILD_WEBGPU;
 exports.REACT_INTERNAL_PROPS = REACT_INTERNAL_PROPS;
@@ -15902,35 +17150,50 @@ exports.events = createPointerEvents;
 exports.extend = extend;
 exports.findInitialRoot = findInitialRoot;
 exports.flushSync = flushSync;
+exports.fromRef = fromRef;
 exports.getInstanceProps = getInstanceProps;
+exports.getPrimary = getPrimary;
+exports.getPrimaryIds = getPrimaryIds;
 exports.getRootState = getRootState;
 exports.getScheduler = getScheduler;
 exports.getUuidPrefix = getUuidPrefix;
 exports.hasConstructor = hasConstructor;
+exports.hasPrimary = hasPrimary;
 exports.invalidate = invalidate;
 exports.invalidateInstance = invalidateInstance;
 exports.is = is;
 exports.isColorRepresentation = isColorRepresentation;
 exports.isCopyable = isCopyable;
+exports.isFromRef = isFromRef;
 exports.isObject3D = isObject3D;
+exports.isOnce = isOnce;
 exports.isOrthographicCamera = isOrthographicCamera;
 exports.isRef = isRef;
 exports.isRenderer = isRenderer;
 exports.isTexture = isTexture;
 exports.isVectorLike = isVectorLike;
+exports.once = once;
 exports.prepare = prepare;
+exports.presetsObj = presetsObj;
+exports.rebuildAllBuffers = rebuildAllBuffers;
 exports.rebuildAllNodes = rebuildAllNodes;
+exports.rebuildAllStorage = rebuildAllStorage;
 exports.rebuildAllUniforms = rebuildAllUniforms;
 exports.reconciler = reconciler;
+exports.registerPrimary = registerPrimary;
 exports.removeInteractivity = removeInteractivity;
 exports.removeNodes = removeNodes;
 exports.removeUniforms = removeUniforms;
 exports.resolve = resolve;
 exports.unmountComponentAtNode = unmountComponentAtNode;
+exports.unregisterPrimary = unregisterPrimary;
 exports.updateCamera = updateCamera;
 exports.updateFrustum = updateFrustum;
 exports.useBridge = useBridge;
+exports.useBuffers = useBuffers;
+exports.useEnvironment = useEnvironment;
 exports.useFrame = useFrame;
+exports.useGPUStorage = useGPUStorage;
 exports.useGraph = useGraph;
 exports.useInstanceHandle = useInstanceHandle;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
@@ -15938,7 +17201,7 @@ exports.useLoader = useLoader;
 exports.useLocalNodes = useLocalNodes;
 exports.useMutableCallback = useMutableCallback;
 exports.useNodes = useNodes;
-exports.usePostProcessing = usePostProcessing;
+exports.useRenderPipeline = useRenderPipeline;
 exports.useRenderTarget = useRenderTarget;
 exports.useStore = useStore;
 exports.useTexture = useTexture;
@@ -15946,3 +17209,4 @@ exports.useTextures = useTextures;
 exports.useThree = useThree;
 exports.useUniform = useUniform;
 exports.useUniforms = useUniforms;
+exports.waitForPrimary = waitForPrimary;