@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/index.cjs CHANGED
@@ -1068,7 +1068,8 @@ const createStore = (invalidate, advance) => {
1068
1068
  const resizeTarget = canvasTarget ?? actualRenderer;
1069
1069
  if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
1070
1070
  resizeTarget.setSize(size.width, size.height, false);
1071
- internal.canvasTargetSizeDirty = true;
1071
+ const activeTarget = actualRenderer.getCanvasTarget?.();
1072
+ if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
1072
1073
  }
1073
1074
  if (camera !== oldCamera) {
1074
1075
  oldCamera = camera;
@@ -1716,7 +1717,7 @@ function advance(timestamp, runGlobalEffects, state) {
1716
1717
  else scheduler$1.step(timestamp);
1717
1718
  }
1718
1719
 
1719
- const version = "10.0.0-alpha.3";
1720
+ const version = "10.0.0-alpha.4";
1720
1721
  const packageData = {
1721
1722
  version: version};
1722
1723
 
@@ -14250,9 +14251,8 @@ function createRoot(canvas) {
14250
14251
  if (!renderer.hasInitialized?.()) {
14251
14252
  const size2 = computeInitialSize(canvas, propsSize);
14252
14253
  if (size2.width > 0 && size2.height > 0) {
14253
- const pixelRatio = calculateDpr(dpr);
14254
- canvas.width = size2.width * pixelRatio;
14255
- canvas.height = size2.height * pixelRatio;
14254
+ renderer.setPixelRatio(calculateDpr(dpr));
14255
+ renderer.setSize(size2.width, size2.height, false);
14256
14256
  }
14257
14257
  await renderer.init();
14258
14258
  }
@@ -14261,7 +14261,7 @@ function createRoot(canvas) {
14261
14261
  state.internal.actualRenderer = renderer;
14262
14262
  state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
14263
14263
  if (canvasId && !state.internal.isSecondary) {
14264
- const canvasTarget = new webgpu.CanvasTarget(canvas);
14264
+ const canvasTarget = renderer.getCanvasTarget?.();
14265
14265
  const unregisterPrimary = registerPrimary(canvasId, renderer, store);
14266
14266
  state.set((prev) => ({
14267
14267
  internal: {
@@ -14466,14 +14466,18 @@ function createRoot(canvas) {
14466
14466
  const unregisterRoot = scheduler$1.registerRoot(newRootId, {
14467
14467
  getState: () => store.getState(),
14468
14468
  onError: (err) => store.getState().setError(err),
14469
- frameloop: store.getState().frameloop
14469
+ frameloop: store.getState().frameloop,
14470
+ before: schedulerConfig?.before,
14471
+ after: schedulerConfig?.after,
14472
+ order: schedulerConfig?.order
14470
14473
  });
14471
14474
  const unregisterCanvasTarget = scheduler$1.register(
14472
14475
  () => {
14473
14476
  const state2 = store.getState();
14474
- if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
14477
+ const canvasTarget = state2.internal.canvasTarget;
14478
+ if (canvasTarget) {
14475
14479
  const renderer2 = state2.internal.actualRenderer;
14476
- renderer2.setCanvasTarget(state2.internal.canvasTarget);
14480
+ if (renderer2.getCanvasTarget() !== canvasTarget) renderer2.setCanvasTarget(canvasTarget);
14477
14481
  if (state2.internal.canvasTargetSizeDirty) {
14478
14482
  state2.internal.canvasTargetSizeDirty = false;
14479
14483
  renderer2.backend?.updateSize?.();
@@ -14546,8 +14550,7 @@ function createRoot(canvas) {
14546
14550
  phase: "render",
14547
14551
  system: true,
14548
14552
  // Internal flag: this is a system job, not user-controlled
14549
- // Apply scheduler config for render ordering and rate limiting
14550
- ...schedulerConfig?.after && { after: schedulerConfig.after },
14553
+ // FPS throttles only the default render job; Canvas ordering belongs to the root.
14551
14554
  ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
14552
14555
  }
14553
14556
  );
@@ -14566,7 +14569,21 @@ function createRoot(canvas) {
14566
14569
  scheduler: scheduler$1
14567
14570
  }
14568
14571
  }));
14572
+ } else {
14573
+ const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
14574
+ if (constraintsChanged) {
14575
+ scheduler$1.setRootConstraints(rootId, {
14576
+ before: schedulerConfig?.before,
14577
+ after: schedulerConfig?.after
14578
+ });
14579
+ }
14580
+ if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
14581
+ scheduler$1.setRootOrder(rootId, schedulerConfig?.order ?? 0);
14582
+ }
14569
14583
  }
14584
+ lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
14585
+ lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
14586
+ lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
14570
14587
  onCreated = onCreatedCallback;
14571
14588
  configured = true;
14572
14589
  resolve();
@@ -14624,7 +14641,7 @@ function unmountComponentAtNode(canvas, callback) {
14624
14641
  const unregisterPrimary = state.internal.unregisterPrimary;
14625
14642
  if (unregisterPrimary) unregisterPrimary();
14626
14643
  const canvasTarget = state.internal.canvasTarget;
14627
- if (canvasTarget?.dispose) canvasTarget.dispose();
14644
+ if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
14628
14645
  state.events.disconnect?.();
14629
14646
  cleanupHelperGroup(root.store);
14630
14647
  if (state.isLegacy && renderer) {
@@ -15068,9 +15085,9 @@ function CanvasImpl({
15068
15085
  React__namespace.useMemo(() => extend(THREE), []);
15069
15086
  const Bridge = useBridge();
15070
15087
  const backgroundProps = React__namespace.useMemo(() => parseBackground(background), [background]);
15071
- const hasInitialSizeRef = React__namespace.useRef(false);
15088
+ const [hasInitialSize, setHasInitialSize] = React__namespace.useState(false);
15072
15089
  const measureConfig = React__namespace.useMemo(() => {
15073
- if (!hasInitialSizeRef.current) {
15090
+ if (!hasInitialSize) {
15074
15091
  return {
15075
15092
  ...resize,
15076
15093
  scroll: resize?.scroll ?? true,
@@ -15082,7 +15099,7 @@ function CanvasImpl({
15082
15099
  debounce: { scroll: 50, resize: 0 },
15083
15100
  ...resize
15084
15101
  };
15085
- }, [resize, hasInitialSizeRef.current]);
15102
+ }, [hasInitialSize, resize]);
15086
15103
  const [containerRef, containerRect] = useMeasure__default(measureConfig);
15087
15104
  const effectiveSize = React__namespace.useMemo(() => {
15088
15105
  let w = width ?? containerRect.width;
@@ -15098,9 +15115,7 @@ function CanvasImpl({
15098
15115
  left: containerRect.left
15099
15116
  };
15100
15117
  }, [width, height, containerRect, forceEven]);
15101
- if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
15102
- hasInitialSizeRef.current = true;
15103
- }
15118
+ if (!hasInitialSize && effectiveSize.width > 0 && effectiveSize.height > 0) setHasInitialSize(true);
15104
15119
  const canvasRef = React__namespace.useRef(null);
15105
15120
  const divRef = React__namespace.useRef(null);
15106
15121
  React__namespace.useImperativeHandle(ref, () => canvasRef.current);
package/dist/index.d.cts CHANGED
@@ -363,6 +363,33 @@ type BufferRecord = Record<string, BufferLike>
363
363
  */
364
364
  type BufferStore = Record<string, BufferLike | BufferRecord>
365
365
 
366
+ //* Node Types (useNodes) ========================================
367
+
368
+ /**
369
+ * Structural shape of a TSL node as stored on `state.nodes`.
370
+ *
371
+ * Deliberately minimal rather than three's nominal `Node`: in @types/three several node classes
372
+ * TSL hands back (OperatorNode, ConstNode, ...) do not extend `Node` cleanly, so a `Node` bound
373
+ * would reject values `useNodes` creators legitimately return. This is the same shape
374
+ * `useNodes` already constrains creators to (`TSLNodeLike`).
375
+ */
376
+ interface NodeLike {
377
+ uuid?: string
378
+ nodeType?: string | null
379
+ /** label method for chaining - sets the node's label and returns self */
380
+ label?: ((label: string) => NodeLike) | string
381
+ setName?: (name: string) => this
382
+ }
383
+
384
+ /** Flat record of TSL nodes (no nested scopes) */
385
+ type NodeRecord = Record<string, NodeLike>
386
+
387
+ /**
388
+ * Node store that can contain both root-level nodes and scoped node objects.
389
+ * Structure: { wobble: OperatorNode, fx: { blur: ShaderCallable } }
390
+ */
391
+ type NodeStore = Record<string, NodeLike | NodeRecord>
392
+
366
393
  //* Storage Types (useGPUStorage) ========================================
367
394
 
368
395
  /**
@@ -496,8 +523,13 @@ interface InternalState {
496
523
  /** Container for child attachment (scene for root, original container for portals) */
497
524
  container?: THREE$1.Object3D
498
525
  /**
499
- * CanvasTarget for multi-canvas WebGPU rendering.
500
- * Created for all WebGPU canvases to support renderer sharing.
526
+ * The CanvasTarget this root sizes and renders through.
527
+ *
528
+ * A primary (`<Canvas id>`) owns the renderer's default target -- the one three itself built
529
+ * around the canvas element -- so sizing it is sizing the renderer. A secondary owns a target
530
+ * R3F created for its own element. Either way there is exactly one target per canvas element,
531
+ * and the canvas-target job makes it the renderer's active one before this root renders.
532
+ * Absent on WebGL and on an id-less WebGPU canvas, where the renderer is sized directly.
501
533
  * @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
502
534
  */
503
535
  canvasTarget?: CanvasTarget
@@ -622,7 +654,7 @@ interface RootState {
622
654
  /** Global TSL uniform nodes - root-level uniforms + scoped sub-objects. Use useUniforms() hook */
623
655
  uniforms: UniformStore
624
656
  /** Global TSL nodes - root-level nodes + scoped sub-objects. Use useNodes() hook */
625
- nodes: Record<string, any>
657
+ nodes: NodeStore
626
658
  /** Global TSL buffer nodes - root-level buffers + scoped sub-objects. Use useBuffers() hook */
627
659
  buffers: BufferStore
628
660
  /** Global GPU storage (textures, etc.) - root-level storage + scoped sub-objects. Use useGPUStorage() hook */
@@ -634,7 +666,7 @@ interface RootState {
634
666
  /** WebGPU RenderPipeline instance - use useRenderPipeline() hook */
635
667
  renderPipeline: ThreeRenderPipeline | null
636
668
  /** Global TSL pass nodes for render pipeline - use useRenderPipeline() hook */
637
- passes: Record<string, any>
669
+ passes: PassRecord
638
670
  /** Internal version counter for HMR - incremented by rebuildNodes/rebuildUniforms to bust memoization */
639
671
  _hmrVersion: number
640
672
  /** Internal: whether setSize() has taken ownership of canvas dimensions */
@@ -722,12 +754,19 @@ type DefaultRendererProps = {
722
754
  */
723
755
  interface CanvasSchedulerConfig {
724
756
  /**
725
- * Render this canvas after another canvas completes.
726
- * Pass the `id` of another canvas.
757
+ * Run this Canvas root before the referenced Canvas root id(s).
758
+ */
759
+ before?: string | string[]
760
+ /**
761
+ * Run this Canvas root after the referenced Canvas root id(s).
762
+ */
763
+ after?: string | string[]
764
+ /**
765
+ * Numeric root order. Lower values run first.
727
766
  */
728
- after?: string
767
+ order?: number
729
768
  /**
730
- * Limit this canvas's render rate (frames per second).
769
+ * Limit this Canvas's default render job (frames per second).
731
770
  */
732
771
  fps?: number
733
772
  }
@@ -1175,7 +1214,33 @@ declare global {
1175
1214
  * ergonomics. The result is three's structural type, so members stay in sync with the
1176
1215
  * installed three instead of needing to be mirrored by hand.
1177
1216
  */
1178
- type UniformNode<T = unknown> = three_webgpu.UniformNode<unknown, T>
1217
+ type UniformNode<T = unknown> = three_webgpu.UniformNode<UniformNodeTypeFor<T>, T>
1218
+
1219
+ /**
1220
+ * three's node type name for a uniform value type, mirroring the `uniform()` overloads.
1221
+ * A `UniformNode<number>` is a `Node<'float'>`, so TSL math (`.mul`, `.add`, ...) accepts it.
1222
+ * Unknown or unlisted value types resolve to `unknown`, which TSL math rejects: narrow with
1223
+ * `as UniformNode<number>` (or the matching value type) at the call site.
1224
+ */
1225
+ type UniformNodeTypeFor<T> = T extends number
1226
+ ? 'float'
1227
+ : T extends boolean
1228
+ ? 'bool'
1229
+ : T extends three_webgpu.Color
1230
+ ? 'color'
1231
+ : T extends three_webgpu.Vector2
1232
+ ? 'vec2'
1233
+ : T extends three_webgpu.Vector3
1234
+ ? 'vec3'
1235
+ : T extends three_webgpu.Vector4
1236
+ ? 'vec4'
1237
+ : T extends three_webgpu.Matrix2
1238
+ ? 'mat2'
1239
+ : T extends three_webgpu.Matrix3
1240
+ ? 'mat3'
1241
+ : T extends three_webgpu.Matrix4
1242
+ ? 'mat4'
1243
+ : unknown
1179
1244
 
1180
1245
  /**
1181
1246
  * ShaderCallable - the return type of Fn()
@@ -1328,30 +1393,97 @@ declare global {
1328
1393
  */
1329
1394
  type ThreeRenderPipeline = three_webgpu.RenderPipeline
1330
1395
 
1331
- /** Pass record - stores TSL pass nodes for render pipeline */
1332
- type PassRecord = Record<string, any>
1396
+ /**
1397
+ * The pass `useRenderPipeline` creates for you: three's own `PassNode`, as returned by
1398
+ * `pass(scene, camera)` from `three/tsl`. Referenced from three so members like
1399
+ * `getTextureNode`, `setMRT` and `dispose` track the installed version.
1400
+ */
1401
+ type ScenePassNode = three_webgpu.PassNode
1402
+
1403
+ /**
1404
+ * Pass record - stores TSL pass nodes for render pipeline.
1405
+ *
1406
+ * `scenePass` is the only key the library owns. It is optional here because this is also the
1407
+ * shape of `state.passes`, which is `{}` before the pipeline exists and again after `reset()`
1408
+ * or `clearPasses()`. Inside the callbacks it is always present; see
1409
+ * {@link RenderPipelineCallbackState}.
1410
+ *
1411
+ * Every other key is user-registered, via a callback's return value. Those are TSL nodes of
1412
+ * any kind, not only passes: texture reads of an MRT attachment, effect nodes, extra
1413
+ * `pass()` instances. `Node` is the common base, so that is the bound. Narrow at the call
1414
+ * site when you need a member, e.g. `passes.velocity as TextureNode`.
1415
+ */
1416
+ interface PassRecord {
1417
+ scenePass?: ScenePassNode
1418
+ [key: string]: three_webgpu.Node
1419
+ }
1420
+
1421
+ /**
1422
+ * State passed to pipeline callbacks after the active pipeline has been created.
1423
+ *
1424
+ * `passes.scenePass` is required here: the hook installs the default scene pass before either
1425
+ * callback runs, so callbacks can use it without a guard or a cast.
1426
+ *
1427
+ * `renderer` is narrowed to `WebGPURenderer` and `isLegacy` to `false`: the hook throws under
1428
+ * the legacy renderer before either callback can run, so a callback never sees WebGL.
1429
+ */
1430
+ type RenderPipelineCallbackState = RootState & {
1431
+ renderPipeline: ThreeRenderPipeline
1432
+ passes: PassRecord & { scenePass: ScenePassNode }
1433
+ renderer: three_webgpu.WebGPURenderer
1434
+ isLegacy: false
1435
+ }
1436
+
1437
+ /**
1438
+ * What a callback may return to register entries into `state.passes`.
1439
+ *
1440
+ * `scenePass` is reserved. The hook owns that entry and its lifecycle: it caches the pass it
1441
+ * created, and `rebuild()` / `reset()` dispose that cached pass. A callback overwriting the
1442
+ * store entry would leave the store pointing at a node the hook never disposes, and the hook
1443
+ * disposing a pass nothing references. So returning it is a type error.
1444
+ */
1445
+ type RegisteredPasses = Record<string, three_webgpu.Node> & { scenePass?: never }
1333
1446
 
1334
1447
  /** Setup callback - runs first to configure MRT, create additional passes */
1335
- type RenderPipelineSetupCallback = (state: RootState) => PassRecord | void
1448
+ type RenderPipelineSetupCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1336
1449
 
1337
1450
  /** Main callback - runs second to configure outputNode, create effect passes */
1338
- type RenderPipelineMainCallback = (state: RootState) => PassRecord | void
1451
+ type RenderPipelineMainCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1339
1452
 
1340
- /** Return type for useRenderPipeline hook */
1341
- interface UseRenderPipelineReturn {
1453
+ /** The imperative half of useRenderPipeline's return value, present in every state */
1454
+ interface UseRenderPipelineActions {
1342
1455
  /** Current passes from state */
1343
1456
  passes: PassRecord
1344
- /** RenderPipeline instance (null if not initialized) */
1345
- renderPipeline: ThreeRenderPipeline | null
1346
1457
  /** Clear all passes from state */
1347
1458
  clearPasses: () => void
1348
1459
  /** Reset RenderPipeline entirely (clears PP + passes) */
1349
1460
  reset: () => void
1350
1461
  /** Re-run setup/main callbacks with current closure values */
1351
1462
  rebuild: () => void
1352
- /** True when RenderPipeline is configured and ready */
1353
- isReady: boolean
1354
1463
  }
1464
+
1465
+ /**
1466
+ * Return type for useRenderPipeline hook, discriminated on `isReady`.
1467
+ *
1468
+ * `if (isReady)` narrows `renderPipeline` to non-null, which is what the docs already tell
1469
+ * callers to check. `passes.scenePass` deliberately stays optional in the ready branch:
1470
+ * `clearPasses()` empties the record while leaving the pipeline in place.
1471
+ */
1472
+ type UseRenderPipelineReturn = UseRenderPipelineActions &
1473
+ (
1474
+ | {
1475
+ /** True when RenderPipeline is configured and ready */
1476
+ isReady: true
1477
+ /** RenderPipeline instance */
1478
+ renderPipeline: ThreeRenderPipeline
1479
+ }
1480
+ | {
1481
+ /** False until the pipeline has been created */
1482
+ isReady: false
1483
+ /** Not initialized yet, or torn down by reset() */
1484
+ renderPipeline: null
1485
+ }
1486
+ )
1355
1487
  }
1356
1488
 
1357
1489
  type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
@@ -3769,4 +3901,4 @@ declare function isOnce(value: unknown): value is {
3769
3901
  declare function Canvas(props: CanvasProps): react_jsx_runtime.JSX.Element;
3770
3902
 
3771
3903
  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 };
3772
- 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, 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, R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, 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 };
3904
+ 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, 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, R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, 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/index.d.mts CHANGED
@@ -363,6 +363,33 @@ type BufferRecord = Record<string, BufferLike>
363
363
  */
364
364
  type BufferStore = Record<string, BufferLike | BufferRecord>
365
365
 
366
+ //* Node Types (useNodes) ========================================
367
+
368
+ /**
369
+ * Structural shape of a TSL node as stored on `state.nodes`.
370
+ *
371
+ * Deliberately minimal rather than three's nominal `Node`: in @types/three several node classes
372
+ * TSL hands back (OperatorNode, ConstNode, ...) do not extend `Node` cleanly, so a `Node` bound
373
+ * would reject values `useNodes` creators legitimately return. This is the same shape
374
+ * `useNodes` already constrains creators to (`TSLNodeLike`).
375
+ */
376
+ interface NodeLike {
377
+ uuid?: string
378
+ nodeType?: string | null
379
+ /** label method for chaining - sets the node's label and returns self */
380
+ label?: ((label: string) => NodeLike) | string
381
+ setName?: (name: string) => this
382
+ }
383
+
384
+ /** Flat record of TSL nodes (no nested scopes) */
385
+ type NodeRecord = Record<string, NodeLike>
386
+
387
+ /**
388
+ * Node store that can contain both root-level nodes and scoped node objects.
389
+ * Structure: { wobble: OperatorNode, fx: { blur: ShaderCallable } }
390
+ */
391
+ type NodeStore = Record<string, NodeLike | NodeRecord>
392
+
366
393
  //* Storage Types (useGPUStorage) ========================================
367
394
 
368
395
  /**
@@ -496,8 +523,13 @@ interface InternalState {
496
523
  /** Container for child attachment (scene for root, original container for portals) */
497
524
  container?: THREE$1.Object3D
498
525
  /**
499
- * CanvasTarget for multi-canvas WebGPU rendering.
500
- * Created for all WebGPU canvases to support renderer sharing.
526
+ * The CanvasTarget this root sizes and renders through.
527
+ *
528
+ * A primary (`<Canvas id>`) owns the renderer's default target -- the one three itself built
529
+ * around the canvas element -- so sizing it is sizing the renderer. A secondary owns a target
530
+ * R3F created for its own element. Either way there is exactly one target per canvas element,
531
+ * and the canvas-target job makes it the renderer's active one before this root renders.
532
+ * Absent on WebGL and on an id-less WebGPU canvas, where the renderer is sized directly.
501
533
  * @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
502
534
  */
503
535
  canvasTarget?: CanvasTarget
@@ -622,7 +654,7 @@ interface RootState {
622
654
  /** Global TSL uniform nodes - root-level uniforms + scoped sub-objects. Use useUniforms() hook */
623
655
  uniforms: UniformStore
624
656
  /** Global TSL nodes - root-level nodes + scoped sub-objects. Use useNodes() hook */
625
- nodes: Record<string, any>
657
+ nodes: NodeStore
626
658
  /** Global TSL buffer nodes - root-level buffers + scoped sub-objects. Use useBuffers() hook */
627
659
  buffers: BufferStore
628
660
  /** Global GPU storage (textures, etc.) - root-level storage + scoped sub-objects. Use useGPUStorage() hook */
@@ -634,7 +666,7 @@ interface RootState {
634
666
  /** WebGPU RenderPipeline instance - use useRenderPipeline() hook */
635
667
  renderPipeline: ThreeRenderPipeline | null
636
668
  /** Global TSL pass nodes for render pipeline - use useRenderPipeline() hook */
637
- passes: Record<string, any>
669
+ passes: PassRecord
638
670
  /** Internal version counter for HMR - incremented by rebuildNodes/rebuildUniforms to bust memoization */
639
671
  _hmrVersion: number
640
672
  /** Internal: whether setSize() has taken ownership of canvas dimensions */
@@ -722,12 +754,19 @@ type DefaultRendererProps = {
722
754
  */
723
755
  interface CanvasSchedulerConfig {
724
756
  /**
725
- * Render this canvas after another canvas completes.
726
- * Pass the `id` of another canvas.
757
+ * Run this Canvas root before the referenced Canvas root id(s).
758
+ */
759
+ before?: string | string[]
760
+ /**
761
+ * Run this Canvas root after the referenced Canvas root id(s).
762
+ */
763
+ after?: string | string[]
764
+ /**
765
+ * Numeric root order. Lower values run first.
727
766
  */
728
- after?: string
767
+ order?: number
729
768
  /**
730
- * Limit this canvas's render rate (frames per second).
769
+ * Limit this Canvas's default render job (frames per second).
731
770
  */
732
771
  fps?: number
733
772
  }
@@ -1175,7 +1214,33 @@ declare global {
1175
1214
  * ergonomics. The result is three's structural type, so members stay in sync with the
1176
1215
  * installed three instead of needing to be mirrored by hand.
1177
1216
  */
1178
- type UniformNode<T = unknown> = three_webgpu.UniformNode<unknown, T>
1217
+ type UniformNode<T = unknown> = three_webgpu.UniformNode<UniformNodeTypeFor<T>, T>
1218
+
1219
+ /**
1220
+ * three's node type name for a uniform value type, mirroring the `uniform()` overloads.
1221
+ * A `UniformNode<number>` is a `Node<'float'>`, so TSL math (`.mul`, `.add`, ...) accepts it.
1222
+ * Unknown or unlisted value types resolve to `unknown`, which TSL math rejects: narrow with
1223
+ * `as UniformNode<number>` (or the matching value type) at the call site.
1224
+ */
1225
+ type UniformNodeTypeFor<T> = T extends number
1226
+ ? 'float'
1227
+ : T extends boolean
1228
+ ? 'bool'
1229
+ : T extends three_webgpu.Color
1230
+ ? 'color'
1231
+ : T extends three_webgpu.Vector2
1232
+ ? 'vec2'
1233
+ : T extends three_webgpu.Vector3
1234
+ ? 'vec3'
1235
+ : T extends three_webgpu.Vector4
1236
+ ? 'vec4'
1237
+ : T extends three_webgpu.Matrix2
1238
+ ? 'mat2'
1239
+ : T extends three_webgpu.Matrix3
1240
+ ? 'mat3'
1241
+ : T extends three_webgpu.Matrix4
1242
+ ? 'mat4'
1243
+ : unknown
1179
1244
 
1180
1245
  /**
1181
1246
  * ShaderCallable - the return type of Fn()
@@ -1328,30 +1393,97 @@ declare global {
1328
1393
  */
1329
1394
  type ThreeRenderPipeline = three_webgpu.RenderPipeline
1330
1395
 
1331
- /** Pass record - stores TSL pass nodes for render pipeline */
1332
- type PassRecord = Record<string, any>
1396
+ /**
1397
+ * The pass `useRenderPipeline` creates for you: three's own `PassNode`, as returned by
1398
+ * `pass(scene, camera)` from `three/tsl`. Referenced from three so members like
1399
+ * `getTextureNode`, `setMRT` and `dispose` track the installed version.
1400
+ */
1401
+ type ScenePassNode = three_webgpu.PassNode
1402
+
1403
+ /**
1404
+ * Pass record - stores TSL pass nodes for render pipeline.
1405
+ *
1406
+ * `scenePass` is the only key the library owns. It is optional here because this is also the
1407
+ * shape of `state.passes`, which is `{}` before the pipeline exists and again after `reset()`
1408
+ * or `clearPasses()`. Inside the callbacks it is always present; see
1409
+ * {@link RenderPipelineCallbackState}.
1410
+ *
1411
+ * Every other key is user-registered, via a callback's return value. Those are TSL nodes of
1412
+ * any kind, not only passes: texture reads of an MRT attachment, effect nodes, extra
1413
+ * `pass()` instances. `Node` is the common base, so that is the bound. Narrow at the call
1414
+ * site when you need a member, e.g. `passes.velocity as TextureNode`.
1415
+ */
1416
+ interface PassRecord {
1417
+ scenePass?: ScenePassNode
1418
+ [key: string]: three_webgpu.Node
1419
+ }
1420
+
1421
+ /**
1422
+ * State passed to pipeline callbacks after the active pipeline has been created.
1423
+ *
1424
+ * `passes.scenePass` is required here: the hook installs the default scene pass before either
1425
+ * callback runs, so callbacks can use it without a guard or a cast.
1426
+ *
1427
+ * `renderer` is narrowed to `WebGPURenderer` and `isLegacy` to `false`: the hook throws under
1428
+ * the legacy renderer before either callback can run, so a callback never sees WebGL.
1429
+ */
1430
+ type RenderPipelineCallbackState = RootState & {
1431
+ renderPipeline: ThreeRenderPipeline
1432
+ passes: PassRecord & { scenePass: ScenePassNode }
1433
+ renderer: three_webgpu.WebGPURenderer
1434
+ isLegacy: false
1435
+ }
1436
+
1437
+ /**
1438
+ * What a callback may return to register entries into `state.passes`.
1439
+ *
1440
+ * `scenePass` is reserved. The hook owns that entry and its lifecycle: it caches the pass it
1441
+ * created, and `rebuild()` / `reset()` dispose that cached pass. A callback overwriting the
1442
+ * store entry would leave the store pointing at a node the hook never disposes, and the hook
1443
+ * disposing a pass nothing references. So returning it is a type error.
1444
+ */
1445
+ type RegisteredPasses = Record<string, three_webgpu.Node> & { scenePass?: never }
1333
1446
 
1334
1447
  /** Setup callback - runs first to configure MRT, create additional passes */
1335
- type RenderPipelineSetupCallback = (state: RootState) => PassRecord | void
1448
+ type RenderPipelineSetupCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1336
1449
 
1337
1450
  /** Main callback - runs second to configure outputNode, create effect passes */
1338
- type RenderPipelineMainCallback = (state: RootState) => PassRecord | void
1451
+ type RenderPipelineMainCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1339
1452
 
1340
- /** Return type for useRenderPipeline hook */
1341
- interface UseRenderPipelineReturn {
1453
+ /** The imperative half of useRenderPipeline's return value, present in every state */
1454
+ interface UseRenderPipelineActions {
1342
1455
  /** Current passes from state */
1343
1456
  passes: PassRecord
1344
- /** RenderPipeline instance (null if not initialized) */
1345
- renderPipeline: ThreeRenderPipeline | null
1346
1457
  /** Clear all passes from state */
1347
1458
  clearPasses: () => void
1348
1459
  /** Reset RenderPipeline entirely (clears PP + passes) */
1349
1460
  reset: () => void
1350
1461
  /** Re-run setup/main callbacks with current closure values */
1351
1462
  rebuild: () => void
1352
- /** True when RenderPipeline is configured and ready */
1353
- isReady: boolean
1354
1463
  }
1464
+
1465
+ /**
1466
+ * Return type for useRenderPipeline hook, discriminated on `isReady`.
1467
+ *
1468
+ * `if (isReady)` narrows `renderPipeline` to non-null, which is what the docs already tell
1469
+ * callers to check. `passes.scenePass` deliberately stays optional in the ready branch:
1470
+ * `clearPasses()` empties the record while leaving the pipeline in place.
1471
+ */
1472
+ type UseRenderPipelineReturn = UseRenderPipelineActions &
1473
+ (
1474
+ | {
1475
+ /** True when RenderPipeline is configured and ready */
1476
+ isReady: true
1477
+ /** RenderPipeline instance */
1478
+ renderPipeline: ThreeRenderPipeline
1479
+ }
1480
+ | {
1481
+ /** False until the pipeline has been created */
1482
+ isReady: false
1483
+ /** Not initialized yet, or torn down by reset() */
1484
+ renderPipeline: null
1485
+ }
1486
+ )
1355
1487
  }
1356
1488
 
1357
1489
  type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
@@ -3769,4 +3901,4 @@ declare function isOnce(value: unknown): value is {
3769
3901
  declare function Canvas(props: CanvasProps): react_jsx_runtime.JSX.Element;
3770
3902
 
3771
3903
  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 };
3772
- 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, 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, R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, 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 };
3904
+ 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, 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, R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, 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 };