@react-three/gpu-pathtracer

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

Return value	Type	Description
renderer	PathTracingRenderer	Internal renderer. Can be used to access/edit internal properties
reset	() => void	Clear's the textures. Equiv to renderer.reset(). Must be called every time the camera moves.
update	() => void	Re-calculates and re-uploads BVH. Needed when new objects/materials are added to/removed from the scene.