Implementing Real-Time SSAO and HBAO+ Pipelines in WebGL Viewports
Enhancing geometric depth perception and contact shadowing in CAD and architectural WebGL scenes using G-Buffer depth and normal passes.
Without ambient occlusion, complex CAD assemblies look flat and lack spatial depth. Screen-Space Ambient Occlusion (SSAO) approximates diffuse crevice shadows in real time by sampling depth and normal textures surrounding each pixel.
1. G-Buffer Rendering & Hemisphere Sampling
Extracting linear depth values and world-space normals into dynamic G-Buffer render targets enables post-processing fragment shaders to sample hemispherical kernel directions around target surfaces.
2. Horizon-Based Ambient Occlusion (HBAO+)
HBAO+ improves upon basic SSAO by evaluating physical horizon elevation angles across surrounding depth fields. This eliminates over-occlusion noise and produces realistic contact shadows under complex geometric seams.
3. Bilateral Depth-Aware Blur Filtering
Raw occlusion passes contain noise from low sample counts. Applying depth-aware bilateral Gaussian blur filters smooths ambient occlusion maps while preserving crisp geometric edges across adjacent objects.