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.