@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. 📦

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.

Props

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

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>

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
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.

Note on controls

When you set controls be sure to use makeDefault and it's best to import the OrbitControls from drei

<OrbitControls makeDefault>
        // ...

Development

Dev

cd project-root
yarn
yarn dev

Build

yarn build

Publish

cd package
npm run release