@react-three/fiber 10.0.0-canary.8f5b4d3 → 10.0.0-canary.ac30da2

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');
@@ -54,6 +53,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 +70,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();
@@ -1071,17 +1074,10 @@ 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);
+      internal.canvasTargetSizeDirty = true;
     }
     if (camera !== oldCamera) {
       oldCamera = camera;
@@ -1143,7 +1139,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 +1158,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();
@@ -1308,6 +1308,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,25 +1331,26 @@ 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");
   React.useLayoutEffect(() => {
     if (cachedResult) return;
     if (onLoadCalledForRef.current === inputKey) return;
@@ -1371,28 +1377,28 @@ function useTexture(input, optionsOrOnLoad) {
   }, [renderer, loadedTextures, cachedResult]);
   const mappedTextures = React.useMemo(() => {
     if (cachedResult) return cachedResult;
-    if (IsObject(input)) {
+    if (IsObject(stableInput)) {
       const keyed = {};
       const textureArray = loadedTextures;
       let i = 0;
-      for (const key in input) keyed[key] = textureArray[i++];
+      for (const key in stableInput) keyed[key] = textureArray[i++];
       return keyed;
     } else {
       return loadedTextures;
     }
-  }, [input, loadedTextures, cachedResult]);
+  }, [stableInput, 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 +1427,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 +1498,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 +1561,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() {
@@ -1648,7 +1654,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) {
@@ -12979,7 +12985,10 @@ function releaseInternalPointerCapture(internal, obj, pointerId) {
   const captureData = pointerState.captured.get(obj);
   if (captureData) {
     pointerState.captured.delete(obj);
-    captureData.target.releasePointerCapture(pointerId);
+    try {
+      captureData.target.releasePointerCapture?.(pointerId);
+    } catch {
+    }
   }
 }
 function swapInteractivity(store, object, newObject) {
@@ -13073,7 +13082,9 @@ function createEvents(store) {
         state2.events.compute?.(event, state2, state2.previousRoot?.getState());
         if (state2.raycaster.camera === void 0) state2.raycaster.camera = null;
       }
-      return state2.raycaster.camera ? state2.raycaster.intersectObject(obj, true) : [];
+      if (!state2.raycaster.camera) return [];
+      obj.updateWorldMatrix(true, true);
+      return state2.raycaster.intersectObject(obj, true);
     }
     let hits = eventsObjects.flatMap(handleRaycast).sort((a, b) => {
       const aInteractivePriority = a.object.userData?.interactivePriority;
@@ -14430,6 +14441,10 @@ function createRoot(canvas) {
             if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
               const renderer2 = state2.internal.actualRenderer;
               renderer2.setCanvasTarget(state2.internal.canvasTarget);
+              if (state2.internal.canvasTargetSizeDirty) {
+                state2.internal.canvasTargetSizeDirty = false;
+                renderer2.backend?.updateSize?.();
+              }
             }
           },
           {
@@ -14734,7 +14749,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);
   });
@@ -14752,7 +14767,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,
@@ -14789,9 +14804,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(() => {
@@ -14835,7 +14850,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  useFrame(() => {
+  useFrame$1(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -14875,7 +14890,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);
@@ -15259,6 +15274,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };
@@ -15469,6 +15485,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;
@@ -15667,8 +15688,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;
 }
@@ -15767,7 +15787,7 @@ function useNodes(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, node) => {
-      node.setName?.(scope ? `${scope}.${name}` : name);
+      node.setName?.(scopedNodeName(scope, name));
       return node;
     }
   });
@@ -15876,7 +15896,7 @@ function useBuffers(creatorOrScope, scope) {
     },
     prepare: (name, buffer) => {
       if ("setName" in buffer && typeof buffer.setName === "function") {
-        buffer.setName(scope ? `${scope}.${name}` : name);
+        buffer.setName(scopedNodeName(scope, name));
       }
       return buffer;
     }
@@ -15947,7 +15967,7 @@ function useGPUStorage(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, storage) => {
-      const label = scope ? `${scope}.${name}` : name;
+      const label = scopedNodeName(scope, name);
       if ("setName" in storage && typeof storage.setName === "function") {
         storage.setName(label);
       }
@@ -15978,9 +15998,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;
@@ -15988,7 +16009,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: {} });
@@ -15998,12 +16019,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(() => {
@@ -16021,16 +16044,23 @@ 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) {
@@ -16050,14 +16080,17 @@ function useRenderPipeline(mainCB, setupCB) {
             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);
+  const passes = useThree$1((s) => s.passes);
+  const renderPipeline = useThree$1((s) => s.renderPipeline);
   return {
     passes,
     renderPipeline,
@@ -16070,6 +16103,8 @@ function useRenderPipeline(mainCB, setupCB) {
 }
 
 extend(THREE);
+const useThree = useThree$1;
+const useFrame = useFrame$1;
 
 exports.Scheduler = scheduler.Scheduler;
 exports.getScheduler = scheduler.getScheduler;

package/dist/webgpu/index.d.cts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera, WebGPURendererParameters } from 'three/webgpu';
 import { Inspector } from 'three/addons/inspector/Inspector.js';
@@ -40,6 +41,8 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = false;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
 declare const WebGLRenderer: {
     new (): {};
 };
@@ -61,7 +64,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
   WebGLRendererParameters: WebGLRendererParameters,
-  WebGLShadowMap: WebGLShadowMap
+  WebGLShadowMap: WebGLShadowMap,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================
@@ -499,6 +503,18 @@ interface InternalState {
    * @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
    */
   canvasTarget?: CanvasTarget
+  /**
+   * Set when this root's canvas target has been resized and the backend's cached render pass
+   * descriptor (which holds a depth-stencil view built once per canvas) is therefore stale.
+   *
+   * Flushed by the canvas-target job in the `start` phase, which is the only place this root's
+   * target is guaranteed to be the renderer's active one — `backend.updateSize()` operates on
+   * whatever `getCanvasTarget()` returns, so calling it from the resize subscription would
+   * invalidate some other canvas's descriptor instead.
+   *
+   * @see https://github.com/pmndrs/react-three-fiber/issues/3847
+   */
+  canvasTargetSizeDirty?: boolean
   /**
    * Whether multi-canvas rendering is active.
    * True when any canvas uses `renderer={{ primaryCanvas: 'id' }}` to share a renderer.
@@ -1868,50 +1884,6 @@ declare namespace useLoader {
     var loader: typeof getLoader;
 }
 
-/**
- * Frame hook with phase-based ordering, priority, and FPS throttling.
- *
- * Always delivers full RootState — works both inside and outside Canvas context:
- * - Inside Canvas: Full RootState (renderer, scene, camera, etc.)
- * - Outside Canvas: The job registers immediately but the callback is held until a
- *   Canvas adopts it, then runs with full RootState. For hostless / standalone
- *   frame loops with no Canvas, use `@pmndrs/scheduler` directly.
- *
- * Returns a controls object for manual stepping, pausing, and resuming.
- *
- * @param callback - Function called each frame with (state, delta). Optional if you only need scheduler access.
- * @param priorityOrOptions - Either a priority number (backwards compat) or options object
- * @returns Controls object with step(), stepAll(), pause(), resume(), isPaused, id, scheduler
- *
- * @example
- * // Simple priority (backwards compat)
- * useFrame((state, delta) => { ... }, 5)
- *
- * @example
- * // With phase-based ordering
- * useFrame((state, delta) => { ... }, { phase: 'physics' })
- *
- * @example
- * // Outside Canvas - callback waits for a Canvas, then always has full state
- * function UI() {
- *   useFrame((state, delta) => { syncUI(state.camera) });
- *   return <button>...</button>;
- * }
- *
- * @example
- * // Hostless / standalone loop (no Canvas) - use @pmndrs/scheduler directly
- * import { getScheduler } from '@pmndrs/scheduler'
- * getScheduler().register((state, delta) => { updateGame(delta) })
- *
- * @example
- * // Scheduler-only access (no callback)
- * const { scheduler } = useFrame()
- * scheduler.pauseJob('some-job-id')
- *
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
- */
-declare function useFrame(callback?: FrameNextCallback, priorityOrOptions?: number | UseFrameNextOptions): FrameNextControls;
-
 declare const IsObject: (url: unknown) => url is Record<string, string>;
 type TextureArray<T> = T extends string[] ? Texture$1[] : never;
 type TextureRecord<T> = T extends Record<string, string> ? {
@@ -2097,11 +2069,6 @@ declare function useRenderTarget(width: number, height: number, options?: Render
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
  */
 declare function useStore(): RootStore;
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
- */
-declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
 /**
  * Exposes an object's {@link Instance}.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
@@ -4086,6 +4053,10 @@ declare function createTextureOperations(set: StoreApi<RootState>['setState']):
  * - Callbacks receive full RootState for flexibility
  * - No auto-cleanup on unmount - use reset() for explicit cleanup
  * - Scene/camera changes trigger scenePass recreation
+ * - A replaced scenePass is disposed once the new graph is installed, so rebuild() does not
+ *   strand its render target (and MRT attachments) on the GPU
+ * - Any run that changes the output node sets RenderPipeline.needsUpdate, so rebuild() actually
+ *   recompiles instead of silently keeping the first compiled graph
  *
  * @param mainCB - Main callback to configure outputNode and create effect passes
  * @param setupCB - Optional setup callback to configure MRT on scenePass
@@ -4163,5 +4134,23 @@ interface WebGPURootState extends Omit<RootState, 'renderer' | 'gl' | 'internal'
   internal: WebGPUInternalState
 }
 
+/**
+ * @fileoverview WebGPU entry point - WebGPU only, no legacy WebGL
+ *
+ * This entry point is for apps that want to use ONLY WebGPURenderer.
+ * Includes WebGPU-specific hooks (useUniforms, useNodes, useTextures).
+ * Auto-extends THREE with WebGPU node materials (MeshBasicNodeMaterial, etc.)
+ *
+ * Usage:
+ *   import { Canvas, useFrame, useUniforms } from '@react-three/fiber/webgpu'
+ */
+
+/** `useThree` narrowed to WebGPU state — `state.renderer` is a `WebGPURenderer`. */
+type UseThreeWebGPU = <T = WebGPURootState>(selector?: (state: WebGPURootState) => T, equalityFn?: <U>(state: U, newState: U) => boolean) => T;
+/** `useFrame` narrowed to WebGPU state — the callback's `state.renderer` is a `WebGPURenderer`. */
+type UseFrameWebGPU = (callback?: FrameCallback$1<WebGPURootState>, priorityOrOptions?: number | UseFrameNextOptions) => FrameNextControls;
+declare const useThree: UseThreeWebGPU;
+declare const useFrame: UseFrameWebGPU;
+
 export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, three_d as ReactThreeFiber, Texture, _roots, 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, 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, swapInteractivity, 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 };
-export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseTextureOptions, UseTexturesReturn, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };
+export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseFrameWebGPU, UseTextureOptions, UseTexturesReturn, UseThreeWebGPU, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };