Fix WebXR lighting estimation page

There were currently two issues with the lighting estimation page: the
ambient light was brighter than expected and the reflection map wasn't
being rendered onto the sphere.

The first issue was likely a result of the sphere's texture having 0
"metalness" and thus being more "stone" like. This caused the light to
get applied to a broader area, and thus made it seem more washed out. In
addition, we now also set the intensity of the light probe to 1 each
frame. While this likely doesn't impact the ambient light intensity, it
is a better pattern having it mirror what happens with the directional
light.

The second was partially due to the metalness value (nothing reflects
with a metalness of 0); however, the environment map wasn't actually
getting set up in Three's renderer.

There's also two additional issues that are fixed here. The first is
that the reflectionchange event was incorrectly subscribed (both the
name and to the wrong object). However, even with that fixed there is
some form of known issue with the event, that means we instead need to
rely on a simple interval timer.

Finally, this change also ensures that the appropriate GL extensions are
enabled for the two possible texture types that we support.

Fixed: 1151501,1151491
Change-Id: Id6ff4f5e4cc237a5e9c4a8aefb82a96827a48205
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2587554
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@{#836349}

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

@@ -72,6 +72,8 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
           console.error('This browser does not support WebGL2');
           return;
         }
+        ctx.gl.getExtension('EXT_sRGB');
+        ctx.gl.getExtension('OES_texture_half_float');
 
         // Create a Three.js renderer
         ctx.renderer = new THREE.WebGLRenderer({
@@ -86,6 +88,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
         // to accept a webgl texture.
         ctx.cubeTarget = new THREE.WebGLCubeRenderTarget(16);
         ctx.threeEnvMap = ctx.cubeTarget.texture;
+        ctx.scene.environment = ctx.threeEnvMap;
         let rendererProps = ctx.renderer.properties.get(ctx.threeEnvMap);
         rendererProps.__webglInit = true;
 
@@ -95,7 +98,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
         // Add a sphere
         ctx.geometry = new THREE.SphereGeometry(0.2, 32, 32);
-        ctx.material = new THREE.MeshStandardMaterial({ color: 0xFFFFFF, metalness: 0.0, roughness: 0.0 });
+        ctx.material = new THREE.MeshStandardMaterial({ color: 0xFFFFFF, metalness: 1.0, roughness: 0.0 });
         ctx.sphere = new THREE.Mesh(ctx.geometry, ctx.material);
         ctx.scene.add(ctx.sphere);
         ctx.sphere.position.z = -1;
@@ -103,10 +106,11 @@ 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 = 1;
+        ctx.light_probe.intensity = 0;
         ctx.scene.add(ctx.light_probe);
 
         ctx.directional_light = new THREE.DirectionalLight();
+        ctx.directional_light.intensity = 0;
         ctx.scene.add(ctx.directional_light);
 
         ctx.xrButton = new XRDeviceButton({
@@ -149,7 +153,8 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
       function onReceivedLightProbe(ctx, lightProbe) {
         ctx.xrLightProbe = lightProbe;
-        lightProbe.addEventListener('onreflectionchange', () => onReflectionChanged(ctx));
+        setInterval(()=>onReflectionChanged(ctx),1000);
+        // ctx.xrLightProbe.addEventListener('reflectionchange', () => onReflectionChanged(ctx));
       }
 
       function onReflectionChanged(ctx) {
@@ -196,6 +201,8 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
           if (estimate) {
             ctx.light_probe.sh.fromArray(estimate.sphericalHarmonicsCoefficients);
+            ctx.light_probe.intensity = 1;
+
             const intensityScalar =
               Math.max(1.0,
               Math.max(estimate.primaryLightIntensity.x,