1. Prerequisites / When to use

Prerequisites / When to use
- A working React app (Vite/Next.js)
- Need a minimal TSL + R3F example
- WebGPU support preferred (fallback to WebGL if needed)

2. Install

# Install in your app
npm i three @react-three/fiber

3. Quick start (full example)

This example uses color、 time、 sin、 positionLocal TSL nodes.

import { Canvas, extend } from "@react-three/fiber"
import { WebGPURenderer, MeshBasicNodeMaterial } from "three/webgpu"
import { color, time, sin, positionLocal } from "three/tsl"
import { useMemo } from "react"

// Register the node material so it can be used as <meshBasicNodeMaterial /> in JSX
extend({ MeshBasicNodeMaterial })

export default function ColorPlaneTSL() {
  const colorNode = useMemo(() => {
    const R = sin(positionLocal.x.add(time)).add(1).mul(0.5)
    const G = sin(positionLocal.y.add(time)).add(1).mul(0.5)
    const B = sin(positionLocal.x.add(time)).add(1).mul(0.5)
    return color(R, G, B)
  }, [])

  return (
    <Canvas
      gl={async (props) => {
        const r = new WebGPURenderer(props)
        await r.init?.() 
        return r
      }}
      camera={{ position: [0, 0, 2.5], fov: 50 }}
      style={{ width: "100%", height: "100vh", background: "black" }}
    >
      <mesh>
        <planeGeometry />
        <meshBasicNodeMaterial colorNode={colorNode} />
      </mesh>
    </Canvas>
  )
}

3.1 Key snippets

(1) Register node material

import { extend } from "@react-three/fiber"
import { MeshBasicNodeMaterial } from "three/webgpu"
extend({ MeshBasicNodeMaterial })

(2) Create WebGPU renderer

<Canvas
  gl={async (props) => {
    const r = new WebGPURenderer(props)
    await r.init?.()
    return r
  }}
  camera={{ position:[0,0,2.5], fov:50 }}
/>

(3) Build a TSL color node

import { color, time, sin, positionLocal } from "three/tsl"
const colorNode = useMemo(() => {
  const R = sin(positionLocal.x.add(time)).add(1).mul(0.5)
  const G = sin(positionLocal.y.add(time)).add(1).mul(0.5)
  const B = sin(positionLocal.x.add(time)).add(1).mul(0.5)
  return color(R, G, B)
}, [])

(4) Apply to the mesh

<mesh>
  <planeGeometry />
  <meshBasicNodeMaterial colorNode={colorNode} />
</mesh>

4. Run & verify

Run & verify
- Black background + color-changing plane over time
- No errors in console

5. Troubleshooting black screen

Black screen?
1) Ensure your browser supports WebGPU (enable flags or update)
2) Temporarily fallback to WebGL (sample):
   import { WebGLRenderer } from "three";
   <Canvas gl={(props) => new WebGLRenderer(props)} ... />
   * Node/material support then depends on your three version

6. Next steps

- Switch to MeshStandardNodeMaterial for lighting
- Combine textures/time/noise nodes for richer effects