A New Era

R3F v10 has been a long time coming. We have talked over plans for years but late last year @DennisSmolek took the initiative do it all himself. We now have an alpha release, along with an alpha release of Drei 11. You can try it out today.

npm install @react-three/fiber@alpha

We were so excited to get this out we forgot to make a release for alpha.0 and alpha.1 is already upon us. But let's quickly get you caught up on what you can expect to be new.

• R3F now supports the WebGLRenderer and WebGPURenderer. This means state.gl is now state.renderer.
• There is a new scheduler, allowing for useFrame to have advanced scheduling and also allows for it to be used outside of <Canvas />. Read more here: Frame Loop Overview.
• WebGPU and TSL is first-class, with new built-ins just for working with TSL: useUniforms, useNodes, useLocalNodes and usePostProcessing. Read more here: WebGPU Hook Overview.

And for a more in-depth introduction check out the migration guide.

Alpha 1

And now comes alpha.1 with bug fixes, documentation updates, and several important feature unlocks.

Rendering

• Camera frustum access for in-frame spatial queries.
• Visibility lifecycle events: Visible, Framed, and Occluded.
• Cameras are now part of the scene graph. Children of a camera will render correctly, enabling camera-attached objects by default.
• Renderer-independent render targets, similar to useFBO, without needing to branch on the active renderer.

Scheduler

• The scheduler no longer depends on R3F and can run standalone.
• Scheduler context can now be shared outside the R3F tree, allowing external UIs or systems to participate in the frame loop while correctly waiting on the root set.

Documentation

• New v10 features documentation.
• Updated developer documentation.
• Migration guide expanded, including details on taking over the renderer.

As always, feedback welcome. Consider all features experimental and may be changed, removed or expanded at any time. Who know,s you could be the reason 👀. Happy building!

What's Changed

• Start of the v10 Branch by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3620
• Fix: Only Run Preinstall when working on actual repo by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3624
• Feat-null-props by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3628
• V10-fix-canvas-override by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3629
• Feat-fire-event-3537 by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3630
• Fix-portal-container-updates by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3631
• Feat-useLoader-preload by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3635
• feat: canvasDebounce by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3636
• Docs-useframe by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3640
• feat: react 19.2 and test clean by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3641
• Chore-update-yarn by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3643
• Fix-type-exports by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3644
• Chore/migrate to pnpm by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3645
• Fix-portal-bug by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3649
• Docs-cleanup-circular by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3655
• Docs-migration-guide by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3658
• V10-shared-context by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3663
• V10-feat-Occlusion by @DennisSmolek in https://github.com/pmndrs/react-three-fiber/pull/3664

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.4.2...v10.0.0-alpha.1