@react-three/fiber 10.0.0-canary.b0fafc8 → 10.0.0-canary.d6fdf72

package/dist/webgpu/index.cjs

@@ -170,7 +170,7 @@ function useEnvironment({
       fiber.useLoader.clear(loader, multiFile ? [files] : files);
     }
     renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
-  }, [files, renderer.domElement]);
+  }, [extension, files, loader, multiFile, renderer.domElement]);
   const loaderResult = fiber.useLoader(
     loader,
     multiFile ? [files] : files,
@@ -370,7 +370,22 @@ function EnvironmentPortal({
       environmentIntensity,
       environmentRotation
     });
-  }, [children, virtualScene, fbo.texture, scene, defaultScene, background, frames, gl]);
+  }, [
+    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) {
@@ -1006,6 +1021,9 @@ function applyProps(object, props) {
       else target.set(value);
     } else {
       root[key] = value;
+      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;
@@ -1039,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) {
@@ -1106,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;
@@ -1127,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;
@@ -1142,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,
@@ -1173,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);
                 }
               }
             },
@@ -1200,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 };
@@ -1237,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);
@@ -1286,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;
@@ -1295,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) {
@@ -1307,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();
@@ -1320,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))
               );
             }
           }
@@ -1340,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],
@@ -1359,10 +1503,15 @@ 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,
+    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);
@@ -1372,11 +1521,33 @@ function createPointerEvents(store) {
       (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
       {}
     ),
-    update: () => {
+    update: (pointerId) => {
       const { events, internal } = store.getState();
-      if (internal.lastEvent?.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+      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();
+      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 } }));
@@ -1400,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);
     }
   };
 }
