Add gltf sample viewer (#1962)

* WIP add gltf sample viewer

* Add index.html

* Further integration (renderer already running)

* Fix rotations

* Fix clearcolor and zoom

* Change ACES parameter

* Use gltf-viewer from npm

* Add package-lock

* Update sample viewer and resolve issues

* Update package-lock

* Disable environment blur

* Upload goldens

* Update version of sample viewer

Author: UX3D-haertl

packages/render-fidelity-tools/package-lock.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.2",
     "@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/package.json

@@ -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/rollup.config.js

@@ -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/src/components/renderers/gltf-sample-viewer.ts

@@ -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
     },