R3F v10 WebGPU hooks

Use this reference in an existing R3F v10 project. Inspect the target's installed @react-three/fiber, three, and Three typings before changing code; alpha APIs and lifecycle behavior differ from upstream docs. Resolve dependencies from the target workspace, then inspect Fiber's dist/webgpu/index.d.ts and index.mjs for the relevant hook. Do not upgrade packages or migrate a WebGL canvas merely to apply this skill.

Import scene hooks from @react-three/fiber/webgpu, Three classes/types from three/webgpu, and shader expressions from three/tsl. Call scene hooks beneath the matching Canvas. The WebGPU entry already types state.renderer as WebGPURenderer; no cast is needed.

Choose the hook

Hook	Use and call shape
`useUniform`	One named root uniform: `useUniform('uTime', 0)`. `useUniform('uTime')` reads an existing uniform and throws if missing. Names share state; this is not a component-local uniform.
`useUniforms`	Related or instance-scoped uniforms: `useUniforms({ uAmount: 0 }, scope)` or `useUniforms(creator, scope)`. Read with `useUniforms(scope)`; omit arguments to read the registry.
`useNodes`	Register shared TSL graphs: `useNodes(creator, scope)`. Read with `useNodes(scope)` or `useNodes()`. Reserve it for graphs with actual shared consumers.
`useLocalNodes`	Compose a component's material/compute nodes: `useLocalNodes(creator)`. Returns the creator's object without registering it. Can include non-node helpers when needed.
`useBuffers`	Register buffer resources: `useBuffers(creator, scope)`; read with `useBuffers(scope)` or `useBuffers()`. Creator returns named attributes, typed arrays, or supported TSL storage nodes.
`useGPUStorage`	Register storage textures: `useGPUStorage(creator, scope)`; read with `useGPUStorage(scope)` or `useGPUStorage()`. Use Three storage texture objects or supported storage nodes.
`useTexture`	Suspense texture loading: `useTexture(urlOrArrayOrRecord, { onLoad, cache })`. Returns plain Three textures in the input shape, not TSL nodes.
`useTextures`	Reactive texture registry: `useTextures(registry => registry.get(key))`. Does not load or suspend; a missing key returns `undefined`.
`useRenderPipeline`	One declarative postprocessing pipeline per root: `useRenderPipeline(mainCB, setupCB)`. No arguments gives access to the root pipeline state.

r3f-v10-webgpu-hooks

R3F v10 WebGPU hooks

Choose the hook