@react-three/fiber 10.0.0-canary.2b511a5 → 10.0.0-canary.aecbafb

package/dist/webgpu/index.mjs

@@ -985,6 +985,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 === 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 === RGBAFormat && root[key].type === UnsignedByteType) {
         root[key].colorSpace = rootState.textureColorSpace;
@@ -1018,38 +1021,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) {
@@ -1085,6 +1110,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;
@@ -1106,9 +1140,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;
@@ -1121,27 +1159,25 @@ function createEvents(store) {
         if (state) {
           const { raycaster, pointer, camera, internal } = state;
           const unprojectedPoint = new 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,
@@ -1152,18 +1188,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);
                 }
               }
             },
@@ -1179,15 +1216,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 };
@@ -1216,41 +1256,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 { onPointerMissed, onDragOverMissed, 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);
@@ -1265,7 +1382,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;
@@ -1274,9 +1393,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) {
@@ -1286,9 +1406,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();
@@ -1299,18 +1420,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))
               );
             }
           }
@@ -1319,7 +1440,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],
@@ -1338,10 +1467,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);
@@ -1351,9 +1485,30 @@ 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) => {
       const { set, events } = store.getState();
@@ -1379,6 +1534,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);
     }
   };
 }
@@ -2509,7 +2690,14 @@ const createStore = (invalidate, advance) => {
       frustum: new 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,
@@ -2600,11 +2788,13 @@ 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,
+      renderPipeline: null,
       passes: {},
       _hmrVersion: 0,
       _sizeImperative: false,
@@ -2613,12 +2803,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.createRef(),
+        // Deprecated but kept for backwards compatibility
+        hovered: /* @__PURE__ */ new Map(),
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: /* @__PURE__ */ new Map(),
-        lastEvent: React.createRef(),
         // Visibility tracking (onFramed, onOccluded, onVisible)
         visibilityRegistry: /* @__PURE__ */ new Map(),
         // Occlusion system (WebGPU only)
@@ -15050,6 +15244,12 @@ function createRoot(canvas) {
       } else if (!state.internal.actualRenderer) {
         renderer = await resolveRenderer(rendererConfig, defaultGPUProps, 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;
@@ -15251,6 +15451,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();
@@ -15285,7 +15497,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)));
@@ -15310,6 +15522,7 @@ function createRoot(canvas) {
             unregisterRoot: () => {
               unregisterRoot();
               unregisterCanvasTarget();
+              unregisterEventsFlush();
               unregisterFrustum();
               unregisterVisibility();
               unregisterRender();
@@ -15475,9 +15688,13 @@ function PortalInner({ state = {}, children, container }) {
     const store = 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__ */ jsx(Fragment, { children: reconciler.createPortal(
@@ -15698,6 +15915,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: {},
@@ -15709,8 +15927,7 @@ function CanvasImpl({
     if (typeof import.meta !== "undefined" && import.meta.hot) {
       const hot = import.meta.hot;
       hot.on("vite:afterUpdate", handleHMR);
-      return () => hot.dispose?.(() => {
-      });
+      return () => hot.off?.("vite:afterUpdate", handleHMR);
     }
     if (typeof module !== "undefined" && module.hot) {
       const hot = module.hot;
@@ -15809,6 +16026,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() {
@@ -15819,6 +16038,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));
+      }
     }
   });
 }
@@ -15901,6 +16130,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 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 Vector4(obj.x, obj.y, obj.z, obj.w);
@@ -16356,7 +16589,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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = useRef(false);
@@ -16375,7 +16952,7 @@ function usePostProcessing(mainCB, setupCB) {
   }, [store]);
   const reset = useCallback(() => {
     store.setState({
-      postProcessing: null,
+      renderPipeline: null,
       passes: {}
     });
     callbacksRanRef.current = false;
@@ -16388,13 +16965,13 @@ function usePostProcessing(mainCB, setupCB) {
   }, []);
   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) {
@@ -16411,7 +16988,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) {
@@ -16433,22 +17010,22 @@ 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
   };
 }
 
 extend(THREE);
 
-export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getScheduler, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, rebuildAllNodes, rebuildAllUniforms, reconciler, registerPrimary, removeInteractivity, removeNodes, removeUniforms, resolve, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, usePostProcessing, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms, waitForPrimary };
+export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getScheduler, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, rebuildAllBuffers, rebuildAllNodes, rebuildAllStorage, rebuildAllUniforms, reconciler, registerPrimary, removeInteractivity, removeNodes, removeUniforms, resolve, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useBuffers, useEnvironment, useFrame, useGPUStorage, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, useRenderPipeline, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms, waitForPrimary };