Skip to main content

​
Post-Processing Effects

Filament provides a comprehensive suite of post-processing effects that can dramatically enhance the visual quality of your rendered scenes.

​
Bloom

Bloom creates a glow effect around bright areas, simulating camera lens artifacts and light scattering.

​
Basic Bloom Configuration

view->setBloomOptions({
    .enabled = true,
    .strength = 0.3f,     // Bloom intensity (0.0 - 1.0)
    .dirtStrength = 0.5f  // Lens dirt effect strength
});
Screenshot Description: A bright light source with a soft glow extending outward, creating a dreamy, cinematic look. The bloom effect is most visible around the light bulb and bright reflections.

​
Bloom with Dirt Texture

Lens dirt textures add realistic camera imperfections: 
g_params.bloomOptions.dirt = FilamentApp::get().getDirtTexture();
g_params.bloomOptions.dirtStrength = 0.5f;
Source: samples/material_sandbox.cpp:345 The dirt texture should be a grayscale image representing lens smudges and dust that scatter light.

​
Interactive Bloom Controls

ImGui::Checkbox("Bloom", &params.bloomOptions.enabled);
if (params.bloomOptions.enabled) {
    ImGui::SliderFloat("Strength", &params.bloomOptions.strength, 0.0f, 1.0f);
    ImGui::SliderFloat("Dirt", &params.bloomOptions.dirtStrength, 0.0f, 1.0f);
}
Source: samples/material_sandbox.cpp:723-727

​
Depth of Field (DOF)

DOF simulates camera focus, blurring objects based on their distance from the focal plane.

​
DOF Setup

DOF is configured through the View settings and controlled via ViewerGui: 
if (app.viewer->getSettings().view.dof.enabled) {
    // DOF parameters are managed by viewer settings
    // Focus distance, aperture, and blur amount
}
Source: samples/gltf_viewer.cpp:1130 Screenshot Description: A scene where the foreground object is in sharp focus while the background gradually blurs, creating a shallow depth of field effect similar to a DSLR camera with a wide aperture.

​
DOF Parameters

  • Focus Distance: Distance to the plane of sharp focus
  • Blur Scale: Controls the amount of blur (similar to aperture size)
  • Max CoC Radius: Maximum circle of confusion in pixels

​
Tone Mapping & Color Grading

Tone mapping converts HDR rendering output to displayable LDR range, while color grading adjusts the final look.

​
Color Grading Options

ColorGradingOptions options = {
    .enabled = true,
    .quality = ColorGrading::QualityLevel::HIGH,
    .toneMapping = ToneMapping::ACES,
    .temperature = 0.0f,      // White balance (-100 to 100)
    .tint = 0.0f,             // Green-magenta shift
    .exposure = 0.0f,         // EV adjustment
    .contrast = 1.0f,         // Contrast multiplier
    .vibrance = 1.0f,         // Vibrance boost
    .saturation = 1.0f,       // Saturation multiplier
};

​
Tone Mapping Operators

Filament supports multiple tone mapping algorithms:
  • ACES: Academy Color Encoding System (film-like, recommended)
  • Filmic: Alternative filmic curve
  • Linear: No tone mapping (for LDR content)
  • Reinhard: Classic tone mapping operator
Screenshot Description: Side-by-side comparison showing the same scene with different tone mapping: ACES (left) with rich, film-like colors and smooth highlight rolloff, versus Linear (right) with clipped highlights and less color depth.

​
Advanced Color Grading

ColorGrading* colorGrading = ColorGrading::Builder()
    .toneMapping(ToneMapping::ACES)
    .exposure(1.0f)
    .contrast(1.1f)
    .saturation(1.05f)
    .build(*engine);

view->setColorGrading(colorGrading);

​
Screen Space Ambient Occlusion (SSAO)

SSAO adds contact shadows and depth to scenes by darkening occluded areas.

​
SSAO Configuration

view->setAmbientOcclusionOptions({
    .enabled = true,
    .radius = 0.3f,                    // AO sampling radius
    .bias = 0.0005f,                   // Depth bias to prevent artifacts
    .power = 1.0f,                     // AO intensity exponent
    .intensity = 1.0f,                 // AO darkening intensity
    .bilateralThreshold = 0.05f,       // Edge-preserving filter
    .quality = View::QualityLevel::HIGH,
    .lowPassFilter = View::QualityLevel::MEDIUM,
    .upsampling = View::QualityLevel::HIGH,
    .minHorizonAngleRad = 0.0f,        // Min angle for AO
    .ssct = { /* Screen-space cone tracing */ }
});
Source: samples/material_sandbox.cpp:621-649

