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

package/dist/webgpu/index.mjs

@@ -915,7 +915,7 @@ const createStore = (invalidate, advance) => {
                 size: newSize,
                 viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
               }));
-              getScheduler().invalidate();
+              get().invalidate();
             }
           }
           return;
@@ -930,15 +930,16 @@ const createStore = (invalidate, advance) => {
           viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
           _sizeImperative: true
         }));
-        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) getScheduler().setRootFrameloop(rootId, frameloop);
         set(() => ({ frameloop }));
-        getScheduler().frameloop = frameloop;
       },
       setError: (error) => set(() => ({ error })),
       error: null,
@@ -1057,7 +1058,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;
@@ -1243,6 +1245,13 @@ function useFrame$1(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 getScheduler().getJobRootId(id);
+      },
       /**
        * Manually step this job only.
        * Bypasses FPS limiting - always runs.
@@ -1259,6 +1268,14 @@ function useFrame$1(callback, priorityOrOptions) {
       stepAll: (timestamp) => {
         getScheduler().step(timestamp);
       },
+      /**
+       * Request frames for this job's owning root without waking sibling roots.
+       */
+      invalidate: (frames, stackFrames) => {
+        const scheduler3 = 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.
@@ -1676,13 +1693,19 @@ function addTail(callback) {
   return getScheduler().onIdle(callback);
 }
 function invalidate(state, frames = 1, stackFrames = false) {
-  getScheduler().invalidate(frames, stackFrames);
+  const rootId = state?.internal?.rootId;
+  const scheduler = getScheduler();
+  if (rootId) scheduler.invalidateRoot(rootId, frames, stackFrames);
+  else scheduler.invalidate(frames, stackFrames);
 }
-function advance(timestamp) {
-  getScheduler().step(timestamp);
+function advance(timestamp, runGlobalEffects, state) {
+  const rootId = state?.internal?.rootId;
+  const scheduler = getScheduler();
+  if (rootId) scheduler.stepRoot(rootId, timestamp);
+  else scheduler.step(timestamp);
 }
 
-const version = "10.0.0-alpha.3";
+const version = "10.0.0-alpha.4";
 const packageData = {
 	version: version};
 
@@ -14198,9 +14221,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();
               }
@@ -14209,7 +14231,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: {
@@ -14323,7 +14345,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 = () => {
@@ -14331,7 +14353,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() {
@@ -14413,14 +14435,19 @@ function createRoot(canvas) {
         const newRootId = canvasId || scheduler.generateRootId();
         const unregisterRoot = scheduler.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.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?.();
@@ -14493,8 +14520,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 }
           }
         );
@@ -14513,8 +14539,21 @@ function createRoot(canvas) {
             scheduler
           }
         }));
+      } else {
+        const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
+        if (constraintsChanged) {
+          scheduler.setRootConstraints(rootId, {
+            before: schedulerConfig?.before,
+            after: schedulerConfig?.after
+          });
+        }
+        if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
+          scheduler.setRootOrder(rootId, schedulerConfig?.order ?? 0);
+        }
       }
-      scheduler.frameloop = frameloop;
+      lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
+      lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
+      lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
       onCreated = onCreatedCallback;
       configured = true;
       resolve();
@@ -14556,18 +14595,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) {
@@ -15108,9 +15152,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,
@@ -15122,7 +15166,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;
@@ -15138,9 +15182,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);
@@ -15254,6 +15296,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };
@@ -15998,7 +16041,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;
@@ -16013,6 +16056,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 {
@@ -16044,7 +16090,12 @@ function useRenderPipeline(mainCB, setupCB) {
       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 };
@@ -16052,7 +16103,12 @@ 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 };
@@ -16063,22 +16119,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.0f7fc9b",
+  "version": "10.0.0-canary.0fc81c2",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@babel/runtime": "^7.28.6",
     "@monogrid/gainmap-js": "^3.4.0",
-    "@pmndrs/scheduler": "^0.1.0",
+    "@pmndrs/scheduler": "^0.2.0",
     "dequal": "^2.0.3",
     "its-fine": "^2.0.0",
     "react-use-measure": "^2.1.7",