@react-three/fiber 10.0.0-canary.7dfc4e4 → 10.0.0-canary.979dc2d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/legacy.d.ts CHANGED
@@ -359,6 +359,33 @@ type BufferRecord = Record<string, BufferLike>
359
359
  */
360
360
  type BufferStore = Record<string, BufferLike | BufferRecord>
361
361
 
362
+ //* Node Types (useNodes) ========================================
363
+
364
+ /**
365
+ * Structural shape of a TSL node as stored on `state.nodes`.
366
+ *
367
+ * Deliberately minimal rather than three's nominal `Node`: in @types/three several node classes
368
+ * TSL hands back (OperatorNode, ConstNode, ...) do not extend `Node` cleanly, so a `Node` bound
369
+ * would reject values `useNodes` creators legitimately return. This is the same shape
370
+ * `useNodes` already constrains creators to (`TSLNodeLike`).
371
+ */
372
+ interface NodeLike {
373
+ uuid?: string
374
+ nodeType?: string | null
375
+ /** label method for chaining - sets the node's label and returns self */
376
+ label?: ((label: string) => NodeLike) | string
377
+ setName?: (name: string) => this
378
+ }
379
+
380
+ /** Flat record of TSL nodes (no nested scopes) */
381
+ type NodeRecord = Record<string, NodeLike>
382
+
383
+ /**
384
+ * Node store that can contain both root-level nodes and scoped node objects.
385
+ * Structure: { wobble: OperatorNode, fx: { blur: ShaderCallable } }
386
+ */
387
+ type NodeStore = Record<string, NodeLike | NodeRecord>
388
+
362
389
  //* Storage Types (useGPUStorage) ========================================
363
390
 
364
391
  /**
@@ -492,8 +519,13 @@ interface InternalState {
492
519
  /** Container for child attachment (scene for root, original container for portals) */
493
520
  container?: THREE$1.Object3D
494
521
  /**
495
- * CanvasTarget for multi-canvas WebGPU rendering.
496
- * Created for all WebGPU canvases to support renderer sharing.
522
+ * The CanvasTarget this root sizes and renders through.
523
+ *
524
+ * A primary (`<Canvas id>`) owns the renderer's default target -- the one three itself built
525
+ * around the canvas element -- so sizing it is sizing the renderer. A secondary owns a target
526
+ * R3F created for its own element. Either way there is exactly one target per canvas element,
527
+ * and the canvas-target job makes it the renderer's active one before this root renders.
528
+ * Absent on WebGL and on an id-less WebGPU canvas, where the renderer is sized directly.
497
529
  * @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
498
530
  */
499
531
  canvasTarget?: CanvasTarget
