Physically-Based Rendering WebGL demo

I have finally made available a WebGL physically-based rendering demo I wrote a couple of years ago. I have used this demo as a playground to experiment with various rendering techniques and algorithms. The version I just published is not the full version I wrote, but a slightly cleaned-up copy with a few features removed. Even without all its features, this demo is still useful and interesting. The screenshots below come directly from the public demo.

Note: most of the assets are rather large (the entire demo is about 150 MiB). Please be patient after selecting a new material, environment or model to give your browser the time to stream all the assets. Your browser must support two extensions, GL_OES_standard_derivatives and GL_EXT_shader_texture_lod.

Rough metallic layer base with glossy tinted varnish

Available features

  • Cook-Torrance microfacet specular BRDF (GGX) and Lambertian diffuse BRDF
  • HDR/linear lighting
  • Standard material parameters: base color, metallic, roughness, reflectance, emissive
  • Clear coat parameters to simulate a second layer
  • Clear coat layer absorption
  • Anisotropic materials
  • Approximated translucent (subsurface) materials (direct and indirect lighting)
  • Normal mapping
  • Ambient occlusion mapping
  • Post processing: bloom, color grading, contrast, saturation, color aberrations, levels
  • Image-based lighting (3 bands Spherical Harmonics and RGBM specular reflections)
  • Physically-based camera (shutter speed, sensitivity and aperture)
  • Physical light units
  • Point light, spot light and directional light
  • IES light profiles (spot and point light)
  • Light color temperature
  • Geometric anti-aliasing roughness
  • Disc light approximation for directional light
  • Micro shadowing on direct lighting
  • Ambient occlusion horizon fading
  • ACES-like tone-mapping

Wooden surface lit by a directional light and IBL

Features implemented but not available

  • Exponential-height fog with directional light scattering
  • Area lights: tubes and spheres
  • Disney diffuse
  • Diffuse anti-aliasing
  • A bunch of other things I can’t remember for now

Subsurface material model approximating the transmission of direct and indirect lighting

How to use

I will not detail all the features of the demo but here are a few things you can try:

  • Zoom in and out with the mouse wheel
  • Click and drag to move around the object
  • Right-click and drag to pan the camera
  • With either the sphere or material sphere selected in Rendering > Model, use the various sliders in the Material section to create your own material. You can also select a built-in material (some are textured, others are not)
  • Change the IBL using Environment > Map to affect the lighting
  • The statue model uses a subsurface material model
  • Use Rendering > Screemshot to capture a screenshot of the scene without the UI

Material with normal mapping and ambient occlusion mapping

Known limitations and issues

  • No shadows :)
  • The JavaScript code is horribly messy
  • The shaders are not very clean (they are 1,000x times nicer in the native renderer that was born from this prototype)
  • The RGBM encoding messes up some of the background environment maps (like river), this was mostly fixed with a better version of the encoder but I did not regenerate the assets
  • The environment map processor I use is not publicly available
  • Most assets are ridiculously huge

Acknowledgements

This demo uses a slightly modified copy of three.js from ~2 years ago. I hacked three.js to let me upload each mip level of a cubemap. The environment maps are generously provided by hdrlabs.com and Bernhard Vogl. The textures have been created using Substance Designer and 3D-Coat.

Run the demo!.

Leave a Reply