Skip to main content

Modern Post Processing

PlayCanvas offers modern post-processing workflows that provide visually advanced and performant implementations. The primary approach uses the CameraFrame class for HDR post-processing with built-in effects, but you can also create fully custom render passes for complete control.

Features​

The CameraFrame enables advanced rendering techniques including:

  • Bloom - HDR physically based bloom effect that simulates the natural glow of bright light sources
  • SSAO (Screen Space Ambient Occlusion) - Enhances depth perception by simulating ambient light occlusion
  • Depth of Field (DoF) - Mimics camera focus effects, blurring objects outside the focal plane
  • Temporal Anti-Aliasing (TAA) - Reduces visual artifacts by smoothing jagged edges over time
  • Vignette - Darkens or lightens the image edges to draw attention to the center
  • Color Grading - Adjusts brightness, contrast, saturation, and color tint for stylistic effects
  • Color LUT - Apply color lookup tables for advanced color transformations. See HDR Rendering > Color LUT for details.
  • Fringing - Chromatic aberration effect that simulates color channel separation
  • Tone Mapping - Controls how HDR colors are mapped to displayable range
  • Sharpness - Enhances image sharpness to counteract blurriness from TAA or upscaling

Setup and Usage​

For detailed information on setting up and using CameraFrame, see the HDR Rendering guide and the CameraFrame API documentation.

For Editor users, a ready-to-use script is available. See CameraFrame in the Editor for setup instructions.

Examples​

  • HDR with Bloom and LUT - Demonstrates HDR bloom and color lookup table effects
HDR with Bloom and LUT
  • Post-Processing - Shows multiple effects including bloom, grading, vignette, fringing, and TAA
Post-Processing
  • Ambient Occlusion - Demonstrates SSAO implementation
Ambient Occlusion
  • Depth of Field - Demonstrates depth of field effect
Depth of Field
  • Temporal Anti-Aliasing - Demonstrates TAA implementation
Temporal Anti-Aliasing

Custom Post Processing​

Modern post-processing can be customized and extended in several ways. Choose the approach that best fits your needs:

Customizing the Compose Shader​

Extend the CameraFrame by adding effects to the final compose pass only. This is the simplest approach when you don't need additional render passes.

Best for: Simple screen-space effects, color adjustments, quick prototyping.

Extending FramePassCameraFrame Class​

Extend the CameraFrame by adding custom frame passes. This allows you to integrate additional rendering techniques while leveraging built-in effects.

Best for: Multi-pass effects, advanced integrations, processing intermediate results.

Custom Render Passes​

Build a complete custom post-processing stack without using CameraFrame. This gives you full control over the entire rendering pipeline.

Best for: Complete custom pipelines, specialized rendering, maximum flexibility.