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
19
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.0.1
Source
npmnpm
Version published
Weekly downloads
103
Maintainers
19
Weekly downloads
 
Created
Source

react-three-gpu-pathtracer


Chat on Twitter Chat on Twitter


These demos are real, you can click them! They contain the 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>
  )
}

Docs

<Pathtracer />

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

Props

PropTypeDefaultDescription
samplesnumber1Number of samples
tilesTHREE.Vector2 | number | [number, number][1, 1]Number of tiles
bouncesnumber3Number of ray bounces
pausedbooleanfalsePauses rendering if set to true
enabledbooleantrueDisables Path Tracing is set to false
renderPrioritynumber1Render priority for internal render loop
resolutionScalenumber0.5Scaling factor for resolution. 0.5 means half of screen resolution
backgroundPartial<PathtracerBackground>See belowOptions for the background.

PathtracerBackground

PropTypeDefaultDescription
type'Environment' | 'Gradient''Environment'Type of background
blurnumber0.5Strength of blur on env map when type is Environment
intensitynumber1Strength of env map when type is Environment
topTHREE.ColorRepresentation#444444Top color of gradient when type is Gradient
bottomTHREE.ColorRepresentation#000000Bottom color of gradient when type is Gradient

usePathtracer

This hook provides access to useful functions in the internal renderer. Can only be used within the <Pathtracer /> component.

const { renderer, clear, update, refit, render } = usePathtracer()
Return valueTypeDescription
rendererPathTracingRendererInternal renderer.
clear() => voidClear's the textures. Equiv to renderer.reset()
update() => voidRe-calculates and re-uploads BVH. Needed when new objects/materials are added to/removed from the scene.
refit() => voidRe-fits (NOT re-calculate) the BVH. Cheaper then update(). Can be called instead of update() when any object's transforms change
render(samples?: number, paused?: boolean) => voidRuns one instance of the internal render loop. can be used to control the internal loop in combination with enabled={false}

usePathtracedFrames

Use this hook to execute a callback after each frame is done rendering. Can be used to render out frame rate independent videos or images straight from the canvas.

We recommend you the library canvas-capture to capture each frame and render it out as a video or image sequence like in this example.

const { start, stop } = usePathtracedFrames({
  frames: 60,
  samples: 300,
  onStart: ({ gl }) => {
    CanvasCapture.init(gl.domElement)
    CanvasCapture.beginVideoRecord({ format: CanvasCapture.WEBM, name: 'vid', fps: 60 })
  },
  onFrame: (_, renderer, dt) => {
    CanvasCapture.recordFrame()
  },
  onEnd: () => {
    CanvasCapture.stopRecord()
  },
})
PropsTypeDefaultDescription
framesnumber1Maximum number of frames to capture.
samplesnumber3Samples per frame.
onStart(state: RootState) => voidundefinedThis callback runs before the first frame.
onFrame(state: RootState, renderer: PathTracingRenderer, delta: number) => voidundefinedThis callback runs after each frame is rendered.
onEnd(state: RootState) => voidundefinedThis callback runs after the last frame.
Return valueTypeDescription
start() => voidStarts the capture.
stop() => voidStops the capture.

Note: The capture is stopped once the prescribed frames are rendered.

Internal state

react-three-gpu-pathtracer also attaches a few custom properties to the renderer. They can be accessed through renderer.__r3fState. Here are the properties:

PropsTypeDescription
initializedbooleanThis flag is set to true as soon as the renderer is initialized.
framesnumberFrame count since last reset. Resets when clear(), refit() or update(0) is called.
samplesnumberSample count for each frame. Resets each frame.

Keywords

react

FAQs

Package last updated on 11 May 2022

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