@@ -1713,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 {
@@ -2530,7 +2727,14 @@ const createStore = (invalidate, advance) => {
       frustum: new webgpu.Frustum(),
       autoUpdateFrustum: true,
       raycaster: null,
-      events: { priority: 1, enabled: true, connected: false },
+      events: {
+        priority: 1,
+        enabled: true,
+        connected: false,
+        frameTimedRaycasts: true,
+        alwaysFireOnScroll: true,
+        updateOnFrame: false
+      },
       scene: null,
       rootScene: null,
       xr: null,
@@ -2621,11 +2825,14 @@ const createStore = (invalidate, advance) => {
       },
       setError: (error) => set(() => ({ error })),
       error: null,
-      //* TSL State (managed via hooks: useUniforms, useNodes, useTextures, usePostProcessing) ==============================
+      //* TSL State (managed via hooks: useUniforms, useNodes, useBuffers, useGPUStorage, useTextures, useRenderPipeline) ==============================
       uniforms: {},
       nodes: {},
+      buffers: {},
+      gpuStorage: {},
       textures: /* @__PURE__ */ new Map(),
-      postProcessing: null,
+      _textureRefs: /* @__PURE__ */ new Map(),
+      renderPipeline: null,
       passes: {},
       _hmrVersion: 0,
       _sizeImperative: false,
@@ -2634,12 +2841,16 @@ const createStore = (invalidate, advance) => {
       internal: {
         // Events
         interaction: [],
-        hovered: /* @__PURE__ */ new Map(),
         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(),
-        lastEvent: React__namespace.createRef(),
         // Visibility tracking (onFramed, onOccluded, onVisible)
         visibilityRegistry: /* @__PURE__ */ new Map(),
         // Occlusion system (WebGPU only)
@@ -2727,14 +2938,16 @@ const createStore = (invalidate, advance) => {
       oldSize = size;
       oldDpr = viewport.dpr;
       updateCamera(camera, size);
-      if (canvasTarget) {
+      if (internal.isSecondary && canvasTarget) {
         if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
-        const updateStyle = typeof HTMLCanvasElement !== "undefined" && canvasTarget.domElement instanceof HTMLCanvasElement;
-        canvasTarget.setSize(size.width, size.height, updateStyle);
+        canvasTarget.setSize(size.width, size.height, false);
       } else {
         if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
-        const updateStyle = typeof HTMLCanvasElement !== "undefined" && actualRenderer.domElement instanceof HTMLCanvasElement;
-        actualRenderer.setSize(size.width, size.height, updateStyle);
+        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) {
@@ -2982,18 +3195,18 @@ function buildFromCache(input, textureCache) {
 function useTexture(input, optionsOrOnLoad) {
   const renderer = useThree((state) => state.internal.actualRenderer);
   const store = useStore();
-  const textureCache = useThree((state) => state.textures);
   const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
-  const { onLoad, cache = false } = options;
+  const { onLoad, cache = true } = 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;
-    if (!allUrlsCached(urls, textureCache)) return null;
-    return buildFromCache(input, textureCache);
-  }, [cache, urls, textureCache, input]);
+    const textures = store.getState().textures;
+    if (!allUrlsCached(urls, textures)) return null;
+    return buildFromCache(input, textures);
+  }, [cache, urls, input, store]);
   const loadedTextures = useLoader(
     webgpu.TextureLoader,
     IsObject(input) ? Object.values(input) : input
@@ -3037,8 +3250,6 @@ function useTexture(input, optionsOrOnLoad) {
   }, [input, loadedTextures, cachedResult]);
   React.useEffect(() => {
     if (!cache) return;
-    if (cachedResult) return;
-    const set = store.setState;
     const urlTextureMap = [];
     if (typeof input === "string") {
       urlTextureMap.push([input, mappedTextures]);
@@ -3052,18 +3263,32 @@ function useTexture(input, optionsOrOnLoad) {
         urlTextureMap.push([url, textureRecord[key]]);
       }
     }
-    set((state) => {
-      const newMap = new Map(state.textures);
-      let changed = false;
+    store.setState((state) => {
+      const refs = new Map(state._textureRefs);
+      let textures = state.textures;
+      let added = false;
       for (const [url, texture] of urlTextureMap) {
-        if (!newMap.has(url)) {
-          newMap.set(url, texture);
-          changed = true;
+        if (!textures.has(url)) {
+          if (!added) {
+            textures = new Map(textures);
+            added = true;
+          }
+          textures.set(url, texture);
         }
+        refs.set(url, (refs.get(url) ?? 0) + 1);
       }
-      return changed ? { textures: newMap } : state;
+      return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
+    });
+    return () => store.setState((state) => {
+      const refs = new Map(state._textureRefs);
+      for (const [url] of urlTextureMap) {
+        const next = (refs.get(url) ?? 0) - 1;
+        if (next <= 0) refs.delete(url);
+        else refs.set(url, next);
+      }
+      return { _textureRefs: refs };
     });
-  }, [cache, input, mappedTextures, store, cachedResult]);
+  }, [cache, input, mappedTextures, store]);
   return mappedTextures;
 }
 useTexture.preload = (url) => useLoader.preload(webgpu.TextureLoader, url);
@@ -3079,96 +3304,63 @@ const Texture = ({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.(ret) });
 };
 
-function getTextureValue(entry) {
-  if (entry instanceof webgpu.Texture) return entry;
-  if (entry && typeof entry === "object" && "value" in entry && entry.value instanceof webgpu.Texture) {
-    return entry.value;
-  }
-  return null;
-}
-function useTextures() {
+function useTextures(selector) {
   const store = useStore();
-  return React.useMemo(() => {
-    const set = store.setState;
+  const registry = React.useMemo(() => {
     const getState = store.getState;
-    const add = (key, value) => {
-      set((state) => {
-        const newMap = new Map(state.textures);
-        newMap.set(key, value);
-        return { textures: newMap };
-      });
-    };
-    const addMultiple = (items) => {
-      set((state) => {
-        const newMap = new Map(state.textures);
-        const entries = items instanceof Map ? items.entries() : Object.entries(items);
-        for (const [key, value] of entries) {
-          newMap.set(key, value);
-        }
-        return { textures: newMap };
-      });
-    };
-    const remove = (key) => {
-      set((state) => {
-        const newMap = new Map(state.textures);
-        newMap.delete(key);
-        return { textures: newMap };
-      });
-    };
-    const removeMultiple = (keys) => {
-      set((state) => {
-        const newMap = new Map(state.textures);
-        for (const key of keys) newMap.delete(key);
-        return { textures: newMap };
-      });
-    };
-    const dispose = (key) => {
-      const entry = getState().textures.get(key);
-      if (entry) {
-        const tex = getTextureValue(entry);
-        tex?.dispose();
-      }
-      remove(key);
-    };
-    const disposeMultiple = (keys) => {
-      const textures = getState().textures;
-      for (const key of keys) {
-        const entry = textures.get(key);
-        if (entry) {
-          const tex = getTextureValue(entry);
-          tex?.dispose();
-        }
-      }
-      removeMultiple(keys);
-    };
-    const disposeAll = () => {
-      const textures = getState().textures;
-      for (const entry of textures.values()) {
-        const tex = getTextureValue(entry);
-        tex?.dispose();
-      }
-      set({ textures: /* @__PURE__ */ new Map() });
-    };
+    const setState = store.setState;
+    const getOne = (key) => getState().textures.get(key);
     return {
-      // Getter for the textures Map (reactive via getState)
-      get textures() {
+      get all() {
         return getState().textures;
       },
-      // Read
-      get: (key) => getState().textures.get(key),
+      get(input) {
+        if (typeof input === "string") return getOne(input);
+        if (Array.isArray(input)) return input.map(getOne);
+        const out = {};
+        for (const name in input) out[name] = getOne(input[name]);
+        return out;
+      },
       has: (key) => getState().textures.has(key),
-      // Write
-      add,
-      addMultiple,
-      // Remove (cache only)
-      remove,
-      removeMultiple,
-      // Dispose (GPU + cache)
-      dispose,
-      disposeMultiple,
-      disposeAll
+      add(keyOrRecord, texture) {
+        setState((state) => {
+          const textures = new Map(state.textures);
+          if (typeof keyOrRecord === "string") {
+            textures.set(keyOrRecord, texture);
+          } else {
+            for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
+          }
+          return { textures };
+        });
+      },
+      dispose(key, options) {
+        const state = getState();
+        const refs = state._textureRefs.get(key) ?? 0;
+        if (refs > 0 && !options?.force) {
+          console.warn(
+            `[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
+          );
+          return false;
+        }
+        state.textures.get(key)?.dispose();
+        setState((s) => {
+          const textures = new Map(s.textures);
+          textures.delete(key);
+          const nextRefs = new Map(s._textureRefs);
+          nextRefs.delete(key);
+          return { textures, _textureRefs: nextRefs };
+        });
+        return true;
+      },
+      disposeAll() {
+        for (const texture of getState().textures.values()) texture.dispose();
+        setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
+      }
     };
   }, [store]);
+  const subscribe = selector ? () => selector(registry) : (state) => state.textures;
+  const selected = useThree(subscribe);
+  return selector ? selected : registry;
 }
 
 function useRenderTarget(widthOrOptions, heightOrOptions, options) {
@@ -15019,7 +15211,6 @@ function createRoot(canvas) {
         events,
         onCreated: onCreatedCallback,
         shadows = false,
-        textureColorSpace = webgpu.SRGBColorSpace,
         orthographic = false,
         frameloop = "always",
         dpr = [1, 2],
@@ -15034,6 +15225,7 @@ function createRoot(canvas) {
         _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,
@@ -15071,6 +15263,12 @@ function createRoot(canvas) {
       } 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;
@@ -15180,7 +15378,7 @@ 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);
@@ -15216,15 +15414,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);
         }
@@ -15240,13 +15445,24 @@ function createRoot(canvas) {
         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();
@@ -15272,6 +15488,18 @@ function createRoot(canvas) {
             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();
@@ -15306,7 +15534,7 @@ 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)));
@@ -15331,6 +15559,7 @@ function createRoot(canvas) {
             unregisterRoot: () => {
               unregisterRoot();
               unregisterCanvasTarget();
+              unregisterEventsFlush();
               unregisterFrustum();
               unregisterVisibility();
               unregisterRender();
@@ -15496,9 +15725,13 @@ function PortalInner({ 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(
@@ -15543,8 +15776,18 @@ function CanvasImpl({
   forceEven,
   ...props
 }) {
-  const { primaryCanvas, scheduler, ...rendererConfig } = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp) ? rendererProp : { primaryCanvas: void 0, scheduler: void 0 };
-  const renderer = Object.keys(rendererConfig).length > 0 ? rendererConfig : rendererProp;
+  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(() => {
@@ -15719,6 +15962,7 @@ function CanvasImpl({
       queueMicrotask(() => {
         const rootEntry = _roots.get(canvas);
         if (rootEntry?.store) {
+          console.log("[R3F] HMR detected \u2014 rebuilding nodes/uniforms");
           rootEntry.store.setState((state) => ({
             nodes: {},
             uniforms: {},
@@ -15730,8 +15974,7 @@ function CanvasImpl({
     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;
@@ -15754,7 +15997,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, id, 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
+        }
+      ) })
     }
   );
 }
@@ -15830,6 +16082,8 @@ function createScopedStore(data) {
 function createLazyCreatorState(state) {
   let _uniforms = null;
   let _nodes = null;
+  let _buffers = null;
+  let _gpuStorage = null;
   return Object.create(state, {
     uniforms: {
       get() {
@@ -15840,6 +16094,16 @@ function createLazyCreatorState(state) {
       get() {
         return _nodes ?? (_nodes = createScopedStore(state.nodes));
       }
+    },
+    buffers: {
+      get() {
+        return _buffers ?? (_buffers = createScopedStore(state.buffers));
+      }
+    },
+    gpuStorage: {
+      get() {
+        return _gpuStorage ?? (_gpuStorage = createScopedStore(state.gpuStorage));
+      }
     }
   });
 }
@@ -15922,6 +16186,10 @@ function vectorize(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);
@@ -16377,7 +16645,351 @@ function useLocalNodes(creator) {
   }, [store, creator, uniforms, nodes, textures, hmrVersion]);
 }
 
-function usePostProcessing(mainCB, setupCB) {
+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 useRenderPipeline(mainCB, setupCB) {
   const store = useStore();
   const { scene, camera, renderer, isLegacy } = useThree();
   const callbacksRanRef = React.useRef(false);
@@ -16396,7 +17008,7 @@ function usePostProcessing(mainCB, setupCB) {
   }, [store]);
   const reset = React.useCallback(() => {
     store.setState({
-      postProcessing: null,
+      renderPipeline: null,
       passes: {}
     });
     callbacksRanRef.current = false;
@@ -16409,13 +17021,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) {
@@ -16432,7 +17044,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) {
@@ -16454,19 +17066,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
   };
 }
 
@@ -16543,7 +17155,9 @@ 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;
@@ -16556,8 +17170,10 @@ 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;
@@ -16565,7 +17181,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;