Energy Compensation in three.js

Jordan Santell / @jsantell

WebXR Engineer, Google

Model Viewer

npm install @googlewebcomponents/model-viewer

Comparing Filament vs three.js

Filament vs <model-viewer> (2018)

The Furnace Test

roughness 🡒

Single vs Multiscattering

Single scattering (left) vs multiscattering, from Filament docs

Fdez-Agüera: Multiple-Scattering Microfacet Model for Real-Time Image-based Lighting

The Furnace Test

roughness 🡒

The Furnace Test

with energy compensation

roughness 🡒

r100 (left), and r103 with energy compensation

r100 (left), r103, and r103+fix

r100 (left), r103, and r103+fix

r100 (left), r103, and r103+fix

r100 (left), r103+fix

Thanks!

@jsantell