⚡️ 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 dev
yarn build
cd package
npm run release