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


Physically-Based Rendering WebGL demo

Real-world artificial lights are often defined by their color temperature, measured in Kelvin (K). The color temperature of a light source is the temperature of an ideal black-body radiator that radiates light of comparable hue to that of the light source. The two images below show two different color temperature scales ranging from 1,000K to 12,500K. The first one shows correlated color temperatures (CCT), and the second one CIE standard illuminants series D.

While it is not difficult to convert color temperatures to sRGB it is not entirely obvious. This lead me to write a simple reference explaining how the conversion process from temperature to RGB works.

Convert color temperatures to sRGB