squash commits

packages/render-fidelity-tools/test/results-viewer.html

@@ -0,0 +1,123 @@
+<!--
+/* @license
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>&lt;model-viewer&gt; - Fidelity Test Results</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/png" href="../shared-assets/icons/favicon.png"/>
+
+  <script defer src="https://web3dsurvey.com/collector.js"></script>
+  <script>
+    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+    ga('create', 'UA-169901325-1', { 'storage': 'none' });
+    ga('set', 'referrer', document.referrer.split('?')[0]);
+    ga('set', 'anonymizeIp', true);
+    ga('send', 'pageview');
+  </script>
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Rubik:400,500');
+  body {
+    margin: 1em;
+    background-color: #f7f7f7;
+    font-family: 'Rubik', sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    color: rgba(0,0,0,.87);
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  p {
+    max-width: 1000px;
+    text-align: left;
+  }
+  .icon-modelviewer-black {
+    background-image: url(../../assets/ic_modelviewer.svg);
+  }
+  .icon-button {
+    margin-left: -4px;
+    margin-right: 8px;
+    width: 34px;
+    height: 34px;
+    background-size: 34px;
+  }
+  .inner-home {
+    display: flex;
+    align-items: center;
+    font-size: 1.1em;
+    text-decoration: none;
+  }
+  .home {
+    padding: 20px;
+    overflow: auto;
+    white-space: nowrap;
+  }
+  .lockup {
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+    color: rgba(0,0,0,.87);
+  }
+  .attribute {
+    white-space: pre-wrap !important;
+    font-family: 'Roboto Mono', monospace;
+    color: black;
+  }
+  .attribute:hover {
+    text-decoration: underline;
+    color: #444444;
+  }
+</style>
+</head>
+<body>
+  <div class="home lockup">
+    <a href="../" class="sidebar-mv inner-home">
+      <div class="icon-button icon-modelviewer-black inner-home"></div>
+      <div class="inner-home"><span class="attribute">&lt;model-viewer&gt;</span></div>
+    </a>
+  </div>
+  <div align="center">
+    <h2>Render Fidelity Testing</h2>
+
+    <p>The first set of scenarios are for demonstrating material capabilities,
+    so these are primarily fidelity tests. Following these are simpler cases
+    that test glTF spec conformance, but are not particularly interesting for
+    fidelity. At the bottom are the Furnace Test and the Directional Light Test.
+    The Furnace Test checks energy conservation and the correct result is the
+    whole 7x7 grid of metal-rough spheres being invisible (indistinguishable
+    from the background). The top (metal) and bottom (dielectric) rows are
+    passing, while the mixtures lose some energy. The Directional Light Test
+    checks the worst-case scenario for environmental lighting approximations:
+    the case where a single bright pixel represents a directional light.</p>
+
+    <p>We show a simple logarithmic metric on an average of the pixel
+    differences, excluding the transparent background. This is <b>not</b> a
+    perceptual metric, so take it with a grain of salt. It is mostly there to
+    help us identify regressions.</p>
+
+    <p><a href="https://policies.google.com/privacy">Privacy</a></p>
+  </div>
+
+  <image-comparison-app src="./results/config.json"></image-comparison-app>
+
+  <script type="module" src="../dist/image-comparison-app.js"></script>
+
+</body>
+</html>