Postprocessing Settings in React Three Fiber
July 24, 2024
It's worth installing the latest version of Leva for the settings and experimenting with different backgrounds to achieve the best results. Effect Composer allows us to apply various visual effects that improve the appearance and interactivity of our 3D model.
This article covers different ambient occlusion options, various anti-aliasing techniques, and other settings to enhance image quality and user experience.
Site where you can check the different settings: https://builder-postprocess.vercel.app/
Ambient occlusion is crucial for creating a sense of depth in any 3D environment. It darkens areas where geometries block the light, which is most noticeable at the corners and intersections of geometric elements. Ambient occlusion makes the rendering more realistic, as in the real world, cavities and complex surfaces are less illuminated.
The react-three/postprocessing library provides options for different ambient occlusion techniques, such as SSAO and N8AO.
SSAO (Screen Space Ambient Occlusion) is a technique that uses the image displayed on the screen to create occlusion effects. SSAO calculates ambient occlusion in real-time and is often used in video games and interactive applications. The advantage of SSAO is that it is fast and efficient, as it only performs calculations on the pixels visible on the screen, achieving significant performance improvements over traditional ambient occlusion techniques.
N8AO is an efficient and visually pleasing implementation of SSAO (Screen Space Ambient Occlusion) that emphasizes temporal stability and artistic control. With N8AO, we can fine-tune the occlusion effects, precisely adjusting the areas where we want stronger or weaker occlusion. The advantage of N8AO is that it minimizes temporal disturbances, which often occur during real-time calculations.
For more details on N8AO, visit: N8AO GitHub.
To reduce aliasing, it is recommended to use SMAA, as hardware anti-aliasing does NOT work with ambient occlusion. SMAA (Subpixel Morphological Anti-Aliasing) is an advanced anti-aliasing technique that works well alongside ambient occlusion.
N8AO different settings: https://builder-postprocess.vercel.app/
Anti-aliasing techniques come in various forms and sizes, ranging from cheaper shader filters (FXAA) to more complex temporal accumulation methods (TAA). Anti-aliasing removes the jagged edges that appear along the edges and intersections of thin objects.
Currently, in react postprocessing, you can choose from FXAA, MSAA, and SMAA.
Super Sampling Anti-Aliasing (SSAA) renders the entire image at a higher resolution and then scales it down to the target resolution, sampling the color and depth four times per pixel. SSAA significantly improves image quality and almost entirely removes jagged edges, but it is extremely expensive, as rendering the image at 2x or 4x the original resolution is required. The advantage of SSAA is that it provides high-quality anti-aliasing, but its disadvantage is its high performance demand, making it effective only on more powerful hardware.
Multi Sampling Anti-Aliasing (MSAA) is similar to SSAA but only samples along the edges of triangles. This is less expensive as it only executes the pixel shader once per pixel, while SSAA does it 2x or 4x. The downside of MSAA is that it cannot be used with deferred lighting techniques, which are common in modern games. Deferred lighting delays the calculation of lighting from the vertex shader to the fragment shader, saving performance. The advantage of MSAA is that it provides good quality anti-aliasing with lower performance demand than SSAA, but it is not compatible with all modern rendering techniques.
Fast Approximate Anti-Aliasing (FXAA) is a post-process anti-aliasing technique that requires fewer resources than MSAA and SSAA but results in worse image quality. FXAA uses a high-contrast filter to find edges and blur them, often resulting in softer edges. The advantage of FXAA is that it is fast and efficient, working well on lower-performance systems, but the downside is that the edge blurring can reduce image sharpness.
Subpixel Morphological Anti-Aliasing (SMAA) is similar to FXAA but takes more samples along edges, offering better image quality with less computational power than MSAA or SSAA. SMAA has lost popularity in recent years as TAA provides better results. The advantage of SMAA is that it provides good quality anti-aliasing with lower performance demand, but it does not achieve as good results as TAA.
Temporal Anti-Aliasing (TAA) is also a post-process method that samples each pixel in different locations and uses previous frames to blend the samples together. This results in cleaner edges but can sometimes cause ghosting artifacts. TAA renders the image across different frames at a specific resolution, and with each additional frame, a jitter offset (a few pixels of camera shift) is applied. This creates multiple images from a single frame, which are then used for supersampling and/or upscaling. The advantage of TAA is that it provides high-quality anti-aliasing, but its disadvantage is that it can sometimes cause ghosting artifacts, especially in fast movements.
TAA is the backbone of Nvidia’s Deep Learning Super Sampling (DLSS) and significantly contributes to the high-quality results of Temporal Super Resolution (TSR) and AMD’s FidelityFX Super Resolution 2.0 (FSR).
Compare the different anti-aliasing in my site: https://builder-postprocess.vercel.app/
To further improve image quality, it is worth adjusting saturation, hue, brightness, and contrast effects. These settings can help fine-tune the visual appearance and achieve the desired visual effect. Such adjustments are particularly important in artistic and creative projects where visual appearance is crucial.
Increasing saturation makes colors more vibrant, adjusting hue changes the color tones, adjusting brightness can lighten or darken the image, and increasing contrast can make differences between light and dark areas more pronounced. These settings help ensure that the final image meets our expectations and project requirements.
In summary, using various anti-aliasing and ambient occlusion techniques, along with fine-tuning other visual settings, we can achieve the best image quality and user experience in 3D modeling projects. Effect Composer and react-three/postprocessing tools offer excellent opportunities for applying visual effects and optimizing rendering, so it's worth taking advantage of these options.
Share this article
The Newsletter for Next-Level Tech Learning
Start your day right with the daily newsletter that entertains and informs. Subscribe now for free!