Real-time path tracing of small scenes using WebGL

Abstract

Monte Carlo path tracing is becoming increasingly viable as a method for rendering global illumination in real-time. We explored the potential of using path-tracing and WebGL to rendering real-time 3D graphics in a web browser. The project focused on rendering small scenes where objects are dynamically translated, rotated, and scaled. We examined the performance of various acceleration data structures (ADS) including 3D grids, irregular grids, and bounding volume hierarchies. To reduce the noise inherent in path-traced images, we separated the lighting into several lighting terms and applied an À-Trous wavelet filter on each term. We explored both the results of splitting the direct and indirect lighting terms and splitting the glossy and diffuse terms. We also applied the surface albedo in a post-processing step to better retain texture details. On small scenes, we were able to trace 720x540 pixel images at interactive framerates, i.e. above 10hz, at one sample per pixel with a maximum path depth of five. Using per-object bounding volume hierarchies, we can render dynamically changing scenes, e.g. moving objects, at interactive framerates. The noise reduction filter executes in less than 10 milliseconds and is successful at removing noise but over-blurs some image details and introduces some artefacts. We conclude that while real-time path tracing is possible WebGL, there are several caveats of the current version of the WebGL library that makes some state-of-the-art optimisation techniques impractical. For future work, we suggest several approaches for improving the path tracer. For instance, extending the noise reduction filter with temporal accumulation and anti-aliasing, and optimising the encoding of triangles and ADS nodes.