⚡️ 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
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.
| 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 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>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. |
When you set controls be sure to use makeDefault and it's best to import the OrbitControls from drei
<OrbitControls makeDefault> // ...cd project-root yarn yarn devyarn buildcd package npm run release