Fix glTF lights

packages/model-viewer/src/three-components/Renderer.ts

@@ -144,7 +144,6 @@ export class Renderer extends EventDispatcher {
         preserveDrawingBuffer: true,
       });
       this.threeRenderer.autoClear = true;
-      this.threeRenderer.useLegacyLights = false;
       this.threeRenderer.setPixelRatio(1);  // handle pixel ratio externally
 
       this.threeRenderer.debug = {

packages/model-viewer/src/three-components/gltf-instance/ModelViewerGLTFInstance.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {FrontSide, Material, Mesh, MeshStandardMaterial, Object3D, Sphere} from 'three';
+import {FrontSide, Material, Mesh, MeshStandardMaterial, Object3D, Sphere, SpotLight} from 'three';
 import {GLTF} from 'three/examples/jsm/loaders/GLTFLoader.js';
 
 import {$clone, $prepare, $preparedGLTF, GLTFInstance, PreparedGLTF} from '../GLTFInstance.js';
@@ -133,6 +133,13 @@ export class ModelViewerGLTFInstance extends GLTFInstance {
           sourceUUIDToClonedMaterial.set(material.uuid, mesh.material);
         }
       }
+
+      const light = node as SpotLight;
+      if (light.target !== undefined) {
+        // The target's parent is lost in the cloning process, but in
+        // GLTFLoader, all light targets are children of their light.
+        light.add(light.target);
+      }
     });
 
     // Cross-correlate the scene graph by relying on information in the

packages/render-fidelity-tools/package.json

@@ -41,7 +41,7 @@
     "lit": "^2.7.2",
     "mkdirp": "^1.0.4",
     "pngjs": "^6.0.0",
-    "puppeteer": "^18.2.1",
+    "puppeteer": "^21.3.4",
     "rimraf": "^3.0.2",
     "three": "^0.148.0",
     "three-gpu-pathtracer": "^0.0.13"

packages/render-fidelity-tools/src/workflows/update-screenshots/renderer-screenshot.ts

@@ -14,6 +14,7 @@
  */
 
 import HTTPServer from 'http-server';
+
 import {ArtifactCreator} from '../../artifact-creator.js';
 import {ImageComparisonConfig} from '../../common.js';
 
@@ -29,14 +30,15 @@ export const rendererScreenshot = async(
     width: number = 10,
     height: number = 10): Promise<void> => {
   const dimensions = {width, height};
-  const server = HTTPServer.createServer({root: './', cache: -1});
+  const server = HTTPServer.createServer({root: '../../', cache: -1});
 
   server.listen(port);
 
   const screenshotCreator = new ArtifactCreator(
       config,
       rootDirectory,
-      `http://localhost:${port}/test/renderers/${renderer}/`);
+      `http://localhost:${port}/packages/render-fidelity-tools/test/renderers/${
+          renderer}/`);
 
   if (scenarioName == null) {
     throw new Error(' Scenario name not specified!');