post-processing

name	post-processing
description	Explains how PostProcessPlugin intercepts the Three.js pipeline for WebGPU-compatible Bloom and Color Grading.

Post-Processing Architecture

The PostProcessPlugin.ts manages cinematic effects like Bloom, Tone Mapping, and Depth of Field. In a WebGPU context, this leverages the modern PostProcessing node system rather than the older EffectComposer.

Core Concepts

WebGPU Node Pipeline

WebGPU Post-Processing in Three.js is achieved by replacing the standard renderer.render(scene, camera) loop with a Node-based pass system.

• The scene is wrapped in a pass node.
• Effect nodes (e.g., bloom(), colorCorrection()) are chained sequentially.

The Render Loop Override

When PostProcessPlugin is enabled, it takes control of the main rendering loop from the core engine.

• Instead of calling renderer.render(), it calls postProcessing.render().
• If the plugin is disabled via the UI, it falls back to the default forward renderer to save performance.

Key Effects

• Bloom: Extracts highly emissive pixels (like the sun or magical effects) and blurs them across multiple mip-levels before compositing them back over the scene.
• Tone Mapping & Exposure: Standardizes the High Dynamic Range (HDR) colors coming from the IBLPlugin and SkyPlugin into standard monitor color space (sRGB), using ACES Filmic mapping.

Key Interactions

• Performance Impact: High. Disabling this plugin provides the largest FPS boost.
• Mutates the core render loop. If another plugin needs to read the final framebuffer, it must coordinate with the PostProcess node chain.