Fix withCredentials (#4892)

* make withCredentials static

* Revert "make withCredentials static"

This reverts commit 55d3bdd.

* fix withCredentials

Author: elalish

packages/model-viewer/src/features/environment.ts

@@ -133,7 +133,8 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
             await textureUtils.generateEnvironmentMapAndSkybox(
                 deserializeUrl(skyboxImage),
                 environmentImage,
-                (progress: number) => updateEnvProgress(clamp(progress, 0, 1)));
+                (progress: number) => updateEnvProgress(clamp(progress, 0, 1)),
+                this.withCredentials);
 
         if (this[$currentEnvironmentMap] !== environmentMap) {
           this[$currentEnvironmentMap] = environmentMap;

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

@@ -131,7 +131,7 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
     async createTexture(uri: string, type: string = 'image/png'):
         Promise<ModelViewerTexture> {
       const {textureUtils} = this[$renderer];
-      const texture = await textureUtils!.loadImage(uri);
+      const texture = await textureUtils!.loadImage(uri, this.withCredentials);
 
       texture.userData.mimeType = type;
 
@@ -141,14 +141,16 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
     async createLottieTexture(uri: string, quality = 1):
         Promise<ModelViewerTexture> {
       const {textureUtils} = this[$renderer];
-      const texture = await textureUtils!.loadLottie(uri, quality);
+      const texture =
+          await textureUtils!.loadLottie(uri, quality, this.withCredentials);
 
       return this[$buildTexture](texture);
     }
 
     createVideoTexture(uri: string): ModelViewerTexture {
       const video = document.createElement('video');
-      video.crossOrigin = this.withCredentials ? 'use-credentials' : 'anonymous';
+      video.crossOrigin =
+          this.withCredentials ? 'use-credentials' : 'anonymous';
       video.src = uri;
       video.muted = true;
       video.playsInline = true;
@@ -170,7 +172,8 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
       super.updated(changedProperties);
 
       if (changedProperties.has('variantName')) {
-        const updateVariantProgress = this[$progressTracker].beginActivity('variant-update');
+        const updateVariantProgress =
+            this[$progressTracker].beginActivity('variant-update');
         updateVariantProgress(0.1);
         const model = this[$model];
         const {variantName} = this;

packages/model-viewer/src/model-viewer-base.ts

@@ -404,11 +404,6 @@ export default class ModelViewerElementBase extends ReactiveElement {
       this[$userInputElement].setAttribute('aria-label', this[$ariaLabel]);
     }
 
-    if (changedProperties.has('withCredentials')) {
-      CachingGLTFLoader.withCredentials = this.withCredentials;
-      this[$renderer].textureUtils!.withCredentials = this.withCredentials;
-    }
-
     if (changedProperties.has('generateSchema')) {
       if (this.generateSchema) {
         this[$scene].updateSchema(this.src);
@@ -613,7 +608,8 @@ export default class ModelViewerElementBase extends ReactiveElement {
     // throw exceptions and/or behave in unexpected ways:
     scene.stopAnimation();
 
-    const updateSourceProgress = this[$progressTracker].beginActivity('model-load');
+    const updateSourceProgress =
+        this[$progressTracker].beginActivity('model-load');
     const source = this.src;
     try {
       const srcUpdated = scene.setSource(

packages/model-viewer/src/three-components/CachingGLTFLoader.ts

@@ -86,8 +86,6 @@ export class CachingGLTFLoader<T extends GLTFInstanceConstructor =
                                              GLTFInstanceConstructor> extends
     EventDispatcher<
         {'preload': {element: ModelViewerElementBase, src: String}}> {
-  static withCredentials: boolean;
-
   static setDRACODecoderLocation(url: string) {
     dracoDecoderLocation = url;
     dracoLoader.setDecoderPath(url);
@@ -188,7 +186,7 @@ export class CachingGLTFLoader<T extends GLTFInstanceConstructor =
   async preload(
       url: string, element: ModelViewerElementBase,
       progressCallback: ProgressCallback = () => {}) {
-    this[$loader].setWithCredentials(CachingGLTFLoader.withCredentials);
+    this[$loader].setWithCredentials(element.withCredentials);
     this.dispatchEvent({type: 'preload', element: element, src: url});
     if (!cache.has(url)) {
       if (meshoptDecoder != null) {

packages/model-viewer/src/three-components/TextureUtils.ts

@@ -35,7 +35,6 @@ const HDR_FILE_RE = /\.hdr(\.js)?$/;
 
 export default class TextureUtils {
   public lottieLoaderUrl = '';
-  public withCredentials = false;
 
   private _ldrLoader: TextureLoader|null = null;
   private _imageLoader: HDRJPGLoader|null = null;
@@ -53,53 +52,54 @@ export default class TextureUtils {
   constructor(private threeRenderer: WebGLRenderer) {
   }
 
-  get ldrLoader(): TextureLoader {
+  private ldrLoader(withCredentials: boolean): TextureLoader {
     if (this._ldrLoader == null) {
       this._ldrLoader = new TextureLoader();
     }
-    this._ldrLoader.setWithCredentials(this.withCredentials);
+    this._ldrLoader.setWithCredentials(withCredentials);
     return this._ldrLoader;
   }
 
-  get imageLoader(): HDRJPGLoader {
+  private imageLoader(withCredentials: boolean): HDRJPGLoader {
     if (this._imageLoader == null) {
       this._imageLoader = new HDRJPGLoader(this.threeRenderer);
     }
-    this._imageLoader.setWithCredentials(this.withCredentials);
+    this._imageLoader.setWithCredentials(withCredentials);
     return this._imageLoader;
   }
 
-  get hdrLoader(): RGBELoader {
+  private hdrLoader(withCredentials: boolean): RGBELoader {
     if (this._hdrLoader == null) {
       this._hdrLoader = new RGBELoader();
       this._hdrLoader.setDataType(HalfFloatType);
     }
-    this._hdrLoader.setWithCredentials(this.withCredentials);
+    this._hdrLoader.setWithCredentials(withCredentials);
     return this._hdrLoader;
   }
 
-  async getLottieLoader(): Promise<any> {
+  async getLottieLoader(withCredentials: boolean): Promise<any> {
     if (this._lottieLoader == null) {
       const {LottieLoader} =
           await import(/* webpackIgnore: true */ this.lottieLoaderUrl);
       this._lottieLoader = new LottieLoader() as Loader;
     }
-    this._lottieLoader.setWithCredentials(this.withCredentials);
+    this._lottieLoader.setWithCredentials(withCredentials);
     return this._lottieLoader;
   }
 
-  async loadImage(url: string): Promise<Texture> {
+  async loadImage(url: string, withCredentials: boolean): Promise<Texture> {
     const texture: Texture = await new Promise<Texture>(
-        (resolve, reject) =>
-            this.ldrLoader.load(url, resolve, () => {}, reject));
+        (resolve, reject) => this.ldrLoader(withCredentials)
+                                 .load(url, resolve, () => {}, reject));
     texture.name = url;
     texture.flipY = false;
 
     return texture;
   }
 
-  async loadLottie(url: string, quality: number): Promise<Texture> {
-    const loader = await this.getLottieLoader();
+  async loadLottie(url: string, quality: number, withCredentials: boolean):
+      Promise<Texture> {
+    const loader = await this.getLottieLoader(withCredentials);
     loader.setQuality(quality);
     const texture: Texture = await new Promise<Texture>(
         (resolve, reject) => loader.load(url, resolve, () => {}, reject));
@@ -109,11 +109,13 @@ export default class TextureUtils {
   }
 
   async loadEquirect(
-      url: string, progressCallback: (progress: number) => void = () => {}):
+      url: string, withCredentials = false,
+      progressCallback: (progress: number) => void = () => {}):
       Promise<Texture> {
     try {
       const isHDR: boolean = HDR_FILE_RE.test(url);
-      const loader = isHDR ? this.hdrLoader : this.imageLoader;
+      const loader = isHDR ? this.hdrLoader(withCredentials) :
+                             this.imageLoader(withCredentials);
       const texture: Texture = await new Promise<Texture>(
           (resolve, reject) => loader.load(
               url,
@@ -158,8 +160,8 @@ export default class TextureUtils {
    */
   async generateEnvironmentMapAndSkybox(
       skyboxUrl: string|null = null, environmentMapUrl: string|null = null,
-      progressCallback: (progress: number) => void = () => {}):
-      Promise<EnvironmentMapAndSkybox> {
+      progressCallback: (progress: number) => void = () => {},
+      withCredentials = false): Promise<EnvironmentMapAndSkybox> {
     const useAltEnvironment = environmentMapUrl !== 'legacy';
     if (environmentMapUrl === 'legacy' || environmentMapUrl === 'neutral') {
       environmentMapUrl = null;
@@ -171,17 +173,18 @@ export default class TextureUtils {
 
     // If we have a skybox URL, attempt to load it as a cubemap
     if (!!skyboxUrl) {
-      skyboxLoads = this.loadEquirectFromUrl(skyboxUrl, progressCallback);
+      skyboxLoads = this.loadEquirectFromUrl(
+          skyboxUrl, withCredentials, progressCallback);
     }
 
     if (!!environmentMapUrl) {
       // We have an available environment map URL
-      environmentMapLoads =
-          this.loadEquirectFromUrl(environmentMapUrl, progressCallback);
+      environmentMapLoads = this.loadEquirectFromUrl(
+          environmentMapUrl, withCredentials, progressCallback);
     } else if (!!skyboxUrl) {
       // Fallback to deriving the environment map from an available skybox
-      environmentMapLoads =
-          this.loadEquirectFromUrl(skyboxUrl, progressCallback);
+      environmentMapLoads = this.loadEquirectFromUrl(
+          skyboxUrl, withCredentials, progressCallback);
     } else {
       // Fallback to generating the environment map
       environmentMapLoads = useAltEnvironment ?
@@ -203,10 +206,11 @@ export default class TextureUtils {
    * Loads an equirect Texture from a given URL, for use as a skybox.
    */
   private async loadEquirectFromUrl(
-      url: string,
+      url: string, withCredentials: boolean,
       progressCallback: (progress: number) => void): Promise<Texture> {
     if (!this.skyboxCache.has(url)) {
-      const skyboxMapLoads = this.loadEquirect(url, progressCallback);
+      const skyboxMapLoads =
+          this.loadEquirect(url, withCredentials, progressCallback);
 
       this.skyboxCache.set(url, skyboxMapLoads);
     }