@react-three/tsl 10.0.0-canary.04087d8

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@react-three/tsl",
+  "version": "10.0.0-canary.04087d8",
+  "description": "TSL resource hooks for react-three-fiber: uniforms, nodes, buffers, GPU storage and render pipelines on WebGPU",
+  "keywords": [
+    "react",
+    "three",
+    "threejs",
+    "react-three-fiber",
+    "webgpu",
+    "tsl"
+  ],
+  "author": "Dennis Smolek (https://github.com/dennissmolek)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pmndrs/react-three-fiber/issues"
+  },
+  "homepage": "https://github.com/pmndrs/react-three-fiber/tree/v10/packages/tsl#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pmndrs/react-three-fiber.git",
+    "directory": "packages/tsl"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./dist/index.mjs",
+    "./dist/index.cjs"
+  ],
+  "files": [
+    "dist",
+    "readme.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "dequal": "^2.0.3",
+    "zustand": "^5.0.10"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": "^10.0.0-alpha.6",
+    "react": ">=19.0 <19.4",
+    "three": ">=0.185.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.185.0",
+    "@webgpu/types": "^0.1.64",
+    "three": ">=0.185.0",
+    "@react-three/fiber": "10.0.0-canary.04087d8"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}

package/readme.md

@@ -0,0 +1,53 @@
+# @react-three/tsl
+
+TSL resource hooks for [react-three-fiber](https://github.com/pmndrs/react-three-fiber) on WebGPU: shared uniforms, nodes, buffers, GPU storage and render pipelines.
+
+```bash
+npm install @react-three/tsl
+```
+
+```tsx
+import { Canvas, useFrame } from '@react-three/fiber'
+import { useUniforms, useNodes } from '@react-three/tsl'
+import { positionLocal, normalLocal, sin, time } from 'three/tsl'
+
+function Wobble() {
+  const { uAmount } = useUniforms({ uAmount: 0.2 })
+  const { offset } = useNodes(() => ({ offset: normalLocal.mul(sin(time).mul(uAmount)) }))
+
+  return (
+    <mesh>
+      <sphereGeometry />
+      <meshStandardNodeMaterial positionNode={positionLocal.add(offset)} />
+    </mesh>
+  )
+}
+
+function Driver() {
+  // The resources are on RootState: frame state, useThree and creators all read them.
+  useFrame(({ uniforms, elapsed }) => {
+    uniforms.uAmount.value = Math.abs(Math.sin(elapsed))
+  })
+  return null
+}
+
+export const App = () => (
+  <Canvas renderer>
+    <Wobble />
+    <Driver />
+  </Canvas>
+)
+```
+
+| Export                        | What it does                                                                 |
+| ----------------------------- | ---------------------------------------------------------------------------- |
+| `useUniforms`, `useUniform`   | Create or read uniforms, shared across components, optionally scoped         |
+| `useNodes`, `useLocalNodes`   | Share TSL nodes across components, or compose them locally                   |
+| `useBuffers`, `useGPUStorage` | Buffers and storage textures for compute                                     |
+| `useRenderPipeline`           | Post-processing with three's `RenderPipeline` (scene pass, MRT, output node) |
+
+Resources belong to the renderer: a `<Canvas primary>`, the canvases sharing its renderer (every other WebGPU canvas, or `share="id"`) and every portal inside them share one set. They live on the primary canvas's `RootState` (`state.uniforms`, `state.nodes`, `state.buffers`, `state.gpuStorage`); secondaries hold the same objects and portals inherit them from their parent (a portal's scene and camera stay its own), so `state.uniforms` reads the same everywhere.
+
+Works under any Canvas that runs the WebGPU renderer: `@react-three/fiber` with the `renderer` prop, or `@react-three/fiber/webgpu`. It reaches fiber only through the three-free `@react-three/fiber/extension` entry, so it adds no renderer and no second copy of fiber to your bundle.
+
+Full documentation: [WebGPU & TSL](https://github.com/pmndrs/react-three-fiber/tree/v10/docs/webgpu).