Skip to content

@threepipe/plugin-path-tracing

Provides plugin(s) for path-tracing.

Exports

It provides options to configure the path tracing parameters such as bounces, samples per frame, and more.

It also integrates with the Three.js scene and camera, updating materials and lights as needed.

Serialization and deserialization are supported for plugin state management.

It listens to scene updates, camera changes, and material updates to refresh the path tracing setup.

It can be enabled or disabled, and it automatically handles rendering to the screen or to a texture.

It supports progressive rendering, allowing for a smooth transition of rendered frames.

ExampleSource CodeAPI Reference

NPM Package

bash
npm install @threepipe/plugin-path-tracing

Note

This is still a WIP.

Editor

Path tracing rendering can be done directly in the tweakpane editor or threepipe editor.

Simply enable the plugin from the UI.

Sample Usage

To use the plugin, simply add it to the viewer.

The plugin automatically interfaces with the ProgressivePlugin to render upto maxFrameCount. The samples are rendered whenever the plugin is enabled and the camera is not moving.

The WebGLPathTracer instance in the plugin can be accessed via viewer.getPlugin(ThreeGpuPathTracer).tracer property or edited in the UI.

typescript
import {ThreeViewer} from 'threepipe'
import {ThreeGpuPathTracer} from '@threepipe/plugin-path-tracing'

const viewer = new ThreeViewer({...})
const pathTracer = viewer.addPluginSync(new ThreeGpuPathTracer(false)) // add the plugin disabled
console.log(pathTracer.tracer) // access the path tracer instance

// load files and environment

pathTracer.enabled = true // enable the plugin to start rendering

Check the three-gpu-pathtracer example for a live demo.

ThreePipe - Make 3D applications on the web