@react-three/fiber 10.0.0-alpha.3 → 10.0.0-alpha.5

package/dist/webgpu/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const webgpu = require('three/webgpu');
-const Inspector_js = require('three/addons/inspector/Inspector.js');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useMeasure = require('react-use-measure');
@@ -11,6 +10,7 @@ const scheduler = require('@pmndrs/scheduler');
 const Tb = require('scheduler');
 const GroundedSkybox_js = require('three/examples/jsm/objects/GroundedSkybox.js');
 const HDRLoader_js = require('three/examples/jsm/loaders/HDRLoader.js');
+const HDRCubeTextureLoader_js = require('three/examples/jsm/loaders/HDRCubeTextureLoader.js');
 const EXRLoader_js = require('three/examples/jsm/loaders/EXRLoader.js');
 const UltraHDRLoader_js = require('three/examples/jsm/loaders/UltraHDRLoader.js');
 const gainmapJs = require('@monogrid/gainmap-js');
@@ -54,6 +54,10 @@ const Tb__default = /*#__PURE__*/_interopDefaultCompat(Tb);
 
 const R3F_BUILD_LEGACY = false;
 const R3F_BUILD_WEBGPU = true;
+async function loadInspector() {
+  const { Inspector } = await import('three/addons/inspector/Inspector.js');
+  return Inspector;
+}
 const WebGLRenderer = class WebGLRenderer2 {
   constructor() {
     throw new Error(
@@ -67,13 +71,13 @@ const WebGLCubeRenderTarget = null;
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTargetCompat: webgpu.CubeRenderTarget,
-  Inspector: Inspector_js.Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: webgpu.RenderTarget,
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
-  WebGLRenderer: WebGLRenderer
+  WebGLRenderer: WebGLRenderer,
+  loadInspector: loadInspector
 }, [webgpu__namespace]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();
@@ -536,8 +540,10 @@ function hasVisibilityHandlers(handlers) {
 }
 
 const FROM_REF = Symbol.for("@react-three/fiber.fromRef");
-function fromRef(ref) {
-  return { [FROM_REF]: ref };
+function fromRef(ref, transform) {
+  const marker = { [FROM_REF]: ref };
+  if (transform) marker.transform = transform;
+  return marker;
 }
 function isFromRef(value) {
   return value !== null && typeof value === "object" && FROM_REF in value;
@@ -638,11 +644,9 @@ function diffProps(instance, newProps) {
   for (const prop in instance.props) {
     if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
     const { root, key } = resolve(instance.object, prop);
-    if (root.constructor && root.constructor.length === 0) {
+    if (typeof root?.constructor === "function") {
       const ctor = getMemoizedPrototype(root);
       if (!is.und(ctor)) changedProps[prop] = ctor[key];
-    } else {
-      changedProps[prop] = 0;
     }
   }
   return changedProps;
@@ -932,7 +936,7 @@ const createStore = (invalidate, advance) => {
                 size: newSize,
                 viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
               }));
-              scheduler.getScheduler().invalidate();
+              get().invalidate();
             }
           }
           return;
@@ -947,15 +951,16 @@ const createStore = (invalidate, advance) => {
           viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
           _sizeImperative: true
         }));
-        scheduler.getScheduler().invalidate();
+        get().invalidate();
       },
       setDpr: (dpr) => set((state2) => {
         const resolved = calculateDpr(dpr);
         return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
       }),
       setFrameloop: (frameloop = "always") => {
+        const rootId = get().internal.rootId;
+        if (rootId) scheduler.getScheduler().setRootFrameloop(rootId, frameloop);
         set(() => ({ frameloop }));
-        scheduler.getScheduler().frameloop = frameloop;
       },
       setError: (error) => set(() => ({ error })),
       error: null,
