github pmndrs/react-three-fiber v10.0.0-alpha.4
v10.0.0-alpha4
on GitHub

pre-release5 hours ago

We have been hard at work on the pmndrs org and all the while alpha updates have been streaming in for R3F v10 as we march toward first class WebGPU and TSL support. Let's catch you up on the big news:

Improved TSL workflow

The original v10 alpha introduced useUniforms, useNodes, and useLocalNodes. We have experimented with more hooks since then.

  • New experimental useBuffers and useGPUStorage hooks manage compute buffers and storage textures.
  • useTextures provides a reactive, ref-counted texture registry without passing refs throughout the component tree.
  • TSL nodes, uniforms, buffers, and storage now rebuild atomically during fast refresh instead of requiring a full reload.
  • useRenderPipeline replaces usePostProcessing and provides declarative render-pipeline and MRT setup.
  • Imports from @react-three/fiber/webgpu now type useThree and useFrame against WebGPURenderer state without manual casts.

The scheduler gets its own repo

What started as a revamp of the internal R3F scheduler has split out into its own project that is intended to stand on its own legs: https://github.com/pmndrs/scheduler

  • useFrame can run outside , making the scheduler useful for external UI and application systems.
  • Named phases, explicit before/after ordering, FPS limits, and render takeover make complex frame loops easier to compose.
  • Every Canvas now owns its frameloop, invalidation, and manual stepping. A demand-driven Canvas can no longer interfere with an always-running sibling for real multi-canvas support.

Multiple canvases

WebGPU canvases can now share a single renderer and GPU context. This unlocks HUDs, picture-in-picture views, multi-viewport rendering, and 3D layers separated by regular HTML. 

<Canvas id="main" renderer>
  <MainScene />
</Canvas>

<Canvas
  renderer={{
    primaryCanvas: 'main',
    scheduler: { after: 'main', fps: 30 },
  }}>
  <Hud />
</Canvas>

Each Canvas keeps its own scene, camera, events, and state while sharing the renderer and GPU resources. The scheduler handles target switching, render order, and independent frame rates.

More stuff!

There are also several smaller features that remove common imperative work:

  • Canvas accepts declarative background colors, environment files, and presets.
  • Explicit width and height props make fixed-resolution rendering and video export straightforward.
  • The default camera is part of the scene graph, so camera-attached lights, meshes, and HUD elements render naturally.
  • fromRef() connects props to sibling refs without a mount effect.
  • once() supports mount-only geometry and object methods.
  • userData.interactivePriority lets overlays and controls take precedence over distance-based hit testing.

And then the usual hardening and bug fixes. There are a lot of ideas being tried out here so as always we would appreciate feedback on what is working and what is not working.

Try it out with: 

npm install @react-three/fiber@alpha

Cheers!

What's Changed

New Contributors

Full Changelog: v10.0.0-alpha.1...v10.0.0-alpha.4

Check out latest releases or
releases around pmndrs/react-three-fiber v10.0.0-alpha.4

Don't miss a new react-three-fiber release

NewReleases is sending notifications on new releases.

Get notifications