​
SSAO Quality Levels

  • LOW: Fast, good for mobile
  • MEDIUM: Balanced quality/performance
  • HIGH: Better quality, more samples
  • ULTRA: Highest quality, desktop only
Screenshot Description: A complex geometric scene showing SSAO in action - notice the subtle darkening in crevices, corners, and where objects are close together, adding depth perception.

​
Bent Normals for Specular AO

params.ssaoOptions.bentNormals = true;
Source: samples/material_sandbox.cpp:634 Bent normals improve specular reflections by considering occlusion, making reflections more realistic.

​
Screen Space Cone Tracing (SSCT)

SSCT adds directional ambient shadows from light sources: 
params.ssaoOptions.ssct = {
    .enabled = true,
    .lightConeRad = 1.0f,          // Light cone angle
    .shadowDistance = 0.3f,         // Max shadow distance
    .contactDistanceMax = 1.0f,     // Contact shadow distance
    .intensity = 0.8f,              // Shadow intensity
    .lightDirection = float3(0, -1, 0),
    .depthBias = 0.01f,
    .depthSlopeBias = 0.01f,
    .sampleCount = 4,
    .rayCount = 1
};
Source: samples/material_sandbox.cpp:651-664 Screenshot Description: A scene with directional lighting showing soft contact shadows beneath objects, created by SSCT tracing light occlusion in screen space.

​
Vignette Effect

Vignette darkens the edges of the frame, drawing focus to the center: 
view->setVignetteOptions({
    .enabled = true,
    .midPoint = 0.5f,    // Center point (0.0 - 1.0)
    .roundness = 0.5f,   // Circular vs rectangular
    .feather = 0.5f,     // Edge softness
    .color = {0, 0, 0, 1} // Vignette color (usually black)
});

​
Temporal Anti-Aliasing (TAA)

TAA reduces aliasing artifacts using temporal sampling: 
view->setTemporalAntiAliasingOptions({
    .enabled = true,
    .feedback = 0.12f,      // History blend factor
    .filterWidth = 1.0f,    // Spatial filter width
});
TAA is particularly effective at reducing edge aliasing and temporal shimmer.

​
Multi-Sample Anti-Aliasing (MSAA)

MSAA provides hardware anti-aliasing: 
view->setMultiSampleAntiAliasingOptions({
    .enabled = true,
    .sampleCount = 4,  // 1, 2, 4, or 8
    .customResolve = false
});
Note: MSAA has significant performance cost. Use TAA for better performance.

​
Post-Processing Pipeline Order

Filament applies effects in this order:
  1. SSAO computation
  2. Lighting and materials
  3. SSR (if enabled)
  4. TAA (if enabled)
  5. DOF
  6. Bloom
  7. Color grading and tone mapping
  8. Vignette
  9. Dithering
  10. FXAA (if enabled)

​
Disabling Post-Processing

For maximum performance or stylized rendering: 
view->setPostProcessingEnabled(false);
Source: samples/animation.cpp:76, samples/image_viewer.cpp:294-295 This disables all post-processing, including tone mapping. Useful for UI rendering or effects composition.

​
Performance Considerations

​
Effect Performance Impact (relative)

EffectMobileDesktop
BloomMediumLow
DOFHighMedium
SSAOHighMedium
TAALowLow
MSAA 4xHighMedium
Color GradingLowLow

​
Optimization Tips

  1. Use TAA instead of MSAA for better performance
  2. Lower SSAO quality on mobile devices
  3. Reduce bloom iterations for faster performance
  4. Use lower DOF quality or disable on mobile
  5. Combine effects wisely - too many can overwhelm the scene

​
Best Practices

  1. Subtle is Better: Keep effect strengths low for realistic results
  2. Test on Target Hardware: Mobile devices may struggle with multiple effects
  3. Artistic Direction: Match effects to your game’s visual style
  4. Dynamic Adjustment: Allow players to toggle effects for performance
  5. HDR Pipeline: Always render in HDR and tone map at the end
  • material_sandbox.cpp - Interactive post-processing controls
  • gltf_viewer.cpp - Full post-processing pipeline with GUI
  • image_viewer.cpp - Minimal post-processing for image display

Build docs developers (and LLMs) love

Get started for freeTalk to us