中文 | English
A lightweight Love2D demonstration project showcasing bloom effects implemented using Box Filters.
This project implements an efficient blur algorithm based on box filters. Compared to traditional Gaussian blur, it offers the following advantages:
- Sampling count is independent of blur radius, fixed to a finite number
- Better performance on mobile devices and performance-limited platforms
- Visual effects similar to Gaussian blur
- Up/Down arrow keys: Adjust brightness threshold
- Left/Right arrow keys: Adjust blur radius
- +/- keys: Adjust bloom intensity
- Drag the middle white line: Compare original image with effect
Traditional Gaussian blur requires extensive sampling around each pixel, with sampling count increasing proportionally to the blur radius. Box filtering simulates different levels of mipmap sampling, making the sampling count only related to the number of simulated levels, independent of the blur radius.
Box Filter Shader Code Principle Analysis
This code implements a box filter algorithm based on the paper "The Power of Box Filters" for image blur processing. Let me explain its working principle in detail:
Core Concept Traditional Gaussian blur requires extensive sampling around each pixel, with sampling count proportional to the blur radius. For example, with a blur radius of 10, approximately 21×21=441 pixels need to be sampled around each pixel, which creates significant performance overhead on mobile devices.
The core idea of box filtering is: regardless of how large the blur radius is, the sampling count remains constant. It achieves this by simulating different levels of mipmap sampling.
Code Implementation Principle Multi-level Sampling Strategy:
The code implements 3 different sampling levels, each corresponding to different sampling ranges Each level uses different step sizes, with step size increasing as level increases Level 1: Small range sampling (3×3), step size is base step Level 2: Medium range sampling (5×5), step size is 4× base step Level 3: Large range sampling (5×5), step size is 16× base step
Weight Calculation:
float weight = exp(-power / (2.0 * 3.14159 * sigma * sigma)) / power; This formula is simplified from the weight calculation formula in the paper power is 4 to the power of level (4^level) Weight decreases as level increases; higher levels (larger ranges) contribute less to the final result sigma is calculated based on blur radius, controlling weight distribution
Sampling and Accumulation:
Uniform sampling within each level, calculating average values Weighted accumulation of results from all levels Final normalization of results
Differences from Traditional Gaussian Blur Sampling Efficiency:
Traditional Gaussian blur: Sampling count ∝ blur radius² Box filtering: Fixed sampling count (approximately 3×3 + 5×5 + 5×5 = 59 samples in this example)
Performance Characteristics:
When blur radius is small, traditional Gaussian blur might be faster When blur radius is large, box filtering is significantly more efficient Box filtering is particularly suitable for mobile devices and scenarios requiring large radius blur
Visual Effects:
Box filtering results are very close to Gaussian blur In most practical applications, it's difficult to distinguish between the two
Code Optimization Considerations This implementation is specifically simplified for LÖVE engine's GLSL limitations:
Avoids arrays and loops, using hardcoded sampling levels Uses floating-point numbers instead of integers to avoid type conversion issues Reduces mathematical calculation complexity
In more modern GPU and shader environments, more flexible implementations can be used, including dynamic level counts and more precise weight calculations.
This project is based on the following paper: