Implementing Physically-Based Depth of Field and Bokeh Shaders in WebGL
Simulating realistic camera aperture lens blurs, Circle of Confusion (CoC) maps, and polygonal Bokeh shapes in web-based 3D viewports.
Simulating cinematic optics bridges the gap between raw interactive 3D rendering and photorealistic presentation. Implementing Depth of Field (DOF) in WebGL requires evaluating lens focus distances and blurring background/foreground geometry dynamically based on camera optics.
1. Circle of Confusion (CoC) Evaluation in Fragment Shaders
Calculating pixel-level Circle of Confusion values using thin-lens formulas evaluates focal plane distance against linear depth texture buffers, determining exact blur radii for out-of-focus surface points.
2. Hexagonal & Octagonal Bokeh Blur Kernels
Replacing simple Gaussian blurs with aperture-shaped sampling kernels (such as hexagonal or octagonal disk distributions) reproduces realistic highlight Bokeh artifacts on bright specular reflections.
3. Eliminating Foreground Leakage & Depth Bleeding
Sharp in-focus foreground edges often bleed into blurred background regions. Applying separate foreground/background CoC passes prevents visual haloing and depth-bleeding artifacts across geometric boundaries.