Render pipeline

Threepipe includes a RenderManager for managing the composition pipeline, and provides helpers for rendering and render target management.

The RenderManager includes an EffectComposer from three.js for rendering passes and a WebGLRenderer for rendering, but the pass management and sorting is managed by the RenderManager itself.

The RenderManager inherits from RenderTargetManager which provides utilities for creating, tracking and destroying dedicated and temporary render targets.

The main render pipeline supports progressive rendering and is fully configurable. Plugins and applications can add custom passes, effects, and shaders to the pipeline.

Plugins like GBufferPlugin, SSAOPlugin, TonemapPlugin, etc interact and extend the render pipeline by adding custom passes to the render pipeline and material extensions to the material manager.

Render Targets

Render targets can be created using the viewer.renderManager.createTarget and viewer.renderManager.createTargetCustom methods. These can then be disposed using the viewer.renderManager.disposeTarget method when not needed anymore.

Or to create temp targets for one time/temporary use viewer.renderManager.getTempTarget and viewer.renderManager.releaseTempTarget methods can be used. All created render targets are tracked in the RenderManager, and are resized and disposed automatically when needed along with the viewer.

const newTarget = viewer.renderManager.createTarget({sizeMultiplier: 1})
// or
const newTarget2 = viewer.renderManager.createTarget({size: {
    width: 1024,
    height: 1024,
  },
  type: HalfFloatType
})
// or clone an existing target
const newTarget3 = viewer.renderManager.composerTarget.clone()
// for multi-sample render target
const newTarget4 = viewer.renderManager.createTarget({sizeMultiplier: 1, samples: 4})

// or create a custom target
const newTarget5 = viewer.renderManager.createTargetCustom(
    {width: 1024, height: 1024},
    {type: HalfFloatType},
    WebGLCubeRenderTarget
)

// dispose targets
viewer.renderManager.disposeTarget(newTarget)
viewer.renderManager.disposeTarget(newTarget2)
viewer.renderManager.disposeTarget(newTarget3)
viewer.renderManager.disposeTarget(newTarget4)
viewer.renderManager.disposeTarget(newTarget5)

// get a temporary target
const tempTarget = viewer.renderManager.getTempTarget({sizeMultiplier: 1})
// release the temporary target
viewer.renderManager.releaseTempTarget(tempTarget)

TIP

Render targets created with a sizeMultiplier are automatically resized when the canvas is resized.

Passes

By default, the render pipeline(ViewerRenderManager includes 2 passes - RenderPass for rendering the scene hierarchy and ScreenPass for rendering the final output on the canvas.

More passes can be added and removed from the pipeline using the registerPass and unregisterPass methods.

The pipeline passes need to follow the interface of IPipelinePass and IPipelinePassPlugin. Which adds some important parameters over the three.js Pass, like pass id and support for defining where the pass should be added in the pipeline and it's dependants.

const pass = new GBufferRenderPass('customPass', viewer.renderManager.createTarget({sizeMultiplier: 1}))
pass.before = ['render'] // Add the pass before the render pass
pass.after = [] // Add the pass after these passes (none in this case)
pass.required = ['render'] // render pass is required to be in the pipeline for this. throws an error if not found
viewer.renderManager.registerPass(pass)

INFO

See PipelinePassPlugin for an abstract plugin that provides the boilerplate to create a plugin that registers a custom pass in the pipeline. Check NormalBufferPlugin for an example of that.

TIP

All effects in post-processing or material extension need not be a separate pass in the pipeline. Most effects can be achieved with either extending the scene object material shaders or the Screen Pass material shader using Material extension system