Fix lighting-estimation WebXr Test Page

* Reduces the intensity of the ambient/environment map
* Adds a directional light from the information provided by the probe
* Only creates a light probe of the requested texture type due to a bug
  in the implementation that always uses the texture type of the first
  light probe.

Change-Id: I6e798f64b92ae903c8931eee07af981981cea42b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2542651
Auto-Submit: Alexander Cooper <alcooper@chromium.org>
Commit-Queue: Brandon Jones <bajones@chromium.org>
Reviewed-by: Brandon Jones <bajones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828313}

third_party/webxr_test_pages/webxr-samples/proposals/lighting-estimation.html

@@ -103,9 +103,12 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
         // Set up light source
         ctx.light_probe = new THREE.LightProbe();
-        ctx.light_probe.intensity = 3;
+        ctx.light_probe.intensity = 1;
         ctx.scene.add(ctx.light_probe);
 
+        ctx.directional_light = new THREE.DirectionalLight();
+        ctx.scene.add(ctx.directional_light);
+
         ctx.xrButton = new XRDeviceButton({
           onRequestSession: () => onRequestSession(ctx),
           onEndSession: session => session.end(),
@@ -127,24 +130,28 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
           session.updateRenderState({ baseLayer: new XRWebGLLayer(session, ctx.gl) });
           session.requestReferenceSpace('local').then(refSpace => onReceivedReferenceSpace(ctx, refSpace));
-          session.requestLightProbe({reflectionFormat: "rgba16f"}).then((rgbaProbe) =>
-          {
-            ctx.rgbaProbe = rgbaProbe;
-            rgbaProbe.addEventListener('onreflectionchange', () => onReflectionChanged(ctx));
-          }).catch(err => console.error(err));
 
-          session.requestLightProbe().then((defaultProbe) => {
-            ctx.defaultProbe = defaultProbe;
-            defaultProbe.addEventListener('onreflectionchange', () => onReflectionChanged(ctx));
-          }).catch(err => console.error(err));
+          if (document.getElementById('useRGBA').checked) {
+            session.requestLightProbe({reflectionFormat: "rgba16f"}).then((lightProbe) => {
+              onReceivedLightProbe(ctx, lightProbe);
+            }).catch(err => console.error(err));
+          } else {
+            session.requestLightProbe().then((lightProbe) => {
+              onReceivedLightProbe(ctx, lightProbe);
+            }).catch(err => console.error(err));
+          }
 
           ctx.reflectionChanged = true;
 
-
           session.requestAnimationFrame((t, frame) => update(ctx, t, frame));
         });
       }
 
+      function onReceivedLightProbe(ctx, lightProbe) {
+        ctx.xrLightProbe = lightProbe;
+        lightProbe.addEventListener('onreflectionchange', () => onReflectionChanged(ctx));
+      }
+
       function onReflectionChanged(ctx) {
         ctx.reflectionChanged = true;
       }
@@ -184,18 +191,31 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
         }
 
         // Get ambient lighting estimation
-        const lightProbe = document.getElementById('useRGBA').checked ? ctx.rgbaProbe : ctx.defaultProbe;
-        if (lightProbe) {
-          const estimate = frame.getLightEstimate(lightProbe);
+        if (ctx.xrLightProbe) {
+          const estimate = frame.getLightEstimate(ctx.xrLightProbe);
 
           if (estimate) {
             ctx.light_probe.sh.fromArray(estimate.sphericalHarmonicsCoefficients);
+            const intensityScalar =
+              Math.max(1.0,
+              Math.max(estimate.primaryLightIntensity.x,
+              Math.max(estimate.primaryLightIntensity.y,
+                       estimate.primaryLightIntensity.z)));
+
+            ctx.directional_light.color.setRGB(
+              estimate.primaryLightIntensity.x / intensityScalar,
+              estimate.primaryLightIntensity.y / intensityScalar,
+              estimate.primaryLightIntensity.z / intensityScalar);
+
+            ctx.directional_light.intensity = intensityScalar;
+            ctx.directional_light.position.copy(estimate.primaryLightDirection);
+
           } else {
             console.log("light estimate not available");
           }
 
           if (ctx.reflectionChanged) {
-            const cubeMap = ctx.glBinding.getReflectionCubeMap(lightProbe);
+            const cubeMap = ctx.glBinding.getReflectionCubeMap(ctx.xrLightProbe);
             if (cubeMap) {
               let rendererProps = ctx.renderer.properties.get(ctx.threeEnvMap);
               rendererProps.__webglTexture = cubeMap;