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

package/dist/legacy.cjs

@@ -50,11 +50,9 @@ const Tb__default = /*#__PURE__*/_interopDefaultCompat(Tb);
 
 const R3F_BUILD_LEGACY = true;
 const R3F_BUILD_WEBGPU = false;
-const Inspector = class Inspector2 {
-  constructor() {
-    throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
-  }
-};
+async function loadInspector() {
+  throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
+}
 const WebGPURenderer = class WebGPURenderer2 {
   constructor() {
     throw new Error("WebGPURenderer is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
@@ -67,12 +65,12 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
   CubeRenderTargetCompat: three.WebGLCubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: three.WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [three__namespace]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();
@@ -1070,17 +1068,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;
@@ -1142,7 +1133,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];
@@ -1307,6 +1302,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));
 }
@@ -1332,18 +1332,19 @@ function useTexture(input, optionsOrOnLoad) {
   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(
     three.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;
@@ -1370,28 +1371,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]]);
       }
     }
@@ -1420,7 +1421,7 @@ function useTexture(input, optionsOrOnLoad) {
       }
       return { _textureRefs: refs };
     });
-  }, [cache, input, mappedTextures, store]);
+  }, [cache, stableInput, mappedTextures, store]);
   return mappedTextures;
 }
 useTexture.preload = (url) => useLoader.preload(three.TextureLoader, url);
@@ -12978,7 +12979,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) {
@@ -13072,7 +13076,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;
@@ -14400,6 +14406,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?.();
+              }
             }
           },
           {
@@ -15132,6 +15142,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };

package/dist/legacy.d.cts

@@ -38,9 +38,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = false;
 
-declare const Inspector: {
-    new (): {};
-};
+type Inspector = never;
+/** Not available on the legacy (WebGL-only) entry. */
+declare function loadInspector(): Promise<never>;
 declare const WebGPURenderer: {
     new (): {};
 };
@@ -58,7 +58,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [THREE$1]);
 
 //* Utility Types ==============================
@@ -496,6 +497,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.

package/dist/legacy.d.mts

@@ -38,9 +38,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = false;
 
-declare const Inspector: {
-    new (): {};
-};
+type Inspector = never;
+/** Not available on the legacy (WebGL-only) entry. */
+declare function loadInspector(): Promise<never>;
 declare const WebGPURenderer: {
     new (): {};
 };
@@ -58,7 +58,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [THREE$1]);
 
 //* Utility Types ==============================
@@ -496,6 +497,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.

package/dist/legacy.d.ts

@@ -38,9 +38,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = false;
 
-declare const Inspector: {
-    new (): {};
-};
+type Inspector = never;
+/** Not available on the legacy (WebGL-only) entry. */
+declare function loadInspector(): Promise<never>;
 declare const WebGPURenderer: {
     new (): {};
 };
@@ -58,7 +58,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [THREE$1]);
 
 //* Utility Types ==============================
@@ -496,6 +497,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.

package/dist/legacy.mjs

@@ -30,11 +30,9 @@ function _mergeNamespaces(n, m) {
 
 const R3F_BUILD_LEGACY = true;
 const R3F_BUILD_WEBGPU = false;
-const Inspector = class Inspector2 {
-  constructor() {
-    throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
-  }
-};
+async function loadInspector() {
+  throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
+}
 const WebGPURenderer = class WebGPURenderer2 {
   constructor() {
     throw new Error("WebGPURenderer is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
@@ -47,12 +45,12 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
   CubeRenderTargetCompat: WebGLCubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [three]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();
@@ -1050,17 +1048,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;
@@ -1122,7 +1113,11 @@ function useLoader(loader, input, extensions, onProgress, cacheKey) {
   const results = cacheKeys.map(
     (key, index) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
   );
-  return Array.isArray(input) ? results : results[0];
+  const stableRef = 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];
@@ -1287,6 +1282,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));
 }
@@ -1312,18 +1312,19 @@ function useTexture(input, optionsOrOnLoad) {
   const onLoadRef = useRef(onLoad);
   onLoadRef.current = onLoad;
   const onLoadCalledForRef = useRef(null);
-  const urls = useMemo(() => getUrls(input), [input]);
+  const inputKey = useMemo(() => inputSignature(input), [input]);
+  const stableInput = useMemo(() => input, [inputKey]);
+  const urls = useMemo(() => getUrls(stableInput), [stableInput]);
   const cachedResult = 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(
     TextureLoader,
-    IsObject(input) ? Object.values(input) : input
+    IsObject(stableInput) ? Object.values(stableInput) : stableInput
   );
-  const inputKey = urls.join("\0");
   useLayoutEffect(() => {
     if (cachedResult) return;
     if (onLoadCalledForRef.current === inputKey) return;
@@ -1350,28 +1351,28 @@ function useTexture(input, optionsOrOnLoad) {
   }, [renderer, loadedTextures, cachedResult]);
   const mappedTextures = 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]);
   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]]);
       }
     }
@@ -1400,7 +1401,7 @@ function useTexture(input, optionsOrOnLoad) {
       }
       return { _textureRefs: refs };
     });
-  }, [cache, input, mappedTextures, store]);
+  }, [cache, stableInput, mappedTextures, store]);
   return mappedTextures;
 }
 useTexture.preload = (url) => useLoader.preload(TextureLoader, url);
@@ -12958,7 +12959,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) {
@@ -13052,7 +13056,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;
@@ -14380,6 +14386,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?.();
+              }
             }
           },
           {
@@ -15112,6 +15122,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };