When using post-processing effects, aliasing effects occur as the effects require that the images are rendered to a texture first to be able to manipulate them. This means that the browser side anti-aliasing, that is used per default, cannot be used anymore. Therefore, manual anti-aliasing techniques have to be used to improve the rendering quality.
Anti-aliasing is a technique used in computer graphics to reduce the visual artifacts known as "jaggies" or aliasing, which occur when rendering high-resolution images or 3D scenes at lower display resolutions. Aliasing occurs because of the discrete nature of digital displays, where straight lines and diagonal edges can appear jagged or stair-stepped, leading to a loss of image smoothness and visual quality.
The primary goal of anti-aliasing is to smooth out these jagged edges and make the rendered image appear more natural and visually pleasing. It achieves this by introducing additional visual information between the pixels, effectively blending colors to create the illusion of a higher resolution or a smoother image.
Via the properties
antiAliasingTechniqueMobile we make it possible to choose which anti-aliasing technique (
ANTI_ALIASING_TECHNIQUE) is used when post-processing effects are activated. In the following section we highlight the 3 different techniques you can choose from. It is also possible to not use anti-aliasing at all, although this option is not recommended for most use cases.
FXAA is a post-processing technique that operates on the final image and detects edges to smooth them out using various filtering methods. It is computationally inexpensive but may result in some loss of detail.
Fastest, but inaccurate
SMAA combines edge detection with a variety of smoothing techniques to provide high-quality anti-aliasing with minimal performance impact.
Fast, but can still lead to artefacts
This method involves rendering the scene multiple times with a minimal offset and averaging the colors of neighboring pixels, which effectively reduces aliasing. However, SSAA can be computationally expensive as it requires rendering the scene multiple times.
With the property
ssaaSampleLevel it is possible to adjust the number of samples that are taken. Specified as n, where the number of samples is 2^n, so ssaaSampleLevel = 4, is 2^4 samples, 16.
Slower, but high quality