Removal of canonical GLTF copy + EmissiveStrength and Clearcoat exten…

…sions (#4319)

* EmissiveStrength and Clearcoat extensions

Change from MeshStandardMaterial to MeshPhysicalMaterial

* Add Clearcoat Normal Texture Scale

* Remove canonical GLTF element from ThreeDOMElement

Single source of truth is now the three.js scene graph

* Cleanup for space-opera tests

* Address review comments.

* Reverted tests after adding name functionality

* Remove unused `|null` in some ThreeDOMElements

textureInfo, material, and threeDomElement still require them for Lazyloading (assigning the correlated amterial after the constructor)

packages/model-viewer/src/features/scene-graph/api.ts

@@ -116,6 +116,22 @@ export declare interface Material {
   setAlphaMode(alphaMode: AlphaMode): void;
   getAlphaMode(): AlphaMode;
 
+  /**
+   * PBR Next properties.
+   */
+  readonly emissiveStrength: number;
+  readonly clearcoatFactor: number;
+  readonly clearcoatRoughnessFactor: number;
+  readonly clearcoatTexture: TextureInfo|null;
+  readonly clearcoatRoughnessTexture: TextureInfo|null;
+  readonly clearcoatNormalTexture: TextureInfo|null;
+  readonly clearcoatNormalScale: number;
+
+  setEmissiveStrength(emissiveStrength: number): void;
+  setClearcoatFactor(clearcoatFactor: number): void;
+  setClearcoatRoughnessFactor(clearcoatRoughnessFactor: number): void;
+  setClearcoatNormalScale(clearcoatNormalScale: number): void;
+
   /**
    * The PBRMetallicRoughness configuration of the material.
    */

packages/model-viewer/src/features/scene-graph/image.ts

@@ -16,55 +16,56 @@
 import {Mesh, MeshBasicMaterial, OrthographicCamera, PlaneGeometry, Scene, Texture as ThreeTexture, WebGLRenderTarget} from 'three';
 
 import {blobCanvas} from '../../model-viewer-base.js';
-import {Image as GLTFImage} from '../../three-components/gltf-instance/gltf-2.0.js';
 import {Renderer} from '../../three-components/Renderer.js';
 
 import {Image as ImageInterface} from './api.js';
-import {$correlatedObjects, $onUpdate, $sourceObject, ThreeDOMElement} from './three-dom-element.js';
+import {$correlatedObjects, $onUpdate, ThreeDOMElement} from './three-dom-element.js';
 
 
 const quadMaterial = new MeshBasicMaterial();
 const quad = new PlaneGeometry(2, 2);
 let adhocNum = 0;
 
 export const $threeTexture = Symbol('threeTexture');
+export const $threeTextures = Symbol('threeTextures');
 export const $applyTexture = Symbol('applyTexture');
 
 /**
  * Image facade implementation for Three.js textures
  */
 export class Image extends ThreeDOMElement implements ImageInterface {
   get[$threeTexture]() {
-    console.assert(
-        this[$correlatedObjects] != null && this[$correlatedObjects]!.size > 0,
-        'Image correlated object is undefined');
     return this[$correlatedObjects]?.values().next().value as ThreeTexture;
   }
 
-  constructor(
-      onUpdate: () => void, texture: ThreeTexture|null,
-      gltfImage: GLTFImage|null) {
-    gltfImage = gltfImage ?? {
-      name: (texture && texture.image && texture.image.src) ?
+  get[$threeTextures](): Set<ThreeTexture> {
+    return this[$correlatedObjects] as Set<ThreeTexture>;
+  }
+
+  constructor(onUpdate: () => void, texture: ThreeTexture) {
+    super(onUpdate, new Set<ThreeTexture>(texture ? [texture] : []));
+
+    if (!this[$threeTexture].image.src) {
+      this[$threeTexture].image.src = 'adhoc_image' + adhocNum++;
+    }
+    if (!this[$threeTexture].image.name) {
+      this[$threeTexture].image.name =
+          (texture && texture.image && texture.image.src) ?
           texture.image.src.split('/').pop() :
-          'adhoc_image',
-      uri: (texture && texture.image && texture.image.src) ?
-          texture.image.src :
-          'adhoc_image' + adhocNum++
-    };
-    super(onUpdate, gltfImage, new Set<ThreeTexture>(texture ? [texture] : []));
+          'adhoc_image';
+    }
   }
 
   get name(): string {
-    return (this[$sourceObject] as GLTFImage).name || '';
+    return this[$threeTexture].image.name || '';
   }
 
   get uri(): string|undefined {
-    return (this[$sourceObject] as GLTFImage).uri;
+    return this[$threeTexture].image.src;
   }
 
   get bufferView(): number|undefined {
-    return (this[$sourceObject] as GLTFImage).bufferView;
+    return this[$threeTexture].image.bufferView;
   }
 
   get element(): HTMLVideoElement|HTMLCanvasElement|undefined {
@@ -88,7 +89,9 @@ export class Image extends ThreeDOMElement implements ImageInterface {
   }
 
   set name(name: string) {
-    (this[$sourceObject] as GLTFImage).name = name;
+    for (const texture of this[$threeTextures]) {
+      texture.image.name = name;
+    }
   }
 
   update() {