You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@react-three/gpu-pathtracer

Package Overview
Dependencies
Maintainers
21
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-three/gpu-pathtracer

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

0.1.0
Source
npmnpm
Version published
Weekly downloads
163
69.79%
Maintainers
21
Weekly downloads
 
Created
Source

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

The <Pathtracer /> component wraps your scene. The scene is then rendered using Path Tracing.

Props

PropTypeDefaultDescription
alphanumber1Alpha of the scene background. Must be set to <1 to see behind the canvas. Two extra render targets are used if <1.
samplesnumber1Number of samples per-frame
framesnumberInfinityNumber of frames to path trace. Will pause rendering once this number is reached.
tiles[number, number] / THREE.Vector2 / { x: number; y: number } / number2Number of tiles. Can be used to improve the responsiveness of a page while still rendering a high resolution target.
bouncesnumber1The number of ray bounces to test. Higher is better quality but slower performance.
enabledbooleantrueWether to enable pathtracing.
resolutionFactornumber1Scaling factor for resolution.0.5 means the scene will be rendered at half of screen resolution. Higher is better quality but slower performance.
backgroundBlurnumber0Strength of blur on background env map.
backgroundIntensitynumber1Strength of the light cast by the env map.

Backgrounds

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
  />
</Pathtracer>

Or you can use a solid color as the background

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

    <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 valueTypeDescription
rendererPathTracingRendererInternal renderer. Can be used to access/edit internal properties
reset() => voidClear's the textures. Equiv to renderer.reset(). Must be called every time the camera moves.
update() => voidRe-calculates and re-uploads BVH. Needed when new objects/materials are added to/removed from the scene.

Keywords

react

FAQs

Package last updated on 22 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts