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. 📦 More examples here

3D model by KuayArts (@kuayarts) on Sketchfab.

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
`alpha`	`number`	`1`	Alpha of the scene background. Must be set to `<1` to see behind the canvas. Two extra render targets are used if `<1`.
`samples`	`number`	`1`	Number of samples per-frame
`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.
`resolutionFactor`	`number`	`1`	Scaling factor for resolution.`0.5` means the scene will be rendered at half of screen resolution. Higher is better quality but slower performance.
`backgroundBlur`	`number`	`0`	Strength of blur on background env map.
`backgroundIntensity`	`number`	`1`	Strength of the light cast by the env map.

Backgrounds

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
  />
</Pathtracer>

Or you can use a solid color as the background

<Canvas>
    <color args={[0xff0000]} attach="background" />

    <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()