Skip to content

⚡️ A React abstraction for the popular three-gpu-pathtracer

License

Notifications You must be signed in to change notification settings

pmndrs/react-three-gpu-pathtracer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


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 .


Chat on Twitter Chat on Twitter


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