Add gltf sample viewer

packages/render-fidelity-tools/package.json

@@ -27,6 +27,7 @@
     "@babylonjs/core": "^4.2.0-alpha.26",
     "@babylonjs/loaders": "^4.2.0-alpha.26",
     "@google/model-viewer": "^1.5.0",
+    "@khronosgroup/gltf-viewer": "^1.0.1",
     "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
@@ -51,9 +52,11 @@
   },
   "devDependencies": {
     "@google/model-viewer-shared-assets": "^0.0.1",
-    "rollup": "^2.26.6",
+    "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.0",
+    "polymer-build": "^3.1.4",
+    "rollup": "^2.26.6",
     "rollup-plugin-external-globals": "^0.6.0",
     "typescript": "4.0.3"
   }

packages/render-fidelity-tools/rollup.config.js

@@ -17,6 +17,7 @@ const {nodeResolve: resolve} = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const externalGlobals = require('rollup-plugin-external-globals');
 const {basename} = require('path');
+const commonjs = require('@rollup/plugin-commonjs')
 
 const onwarn = (warning, warn) => {
   // Suppress non-actionable warning caused by TypeScript boilerplate:
@@ -26,7 +27,8 @@ const onwarn = (warning, warn) => {
 };
 
 const plugins = [
-  resolve({preferBuiltins: true}),
+  commonjs(),
+  resolve({preferBuiltins: true, browser: true}),
   replace({'Reflect.decorate': 'undefined'}),
   externalGlobals({filament: 'Filament'})
 ];
@@ -59,6 +61,7 @@ const outputOptions = [
   buildTarget('./lib/components/renderers/filament-viewer.js', 'esm'),
   buildTarget('./lib/components/renderers/dspbr-pt-viewer.js', 'esm'),
   buildTarget('./lib/components/renderers/babylon-viewer.js', 'esm'),
+  buildTarget('./lib/components/renderers/gltf-sample-viewer.js', 'esm'),
   buildTarget('./lib/image-comparison-worker.js', 'iife')
 ];
 

packages/render-fidelity-tools/src/components/renderers/gltf-sample-viewer.ts

@@ -0,0 +1,132 @@
+// @ts-ignore
+import {GltfState, GltfView, ResourceLoader} from '@khronosgroup/gltf-viewer';
+import {css, customElement, html, LitElement, property} from 'lit-element';
+
+import {ScenarioConfig} from '../../common.js';
+
+
+const $updateScenario = Symbol('updateScenario');
+const $updateSize = Symbol('updateSize');
+const $canvas = Symbol('canvas');
+const $view = Symbol('view');
+const $state = Symbol('state');
+const $resourceLoader = Symbol('resourceLoader');
+const $degToRadians = Symbol('degToRadians');
+
+@customElement('gltf-sample-viewer')
+export class GltfSampleViewer extends LitElement {
+  @property({type: Object}) scenario: ScenarioConfig|null = null;
+  private[$canvas]: HTMLCanvasElement|null;
+  private[$view]: GltfView;
+  private[$state]: GltfState;
+  private[$resourceLoader]: ResourceLoader;
+
+  static get styles() {
+    return css`
+:host {
+ display: block;
+}
+`;
+  }
+
+  render() {
+    return html`<canvas id="canvas"></canvas>`;
+  }
+
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    this[$updateSize]();
+
+    if (changedProperties.has('scenario') && this.scenario != null) {
+      this[$updateScenario](this.scenario);
+    }
+  }
+
+
+  private async[$updateScenario](scenario: ScenarioConfig) {
+    if (this[$view] == null) {
+      this[$canvas] = this.shadowRoot!.querySelector('canvas');
+      this[$view] = new GltfView(
+          this[$canvas]!.getContext('webgl2', {alpha: true, antialias: true}));
+      this[$state] = this[$view].createState();
+      this[$resourceLoader] = this[$view].createResourceLoader();
+    }
+    this[$updateSize]();
+
+    this[$state].gltf = await this[$resourceLoader].loadGltf(scenario.model);
+
+    const defaultScene = this[$state].gltf.scene;
+    this[$state].sceneIndex = defaultScene === undefined ? 0 : defaultScene;
+    const scene = this[$state].gltf.scenes[this[$state].sceneIndex];
+    scene.applyTransformHierarchy(this[$state].gltf);
+
+    const {target, orbit, verticalFoV} = scenario;
+    const camera = this[$state].userCamera;
+    camera.setVerticalFoV(this[$degToRadians](verticalFoV));
+    camera.fitViewToScene(this[$state].gltf, this[$state].sceneIndex);
+
+    const yaw = this[$degToRadians](orbit.theta);
+    const pitch = this[$degToRadians]((orbit.phi - 90));
+    camera.setRotation(yaw, pitch);
+    camera.setDistanceFromTarget(orbit.radius, [target.x, target.y, target.z]);
+    this[$state].renderingParameters.clearColor = [0, 0, 0, 0];
+
+    const luts = {
+      lut_ggx_file:
+          '../../../node_modules/@khronosgroup/gltf-viewer/dist/assets/lut_ggx.png',
+      lut_charlie_file:
+          '../../../node_modules/@khronosgroup/gltf-viewer/dist/assets/lut_charlie.png',
+      lut_sheen_E_file:
+          '../../../node_modules/@khronosgroup/gltf-viewer/dist/assets/lut_sheen_E.png'
+    };
+
+    this[$state].renderingParameters.environmentRotation = 0;
+
+    this[$state].environment =
+        await this[$resourceLoader].loadEnvironment(scenario.lighting, luts);
+
+    this[$state].renderingParameters.renderEnvironmentMap =
+        scenario.renderSkybox;
+    this[$state].renderingParameters.blurEnvironmentMap = false;
+
+    this[$state].renderingParameters.toneMap = GltfState.ToneMaps.ACES;
+
+    this[$view].renderFrame(
+        this[$state], this[$canvas]!.width, this[$canvas]!.height);
+    requestAnimationFrame(() => {
+      this.dispatchEvent(
+          // This notifies the framework that the model is visible and the
+          // screenshot can be taken
+          new CustomEvent('model-visibility', {detail: {visible: true}}));
+    });
+  }
+
+
+  private[$updateSize]() {
+    if (this[$canvas] == null || this.scenario == null) {
+      return;
+    }
+
+    const canvas = this[$canvas]!;
+    const {dimensions} = this.scenario;
+
+    const dpr = window.devicePixelRatio;
+    const width = dimensions.width * dpr;
+    const height = dimensions.height * dpr;
+
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = `${dimensions.width}px`;
+    canvas.style.height = `${dimensions.height}px`;
+
+    const aspect = width / height;
+
+    const camera = this[$state].userCamera;
+    camera.aspectRatio = aspect;
+  }
+
+  private[$degToRadians](degree: number) {
+    return Math.PI * (degree / 180);
+  }
+}

