chore: docs

docs/API/additional-exports.mdx

@@ -1,6 +1,6 @@
 ---
 title: Additional Exports
-nav: 9
+nav: 8
 ---
 
 | export               | usage                                                          |

docs/API/canvas.mdx

@@ -1,6 +1,6 @@
 ---
 title: Canvas
-description: 'The Canvas object is your portal into three.js.'
+description: The Canvas object is your portal into three.js
 nav: 4
 ---
 
@@ -27,7 +27,7 @@ const App = () => (
 | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
 | children        | three.js JSX elements or regular components                                                                                                       |                                                            |
 | fallback        | optional DOM JSX elements or regular components in case GL is not supported                                                                       |                                                            |
-| gl              | Props that go into the default renderer, or your own renderer. Also accepts a synchronous callback like `gl={canvas => new Renderer({ canvas })}` | `{}`                                                       |
+| gl              | Props that go into the default renderer. Accepts sync/async callback with default props `gl={defaults => new Renderer({ ...defaults })}`          | `{}`                                                       |
 | camera          | Props that go into the default camera, or your own `THREE.Camera`                                                                                 | `{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }`   |
 | scene           | Props that go into the default scene, or your own `THREE.Scene`                                                                                   | `{}`                                                       |
 | shadows         | Props that go into `gl.shadowMap`, can be set true for `PCFsoft` or one of the following: 'basic', 'percentage', 'soft', 'variance'               | `false`                                                    |
@@ -99,6 +99,29 @@ function App() {
 > [!NOTE]
 > Ideally, and if possible, your fallback is a seamless, visual replacement for what the canvas would have otherwise rendered.
 
+## WebGPU
+
+Recent Three.js now includes a WebGPU renderer. While still a work in progress and not fully backward-compatible with all of Three's features, the renderer requires an async initialization method. R3F streamlines this by allowing the gl prop to return a promise.
+
+```jsx
+import * as THREE from 'three/webgpu'
+import * as TSL from 'three/tsl'
+import { Canvas, extend, useFrame, useThree } from '@react-three/fiber'
+
+export default () => (
+  <Canvas
+    gl={(props) => {
+      extend(THREE)
+      const renderer = new THREE.WebGPURenderer(props)
+      return renderer.init().then(() => renderer)
+    }}>
+      <mesh>
+        <meshBasicNodeMaterial />
+        <boxGeometry />
+      </mesh>
+  </Canvas>
+```
+
 ## Custom Canvas
 
 R3F can render to a root, similar to how `react-dom` and all the other React renderers work. This allows you to shave off `react-dom` (~40kb), `react-use-measure` (~3kb) and, if you don't need them, `pointer-events` (~7kb) (you need to explicitly import `events` and add them to the config otherwise).
@@ -120,22 +143,27 @@ extend(THREE)
 // Create a react root
 const root = createRoot(document.querySelector('canvas'))
 
-// Configure the root, inject events optionally, set camera, etc
-root.configure({ events, camera: { position: [0, 0, 50] } })
+async function app() {
+  // Configure the root, inject events optionally, set camera, etc
+  // This *must* be called before render, and it must be awaited
+  await root.configure({ events, camera: { position: [0, 0, 50] } })
 
-// createRoot by design is not responsive, you have to take care of resize yourself
-window.addEventListener('resize', () => {
-  root.configure({ size: { width: window.innerWidth, height: window.innerHeight } })
-})
+  // createRoot by design is not responsive, you have to take care of resize yourself
+  window.addEventListener('resize', () => {
+    root.configure({ size: { width: window.innerWidth, height: window.innerHeight } })
+  })
+
+  // Trigger resize
+  window.dispatchEvent(new Event('resize'))
 
-// Trigger resize
-window.dispatchEvent(new Event('resize'))
+  // Render entry point
+  root.render(<App />)
 
-// Render entry point
-root.render(<App />)
+  // Unmount and dispose of memory
+  // root.unmount()
+}
 
-// Unmount and dispose of memory
-// root.unmount()
+app()
 ```
 
 ## Tree-shaking
@@ -150,14 +178,20 @@ import { Mesh, BoxGeometry, MeshStandardMaterial } from 'three'
 
 extend({ Mesh, BoxGeometry, MeshStandardMaterial })
 
-createRoot(canvas).render(
-  <>
-    <mesh>
-      <boxGeometry />
-      <meshStandardMaterial />
-    </mesh>
-  </>,
-)
+async function app() {
+  const root = createRoot(document.querySelector('canvas'))
+  await root.configure()
+  root.render(
+    <>
+      <mesh>
+        <boxGeometry />
+        <meshStandardMaterial />
+      </mesh>
+    </>,
+  )
+}
+
+app()
 ```
 
 There's an [official babel plugin](https://github.com/pmndrs/react-three-babel) which will do this for you automatically:
@@ -167,12 +201,18 @@ There's an [official babel plugin](https://github.com/pmndrs/react-three-babel)
 
 import { createRoot } from '@react-three/fiber'
 
-createRoot(canvasNode).render(
-  <mesh>
-    <boxGeometry />
-    <meshStandardMaterial />
-  </mesh>,
-)
+async function app() {
+  const root = createRoot(document.querySelector('canvas'))
+  await root.configure()
+  root.render(
+    <mesh>
+      <boxGeometry />
+      <meshStandardMaterial />
+    </mesh>,
+  )
+}
+
+app()
 
 // Out:
 
@@ -185,10 +225,16 @@ extend({
   MeshStandardMaterial: _MeshStandardMaterial,
 })
 
-createRoot(canvasNode).render(
-  <mesh>
-    <boxGeometry />
-    <meshStandardMaterial />
-  </mesh>,
-)
+async function app() {
+  const root = createRoot(document.querySelector('canvas'))
+  await root.configure()
+  root.render(
+    <mesh>
+      <boxGeometry />
+      <meshStandardMaterial />
+    </mesh>,
+  )
+}
+
+app()
 ```

docs/API/events.mdx

@@ -1,7 +1,7 @@
 ---
 title: Events
 description: All the events you can hook up to
-nav: 8
+nav: 7
 ---
 
 `three.js` objects that implement their own `raycast` method (meshes, lines, etc) can be interacted with by declaring events on them. We support pointer events, clicks and wheel-scroll. Events contain the browser event as well as the `three.js` event data (object, point, distance, etc). You may want to [polyfill](https://github.com/jquery/PEP) them, if that's a concern.

docs/API/hooks.mdx

@@ -1,7 +1,7 @@
 ---
 title: Hooks
 description: Hooks are the heart of react-three-fiber
-nav: 7
+nav: 6
 ---
 
 Hooks allow you to tie or request specific information to your component. For instance, components that want to participate in the renderloop can use `useFrame`, components that need to be informed of three.js specifics can use `useThree` and so on. All hooks clean up after themselves once the component unmounts.

docs/API/objects.mdx

@@ -1,7 +1,7 @@
 ---
 title: Objects, properties and constructor arguments
-description: 'All the effective ways of using React Three Fiber'
-nav: 6
+description: All the effective ways of using React Three Fiber
+nav: 5
 ---
 
 ## Declaring objects

docs/tutorials/testing.mdx → docs/API/testing.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Testing'
-description: Let's test our 3D Scene
-nav: 19
+description: How to handle unit tests
+nav: 10
 ---
 
 Like with every other application testing is an important factor when it comes to releasing an application into the wild and when it comes to React Three Fiber we can use React Three Test Renderer to achieve this.

docs/tutorials/typescript.mdx → docs/API/typescript.mdx

@@ -1,11 +1,9 @@
 ---
-title: Using with TypeScript
-description: This guide will help through common scenarios and how to approach them with TypeScript.
-nav: 18
+title: TypeScript
+description: Common scenarios and how to approach them with TypeScript
+nav: 9
 ---
 
-This tutorial will assume some React and TypeScript knowledge. You can fork and follow along from [this starter codesandbox](https://codesandbox.io/s/brnsm).
-
 ## Typing with `useRef`
 
 React's `useRef` won't automatically infer types despite pointing it to a typed ref.
@@ -85,7 +83,7 @@ declare module '@react-three/fiber' {
 }
 
 // react-three-fiber will create your custom component and TypeScript will understand it
-;<customComponent />
+<customComponent />
 ```
 
 ## Exported types

docs/advanced/pitfalls.mdx

@@ -1,7 +1,7 @@
 ---
 title: Performance pitfalls
 description: Performance 1x1
-nav: 11
+nav: 12
 ---
 
 ## Tips and Tricks

docs/advanced/scaling-performance.mdx

@@ -1,7 +1,7 @@
 ---
 title: Scaling performance
 description: This is a short primer on how to scale performance.
-nav: 10
+nav: 11
 ---
 
 Running WebGL can be quite expensive depending on how powerful your devices are. In order to mitigate this, especially if you want to make your application available to a broad variety of devices, including weaker options, you should look into performance optimizations. This article goes through a couple of them.

docs/tutorials/basic-animations.mdx

@@ -1,7 +1,7 @@
 ---
 title: Basic Animations
 description: This guide will help you understand refs, useFrame and how to make basic animations with Fiber
-nav: 16
+nav: 17
 ---
 
 This tutorial will assume some React knowledge, and will be based on [this starter codesandbox](https://codesandbox.io/s/getting-started-01-12q81?from-embed), so just fork it and follow along!

docs/tutorials/events-and-interaction.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Events and Interaction'
 description: Let's make our meshes react to user input.
-nav: 13
+nav: 14
 ---
 
 This tutorial will assume some React knowledge, and will be based on [this starter codesandbox](https://codesandbox.io/s/getting-started-01-12q81?from-embed), so just fork it and follow along!

docs/tutorials/how-it-works.mdx

@@ -2,7 +2,7 @@
 title: How does it work?
 description: This is an advanced guide on the inner workings of Fiber, if you are just getting started, take a
   look at our introduction!
-nav: 20
+nav: 18
 ---
 
 React Three Fiber is a React <a href="https://reactjs.org/docs/codebase-overview.html#renderers">renderer</a> for **three.js**.

docs/tutorials/loading-models.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Loading Models'
 description: 3D Software to the web!
-nav: 14
+nav: 15
 ---
 
 > All the models in this page were created by Sara Vieira and are freely available to download from any of the sandboxes.

docs/tutorials/loading-textures.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Loading Textures'
 description: Let's load some fancy textures.
-nav: 15
+nav: 16
 ---
 
 > All textures used in this chapter were downloaded from [cc0textures](https://cc0textures.com/).