react-three-gpu-pathtracer

⚡️ A React abstraction for the popular three-gpu-pathtracer

This demo is real, you can click it! It contains full code, too. 📦

GameBoy model by
(@kleingeo)

on Sketchfab

. GameBoy Cartridge by
(@MeBob)

on Sketchfab

.

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

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

function GradientSphere() {
return (

{/ Your scene /}

);
}
`

The 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. |

$3

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

`jsx

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

`

$3

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

`ts
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. |

$3

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

`jsx

// ...
`

$3

#### Dev

`bash
cd project-root
yarn
yarn dev
`

#### Build

`bash
yarn build
`

#### Publish

`bash
cd package
npm run release
``