
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
@react-three/gpu-pathtracer
Advanced tools
⚡️ A React abstraction for the popular three-gpu-pathtracer.
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.
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 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 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. |
FAQs
⚡️ A React abstraction for the popular three-gpu-pathtracer.
The npm package @react-three/gpu-pathtracer receives a total of 152 weekly downloads. As such, @react-three/gpu-pathtracer popularity was classified as not popular.
We found that @react-three/gpu-pathtracer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.