@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 +33 -18
- package/dist/index.d.cts +152 -20
- package/dist/index.d.mts +152 -20
- package/dist/index.d.ts +152 -20
- package/dist/index.mjs +33 -18
- package/dist/legacy.cjs +30 -14
- package/dist/legacy.d.cts +152 -20
- package/dist/legacy.d.mts +152 -20
- package/dist/legacy.d.ts +152 -20
- package/dist/legacy.mjs +30 -14
- package/dist/webgpu/index.cjs +53 -31
- package/dist/webgpu/index.d.cts +156 -36
- package/dist/webgpu/index.d.mts +156 -36
- package/dist/webgpu/index.d.ts +156 -36
- package/dist/webgpu/index.mjs +53 -31
- package/package.json +1 -1
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
|
|
496
|
-
*
|
|
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:
|
|
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:
|
|
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
|
-
*
|
|
722
|
-
|
|
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
|
-
|
|
763
|
+
order?: number
|
|
725
764
|
/**
|
|
726
|
-
* Limit this
|
|
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<
|
|
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
|
-
/**
|
|
1328
|
-
|
|
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:
|
|
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:
|
|
1447
|
+
type RenderPipelineMainCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
|
|
1335
1448
|
|
|
1336
|
-
/**
|
|
1337
|
-
interface
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
14413
|
+
const canvasTarget = state2.internal.canvasTarget;
|
|
14414
|
+
if (canvasTarget) {
|
|
14410
14415
|
const renderer2 = state2.internal.actualRenderer;
|
|
14411
|
-
renderer2.setCanvasTarget(
|
|
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
|
-
//
|
|
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
|
|
15024
|
+
const [hasInitialSize, setHasInitialSize] = React.useState(false);
|
|
15007
15025
|
const measureConfig = React.useMemo(() => {
|
|
15008
|
-
if (!
|
|
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
|
-
}, [
|
|
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 (!
|
|
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);
|
package/dist/webgpu/index.cjs
CHANGED
|
@@ -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
|
-
|
|
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.
|
|
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
|
-
|
|
14244
|
-
|
|
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 =
|
|
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
|
-
|
|
14467
|
+
const canvasTarget = state2.internal.canvasTarget;
|
|
14468
|
+
if (canvasTarget) {
|
|
14465
14469
|
const renderer2 = state2.internal.actualRenderer;
|
|
14466
|
-
renderer2.setCanvasTarget(
|
|
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
|
-
//
|
|
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
|
|
15175
|
+
const [hasInitialSize, setHasInitialSize] = React__namespace.useState(false);
|
|
15159
15176
|
const measureConfig = React__namespace.useMemo(() => {
|
|
15160
|
-
if (!
|
|
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
|
-
}, [
|
|
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 (!
|
|
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
|
|
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
|
-
|
|
16122
|
-
|
|
16123
|
-
|
|
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);
|