react-three-gpu-pathtracer lets you render your react-three-fiber scenes using Path Tracing! It is as simple as

import { Pathtracer } from "@react-three/gpu-pathtracer";

function GradientSphere() {
  return (
    <Canvas>
      <Pathtracer>{/* Your scene */}</Pathtracer>
    </Canvas>
  );
}

The <Pathtracer /> component wraps your scene. The scene is then rendered using Path Tracing.

Props

| Prop | Type | Default | Description | | ------------ | ---------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------- | | minSamples | number | 1 | Default: 5. Min number of samples before blending the base scene with the pathtraced one. | | samples | number | 1 | Max number of samples before the pathtracer stops. | | frames | number | Infinity | Number of frames to path trace. Will pause rendering once this number is reached. | | tiles | [number, number] / THREE.Vector2 / { x: number; y: number } / number | 2 | Number of tiles. Can be used to improve the responsiveness of a page while still rendering a high resolution target. | | bounces | number | 1 | The number of ray bounces to test. Higher is better quality but slower performance. | | enabled | boolean | true | Wether to enable pathtracing. |

Env maps

Env maps can be added using Drei's <Environment /> component just like in a regular scene.

<Pathtracer>
  <Environment
    preset="..."
    background // Optional, set as scene background
    backgroundBlurriness={0.5}
    backgroundIntensity={1}
  />
</Pathtracer>

usePathtracer

This hook provides access to useful functions in the internal renderer. Can only be used within the <Pathtracer /> component.

const { renderer, update, reset } = usePathtracer();

| Return value | Type | Description | | -------------- | ----------------- | ------------------------------------------------------------------------------------------- | | pathtracer | WebGLPathTracer | Internal renderer. Can be used to access/edit internal properties | | ~~renderer~~ | WebGLPathTracer | DEPRECIATED: use pathtracer to not get confused with raster renderer | | reset | () => void | Flushes the rendered scene and resets the samples count. | | update | () => void | Tells the pathtracer that the scene has been updated. Everything is managed internally now. |

Note on controls

When you set controls be sure to use makeDefault and it's best to import the OrbitControls from drei

<OrbitControls makeDefault>
        // ...

Development

Dev

cd project-root
yarn
yarn dev

Build

yarn build

Publish

cd package
npm run release