WebGL version

The WebGL version uses only tools available in pure WebGL. It is therefore a low level implementation using OpenGL shaders written in GLSL.

In this version we can choose either the initial stochastic approach or the scatter-as-gather approach, as described in Practical Post-Process Depth of Field article by NVIDIA.

The lens parameters, that the users can vary, are the focus length, the focal aperture and the maximum blur.
We can also independently set several other parameters including hyperbolic blur and squared blur.

Three.js version

The Three.js version uses the three.js library. This is a high level implementation which means that we are able to easily add glTF models.
The models are taken from Sketchfab, the leading platform for 3D & AR on the web.

This version uses only the scatter-as-gather approach with a gaussian blur.
The lens parameters, that the users can vary, are the focus length, the focal aperture and the maximum blur.