TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published


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

Chat on Twitter Chat on Twitter

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 (
      <Pathtracer>{/* Your scene */}</Pathtracer>

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

Env maps can be added using Drei's <Environment /> component just like in a regular scene.

    background // Optional, set as scene background

Or you can use a solid color as the background

    <color args={[0xff0000]} attach="background" />

        // ...


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.

Package Sidebar


npm i @react-three/gpu-pathtracer

Weekly Downloads






Unpacked Size

40.8 kB

Total Files


Last publish


  • bela-bohlender
  • nksaraf
  • isaacmason
  • wiledal
  • codyjasonbennett
  • farazshaikh
  • joergjaeckel
  • bjornstar
  • gsimone
  • giulioz
  • stephencorwin
  • dropthebeatbro
  • mlperego
  • sniok
  • iinfin
  • codynova
  • drcmda
  • marcofugaro
  • alaric.baraou
  • tdfka_rick
  • stockhuman
  • unframework