@react-three/fiber 10.0.0-canary.07c4f9d → 10.0.0-canary.0ea97c0

package/dist/webgpu/index.mjs

@@ -612,7 +612,12 @@ function diffProps(instance, newProps) {
   const changedProps = {};
   for (const prop in newProps) {
     if (RESERVED_PROPS.includes(prop)) continue;
-    if (is.equ(newProps[prop], instance.props[prop])) continue;
+    if (is.equ(newProps[prop], instance.props[prop])) {
+      const value = newProps[prop];
+      if (!isCopyable(value)) continue;
+      const { target } = resolve(instance.object, prop);
+      if (!isCopyable(target) || target.constructor !== value.constructor) continue;
+    }
     changedProps[prop] = newProps[prop];
     for (const other in newProps) {
       if (other.startsWith(`${prop}-`)) changedProps[other] = newProps[other];
@@ -1058,7 +1063,8 @@ const createStore = (invalidate, advance) => {
       const resizeTarget = canvasTarget ?? actualRenderer;
       if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
       resizeTarget.setSize(size.width, size.height, false);
-      internal.canvasTargetSizeDirty = true;
+      const activeTarget = actualRenderer.getCanvasTarget?.();
+      if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
     }
     if (camera !== oldCamera) {
       oldCamera = camera;
@@ -14220,9 +14226,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();
               }
@@ -14231,7 +14236,7 @@ function createRoot(canvas) {
               state.internal.actualRenderer = renderer;
               state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
               if (canvasId && !state.internal.isSecondary) {
-                const canvasTarget = new CanvasTarget(canvas);
+                const canvasTarget = renderer.getCanvasTarget?.();
                 const unregisterPrimary = registerPrimary(canvasId, renderer, store);
                 state.set((prev) => ({
                   internal: {
@@ -14444,9 +14449,10 @@ function createRoot(canvas) {
         const unregisterCanvasTarget = scheduler.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?.();
@@ -14610,7 +14616,7 @@ function unmountComponentAtNode(canvas, callback) {
             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) {
@@ -15151,9 +15157,9 @@ function CanvasImpl({
   React.useMemo(() => extend(THREE), []);
   const Bridge = useBridge();
   const backgroundProps = React.useMemo(() => parseBackground(background), [background]);
-  const hasInitialSizeRef = React.useRef(false);
+  const [hasInitialSize, setHasInitialSize] = React.useState(false);
   const measureConfig = React.useMemo(() => {
-    if (!hasInitialSizeRef.current) {
+    if (!hasInitialSize) {
       return {
         ...resize,
         scroll: resize?.scroll ?? true,
@@ -15165,7 +15171,7 @@ function CanvasImpl({
       debounce: { scroll: 50, resize: 0 },
       ...resize
     };
-  }, [resize, hasInitialSizeRef.current]);
+  }, [hasInitialSize, resize]);
   const [containerRef, containerRect] = useMeasure(measureConfig);
   const effectiveSize = React.useMemo(() => {
     let w = width ?? containerRect.width;
@@ -15181,9 +15187,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.useRef(null);
   const divRef = React.useRef(null);
   React.useImperativeHandle(ref, () => canvasRef.current);
@@ -16042,7 +16046,7 @@ function useRenderPipeline(mainCB, setupCB) {
       renderPipeline: null,
       passes: {}
     });
-    scenePassCacheRef.current?.scenePass?.dispose?.();
+    scenePassCacheRef.current?.scenePass.dispose();
     callbacksRanRef.current = false;
     scenePassCacheRef.current = null;
     forceScenePassRebuildRef.current = false;
@@ -16057,6 +16061,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 {
@@ -16090,7 +16097,9 @@ function useRenderPipeline(mainCB, setupCB) {
         if (setupCBRef.current) {
           const freshState = Object.assign({}, store.getState(), {
             renderPipeline: pipeline,
-            passes: currentPasses
+            passes: { ...currentPasses, scenePass },
+            renderer,
+            isLegacy: false
           });
           const setupResult = setupCBRef.current(freshState);
           if (setupResult && typeof setupResult === "object") {
@@ -16101,7 +16110,9 @@ function useRenderPipeline(mainCB, setupCB) {
         if (mainCBRef.current) {
           const freshState = Object.assign({}, store.getState(), {
             renderPipeline: pipeline,
-            passes: currentPasses
+            passes: { ...currentPasses, scenePass },
+            renderer,
+            isLegacy: false
           });
           const mainResult = mainCBRef.current(freshState);
           if (mainResult && typeof mainResult === "object") {
@@ -16113,22 +16124,16 @@ function useRenderPipeline(mainCB, setupCB) {
         callbacksRanRef.current = true;
       }
       if (outputNodeChanged) pipeline.needsUpdate = true;
-      if (outgoingScenePass && outgoingScenePass !== scenePass) outgoingScenePass.dispose?.();
+      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$1((s) => s.passes);
   const renderPipeline = useThree$1((s) => s.renderPipeline);
-  return {
-    passes,
-    renderPipeline,
-    clearPasses,
-    reset,
-    rebuild,
-    // isReady indicates if RenderPipeline is configured and ready for rendering
-    isReady: renderPipeline !== null
-  };
+  const actions = { passes, clearPasses, reset, rebuild };
+  if (renderPipeline) return { ...actions, isReady: true, renderPipeline };
+  return { ...actions, isReady: false, renderPipeline: null };
 }
 
 extend(THREE);

package/package.json

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