@@ -1071,17 +1076,11 @@ const createStore = (invalidate, advance) => {
       oldSize = size;
       oldDpr = viewport.dpr;
       updateCamera(camera, size);
-      if (internal.isSecondary && canvasTarget) {
-        if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
-        canvasTarget.setSize(size.width, size.height, false);
-      } else {
-        if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
-        actualRenderer.setSize(size.width, size.height, false);
-        if (canvasTarget) {
-          if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
-          canvasTarget.setSize(size.width, size.height, false);
-        }
-      }
+      const resizeTarget = canvasTarget ?? actualRenderer;
+      if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
+      resizeTarget.setSize(size.width, size.height, false);
+      const activeTarget = actualRenderer.getCanvasTarget?.();
+      if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
     }
     if (camera !== oldCamera) {
       oldCamera = camera;
@@ -1143,7 +1142,11 @@ function useLoader(loader, input, extensions, onProgress, cacheKey) {
   const results = cacheKeys.map(
     (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
   );
-  return Array.isArray(input) ? results : results[0];
+  const stableRef = React.useRef(null);
+  const previous = stableRef.current;
+  const stable = previous !== null && previous.length === results.length && previous.every((value, i) => value === results[i]) ? previous : results;
+  stableRef.current = stable;
+  return Array.isArray(input) ? stable : stable[0];
 }
 useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
   const inputs = Array.isArray(input) ? input : [input];
@@ -1158,7 +1161,7 @@ useLoader.clear = function(loader, input, cacheKey) {
 };
 useLoader.loader = getLoader$1;
 
-function useFrame(callback, priorityOrOptions) {
+function useFrame$1(callback, priorityOrOptions) {
   const store = React__namespace.useContext(context);
   const isInsideCanvas = store !== null;
   const scheduler$1 = scheduler.getScheduler();
@@ -1263,6 +1266,13 @@ function useFrame(callback, priorityOrOptions) {
        * Use for controlling the entire frame loop, adding phases, etc.
        */
       scheduler: scheduler2,
+      /**
+       * The root that currently owns this job. Resolve on access because ambient
+       * jobs can be adopted by a Canvas after the controls object is created.
+       */
+      get rootId() {
+        return scheduler.getScheduler().getJobRootId(id);
+      },
       /**
        * Manually step this job only.
        * Bypasses FPS limiting - always runs.
@@ -1279,6 +1289,14 @@ function useFrame(callback, priorityOrOptions) {
       stepAll: (timestamp) => {
         scheduler.getScheduler().step(timestamp);
       },
+      /**
+       * Request frames for this job's owning root without waking sibling roots.
+       */
+      invalidate: (frames, stackFrames) => {
+        const scheduler3 = scheduler.getScheduler();
+        const rootId = scheduler3.getJobRootId(id);
+        if (rootId) scheduler3.invalidateRoot(rootId, frames, stackFrames);
+      },
       /**
        * Pause this job (set enabled=false).
        * Job remains registered but won't run.
@@ -1308,6 +1326,11 @@ function getUrls(input) {
   if (Array.isArray(input)) return input;
   return Object.values(input);
 }
+function inputSignature(input) {
+  if (typeof input === "string") return input;
+  if (Array.isArray(input)) return input.join("\0");
+  return Object.keys(input).sort().map((key) => `${key}\0${input[key]}`).join("
");
+}
 function allUrlsCached(urls, textureCache) {
   return urls.every((url) => textureCache.has(url));
 }
@@ -1326,31 +1349,44 @@ function buildFromCache(input, textureCache) {
   }
 }
 function useTexture(input, optionsOrOnLoad) {
-  const renderer = useThree((state) => state.internal.actualRenderer);
+  const renderer = useThree$1((state) => state.internal.actualRenderer);
   const store = useStore();
   const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
   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 inputKey = React.useMemo(() => inputSignature(input), [input]);
+  const stableInput = React.useMemo(() => input, [inputKey]);
+  const urls = React.useMemo(() => getUrls(stableInput), [stableInput]);
   const cachedResult = React.useMemo(() => {
     if (!cache) return null;
     const textures = store.getState().textures;
     if (!allUrlsCached(urls, textures)) return null;
-    return buildFromCache(input, textures);
-  }, [cache, urls, input, store]);
+    return buildFromCache(stableInput, textures);
+  }, [cache, urls, stableInput, store]);
   const loadedTextures = useLoader(
     webgpu.TextureLoader,
-    IsObject(input) ? Object.values(input) : input
+    IsObject(stableInput) ? Object.values(stableInput) : stableInput
   );
-  const inputKey = urls.join("\0");
+  const mappedTextures = React.useMemo(() => {
+    if (cachedResult) return cachedResult;
+    if (IsObject(stableInput)) {
+      const keyed = {};
+      const textureArray = loadedTextures;
+      let i = 0;
+      for (const key in stableInput) keyed[key] = textureArray[i++];
+      return keyed;
+    } else {
+      return loadedTextures;
+    }
+  }, [stableInput, loadedTextures, cachedResult]);
   React.useLayoutEffect(() => {
     if (cachedResult) return;
     if (onLoadCalledForRef.current === inputKey) return;
     onLoadCalledForRef.current = inputKey;
-    onLoadRef.current?.(loadedTextures);
-  }, [cachedResult, loadedTextures, inputKey]);
+    onLoadRef.current?.(mappedTextures);
+  }, [cachedResult, mappedTextures, inputKey]);
   React.useEffect(() => {
     if (cachedResult) return;
     if ("initTexture" in renderer) {
@@ -1369,30 +1405,18 @@ function useTexture(input, optionsOrOnLoad) {
       });
     }
   }, [renderer, loadedTextures, cachedResult]);
-  const mappedTextures = React.useMemo(() => {
-    if (cachedResult) return cachedResult;
-    if (IsObject(input)) {
-      const keyed = {};
-      const textureArray = loadedTextures;
-      let i = 0;
-      for (const key in input) keyed[key] = textureArray[i++];
-      return keyed;
-    } else {
-      return loadedTextures;
-    }
-  }, [input, loadedTextures, cachedResult]);
   React.useEffect(() => {
     if (!cache) return;
     const urlTextureMap = [];
-    if (typeof input === "string") {
-      urlTextureMap.push([input, mappedTextures]);
-    } else if (Array.isArray(input)) {
+    if (typeof stableInput === "string") {
+      urlTextureMap.push([stableInput, mappedTextures]);
+    } else if (Array.isArray(stableInput)) {
       const textureArray = mappedTextures;
-      input.forEach((url, i) => urlTextureMap.push([url, textureArray[i]]));
-    } else if (IsObject(input)) {
+      stableInput.forEach((url, i) => urlTextureMap.push([url, textureArray[i]]));
+    } else if (IsObject(stableInput)) {
       const textureRecord = mappedTextures;
-      for (const key in input) {
-        const url = input[key];
+      for (const key in stableInput) {
+        const url = stableInput[key];
         urlTextureMap.push([url, textureRecord[key]]);
       }
     }
@@ -1421,7 +1445,7 @@ function useTexture(input, optionsOrOnLoad) {
       }
       return { _textureRefs: refs };
     });
-  }, [cache, input, mappedTextures, store]);
+  }, [cache, stableInput, mappedTextures, store]);
   return mappedTextures;
 }
 useTexture.preload = (url) => useLoader.preload(webgpu.TextureLoader, url);
@@ -1492,13 +1516,13 @@ function useTextures(selector) {
     };
   }, [store]);
   const subscribe = selector ? () => selector(registry) : (state) => state.textures;
-  const selected = useThree(subscribe);
+  const selected = useThree$1(subscribe);
   return selector ? selected : registry;
 }
 
 function useRenderTarget(widthOrOptions, heightOrOptions, options) {
-  const isLegacy = useThree((s) => s.isLegacy);
-  const size = useThree((s) => s.size);
+  const isLegacy = useThree$1((s) => s.isLegacy);
+  const size = useThree$1((s) => s.size);
   let width;
   let height;
   let opts;
@@ -1555,7 +1579,7 @@ function useEnvironment({
   const { extension, isCubemap } = getExtension(files);
   const loader = getLoader(extension);
   if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const renderer = useThree((state) => state.renderer);
+  const renderer = useThree$1((state) => state.renderer);
   React.useLayoutEffect(() => {
     if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
     function clearGainmapTexture() {
@@ -1582,7 +1606,7 @@ function useEnvironment({
     texture = texture.renderTarget?.texture;
   }
   texture.mapping = isCubemap ? webgpu.CubeReflectionMapping : webgpu.EquirectangularReflectionMapping;
-  texture.colorSpace = colorSpace ?? (isCubemap ? "srgb" : "srgb-linear");
+  texture.colorSpace = colorSpace ?? (isCubemap && extension !== "hdr-cube" ? "srgb" : "srgb-linear");
   return texture;
 }
 const preloadDefaultOptions = {
@@ -1635,11 +1659,12 @@ function getExtension(files) {
   const isCubemap = isArray(files) && files.length === 6;
   const isGainmap = isArray(files) && files.length === 3 && files.some((file) => file.endsWith("json"));
   const firstEntry = isArray(files) ? files[0] : files;
-  const extension = isCubemap ? "cube" : isGainmap ? "webp" : firstEntry.startsWith("data:application/exr") ? "exr" : firstEntry.startsWith("data:application/hdr") ? "hdr" : firstEntry.startsWith("data:image/jpeg") ? "jpg" : firstEntry.split(".").pop()?.split("?")?.shift()?.toLowerCase();
+  const firstExtension = firstEntry.split(".").pop()?.split("?")?.shift()?.toLowerCase();
+  const extension = isCubemap ? firstExtension === "hdr" ? "hdr-cube" : "cube" : isGainmap ? "webp" : firstEntry.startsWith("data:application/exr") ? "exr" : firstEntry.startsWith("data:application/hdr") ? "hdr" : firstEntry.startsWith("data:image/jpeg") ? "jpg" : firstExtension;
   return { extension, isCubemap, isGainmap };
 }
 function getLoader(extension) {
-  const loader = extension === "cube" ? webgpu.CubeTextureLoader : extension === "hdr" ? HDRLoader_js.HDRLoader : extension === "exr" ? EXRLoader_js.EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader_js.UltraHDRLoader : extension === "webp" ? gainmapJs.GainMapLoader : null;
+  const loader = extension === "cube" ? webgpu.CubeTextureLoader : extension === "hdr-cube" ? HDRCubeTextureLoader_js.HDRCubeTextureLoader : extension === "hdr" ? HDRLoader_js.HDRLoader : extension === "exr" ? EXRLoader_js.EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader_js.UltraHDRLoader : extension === "webp" ? gainmapJs.GainMapLoader : null;
   return loader;
 }
 
@@ -1648,7 +1673,7 @@ function useStore() {
   if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
   return store;
 }
-function useThree(selector = (state) => state, equalityFn) {
+function useThree$1(selector = (state) => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useInstanceHandle(ref) {
@@ -1690,22 +1715,28 @@ function addTail(callback) {
   return scheduler.getScheduler().onIdle(callback);
 }
 function invalidate(state, frames = 1, stackFrames = false) {
-  scheduler.getScheduler().invalidate(frames, stackFrames);
+  const rootId = state?.internal?.rootId;
+  const scheduler$1 = scheduler.getScheduler();
+  if (rootId) scheduler$1.invalidateRoot(rootId, frames, stackFrames);
+  else scheduler$1.invalidate(frames, stackFrames);
 }
-function advance(timestamp) {
-  scheduler.getScheduler().step(timestamp);
+function advance(timestamp, runGlobalEffects, state) {
+  const rootId = state?.internal?.rootId;
+  const scheduler$1 = scheduler.getScheduler();
+  if (rootId) scheduler$1.stepRoot(rootId, timestamp);
+  else scheduler$1.step(timestamp);
 }
 
-const version = "10.0.0-alpha.3";
+const version = "10.0.0-alpha.5";
 const packageData = {
 	version: version};
 
 function Xb(Tt) {
   return Tt && Tt.__esModule && Object.prototype.hasOwnProperty.call(Tt, "default") ? Tt.default : Tt;
 }
-var Rm = { exports: {} }, Og = { exports: {} }, _b;
+var Rm = { exports: {} }, Og = { exports: {} }, _b$1;
 function Kb() {
-  return _b || (_b = 1, (function(Tt) {
+  return _b$1 || (_b$1 = 1, (function(Tt) {
     Tt.exports = function(m) {
       function Yn(t, r, a, l) {
         return new uc(t, r, a, l);
@@ -13555,7 +13586,10 @@ function extend(objects) {
     catalogue[Component] = objects;
     return Component;
   } else {
-    Object.assign(catalogue, objects);
+    for (const name in objects) {
+      const object = objects[name];
+      if (isConstructor(object)) catalogue[name] = object;
+    }
   }
 }
 function validateInstance(type, props) {
@@ -13903,7 +13937,7 @@ const reconciler = /* @__PURE__ */ createReconciler({
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
   commitUpdate(instance, type, oldProps, newProps, fiber) {
-    validateInstance(type, newProps);
+    validateInstance(instance.type, newProps);
     let reconstruct = false;
     if (instance.type === "primitive" && oldProps.object !== newProps.object) reconstruct = true;
     else if (newProps.args?.length !== oldProps.args?.length) reconstruct = true;
@@ -13930,8 +13964,8 @@ const reconciler = /* @__PURE__ */ createReconciler({
     for (const prop in instance.props) {
       const value = instance.props[prop];
       if (isFromRef(value)) {
-        const ref = value[FROM_REF];
-        if (ref.current != null) resolved[prop] = ref.current;
+        const { [FROM_REF]: ref, transform } = value;
+        if (ref.current != null) resolved[prop] = transform ? transform(ref.current) : ref.current;
       }
     }
     if (Object.keys(resolved).length) applyProps(instance.object, resolved);
@@ -14212,9 +14246,8 @@ function createRoot(canvas) {
               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;
+                  renderer.setPixelRatio(calculateDpr(dpr));
+                  renderer.setSize(size2.width, size2.height, false);
                 }
                 await renderer.init();
               }
@@ -14223,7 +14256,7 @@ function createRoot(canvas) {
               state.internal.actualRenderer = renderer;
               state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
               if (canvasId && !state.internal.isSecondary) {
-                const canvasTarget = new webgpu.CanvasTarget(canvas);
+                const canvasTarget = renderer.getCanvasTarget?.();
                 const unregisterPrimary = registerPrimary(canvasId, renderer, store);
                 state.set((prev) => ({
                   internal: {
@@ -14337,7 +14370,7 @@ function createRoot(canvas) {
         const handleXRFrame = (timestamp, _frame) => {
           const state2 = store.getState();
           if (state2.frameloop === "never") return;
-          advance(timestamp);
+          advance(timestamp, true, state2);
         };
         const actualRenderer = state.internal.actualRenderer;
         const handleSessionChange = () => {
@@ -14345,7 +14378,7 @@ function createRoot(canvas) {
           const renderer2 = state2.internal.actualRenderer;
           actualRenderer.xr.enabled = actualRenderer.xr.isPresenting;
           renderer2.xr.setAnimationLoop(renderer2.xr.isPresenting ? handleXRFrame : null);
-          if (!renderer2.xr.isPresenting) invalidate();
+          if (!renderer2.xr.isPresenting) invalidate(state2);
         };
         const xr = {
           connect() {
@@ -14427,14 +14460,23 @@ function createRoot(canvas) {
         const newRootId = canvasId || scheduler$1.generateRootId();
         const unregisterRoot = scheduler$1.registerRoot(newRootId, {
           getState: () => store.getState(),
-          onError: (err) => store.getState().setError(err)
+          onError: (err) => store.getState().setError(err),
+          frameloop: store.getState().frameloop,
+          before: schedulerConfig?.before,
+          after: schedulerConfig?.after,
+          order: schedulerConfig?.order
         });
         const unregisterCanvasTarget = scheduler$1.register(
           () => {
             const state2 = store.getState();
-            if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
+            const canvasTarget = state2.internal.canvasTarget;
+            if (canvasTarget) {
               const renderer2 = state2.internal.actualRenderer;
-              renderer2.setCanvasTarget(state2.internal.canvasTarget);
+              if (renderer2.getCanvasTarget() !== canvasTarget) renderer2.setCanvasTarget(canvasTarget);
+              if (state2.internal.canvasTargetSizeDirty) {
+                state2.internal.canvasTargetSizeDirty = false;
+                renderer2.backend?.updateSize?.();
+              }
             }
           },
           {
@@ -14503,8 +14545,7 @@ function createRoot(canvas) {
             phase: "render",
             system: true,
             // Internal flag: this is a system job, not user-controlled
-            // Apply scheduler config for render ordering and rate limiting
-            ...schedulerConfig?.after && { after: schedulerConfig.after },
+            // FPS throttles only the default render job; Canvas ordering belongs to the root.
             ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
           }
         );
@@ -14523,8 +14564,21 @@ function createRoot(canvas) {
             scheduler: scheduler$1
           }
         }));
+      } else {
+        const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
+        if (constraintsChanged) {
+          scheduler$1.setRootConstraints(rootId, {
+            before: schedulerConfig?.before,
+            after: schedulerConfig?.after
+          });
+        }
+        if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
+          scheduler$1.setRootOrder(rootId, schedulerConfig?.order ?? 0);
+        }
       }
-      scheduler$1.frameloop = frameloop;
+      lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
+      lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
+      lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
       onCreated = onCreatedCallback;
       configured = true;
       resolve();
@@ -14566,18 +14620,23 @@ function unmountComponentAtNode(canvas, callback) {
   const fiber = root?.fiber;
   if (fiber) {
     const state = root?.store.getState();
-    if (state) state.internal.active = false;
+    if (state) {
+      state.internal.active = false;
+      const unregisterRoot = state.internal.unregisterRoot;
+      if (unregisterRoot) {
+        unregisterRoot();
+        state.internal.unregisterRoot = void 0;
+      }
+    }
     reconciler.updateContainer(null, fiber, null, () => {
       if (state) {
         setTimeout(() => {
           try {
             const renderer = state.internal.actualRenderer;
-            const unregisterRoot = state.internal.unregisterRoot;
-            if (unregisterRoot) unregisterRoot();
             const unregisterPrimary = state.internal.unregisterPrimary;
             if (unregisterPrimary) unregisterPrimary();
             const canvasTarget = state.internal.canvasTarget;
-            if (canvasTarget?.dispose) canvasTarget.dispose();
+            if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
             state.events.disconnect?.();
             cleanupHelperGroup(root.store);
             if (state.isLegacy && renderer) {
@@ -14718,16 +14777,11 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   const oldbg = target.background;
   const oldenv = target.environment;
   const oldSceneProps = {
-    // @ts-ignore
     backgroundBlurriness: target.backgroundBlurriness,
-    // @ts-ignore
     backgroundIntensity: target.backgroundIntensity,
-    // @ts-ignore
-    backgroundRotation: target.backgroundRotation?.clone?.() ?? [0, 0, 0],
-    // @ts-ignore
+    backgroundRotation: target.backgroundRotation.clone(),
     environmentIntensity: target.environmentIntensity,
-    // @ts-ignore
-    environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0]
+    environmentRotation: target.environmentRotation.clone()
   };
   if (background !== "only") target.environment = texture;
   if (background) target.background = texture;
@@ -14739,7 +14793,7 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   };
 }
 function EnvironmentMap({ scene, background = false, map, ...config }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     if (map) return setEnvProps(background, scene, defaultScene, map, config);
   });
@@ -14757,7 +14811,7 @@ function EnvironmentCube({
   ...rest
 }) {
   const texture = useEnvironment(rest);
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -14794,9 +14848,9 @@ function EnvironmentPortal({
   preset = void 0,
   extensions
 }) {
-  const renderer = useThree((state) => state.renderer);
-  const isLegacy = useThree((state) => state.isLegacy);
-  const defaultScene = useThree((state) => state.scene);
+  const renderer = useThree$1((state) => state.renderer);
+  const isLegacy = useThree$1((state) => state.isLegacy);
+  const defaultScene = useThree$1((state) => state.scene);
   const camera = React__namespace.useRef(null);
   const [virtualScene] = React__namespace.useState(() => new webgpu.Scene());
   const fbo = React__namespace.useMemo(() => {
@@ -14840,7 +14894,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  useFrame(() => {
+  useFrame$1(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -14880,7 +14934,7 @@ function EnvironmentGround(props) {
   ] });
 }
 function EnvironmentColor({ color, scene }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     if (color === void 0) return;
     const target = resolveScene(scene || defaultScene);
@@ -15118,9 +15172,9 @@ function CanvasImpl({
   React__namespace.useMemo(() => extend(THREE), []);
   const Bridge = useBridge();
   const backgroundProps = React__namespace.useMemo(() => parseBackground(background), [background]);
-  const hasInitialSizeRef = React__namespace.useRef(false);
+  const [hasInitialSize, setHasInitialSize] = React__namespace.useState(false);
   const measureConfig = React__namespace.useMemo(() => {
-    if (!hasInitialSizeRef.current) {
+    if (!hasInitialSize) {
       return {
         ...resize,
         scroll: resize?.scroll ?? true,
@@ -15132,7 +15186,7 @@ function CanvasImpl({
       debounce: { scroll: 50, resize: 0 },
       ...resize
     };
-  }, [resize, hasInitialSizeRef.current]);
+  }, [hasInitialSize, resize]);
   const [containerRef, containerRect] = useMeasure__default(measureConfig);
   const effectiveSize = React__namespace.useMemo(() => {
     let w = width ?? containerRect.width;
@@ -15148,9 +15202,7 @@ function CanvasImpl({
       left: containerRect.left
     };
   }, [width, height, containerRect, forceEven]);
-  if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
-    hasInitialSizeRef.current = true;
-  }
+  if (!hasInitialSize && effectiveSize.width > 0 && effectiveSize.height > 0) setHasInitialSize(true);
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => canvasRef.current);
@@ -15264,6 +15316,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };
@@ -15322,20 +15375,36 @@ function CanvasImpl({
     }
   );
 }
-function Canvas(props) {
+function Canvas$1(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(itsFine.FiberProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(CanvasImpl, { ...props }) });
 }
 
+const isObjectLike = (value) => value !== null && (typeof value === "object" || typeof value === "function");
+const hasValidLegacyNodeMarkers = (value) => {
+  const hasUuid = "uuid" in value;
+  const hasNodeType = "nodeType" in value;
+  const uuid = Reflect.get(value, "uuid");
+  const nodeType = Reflect.get(value, "nodeType");
+  return (hasUuid || hasNodeType) && (!hasUuid || uuid === void 0 || typeof uuid === "string") && (!hasNodeType || nodeType === void 0 || nodeType === null || typeof nodeType === "string");
+};
+const isUniformNode = (value) => isObjectLike(value) && "isUniformNode" in value && value.isUniformNode === true;
+const isTSLNode = (value) => isObjectLike(value) && (Reflect.get(value, "isNode") === true || Reflect.get(value, "shaderNode") !== void 0 && typeof Reflect.get(value, "id") === "number" || hasValidLegacyNodeMarkers(value));
+const isBufferLike = (value) => ArrayBuffer.isView(value) && !(value instanceof DataView) || isObjectLike(value) && ("isBufferAttribute" in value || "isInterleavedBufferAttribute" in value || isTSLNode(value));
+const isStorageLike = (value) => isObjectLike(value) && ("isTexture" in value || "isData3DTexture" in value || isTSLNode(value));
+
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _a;
+var _a, _b;
 const INTERNAL_DATA = Symbol("ScopedStore.data");
-_a = INTERNAL_DATA;
+const INTERNAL_IS_LEAF = Symbol("ScopedStore.isLeaf");
+_b = INTERNAL_DATA, _a = INTERNAL_IS_LEAF;
 const _ScopedStore = class _ScopedStore {
-  constructor(data) {
+  constructor(data, isLeaf) {
+    __publicField(this, _b);
     __publicField(this, _a);
     this[INTERNAL_DATA] = data;
+    this[INTERNAL_IS_LEAF] = isLeaf;
     return new Proxy(this, {
       get(target, prop, receiver) {
         if (typeof prop === "string") {
@@ -15369,10 +15438,10 @@ const _ScopedStore = class _ScopedStore {
    * If the key doesn't exist or isn't a scope object, returns an empty ScopedStore.
    */
   scope(key) {
-    const data = this[INTERNAL_DATA][key];
-    return new _ScopedStore(
-      data && typeof data === "object" ? data : {}
-    );
+    const value = this[INTERNAL_DATA][key];
+    const isLeaf = this[INTERNAL_IS_LEAF];
+    const scope = value && typeof value === "object" && !isLeaf(value) ? value : {};
+    return new _ScopedStore(scope, isLeaf);
   }
   /**
    * Check if a key exists in the store.
@@ -15388,8 +15457,8 @@ const _ScopedStore = class _ScopedStore {
   }
 };
 let ScopedStore = _ScopedStore;
-function createScopedStore(data) {
-  return new ScopedStore(data);
+function createScopedStore(data, isLeaf) {
+  return new ScopedStore(data, isLeaf);
 }
 function createLazyCreatorState(state, store) {
   let _uniforms = null;
@@ -15400,22 +15469,22 @@ function createLazyCreatorState(state, store) {
   return Object.create(state, {
     uniforms: {
       get() {
-        return _uniforms ?? (_uniforms = createScopedStore(view("uniforms")));
+        return _uniforms ?? (_uniforms = createScopedStore(view("uniforms"), isUniformNode));
       }
     },
     nodes: {
       get() {
-        return _nodes ?? (_nodes = createScopedStore(view("nodes")));
+        return _nodes ?? (_nodes = createScopedStore(view("nodes"), isTSLNode));
       }
     },
     buffers: {
       get() {
-        return _buffers ?? (_buffers = createScopedStore(view("buffers")));
+        return _buffers ?? (_buffers = createScopedStore(view("buffers"), isBufferLike));
       }
     },
     gpuStorage: {
       get() {
-        return _gpuStorage ?? (_gpuStorage = createScopedStore(view("gpuStorage")));
+        return _gpuStorage ?? (_gpuStorage = createScopedStore(view("gpuStorage"), isStorageLike));
       }
     }
   });
@@ -15474,6 +15543,11 @@ function createTextureOperations(set) {
     removeMultiple: (keys) => removeTextures(set, keys)
   };
 }
+function scopedNodeName(scope, name) {
+  const raw = scope ? `${scope}_${name}` : name;
+  const safe = raw.replace(/[^A-Za-z0-9_]/g, "_");
+  return /^[A-Za-z_]/.test(safe) ? safe : `_${safe}`;
+}
 function extractTSLValue(value) {
   if (value === null || value === void 0) return value;
   if (typeof value !== "object") return value;
@@ -15511,7 +15585,7 @@ function vectorize(inObject) {
     return extractTSLValue(inObject);
   }
   if (obj.isVector2 || obj.isVector3 || obj.isVector4) return inObject;
-  if (obj.isMatrix3 || obj.isMatrix4) return inObject;
+  if (obj.isMatrix2 || 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;
@@ -15569,22 +15643,21 @@ function useScopedResource(options) {
   return entries;
 }
 
-const isUniformNode$1 = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
 function useUniforms(creatorOrScope, scope) {
   const store = usePrimaryStore();
   const removeUniforms2 = React.useCallback(
-    (names, targetScope) => removeResourceEntries(store, "uniforms", Array.isArray(names) ? names : [names], targetScope, isUniformNode$1),
+    (names, targetScope) => removeResourceEntries(store, "uniforms", Array.isArray(names) ? names : [names], targetScope, isUniformNode),
     [store]
   );
   const clearUniforms = React.useCallback(
-    (targetScope) => clearResourceEntries(store, "uniforms", targetScope, isUniformNode$1),
+    (targetScope) => clearResourceEntries(store, "uniforms", targetScope, isUniformNode),
     [store]
   );
   const rebuildUniforms = React.useCallback(
     (targetScope) => rebuildResource(store, "uniforms", targetScope),
     [store]
   );
-  const inputForMemoization = React.useMemo(() => {
+  const processedInput = React.useMemo(() => {
     let raw = creatorOrScope;
     if (is.fun(creatorOrScope)) {
       const wrappedState = createLazyCreatorState(store.getState(), store);
@@ -15595,23 +15668,24 @@ function useUniforms(creatorOrScope, scope) {
       for (const [key, value] of Object.entries(raw)) {
         normalized[key] = vectorize(value);
       }
-      return normalized;
+      return { candidates: raw, normalized };
     }
-    return raw;
+    return { candidates: raw, normalized: raw };
   }, [creatorOrScope, store]);
-  const memoizedInput = useCompareMemoize(inputForMemoization);
+  const memoizedInput = useCompareMemoize(processedInput.normalized);
   const isReader = memoizedInput === void 0 || typeof memoizedInput === "string";
   const storeUniforms = usePrimaryThree((s) => s.uniforms);
   const created = useScopedResource({
     store,
     kind: "uniforms",
     scope: isReader ? void 0 : scope,
-    isLeaf: isUniformNode$1,
+    isLeaf: isUniformNode,
     input: memoizedInput,
     create: () => {
       if (isReader) return {};
-      if (typeof memoizedInput !== "object" || memoizedInput === null) throw new Error("Invalid uniform input");
-      return memoizedInput;
+      if (typeof processedInput.candidates !== "object" || processedInput.candidates === null)
+        throw new Error("Invalid uniform input");
+      return processedInput.candidates;
     },
     prepare: (name, candidate) => createUniform(name, candidate, scope),
     reconcile: (existing, candidate) => {
@@ -15633,7 +15707,7 @@ function useUniforms(creatorOrScope, scope) {
     uniforms = storeUniforms;
   } else if (typeof memoizedInput === "string") {
     const scopeData = storeUniforms[memoizedInput];
-    uniforms = scopeData && !isUniformNode$1(scopeData) ? scopeData : {};
+    uniforms = scopeData && !isUniformNode(scopeData) ? scopeData : {};
   }
   return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms, rebuildUniforms };
 }
@@ -15648,7 +15722,7 @@ function removeUniforms(set, names, scope) {
       return { uniforms: { ...state.uniforms, [scope]: currentScope } };
     }
     const uniforms = { ...state.uniforms };
-    for (const name of names) if (isUniformNode$1(uniforms[name])) delete uniforms[name];
+    for (const name of names) if (isUniformNode(uniforms[name])) delete uniforms[name];
     return { uniforms };
   });
 }
@@ -15662,7 +15736,7 @@ function clearRootUniforms(set) {
   set((state) => {
     const uniforms = {};
     for (const [key, value] of Object.entries(state.uniforms)) {
-      if (!isUniformNode$1(value)) uniforms[key] = value;
+      if (!isUniformNode(value)) uniforms[key] = value;
     }
     return { uniforms };
   });
@@ -15672,8 +15746,7 @@ function createUniform(inName, node, scope) {
   const inValue = vectorize(node);
   const newUniform = tsl.uniform(inValue);
   if (typeof newUniform.setName === "function") {
-    const name = scope ? `${scope}_${inName}` : inName;
-    newUniform.setName(name);
+    newUniform.setName(scopedNodeName(scope, inName));
   }
   return newUniform;
 }
@@ -15699,12 +15772,10 @@ function hasEqualsMethod(value) {
 function isSameThreeType(a, b) {
   const obj_a = a;
   const obj_b = b;
-  return obj_a.isColor && obj_b.isColor || obj_a.isMatrix3 && obj_b.isMatrix3 || obj_a.isMatrix4 && obj_b.isMatrix4 || obj_a.isEuler && obj_b.isEuler || obj_a.isQuaternion && obj_b.isQuaternion;
+  return obj_a.isColor && obj_b.isColor || obj_a.isMatrix2 && obj_b.isMatrix2 || obj_a.isMatrix3 && obj_b.isMatrix3 || obj_a.isMatrix4 && obj_b.isMatrix4 || obj_a.isEuler && obj_b.isEuler || obj_a.isQuaternion && obj_b.isQuaternion;
 }
 
 const uniformOf = tsl.uniform;
-const isUniformNode = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
-const isTSLNode$1 = (value) => value !== null && typeof value === "object" && "uuid" in value && "nodeType" in value;
 function useUniform(name, value) {
   const store = useStore();
   const registered = useScopedResource({
@@ -15716,7 +15787,7 @@ function useUniform(name, value) {
     create: () => value === void 0 ? {} : { [name]: value },
     prepare: createNamedUniform,
     reconcile: (existing2) => {
-      if (value !== void 0 && !isTSLNode$1(value) && !isUniformNode(value)) {
+      if (value !== void 0 && !isTSLNode(value) && !isUniformNode(value)) {
         existing2.value = typeof value === "string" ? new webgpu.Color(value) : value;
       }
     }
@@ -15732,7 +15803,7 @@ function createNamedUniform(name, value) {
   let node;
   if (isUniformNode(value)) {
     node = value;
-  } else if (isTSLNode$1(value)) {
+  } else if (isTSLNode(value)) {
     node = uniformOf(value);
   } else if (typeof value === "string") {
     node = tsl.uniform(new webgpu.Color(value));
@@ -15745,7 +15816,6 @@ function createNamedUniform(name, value) {
   return node;
 }
 
-const isTSLNode = (value) => value !== null && typeof value === "object" && ("uuid" in value || "nodeType" in value);
 function useNodes(creatorOrScope, scope) {
   const store = usePrimaryStore();
   const removeNodes2 = React.useCallback(
@@ -15772,7 +15842,8 @@ function useNodes(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, node) => {
-      node.setName?.(scope ? `${scope}.${name}` : name);
+      const setName = Reflect.get(node, "setName");
+      if (typeof setName === "function") setName.call(node, scopedNodeName(scope, name));
       return node;
     }
   });
@@ -15827,13 +15898,6 @@ function useLocalNodes(creator) {
   }, [store, creator, uniforms, nodes, textures, hmrVersion]);
 }
 
-const isBufferLike = (value) => {
-  if (value === null || typeof value !== "object") return false;
-  if (ArrayBuffer.isView(value)) return true;
-  if ("isBufferAttribute" in value) return true;
-  if ("uuid" in value || "nodeType" in value) return true;
-  return false;
-};
 const disposeBuffer = (buffer) => {
   if (buffer === null || typeof buffer !== "object") return;
   if ("dispose" in buffer && typeof buffer.dispose === "function") {
@@ -15880,9 +15944,8 @@ function useBuffers(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, buffer) => {
-      if ("setName" in buffer && typeof buffer.setName === "function") {
-        buffer.setName(scope ? `${scope}.${name}` : name);
-      }
+      const setName = Reflect.get(buffer, "setName");
+      if (typeof setName === "function") setName.call(buffer, scopedNodeName(scope, name));
       return buffer;
     }
   });
@@ -15899,13 +15962,6 @@ function rebuildAllBuffers(store, scope) {
   rebuildResource(store, "buffers", scope);
 }
 
-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") {
@@ -15952,10 +16008,9 @@ function useGPUStorage(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, storage) => {
-      const label = scope ? `${scope}.${name}` : name;
-      if ("setName" in storage && typeof storage.setName === "function") {
-        storage.setName(label);
-      }
+      const label = scopedNodeName(scope, name);
+      const setName = Reflect.get(storage, "setName");
+      if (typeof setName === "function") setName.call(storage, label);
       if ("name" in storage && typeof storage.name === "string") {
         storage.name = label;
       }
@@ -15983,9 +16038,10 @@ function rebuildAllStorage(store, scope) {
 
 function useRenderPipeline(mainCB, setupCB) {
   const store = useStore();
-  const { scene, camera, renderer, isLegacy } = useThree();
+  const { scene, camera, renderer, isLegacy } = useThree$1();
   const callbacksRanRef = React.useRef(false);
   const scenePassCacheRef = React.useRef(null);
+  const forceScenePassRebuildRef = React.useRef(false);
   const mainCBRef = React.useRef(mainCB);
   const setupCBRef = React.useRef(setupCB);
   mainCBRef.current = mainCB;
@@ -15993,7 +16049,7 @@ function useRenderPipeline(mainCB, setupCB) {
   const [rebuildVersion, setRebuildVersion] = React.useState(0);
   React.useEffect(() => {
     callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = true;
   }, []);
   const clearPasses = React.useCallback(() => {
     store.setState({ passes: {} });
@@ -16003,12 +16059,14 @@ function useRenderPipeline(mainCB, setupCB) {
       renderPipeline: null,
       passes: {}
     });
+    scenePassCacheRef.current?.scenePass.dispose();
     callbacksRanRef.current = false;
     scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = false;
   }, [store]);
   const rebuild = React.useCallback(() => {
     callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = true;
     setRebuildVersion((v) => v + 1);
   }, []);
   React.useLayoutEffect(() => {
@@ -16016,6 +16074,9 @@ function useRenderPipeline(mainCB, setupCB) {
       throw new Error("useRenderPipeline is only available with WebGPU renderer. Set renderer prop on Canvas.");
     }
     if (!renderer || !scene || !camera) return;
+    if (!("isWebGPURenderer" in renderer)) {
+      throw new Error("useRenderPipeline: renderer is not a WebGPURenderer but isLegacy is false.");
+    }
     const state = store.getState();
     const set = store.setState;
     try {
@@ -16026,21 +16087,33 @@ function useRenderPipeline(mainCB, setupCB) {
         pipeline = new webgpu.RenderPipeline(renderer);
         justCreatedPipeline = true;
       }
-      const cacheValid = scenePassCacheRef.current && scenePassCacheRef.current.sceneUuid === scene.uuid && scenePassCacheRef.current.cameraUuid === camera.uuid;
+      const cacheValid = !forceScenePassRebuildRef.current && scenePassCacheRef.current && scenePassCacheRef.current.sceneUuid === scene.uuid && scenePassCacheRef.current.cameraUuid === camera.uuid;
+      let outgoingScenePass = null;
       let scenePass;
       if (cacheValid) {
         scenePass = scenePassCacheRef.current.scenePass;
       } else {
+        outgoingScenePass = scenePassCacheRef.current?.scenePass ?? null;
         scenePass = tsl.pass(scene, camera);
         scenePassCacheRef.current = { sceneUuid: scene.uuid, cameraUuid: camera.uuid, scenePass };
+        forceScenePassRebuildRef.current = false;
       }
       currentPasses.scenePass = scenePass;
-      if (!pipeline.outputNode || justCreatedPipeline) pipeline.outputNode = scenePass;
+      let outputNodeChanged = false;
+      if (!pipeline.outputNode || justCreatedPipeline || pipeline.outputNode === outgoingScenePass) {
+        pipeline.outputNode = scenePass;
+        outputNodeChanged = true;
+      }
       set({ renderPipeline: pipeline, passes: currentPasses });
       const shouldRunCallbacks = justCreatedPipeline || !callbacksRanRef.current || !cacheValid;
       if (shouldRunCallbacks) {
         if (setupCBRef.current) {
-          const freshState = store.getState();
+          const freshState = Object.assign({}, store.getState(), {
+            renderPipeline: pipeline,
+            passes: { ...currentPasses, scenePass },
+            renderer,
+            isLegacy: false
+          });
           const setupResult = setupCBRef.current(freshState);
           if (setupResult && typeof setupResult === "object") {
             currentPasses = { ...currentPasses, ...setupResult };
@@ -16048,33 +16121,38 @@ function useRenderPipeline(mainCB, setupCB) {
           }
         }
         if (mainCBRef.current) {
-          const freshState = store.getState();
+          const freshState = Object.assign({}, store.getState(), {
+            renderPipeline: pipeline,
+            passes: { ...currentPasses, scenePass },
+            renderer,
+            isLegacy: false
+          });
           const mainResult = mainCBRef.current(freshState);
           if (mainResult && typeof mainResult === "object") {
             currentPasses = { ...currentPasses, ...mainResult };
             set({ passes: currentPasses });
           }
         }
+        outputNodeChanged = true;
         callbacksRanRef.current = true;
       }
+      if (outputNodeChanged) pipeline.needsUpdate = true;
+      if (outgoingScenePass && outgoingScenePass !== scenePass) outgoingScenePass.dispose();
     } catch (error) {
       console.warn("[useRenderPipeline] Setup failed; the render pipeline was not configured:", error);
     }
   }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
-  const passes = useThree((s) => s.passes);
-  const renderPipeline = useThree((s) => s.renderPipeline);
-  return {
-    passes,
-    renderPipeline,
-    clearPasses,
-    reset,
-    rebuild,
-    // isReady indicates if RenderPipeline is configured and ready for rendering
-    isReady: renderPipeline !== null
-  };
+  const passes = useThree$1((s) => s.passes);
+  const renderPipeline = useThree$1((s) => s.renderPipeline);
+  const actions = { passes, clearPasses, reset, rebuild };
+  if (renderPipeline) return { ...actions, isReady: true, renderPipeline };
+  return { ...actions, isReady: false, renderPipeline: null };
 }
 
 extend(THREE);
+const useThree = useThree$1;
+const useFrame = useFrame$1;
+const Canvas = Canvas$1;
 
 exports.Scheduler = scheduler.Scheduler;
 exports.getScheduler = scheduler.getScheduler;