0.1.1 • Published 1 year ago
@react-three/gpu-pathtracer v0.1.1
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. |