packages/render-fidelity-tools/test/config.json

@@ -18,6 +18,10 @@
     {
       "name": "dspbr-pt",
       "description": "dspbr-pt"
+    },
+    {
+      "name": "gltf-sample-viewer",
+      "description": "gltf-sample-viewer"
     }
   ],
   "scenarios": [
@@ -188,7 +192,8 @@
       },
       "exclude": [
         "dspbr-pt",
-        "babylon"
+        "babylon",
+        "gltf-sample-viewer"
       ],
       "renderSkybox": true
     },

packages/render-fidelity-tools/test/renderers/gltf-sample-viewer/index.html

@@ -0,0 +1,57 @@
+<!--
+/* @license
+* Copyright 2020 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>
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+ <title>Gltf-Sample-Viewer Fidelity Tests</title>
+
+ <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
+ <script src="../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+ <style>
+   body { margin: 0; }
+   model-viewer { --progress-bar-color: transparent; }
+ </style>
+</head>
+<body>
+ <renderer-harness id="harness">
+   <span slot="title">Gltf-Sample-Viewer</span>
+   <gltf-sample-viewer id="gltfSampleViewer" slot="renderer">
+   </gltf-sample-viewer>
+ </renderer-harness>
+
+ <script type="module" src="../../../dist/renderer-harness.js"></script>
+ <script src="https://www.gstatic.com/draco/v1/decoders/draco_decoder_gltf.js"></script>
+ <script src="../../../node_modules/@khronosgroup/gltf-viewer/dist/libs/libktx.js"></script>
+ <script type="module" src="../../../dist/gltf-sample-viewer.js"></script>
+ <script>
+   harness.addEventListener('scenario-change', () => {
+     gltfSampleViewer.addEventListener('model-visibility', (event) => {
+       if (event.detail.visible) {
+         self.dispatchEvent(new CustomEvent('model-ready'));
+       }
+     }, { once: true });
+
+     gltfSampleViewer.scenario = harness.scenario;
+   });
+ </script>
+</body>
+</html>
+
+