Understanding physically correct lighting in three.js

Question

I'm probably mis-understanding something but... I'm trying to use physically correct lighting and physically based rendering in three.js

I made a simple scene. In this case just a plane. I put a light 2 units (2 meters) above the plane. The plane is using a MeshStandardMaterial with roughness at .9 and metalness at 0. The light's power is set to 800 which if I understand correctly is 800 lumens which is equivalent to a 60 watt light bulb. I set renderer.physicallyCorrectLights = true.

Here's the result:

That result looks nothing like a 60 watt light bulb 2 meters above a floor.

Am I doing something wrong?

'use strict';

/* global dat */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.physicallyCorrectLights = true;

  const fov = 45;
  const aspect = 2;
  const zNear = 0.1;
  const zFar = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
  camera.position.set(0, 10, 20);
  camera.lookAt(0, 5, 0);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');

  {
    const planeSize = 40;
    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshStandardMaterial({
      color: '#C84',
      side: THREE.DoubleSide,
      roughness: 0.9,
      metalness: 0,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.PointLight(color, intensity);
    light.power = 800;
    light.decay = 2;
    light.distance = Infinity;
    light.position.set(0, 2, 0);
    scene.add(light);
    
    const helper = new THREE.PointLightHelper(light);
    scene.add(helper);
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);
  }
  render();
  window.onresize = render;
}

main();

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

<script src=" https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<canvas id="c"></canvas>

Answer 1

When doing physical scenes you have to take exposure (f-stop) settings into account. I can't find a dedicated settings for the camera to allow this (which perhaps would be a natural place to find it), but there is an exposure setting for the renderer itself -

You could play around with the toneMappingExposure settings on the renderer to find a good value, for example:

renderer.toneMappingExposure = Math.pow(0.7, 5.0);  // -> exposure: 0.168

and for example a more real-world value for power:

light.power = 740;  // GE Lumens @ 60W incandescent 

A technical consideration: Watts cannot be directly translated into Lumens simply because different brands produce different Lumens values at the same Wattage; they can actually vary roughly between 400-1000 Lumens in the case of 60W incandescent lights (GE operates with 740 or so). But that's a side-point.. :)

'use strict';

/* global dat */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.physicallyCorrectLights = true;

  renderer.toneMappingExposure = Math.pow(0.7, 5.0);
  
  const fov = 45;
  const aspect = 2;
  const zNear = 0.1;
  const zFar = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
  camera.position.set(0, 10, 20);
  camera.lookAt(0, 5, 0);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');

  {
    const planeSize = 40;
    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshStandardMaterial({
      color: '#C84',
      side: THREE.DoubleSide,
      roughness: 0.9,
      metalness: 0,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.PointLight(color, intensity);
    light.power = 740;  // GE Lumens @ 60W incade.
    light.decay = 2;
    light.distance = Infinity;
    light.position.set(0, 2, 0);
    scene.add(light);
    
    const helper = new THREE.PointLightHelper(light);
    scene.add(helper);
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);
  }
  render();
  window.onresize = render;
}

main();

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

<script src=" https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<canvas id="c"></canvas>