Skip to main content

Graphics

PlayCanvas incorporates an advanced graphics engine that delivers high-performance 3D rendering on the web. The engine provides both WebGL and WebGPU support, ensuring compatibility across all modern browsers while offering cutting-edge graphics capabilities.

Graphics Engine Backends​

The PlayCanvas engine supports multiple graphics backends:

  • WebGPU (Beta) - Next-generation graphics API with reduced driver overhead and compute shader support
  • WebGL 2.0 - Mature and widely supported across all browsers and devices
  • Null - For running the engine in headless environments such as Node.
Automatic fallback

The engine will seamlessly fall back from WebGPU to WebGL based on browser support.

Key Rendering Features​

Physically Based Rendering (PBR)​

  • Comprehensive PBR support via metallic/roughness and specular/glossiness workflows
  • Energy conservation and physically accurate lighting models
  • Support for clearcoat, anisotropy, sheen, and transmission materials

Advanced Lighting​

  • Clustered lighting system - Efficient handling of hundreds of dynamic lights
  • Directional, point, and spot lights with configurable shadows and cookies
  • Area lights - Rectangle, disk, and sphere-shaped light sources for realistic lighting
  • Image-based lighting (IBL) with HDR environment maps
  • Runtime lightmap generation for static lighting optimization

High Dynamic Range (HDR) Rendering​

  • Linear workflow with automatic gamma correction
  • HDR display output support on compatible devices
  • Advanced tone mapping operators including ACES, Neutral, and Linear
  • CameraFrame system for comprehensive post-processing pipeline

Modern Rendering Pipeline​

  • Render passes architecture enabling advanced effects
  • Multiple render targets (MRT) support
  • Depth pre-pass and temporal anti-aliasing (TAA)
  • Hardware instancing for efficient rendering of repeated geometry
  • Static and dynamic batching to reduce draw calls

Post-Processing Effects​

The CameraFrame system provides a full suite of post-processing effects:

  • HDR Bloom with physically accurate light bleeding
  • Screen Space Ambient Occlusion (SSAO)
  • Depth of Field (DoF) with bokeh effects
  • Temporal Anti-Aliasing (TAA) for smooth edges
  • Vignette, sepia, brightness/contrast and color grading

Advanced Rendering Techniques​

  • 3D Gaussian Splatting for photorealistic scene reconstruction
  • Hardware-accelerated particles for special effects
  • Mesh skinning and morphing for character animation
  • Procedural geometry generation with optimized primitives
  • Texture compression courtesy of Basis Universal

Custom Shaders​

  • Flexible shader system supporting both GLSL (WebGL) and WGSL (WebGPU)
  • Automatic shader generation with chunk-based composition
  • Preprocessor support for shader variants and includes
  • WebGPU compute shaders for GPU-accelerated computation

The graphics engine is continuously updated to leverage the latest web standards and hardware capabilities, ensuring PlayCanvas applications deliver exceptional visual quality and performance across all platforms.