@react-three/fiber 10.0.0-canary.7dfc4e4 → 10.0.0-canary.88b1ca7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "10.0.0-canary.7dfc4e4",
+  "version": "10.0.0-canary.88b1ca7",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -53,29 +53,33 @@
       "import": "./dist/webgpu/index.mjs",
       "require": "./dist/webgpu/index.cjs"
     },
+    "./extension": {
+      "types": "./dist/extension.d.ts",
+      "import": "./dist/extension.mjs",
+      "require": "./dist/extension.cjs"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@monogrid/gainmap-js": "^3.4.0",
-    "@pmndrs/scheduler": "^0.2.0",
+    "@pmndrs/scheduler": "^0.3.0",
     "dequal": "^2.0.3",
-    "its-fine": "^2.0.0",
+    "its-fine": "^2.1.1",
     "react-use-measure": "^2.1.7",
-    "scheduler": "^0.27.0",
+    "scheduler": "^0.28.0",
     "suspend-react": "^0.1.3",
     "use-sync-external-store": "^1.6.0",
     "zustand": "^5.0.10"
   },
   "devDependencies": {
-    "@types/react-reconciler": "^0.32.3",
+    "@types/react-reconciler": "^0.33.0",
     "@types/three": "^0.185.0",
     "@types/webxr": "*",
-    "react-reconciler": "^0.33.0"
+    "react-reconciler": "^0.34.0"
   },
   "peerDependencies": {
-    "react": ">=19.0 <19.3",
-    "react-dom": ">=19.0 <19.3",
+    "react": ">=19.0 <19.4",
+    "react-dom": ">=19.0 <19.4",
     "three": ">=0.185.0"
   },
   "peerDependenciesMeta": {
@@ -86,7 +90,6 @@
   "scripts": {
     "prebuild": "node -e \"require('fs').copyFileSync('../../readme.md', 'readme.md')\"",
     "build": "unbuild",
-    "postbuild": "node ../../scripts/fix-three-types.js",
     "stub": "unbuild --stub"
   }
 }

package/readme.md

@@ -37,7 +37,16 @@ Yes. It merely expresses Threejs in JSX, `<mesh />` dynamically turns into `new
 
 #### Does it support WebGPU?
 
-Yes. With minor changes in v9 and significant work in v10 WebGPU support is first class. We support all ThreeJS WebGPU features/Nodes and expand it with our own hooks and utilities.
+Yes. In v10 it is the default: `<Canvas>` from `@react-three/fiber` renders with three's `WebGPURenderer`, which falls back to a WebGL2 backend where the browser has no WebGPU, and the hooks are typed for it. Node materials and TSL work out of the box, with our own hooks in [`@react-three/tsl`](https://github.com/pmndrs/react-three-fiber/tree/v10/packages/tsl). Scenes that need `WebGLRenderer` (GLSL `ShaderMaterial`s, `onBeforeCompile`, `postprocessing`) import from `@react-three/fiber/legacy`.
+
+#### Upgrading to v10?
+
+v10 is in alpha (`npm install @react-three/fiber@alpha`). Read the [migration guide](https://r3f.docs.pmnd.rs/next/migration/v10) and the [list of breaking changes](https://r3f.docs.pmnd.rs/next/migration/breaking-changes). The short version:
+
+- `@react-three/fiber` renders with WebGPU; WebGL is `@react-three/fiber/legacy`, chosen by the import.
+- `useThree`, `useFrame` and `onCreated` are typed for the import's renderer, so `state.renderer.compute(...)` needs no cast. Libraries that run on both renderers type against `@react-three/fiber/extension`.
+- `state.gl` is `state.renderer` (deprecated), `state.clock` is gone (`state.elapsed`, `state.delta`), and `shadows` and the color props moved into `renderer={{ ... }}` / `gl={{ ... }}`.
+- The TSL hooks live in `@react-three/tsl`; the `physics` frame phase runs on a fixed timestep.
 
 ### What does it look like?
 
@@ -215,7 +224,7 @@ Visit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber) | [Awesome React Th
 
 You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official [React docs](https://react.dev/learn), especially [the section about hooks](https://react.dev/reference/react). As for Threejs, make sure you at least glance over the following links:
 
-1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
+1. Make sure you have a [basic grasp of Threejs](https://threejs.org/manual/#en/creating-a-scene). Keep that site open.
 2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
 3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
 4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber) to see what the various settings and hooks do.