@@ -618,7 +650,7 @@ interface RootState {
618
650
  /** Global TSL uniform nodes - root-level uniforms + scoped sub-objects. Use useUniforms() hook */
619
651
  uniforms: UniformStore
620
652
  /** Global TSL nodes - root-level nodes + scoped sub-objects. Use useNodes() hook */
621
- nodes: Record<string, any>
653
+ nodes: NodeStore
622
654
  /** Global TSL buffer nodes - root-level buffers + scoped sub-objects. Use useBuffers() hook */
623
655
  buffers: BufferStore
624
656
  /** Global GPU storage (textures, etc.) - root-level storage + scoped sub-objects. Use useGPUStorage() hook */
@@ -630,7 +662,7 @@ interface RootState {
630
662
  /** WebGPU RenderPipeline instance - use useRenderPipeline() hook */
631
663
  renderPipeline: ThreeRenderPipeline | null
632
664
  /** Global TSL pass nodes for render pipeline - use useRenderPipeline() hook */
633
- passes: Record<string, any>
665
+ passes: PassRecord
634
666
  /** Internal version counter for HMR - incremented by rebuildNodes/rebuildUniforms to bust memoization */
635
667
  _hmrVersion: number
636
668
  /** Internal: whether setSize() has taken ownership of canvas dimensions */
@@ -718,12 +750,19 @@ type DefaultRendererProps = {
718
750
  */
719
751
  interface CanvasSchedulerConfig {
720
752
  /**
721
- * Render this canvas after another canvas completes.
722
- * Pass the `id` of another canvas.
753
+ * Run this Canvas root before the referenced Canvas root id(s).
754
+ */
755
+ before?: string | string[]
756
+ /**
757
+ * Run this Canvas root after the referenced Canvas root id(s).
758
+ */
759
+ after?: string | string[]
760
+ /**
761
+ * Numeric root order. Lower values run first.
723
762
  */
724
- after?: string
763
+ order?: number
725
764
  /**
726
- * Limit this canvas's render rate (frames per second).
765
+ * Limit this Canvas's default render job (frames per second).
727
766
  */
728
767
  fps?: number
729
768
  }
@@ -1171,7 +1210,33 @@ declare global {
1171
1210
  * ergonomics. The result is three's structural type, so members stay in sync with the
1172
1211
  * installed three instead of needing to be mirrored by hand.
1173
1212
  */
1174
- type UniformNode<T = unknown> = three_webgpu.UniformNode<unknown, T>
1213
+ type UniformNode<T = unknown> = three_webgpu.UniformNode<UniformNodeTypeFor<T>, T>
1214
+
1215
+ /**
1216
+ * three's node type name for a uniform value type, mirroring the `uniform()` overloads.
1217
+ * A `UniformNode<number>` is a `Node<'float'>`, so TSL math (`.mul`, `.add`, ...) accepts it.
1218
+ * Unknown or unlisted value types resolve to `unknown`, which TSL math rejects: narrow with
1219
+ * `as UniformNode<number>` (or the matching value type) at the call site.
1220
+ */
1221
+ type UniformNodeTypeFor<T> = T extends number
1222
+ ? 'float'
1223
+ : T extends boolean
1224
+ ? 'bool'
1225
+ : T extends three_webgpu.Color
1226
+ ? 'color'
1227
+ : T extends three_webgpu.Vector2
1228
+ ? 'vec2'
1229
+ : T extends three_webgpu.Vector3
1230
+ ? 'vec3'
1231
+ : T extends three_webgpu.Vector4
1232
+ ? 'vec4'
1233
+ : T extends three_webgpu.Matrix2
1234
+ ? 'mat2'
1235
+ : T extends three_webgpu.Matrix3
1236
+ ? 'mat3'
1237
+ : T extends three_webgpu.Matrix4
1238
+ ? 'mat4'
1239
+ : unknown
1175
1240
 
1176
1241
  /**
1177
1242
  * ShaderCallable - the return type of Fn()
@@ -1324,30 +1389,97 @@ declare global {
1324
1389
  */
1325
1390
  type ThreeRenderPipeline = three_webgpu.RenderPipeline
1326
1391
 
1327
- /** Pass record - stores TSL pass nodes for render pipeline */
1328
- type PassRecord = Record<string, any>
1392
+ /**
1393
+ * The pass `useRenderPipeline` creates for you: three's own `PassNode`, as returned by
1394
+ * `pass(scene, camera)` from `three/tsl`. Referenced from three so members like
1395
+ * `getTextureNode`, `setMRT` and `dispose` track the installed version.
1396
+ */
1397
+ type ScenePassNode = three_webgpu.PassNode
1398
+
1399
+ /**
1400
+ * Pass record - stores TSL pass nodes for render pipeline.
1401
+ *
1402
+ * `scenePass` is the only key the library owns. It is optional here because this is also the
1403
+ * shape of `state.passes`, which is `{}` before the pipeline exists and again after `reset()`
1404
+ * or `clearPasses()`. Inside the callbacks it is always present; see
1405
+ * {@link RenderPipelineCallbackState}.
1406
+ *
1407
+ * Every other key is user-registered, via a callback's return value. Those are TSL nodes of
1408
+ * any kind, not only passes: texture reads of an MRT attachment, effect nodes, extra
1409
+ * `pass()` instances. `Node` is the common base, so that is the bound. Narrow at the call
1410
+ * site when you need a member, e.g. `passes.velocity as TextureNode`.
1411
+ */
1412
+ interface PassRecord {
1413
+ scenePass?: ScenePassNode
1414
+ [key: string]: three_webgpu.Node
1415
+ }
1416
+
1417
+ /**
1418
+ * State passed to pipeline callbacks after the active pipeline has been created.
1419
+ *
1420
+ * `passes.scenePass` is required here: the hook installs the default scene pass before either
1421
+ * callback runs, so callbacks can use it without a guard or a cast.
1422
+ *
1423
+ * `renderer` is narrowed to `WebGPURenderer` and `isLegacy` to `false`: the hook throws under
1424
+ * the legacy renderer before either callback can run, so a callback never sees WebGL.
1425
+ */
1426
+ type RenderPipelineCallbackState = RootState & {
1427
+ renderPipeline: ThreeRenderPipeline
1428
+ passes: PassRecord & { scenePass: ScenePassNode }
1429
+ renderer: three_webgpu.WebGPURenderer
1430
+ isLegacy: false
1431
+ }
1432
+
1433
+ /**
1434
+ * What a callback may return to register entries into `state.passes`.
1435
+ *
1436
+ * `scenePass` is reserved. The hook owns that entry and its lifecycle: it caches the pass it
1437
+ * created, and `rebuild()` / `reset()` dispose that cached pass. A callback overwriting the
1438
+ * store entry would leave the store pointing at a node the hook never disposes, and the hook
1439
+ * disposing a pass nothing references. So returning it is a type error.
1440
+ */
1441
+ type RegisteredPasses = Record<string, three_webgpu.Node> & { scenePass?: never }
1329
1442
 
1330
1443
  /** Setup callback - runs first to configure MRT, create additional passes */
1331
- type RenderPipelineSetupCallback = (state: RootState) => PassRecord | void
1444
+ type RenderPipelineSetupCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1332
1445
 
1333
1446
  /** Main callback - runs second to configure outputNode, create effect passes */
1334
- type RenderPipelineMainCallback = (state: RootState) => PassRecord | void
1447
+ type RenderPipelineMainCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1335
1448
 
1336
- /** Return type for useRenderPipeline hook */
1337
- interface UseRenderPipelineReturn {
1449
+ /** The imperative half of useRenderPipeline's return value, present in every state */
1450
+ interface UseRenderPipelineActions {
1338
1451
  /** Current passes from state */
1339
1452
  passes: PassRecord
1340
- /** RenderPipeline instance (null if not initialized) */
1341
- renderPipeline: ThreeRenderPipeline | null
1342
1453
  /** Clear all passes from state */
1343
1454
  clearPasses: () => void
1344
1455
  /** Reset RenderPipeline entirely (clears PP + passes) */
1345
1456
  reset: () => void
1346
1457
  /** Re-run setup/main callbacks with current closure values */
1347
1458
  rebuild: () => void
1348
- /** True when RenderPipeline is configured and ready */
1349
- isReady: boolean
1350
1459
  }
1460
+
1461
+ /**
1462
+ * Return type for useRenderPipeline hook, discriminated on `isReady`.
1463
+ *
1464
+ * `if (isReady)` narrows `renderPipeline` to non-null, which is what the docs already tell
1465
+ * callers to check. `passes.scenePass` deliberately stays optional in the ready branch:
1466
+ * `clearPasses()` empties the record while leaving the pipeline in place.
1467
+ */
1468
+ type UseRenderPipelineReturn = UseRenderPipelineActions &
1469
+ (
1470
+ | {
1471
+ /** True when RenderPipeline is configured and ready */
1472
+ isReady: true
1473
+ /** RenderPipeline instance */
1474
+ renderPipeline: ThreeRenderPipeline
1475
+ }
1476
+ | {
1477
+ /** False until the pipeline has been created */
1478
+ isReady: false
1479
+ /** Not initialized yet, or torn down by reset() */
1480
+ renderPipeline: null
1481
+ }
1482
+ )
1351
1483
  }
1352
1484
 
1353
1485
  type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
@@ -3765,4 +3897,4 @@ declare function isOnce(value: unknown): value is {
3765
3897
  declare function Canvas(props: CanvasProps): react_jsx_runtime.JSX.Element;
3766
3898
 
3767
3899
  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, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, 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, reconciler, registerPrimary, removeInteractivity, resolve, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useMutableCallback, useRenderTarget, useStore, useTexture, useTextures, useThree, waitForPrimary };
3768
- export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferLike, BufferRecord, BufferStore, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, DefaultGLProps, DefaultRendererProps, Disposable, DisposeOptions, 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, LegacyInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeProps, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, LegacyRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, LegacyRootState as RootState, RootStore, SetBlock, Size, StorageLike, StorageRecord, StorageStore, Subscription, TSLNodeInput, TextureInput, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UseTextureOptions, UseTexturesReturn, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, XRManager, XRPointerConfig };
3900
+ export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferLike, BufferRecord, BufferStore, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, DefaultGLProps, DefaultRendererProps, Disposable, DisposeOptions, 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, LegacyInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeLike, NodeProps, NodeRecord, NodeStore, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, LegacyRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, LegacyRootState as RootState, RootStore, SetBlock, Size, StorageLike, StorageRecord, StorageStore, Subscription, TSLNodeInput, TextureInput, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UseTextureOptions, UseTexturesReturn, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, XRManager, XRPointerConfig };
package/dist/legacy.mjs CHANGED
@@ -1052,7 +1052,8 @@ const createStore = (invalidate, advance) => {
1052
1052
  const resizeTarget = canvasTarget ?? actualRenderer;
1053
1053
  if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
1054
1054
  resizeTarget.setSize(size.width, size.height, false);
1055
- internal.canvasTargetSizeDirty = true;
1055
+ const activeTarget = actualRenderer.getCanvasTarget?.();
1056
+ if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
1056
1057
  }
1057
1058
  if (camera !== oldCamera) {
1058
1059
  oldCamera = camera;
@@ -1698,7 +1699,7 @@ function advance(timestamp, runGlobalEffects, state) {
1698
1699
  else scheduler.step(timestamp);
1699
1700
  }
1700
1701
 
1701
- const version = "10.0.0-alpha.3";
1702
+ const version = "10.0.0-alpha.4";
1702
1703
  const packageData = {
1703
1704
  version: version};
1704
1705
 
@@ -14401,14 +14402,18 @@ function createRoot(canvas) {
14401
14402
  const unregisterRoot = scheduler.registerRoot(newRootId, {
14402
14403
  getState: () => store.getState(),
14403
14404
  onError: (err) => store.getState().setError(err),
14404
- frameloop: store.getState().frameloop
14405
+ frameloop: store.getState().frameloop,
14406
+ before: schedulerConfig?.before,
14407
+ after: schedulerConfig?.after,
14408
+ order: schedulerConfig?.order
14405
14409
  });
14406
14410
  const unregisterCanvasTarget = scheduler.register(
14407
14411
  () => {
14408
14412
  const state2 = store.getState();
14409
- if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
14413
+ const canvasTarget = state2.internal.canvasTarget;
14414
+ if (canvasTarget) {
14410
14415
  const renderer2 = state2.internal.actualRenderer;
14411
- renderer2.setCanvasTarget(state2.internal.canvasTarget);
14416
+ if (renderer2.getCanvasTarget() !== canvasTarget) renderer2.setCanvasTarget(canvasTarget);
14412
14417
  if (state2.internal.canvasTargetSizeDirty) {
14413
14418
  state2.internal.canvasTargetSizeDirty = false;
14414
14419
  renderer2.backend?.updateSize?.();
@@ -14481,8 +14486,7 @@ function createRoot(canvas) {
14481
14486
  phase: "render",
14482
14487
  system: true,
14483
14488
  // Internal flag: this is a system job, not user-controlled
14484
- // Apply scheduler config for render ordering and rate limiting
14485
- ...schedulerConfig?.after && { after: schedulerConfig.after },
14489
+ // FPS throttles only the default render job; Canvas ordering belongs to the root.
14486
14490
  ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
14487
14491
  }
14488
14492
  );
@@ -14501,7 +14505,21 @@ function createRoot(canvas) {
14501
14505
  scheduler
14502
14506
  }
14503
14507
  }));
14508
+ } else {
14509
+ const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
14510
+ if (constraintsChanged) {
14511
+ scheduler.setRootConstraints(rootId, {
14512
+ before: schedulerConfig?.before,
14513
+ after: schedulerConfig?.after
14514
+ });
14515
+ }
14516
+ if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
14517
+ scheduler.setRootOrder(rootId, schedulerConfig?.order ?? 0);
14518
+ }
14504
14519
  }
14520
+ lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
14521
+ lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
14522
+ lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
14505
14523
  onCreated = onCreatedCallback;
14506
14524
  configured = true;
14507
14525
  resolve();
@@ -14559,7 +14577,7 @@ function unmountComponentAtNode(canvas, callback) {
14559
14577
  const unregisterPrimary = state.internal.unregisterPrimary;
14560
14578
  if (unregisterPrimary) unregisterPrimary();
14561
14579
  const canvasTarget = state.internal.canvasTarget;
14562
- if (canvasTarget?.dispose) canvasTarget.dispose();
14580
+ if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
14563
14581
  state.events.disconnect?.();
14564
14582
  cleanupHelperGroup(root.store);
14565
14583
  if (state.isLegacy && renderer) {
@@ -15003,9 +15021,9 @@ function CanvasImpl({
15003
15021
  React.useMemo(() => extend(THREE), []);
15004
15022
  const Bridge = useBridge();
15005
15023
  const backgroundProps = React.useMemo(() => parseBackground(background), [background]);
15006
- const hasInitialSizeRef = React.useRef(false);
15024
+ const [hasInitialSize, setHasInitialSize] = React.useState(false);
15007
15025
  const measureConfig = React.useMemo(() => {
15008
- if (!hasInitialSizeRef.current) {
15026
+ if (!hasInitialSize) {
15009
15027
  return {
15010
15028
  ...resize,
15011
15029
  scroll: resize?.scroll ?? true,
@@ -15017,7 +15035,7 @@ function CanvasImpl({
15017
15035
  debounce: { scroll: 50, resize: 0 },
15018
15036
  ...resize
15019
15037
  };
15020
- }, [resize, hasInitialSizeRef.current]);
15038
+ }, [hasInitialSize, resize]);
15021
15039
  const [containerRef, containerRect] = useMeasure(measureConfig);
15022
15040
  const effectiveSize = React.useMemo(() => {
15023
15041
  let w = width ?? containerRect.width;
@@ -15033,9 +15051,7 @@ function CanvasImpl({
15033
15051
  left: containerRect.left
15034
15052
  };
15035
15053
  }, [width, height, containerRect, forceEven]);
15036
- if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
15037
- hasInitialSizeRef.current = true;
15038
- }
15054
+ if (!hasInitialSize && effectiveSize.width > 0 && effectiveSize.height > 0) setHasInitialSize(true);
15039
15055
  const canvasRef = React.useRef(null);
15040
15056
  const divRef = React.useRef(null);
15041
15057
  React.useImperativeHandle(ref, () => canvasRef.current);
@@ -1078,7 +1078,8 @@ const createStore = (invalidate, advance) => {
1078
1078
  const resizeTarget = canvasTarget ?? actualRenderer;
1079
1079
  if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
1080
1080
  resizeTarget.setSize(size.width, size.height, false);
1081
- internal.canvasTargetSizeDirty = true;
1081
+ const activeTarget = actualRenderer.getCanvasTarget?.();
1082
+ if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
1082
1083
  }
1083
1084
  if (camera !== oldCamera) {
1084
1085
  oldCamera = camera;
@@ -1724,7 +1725,7 @@ function advance(timestamp, runGlobalEffects, state) {
1724
1725
  else scheduler$1.step(timestamp);
1725
1726
  }
1726
1727
 
1727
- const version = "10.0.0-alpha.3";
1728
+ const version = "10.0.0-alpha.4";
1728
1729
  const packageData = {
1729
1730
  version: version};
1730
1731
 
@@ -14240,9 +14241,8 @@ function createRoot(canvas) {
14240
14241
  if (!renderer.hasInitialized?.()) {
14241
14242
  const size2 = computeInitialSize(canvas, propsSize);
14242
14243
  if (size2.width > 0 && size2.height > 0) {
14243
- const pixelRatio = calculateDpr(dpr);
14244
- canvas.width = size2.width * pixelRatio;
14245
- canvas.height = size2.height * pixelRatio;
14244
+ renderer.setPixelRatio(calculateDpr(dpr));
14245
+ renderer.setSize(size2.width, size2.height, false);
14246
14246
  }
14247
14247
  await renderer.init();
14248
14248
  }
@@ -14251,7 +14251,7 @@ function createRoot(canvas) {
14251
14251
  state.internal.actualRenderer = renderer;
14252
14252
  state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
14253
14253
  if (canvasId && !state.internal.isSecondary) {
14254
- const canvasTarget = new webgpu.CanvasTarget(canvas);
14254
+ const canvasTarget = renderer.getCanvasTarget?.();
14255
14255
  const unregisterPrimary = registerPrimary(canvasId, renderer, store);
14256
14256
  state.set((prev) => ({
14257
14257
  internal: {
@@ -14456,14 +14456,18 @@ function createRoot(canvas) {
14456
14456
  const unregisterRoot = scheduler$1.registerRoot(newRootId, {
14457
14457
  getState: () => store.getState(),
14458
14458
  onError: (err) => store.getState().setError(err),
14459
- frameloop: store.getState().frameloop
14459
+ frameloop: store.getState().frameloop,
14460
+ before: schedulerConfig?.before,
14461
+ after: schedulerConfig?.after,
14462
+ order: schedulerConfig?.order
14460
14463
  });
14461
14464
  const unregisterCanvasTarget = scheduler$1.register(
14462
14465
  () => {
14463
14466
  const state2 = store.getState();
14464
- if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
14467
+ const canvasTarget = state2.internal.canvasTarget;
14468
+ if (canvasTarget) {
14465
14469
  const renderer2 = state2.internal.actualRenderer;
14466
- renderer2.setCanvasTarget(state2.internal.canvasTarget);
14470
+ if (renderer2.getCanvasTarget() !== canvasTarget) renderer2.setCanvasTarget(canvasTarget);
14467
14471
  if (state2.internal.canvasTargetSizeDirty) {
14468
14472
  state2.internal.canvasTargetSizeDirty = false;
14469
14473
  renderer2.backend?.updateSize?.();
@@ -14536,8 +14540,7 @@ function createRoot(canvas) {
14536
14540
  phase: "render",
14537
14541
  system: true,
14538
14542
  // Internal flag: this is a system job, not user-controlled
14539
- // Apply scheduler config for render ordering and rate limiting
14540
- ...schedulerConfig?.after && { after: schedulerConfig.after },
14543
+ // FPS throttles only the default render job; Canvas ordering belongs to the root.
14541
14544
  ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
14542
14545
  }
14543
14546
  );
@@ -14556,7 +14559,21 @@ function createRoot(canvas) {
14556
14559
  scheduler: scheduler$1
14557
14560
  }
14558
14561
  }));
14562
+ } else {
14563
+ const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
14564
+ if (constraintsChanged) {
14565
+ scheduler$1.setRootConstraints(rootId, {
14566
+ before: schedulerConfig?.before,
14567
+ after: schedulerConfig?.after
14568
+ });
14569
+ }
14570
+ if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
14571
+ scheduler$1.setRootOrder(rootId, schedulerConfig?.order ?? 0);
14572
+ }
14559
14573
  }
14574
+ lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
14575
+ lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
14576
+ lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
14560
14577
  onCreated = onCreatedCallback;
14561
14578
  configured = true;
14562
14579
  resolve();
@@ -14614,7 +14631,7 @@ function unmountComponentAtNode(canvas, callback) {
14614
14631
  const unregisterPrimary = state.internal.unregisterPrimary;
14615
14632
  if (unregisterPrimary) unregisterPrimary();
14616
14633
  const canvasTarget = state.internal.canvasTarget;
14617
- if (canvasTarget?.dispose) canvasTarget.dispose();
14634
+ if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
14618
14635
  state.events.disconnect?.();
14619
14636
  cleanupHelperGroup(root.store);
14620
14637
  if (state.isLegacy && renderer) {
@@ -15155,9 +15172,9 @@ function CanvasImpl({
15155
15172
  React__namespace.useMemo(() => extend(THREE), []);
15156
15173
  const Bridge = useBridge();
15157
15174
  const backgroundProps = React__namespace.useMemo(() => parseBackground(background), [background]);
15158
- const hasInitialSizeRef = React__namespace.useRef(false);
15175
+ const [hasInitialSize, setHasInitialSize] = React__namespace.useState(false);
15159
15176
  const measureConfig = React__namespace.useMemo(() => {
15160
- if (!hasInitialSizeRef.current) {
15177
+ if (!hasInitialSize) {
15161
15178
  return {
15162
15179
  ...resize,
15163
15180
  scroll: resize?.scroll ?? true,
@@ -15169,7 +15186,7 @@ function CanvasImpl({
15169
15186
  debounce: { scroll: 50, resize: 0 },
15170
15187
  ...resize
15171
15188
  };
15172
- }, [resize, hasInitialSizeRef.current]);
15189
+ }, [hasInitialSize, resize]);
15173
15190
  const [containerRef, containerRect] = useMeasure__default(measureConfig);
15174
15191
  const effectiveSize = React__namespace.useMemo(() => {
15175
15192
  let w = width ?? containerRect.width;
@@ -15185,9 +15202,7 @@ function CanvasImpl({
15185
15202
  left: containerRect.left
15186
15203
  };
15187
15204
  }, [width, height, containerRect, forceEven]);
15188
- if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
15189
- hasInitialSizeRef.current = true;
15190
- }
15205
+ if (!hasInitialSize && effectiveSize.width > 0 && effectiveSize.height > 0) setHasInitialSize(true);
15191
15206
  const canvasRef = React__namespace.useRef(null);
15192
15207
  const divRef = React__namespace.useRef(null);
15193
15208
  React__namespace.useImperativeHandle(ref, () => canvasRef.current);
@@ -16046,7 +16061,7 @@ function useRenderPipeline(mainCB, setupCB) {
16046
16061
  renderPipeline: null,
16047
16062
  passes: {}
16048
16063
  });
16049
- scenePassCacheRef.current?.scenePass?.dispose?.();
16064
+ scenePassCacheRef.current?.scenePass.dispose();
16050
16065
  callbacksRanRef.current = false;
16051
16066
  scenePassCacheRef.current = null;
16052
16067
  forceScenePassRebuildRef.current = false;
@@ -16061,6 +16076,9 @@ function useRenderPipeline(mainCB, setupCB) {
16061
16076
  throw new Error("useRenderPipeline is only available with WebGPU renderer. Set renderer prop on Canvas.");
16062
16077
  }
16063
16078
  if (!renderer || !scene || !camera) return;
16079
+ if (!("isWebGPURenderer" in renderer)) {
16080
+ throw new Error("useRenderPipeline: renderer is not a WebGPURenderer but isLegacy is false.");
16081
+ }
16064
16082
  const state = store.getState();
16065
16083
  const set = store.setState;
16066
16084
  try {
@@ -16092,7 +16110,12 @@ function useRenderPipeline(mainCB, setupCB) {
16092
16110
  const shouldRunCallbacks = justCreatedPipeline || !callbacksRanRef.current || !cacheValid;
16093
16111
  if (shouldRunCallbacks) {
16094
16112
  if (setupCBRef.current) {
16095
- const freshState = store.getState();
16113
+ const freshState = Object.assign({}, store.getState(), {
16114
+ renderPipeline: pipeline,
16115
+ passes: { ...currentPasses, scenePass },
16116
+ renderer,
16117
+ isLegacy: false
16118
+ });
16096
16119
  const setupResult = setupCBRef.current(freshState);
16097
16120
  if (setupResult && typeof setupResult === "object") {
16098
16121
  currentPasses = { ...currentPasses, ...setupResult };
@@ -16100,7 +16123,12 @@ function useRenderPipeline(mainCB, setupCB) {
16100
16123
  }
16101
16124
  }
16102
16125
  if (mainCBRef.current) {
16103
- const freshState = store.getState();
16126
+ const freshState = Object.assign({}, store.getState(), {
16127
+ renderPipeline: pipeline,
16128
+ passes: { ...currentPasses, scenePass },
16129
+ renderer,
16130
+ isLegacy: false
16131
+ });
16104
16132
  const mainResult = mainCBRef.current(freshState);
16105
16133
  if (mainResult && typeof mainResult === "object") {
16106
16134
  currentPasses = { ...currentPasses, ...mainResult };
@@ -16111,22 +16139,16 @@ function useRenderPipeline(mainCB, setupCB) {
16111
16139
  callbacksRanRef.current = true;
16112
16140
  }
16113
16141
  if (outputNodeChanged) pipeline.needsUpdate = true;
16114
- if (outgoingScenePass && outgoingScenePass !== scenePass) outgoingScenePass.dispose?.();
16142
+ if (outgoingScenePass && outgoingScenePass !== scenePass) outgoingScenePass.dispose();
16115
16143
  } catch (error) {
16116
16144
  console.warn("[useRenderPipeline] Setup failed; the render pipeline was not configured:", error);
16117
16145
  }
16118
16146
  }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
16119
16147
  const passes = useThree$1((s) => s.passes);
16120
16148
  const renderPipeline = useThree$1((s) => s.renderPipeline);
16121
- return {
16122
- passes,
16123
- renderPipeline,
16124
- clearPasses,
16125
- reset,
16126
- rebuild,
16127
- // isReady indicates if RenderPipeline is configured and ready for rendering
16128
- isReady: renderPipeline !== null
16129
- };
16149
+ const actions = { passes, clearPasses, reset, rebuild };
16150
+ if (renderPipeline) return { ...actions, isReady: true, renderPipeline };
16151
+ return { ...actions, isReady: false, renderPipeline: null };
16130
16152
  }
16131
16153
 
16132
16154
  extend(THREE);