Updates / cleanup per PR feedback

rollup.config.js

@@ -82,7 +82,7 @@ export default [
     output: {
       file: './dist/image-comparison-app.js',
       sourcemap: true,
-      format: 'umd',
+      format: 'iife',
       name: 'ImageComparisonApp'
     },
     watch: {
@@ -96,7 +96,7 @@ export default [
     output: {
       file: './dist/image-comparison-worker.js',
       sourcemap: true,
-      format: 'umd',
+      format: 'iife',
       name: 'ImageComparisonWorker'
     },
     watch: {

scripts/compare-fidelity-results.js

@@ -126,11 +126,10 @@ for (const candidateScenario of candidateScenarios) {
           warn(`${comparisonDescription} ${
               comparisonConstraints} decreased by ${percentage}!`);
         } else if (Math.abs(delta) > 0) {
-          const changed =
-              delta > 0 ? 'decreased' : delta < 0 ? 'increased' : 'changed';
+          const changeDescription = delta > 0 ? 'decreased' : 'increased';
 
           console.log(`🔍 ${comparisonDescription} ${comparisonConstraints} ${
-              changed} by ${percentage}`);
+              changeDescription} by ${percentage}`);
         }
       }
     }

src/test/fidelity/common.ts

@@ -32,7 +32,7 @@ export interface ImageComparisonAnalysis {
 
 export interface ImageComparisonResults {
   analysis: ImageComparisonAnalysis;
-  imageBuffers: {delta: ArrayBuffer|null; boolean: ArrayBuffer | null;};
+  imageBuffers: {delta: ArrayBuffer|null; blackWhite: ArrayBuffer | null;};
 }
 
 export interface ImageComparisonMessage {
@@ -43,7 +43,7 @@ export interface ImageComparisonMessage {
 export interface CanvasesReadyMessage extends ImageComparisonMessage {
   candidateCanvas: OffscreenCanvas;
   goldenCanvas: OffscreenCanvas;
-  booleanCanvas: OffscreenCanvas;
+  blackWhiteCanvas: OffscreenCanvas;
   deltaCanvas: OffscreenCanvas;
 }
 
@@ -130,7 +130,7 @@ export class ImageComparator {
     const {width, height} = this.dimensions;
     const {generateVisuals} = options;
 
-    const booleanImage = generateVisuals ?
+    const blackWhiteImage = generateVisuals ?
         new Uint8ClampedArray(this.imagePixels * COMPONENTS_PER_PIXEL) :
         null;
     const deltaImage = generateVisuals ?
@@ -152,12 +152,12 @@ export class ImageComparator {
     for (let y = 0; y < height; ++y) {
       for (let x = 0; x < width; ++x) {
         const index = y * width + x;
-        const position = index * 4;
+        const position = index * COMPONENTS_PER_PIXEL;
         const delta =
             colorDelta(candidateImage, goldenImage, position, position);
-        const bool = (delta < thresholdSquared ? 1 : 0) * 255;
+        const exactlyMatched = (delta < thresholdSquared ? 1 : 0) * 255;
 
-        if (bool > 0) {
+        if (exactlyMatched) {
           matched++;
         } else {
           mismatchingSum += delta;
@@ -174,7 +174,12 @@ export class ImageComparator {
           maximumDeltaIntensity =
               Math.max(deltaIntensity, maximumDeltaIntensity);
 
-          this.drawPixel(booleanImage!, position, bool, bool, bool);
+          this.drawPixel(
+              blackWhiteImage!,
+              position,
+              exactlyMatched,
+              exactlyMatched,
+              exactlyMatched);
           this.drawPixel(
               deltaImage!,
               position,
@@ -189,7 +194,7 @@ export class ImageComparator {
       for (let y = 0; y < height; ++y) {
         for (let x = 0; x < width; ++x) {
           const index = y * width + x;
-          const position = index * 4;
+          const position = index * COMPONENTS_PER_PIXEL;
           const absoluteDeltaIntensity = 255 - deltaImage![position + 1];
           const relativeDeltaIntensity = Math.round(
               255 - 255 * (absoluteDeltaIntensity / maximumDeltaIntensity));
@@ -216,7 +221,8 @@ export class ImageComparator {
       },
       imageBuffers: {
         delta: deltaImage ? deltaImage.buffer as ArrayBuffer : null,
-        boolean: booleanImage ? booleanImage.buffer as ArrayBuffer : null
+        blackWhite: blackWhiteImage ? blackWhiteImage.buffer as ArrayBuffer :
+                                      null
       }
     };
   }

src/test/fidelity/components/analysis-view.ts

@@ -33,7 +33,7 @@ export class AnalysisView extends LitElement {
   @property({type: Object})
   protected rightImageAccessor: ImageAccessor|null = null;
   @property({type: Object})
-  protected booleanImageAccessor: ImageAccessor|null = null;
+  protected blackWhiteImageAccessor: ImageAccessor|null = null;
   @property({type: Object})
   protected deltaImageAccessor: ImageAccessor|null = null;
 
@@ -96,7 +96,7 @@ export class AnalysisView extends LitElement {
     const goldenCanvas =
         (this.shadowRoot!.querySelector('canvas[slot="top-right"]')! as any)
             .transferControlToOffscreen();
-    const booleanCanvas =
+    const blackWhiteCanvas =
         (this.shadowRoot!.querySelector('canvas[slot="bottom-left"]')! as any)
             .transferControlToOffscreen();
 
@@ -109,10 +109,10 @@ export class AnalysisView extends LitElement {
           type: 'canvases-ready',
           candidateCanvas,
           goldenCanvas,
-          booleanCanvas,
+          blackWhiteCanvas,
           deltaCanvas
         },
-        [candidateCanvas, goldenCanvas, booleanCanvas, deltaCanvas]);
+        [candidateCanvas, goldenCanvas, blackWhiteCanvas, deltaCanvas]);
   }
 
   get canCompareImages(): boolean {
@@ -178,17 +178,13 @@ export class AnalysisView extends LitElement {
   async updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    console.log(this.analysisResult, changedProperties);
-
     if (changedProperties.has('analysisResult') &&
         this.analysisResult != null && this.canCompareImages) {
       const {imageBuffers} = this.analysisResult;
       const {width, height} = this.comparisonDimensions;
 
-      console.log('Creating accessors');
-
-      this.booleanImageAccessor =
-          ImageAccessor.fromArrayBuffer(imageBuffers.boolean!, width, height);
+      this.blackWhiteImageAccessor = ImageAccessor.fromArrayBuffer(
+          imageBuffers.blackWhite!, width, height);
 
       this.deltaImageAccessor =
           ImageAccessor.fromArrayBuffer(imageBuffers.delta!, width, height);
@@ -378,7 +374,7 @@ canvas {
   <images-4-up .dimensions="${this.comparisonDimensions}"
       .topLeftImageAccessor="${this.leftImageAccessor}"
       .topRightImageAccessor="${this.rightImageAccessor}"
-      .bottomLeftImageAccessor="${this.booleanImageAccessor}"
+      .bottomLeftImageAccessor="${this.blackWhiteImageAccessor}"
       .bottomRightImageAccessor="${this.deltaImageAccessor}">
     <canvas slot="top-left"></canvas>
     <canvas slot="top-right"></canvas>

src/test/fidelity/image-comparison-worker.ts

@@ -22,8 +22,8 @@ class ImageComparisonWorker {
   protected candidateContext: CanvasRenderingContext2D|null = null;
   protected goldenCanvas: OffscreenCanvas|null = null;
   protected goldenContext: CanvasRenderingContext2D|null = null;
-  protected booleanCanvas: OffscreenCanvas|null = null;
-  protected booleanContext: CanvasRenderingContext2D|null = null;
+  protected blackWhiteCanvas: OffscreenCanvas|null = null;
+  protected blackWhiteContext: CanvasRenderingContext2D|null = null;
   protected deltaCanvas: OffscreenCanvas|null = null;
   protected deltaContext: CanvasRenderingContext2D|null = null;
 
@@ -36,15 +36,15 @@ class ImageComparisonWorker {
 
     switch (data.type) {
       case 'canvases-ready': {
-        const {candidateCanvas, goldenCanvas, booleanCanvas, deltaCanvas} =
+        const {candidateCanvas, goldenCanvas, blackWhiteCanvas, deltaCanvas} =
             data as CanvasesReadyMessage;
 
         this.candidateCanvas = candidateCanvas;
         this.candidateContext = candidateCanvas.getContext('2d');
         this.goldenCanvas = goldenCanvas;
         this.goldenContext = goldenCanvas.getContext('2d');
-        this.booleanCanvas = booleanCanvas;
-        this.booleanContext = booleanCanvas.getContext('2d');
+        this.blackWhiteCanvas = blackWhiteCanvas;
+        this.blackWhiteContext = blackWhiteCanvas.getContext('2d');
         this.deltaCanvas = deltaCanvas;
         this.deltaContext = deltaCanvas.getContext('2d');
 
@@ -56,15 +56,15 @@ class ImageComparisonWorker {
             data as ImagesAssignedMessage;
 
         if (this.candidateCanvas == null || this.goldenCanvas == null ||
-            this.booleanCanvas == null || this.deltaCanvas == null) {
+            this.blackWhiteCanvas == null || this.deltaCanvas == null) {
           console.warn('Images assigned before canvases are available!');
         }
 
         this.candidateCanvas!.width = this.goldenCanvas!.width =
-            this.booleanCanvas!.width = this.deltaCanvas!.width =
+            this.blackWhiteCanvas!.width = this.deltaCanvas!.width =
                 dimensions.width;
         this.candidateCanvas!.height = this.goldenCanvas!.height =
-            this.booleanCanvas!.height = this.deltaCanvas!.height =
+            this.blackWhiteCanvas!.height = this.deltaCanvas!.height =
                 dimensions.height;
 
 
@@ -96,9 +96,9 @@ class ImageComparisonWorker {
         const {width, height} = this.analyzer!.dimensions;
         const result = analyzer.analyze(threshold, {generateVisuals: true});
 
-        this.booleanContext!.putImageData(
+        this.blackWhiteContext!.putImageData(
             new ImageData(
-                new Uint8ClampedArray(result.imageBuffers.boolean!),
+                new Uint8ClampedArray(result.imageBuffers.blackWhite!),
                 width,
                 height),
             0,

test/fidelity/README.md

@@ -21,8 +21,8 @@ significant levels of distribution and/or reputation. Current viewers that we
 are intend to compare to include:
 
  - [iOS Quick Look](https://developer.apple.com/arkit/gallery/)
- - [Filament GLTF Viewer](https://github.com/google/filament/blob/master/samples/gltf_viewer.cpp)
- - [Khronos GLTF Viewer](https://github.com/KhronosGroup/glTF-WebGL-PBR/tree/reference-viewer)
+ - [Filament glTF Viewer](https://github.com/google/filament/blob/master/samples/gltf_viewer.cpp)
+ - [Khronos glTF Viewer](https://github.com/KhronosGroup/glTF-WebGL-PBR/tree/reference-viewer)
 
 ## Capturing reference renders
 
@@ -68,9 +68,9 @@ Note that iOS Quick Look appears to use a slightly narrower field of view than
 other viewers, so many screenshots will exhibit hard dissimilarity around the
 edges.
 
-### Filament GLTF Viewer
+### Filament glTF Viewer
 
-Filament GLTF Viewer is relatively easy to stage. As of this writing, the
+Filament glTF Viewer is relatively easy to stage. As of this writing, the
 default configuration of Filament's viewer is very similar to the defaults used
 in `<model-viewer>`.
 
@@ -82,9 +82,9 @@ The steps to create a reference screenshot are:
  3. Follow the documented steps in the README to produce a build
       - At the time of this writing, this is as easy as invoking
         `./build.sh release` from the repository root
- 4. Run the GLTF viewer with the appropriate IBL and model as arguments
+ 4. Run the glTF viewer with the appropriate IBL and model as arguments
       - IBLs that we use in tests are included in the patch: [quick_4k](https://github.com/cdata/filament/tree/model-viewer-adaptation/ibl/quick_4k)
-      - An example invokation of the GLTF viewer from the Filament project root
+      - An example invokation of the glTF viewer from the Filament project root
         looks like: `./out/cmake-release/samples/gltf_viewer -i ./ibl/quick_4k/ $PATH_TO_MODEL`
  5. Take a screenshot of the window that appears (which should be rendering
     the appropriate model)
@@ -107,7 +107,7 @@ comparison to any configured reference renders.
 
 The steps to produce a new scenario are:
 
- 1. Acquire or produce a GLTF that is representative of what the scenario should
+ 1. Acquire or produce a glTF that is representative of what the scenario should
     be testing.
       - If applicable, also produce a corresponding USDZ of that model
  2. Pick a descriptive name for the scenario (for example, `alpha-blend-litmus`)

test/fidelity/pbr-spheres/index.html

@@ -36,7 +36,7 @@
     <li>Top left: metallic 1, specular 1, roughness 0</li>
     <li>Top right: metallic 1, specular 1, roughness 1</li>
     <li>Bottom right: metallic 0, specular 0, roughness 0</li>
-    <li>Bottom left: metaalic 0, specular 0, roughness 0</li>
+    <li>Bottom left: metallic 0, specular 0, roughness 0</li>
   </ul>
   <script src="../../../dist/model-viewer.js"></script>
 </body>