\n\n \n\n`react-three-gpu-pathtracer` lets you render your `react-three-fiber` scenes using Path Tracing! It is as simple as\n\n```jsx\nimport { Pathtracer } from \"@react-three/gpu-pathtracer\";\n\nfunction GradientSphere() {\n return (\n \n );\n}\n```\n\nThe `` component wraps your scene. The scene is then rendered using Path Tracing.\n\n#### Props\n\n| Prop | Type | Default | Description |\n| ------------ | ---------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------- |\n| `minSamples` | `number` | `1` | Default: 5. Min number of samples before blending the base scene with the pathtraced one. |\n| `samples` | `number` | `1` | Max number of samples before the pathtracer stops. |\n| `frames` | `number` | `Infinity` | Number of frames to path trace. Will pause rendering once this number is reached. |\n| `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. |\n| `bounces` | `number` | `1` | The number of ray bounces to test. Higher is better quality but slower performance. |\n| `enabled` | `boolean` | `true` | Wether to enable pathtracing. |\n\n### Env maps\n\nEnv maps can be added using [Drei's ``](https://github.com/pmndrs/drei#environment) component just like in a regular scene.\n\n```jsx\n\n \n\n```\n\n### `usePathtracer`\n\nThis hook provides access to useful functions in the internal renderer. Can only be used within the `` component.\n\n```ts\nconst { renderer, update, reset } = usePathtracer();\n```\n\n| Return value | Type | Description |\n| -------------- | ----------------- | ------------------------------------------------------------------------------------------- |\n| `pathtracer` | `WebGLPathTracer` | Internal renderer. Can be used to access/edit internal properties |\n| ~~`renderer`~~ | `WebGLPathTracer` | DEPRECIATED: use `pathtracer` to not get confused with raster renderer |\n| `reset` | `() => void` | Flushes the rendered scene and resets the samples count. |\n| `update` | `() => void` | Tells the pathtracer that the scene has been updated. Everything is managed internally now. |\n\n### Note on controls\n\nWhen you set controls be sure to use `makeDefault` and it's best to import the `OrbitControls` [from drei](https://drei.docs.pmnd.rs/controls/introduction)\n\n```jsx\n\n // ...\n```\n\n### Development\n\n#### Dev\n\n```bash\ncd project-root\nyarn\nyarn dev\n```\n\n#### Build\n\n```bash\nyarn build\n```\n\n#### Publish\n\n```bash\ncd package\nnpm run release\n```\n","readmeFilename":"README.md"}
![](\"https://github.com/pmndrs/react-three-gpu-pathtracer/blob/main/assets/hero-screenshot.png?raw=true\"/)
\n![](\"https://img.shields.io/npm/v/@react-three/gpu-pathtracer.svg?style=flat&colorA=000000&colorB=000000\")
\n \n \n ![](\"https://img.shields.io/npm/dm/@react-three/gpu-pathtracer.svg?style=flat&colorA=000000&colorB=000000\")
\n \n \n ![\"Chat](\"https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000\")
![\"Chat](\"https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000\")