@react-three/fiber 10.0.0-canary.0d86c23 → 10.0.0-canary.0f7fc9b

package/dist/webgpu/index.mjs

@@ -1,6 +1,5 @@
 import * as webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, CanvasTarget, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGPURenderer, HalfFloatType, Color, Vector4, RenderPipeline } from 'three/webgpu';
-import { Inspector } from 'three/addons/inspector/Inspector.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useLayoutEffect, useEffect, useContext, useImperativeHandle, useCallback, useState } from 'react';
@@ -34,6 +33,10 @@ function _mergeNamespaces(n, m) {
 
 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(
@@ -47,13 +50,13 @@ const WebGLCubeRenderTarget = null;
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTargetCompat: CubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: RenderTarget,
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
-  WebGLRenderer: WebGLRenderer
+  WebGLRenderer: WebGLRenderer,
+  loadInspector: loadInspector
 }, [webgpu]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();
@@ -1051,17 +1054,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;
@@ -1123,7 +1119,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];
@@ -1138,7 +1138,7 @@ useLoader.clear = function(loader, input, cacheKey) {
 };
 useLoader.loader = getLoader$1;
 
-function useFrame(callback, priorityOrOptions) {
+function useFrame$1(callback, priorityOrOptions) {
   const store = React.useContext(context);
   const isInsideCanvas = store !== null;
   const scheduler = getScheduler();
@@ -1288,6 +1288,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));
 }
@@ -1306,25 +1311,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 = 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;
@@ -1351,28 +1357,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]]);
       }
     }
@@ -1401,7 +1407,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);
@@ -1472,13 +1478,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;
@@ -1535,7 +1541,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);
   useLayoutEffect(() => {
     if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
     function clearGainmapTexture() {
@@ -1628,7 +1634,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) {
@@ -14415,6 +14421,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?.();
+              }
             }
           },
           {
@@ -14719,7 +14729,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.useLayoutEffect(() => {
     if (map) return setEnvProps(background, scene, defaultScene, map, config);
   });
@@ -14737,7 +14747,7 @@ function EnvironmentCube({
   ...rest
 }) {
   const texture = useEnvironment(rest);
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -14774,9 +14784,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.useRef(null);
   const [virtualScene] = React.useState(() => new Scene());
   const fbo = React.useMemo(() => {
@@ -14820,7 +14830,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  useFrame(() => {
+  useFrame$1(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -14860,7 +14870,7 @@ function EnvironmentGround(props) {
   ] });
 }
 function EnvironmentColor({ color, scene }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     if (color === void 0) return;
     const target = resolveScene(scene || defaultScene);
@@ -15454,6 +15464,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;
@@ -15652,8 +15667,7 @@ function createUniform(inName, node, scope) {
   const inValue = vectorize(node);
   const newUniform = uniform(inValue);
   if (typeof newUniform.setName === "function") {
-    const name = scope ? `${scope}_${inName}` : inName;
-    newUniform.setName(name);
+    newUniform.setName(scopedNodeName(scope, inName));
   }
   return newUniform;
 }
@@ -15752,7 +15766,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;
     }
   });
@@ -15861,7 +15875,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;
     }
@@ -15932,7 +15946,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);
       }
@@ -15963,9 +15977,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 = useRef(false);
   const scenePassCacheRef = useRef(null);
+  const forceScenePassRebuildRef = useRef(false);
   const mainCBRef = useRef(mainCB);
   const setupCBRef = useRef(setupCB);
   mainCBRef.current = mainCB;
@@ -15973,7 +15988,7 @@ function useRenderPipeline(mainCB, setupCB) {
   const [rebuildVersion, setRebuildVersion] = useState(0);
   useEffect(() => {
     callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = true;
   }, []);
   const clearPasses = useCallback(() => {
     store.setState({ passes: {} });
@@ -15983,12 +15998,14 @@ function useRenderPipeline(mainCB, setupCB) {
       renderPipeline: null,
       passes: {}
     });
+    scenePassCacheRef.current?.scenePass?.dispose?.();
     callbacksRanRef.current = false;
     scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = false;
   }, [store]);
   const rebuild = useCallback(() => {
     callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = true;
     setRebuildVersion((v) => v + 1);
   }, []);
   useLayoutEffect(() => {
@@ -16006,16 +16023,23 @@ function useRenderPipeline(mainCB, setupCB) {
         pipeline = new 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 = 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) {
@@ -16035,14 +16059,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,
@@ -16055,5 +16082,7 @@ function useRenderPipeline(mainCB, setupCB) {
 }
 
 extend(THREE);
+const useThree = useThree$1;
+const useFrame = useFrame$1;
 
 export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, 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$1 as 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "10.0.0-canary.0d86c23",
+  "version": "10.0.0-canary.0f7fc9b",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",

package/readme.md

@@ -143,7 +143,7 @@ Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx
 <details>
   <summary>Show React Native example</summary>
 
-This example relies on react 18 and uses `expo-cli`, but you can create a bare project with their template or with the `react-native` CLI.
+This example uses `expo-cli`, but you can create a bare project with their template or with the `react-native` CLI.
 
 ```bash
 # Install expo-cli, this will create our app