⚡️ 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.
| 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. |
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>
// ...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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent