Skip to content

Commit

Permalink
fix withCredentials
Browse files Browse the repository at this point in the history
  • Loading branch information
@elalish
elalish committed Sep 23, 2024
1 parent 0d5219d commit 201ce31
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 39 deletions.
3 changes: 2 additions & 1 deletion packages/model-viewer/src/features/environment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 7 additions & 4 deletions packages/model-viewer/src/features/scene-graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand All @@ -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;
Expand Down
8 changes: 2 additions & 6 deletions packages/model-viewer/src/model-viewer-base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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(
Expand Down
4 changes: 1 addition & 3 deletions packages/model-viewer/src/three-components/CachingGLTFLoader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down
54 changes: 29 additions & 25 deletions packages/model-viewer/src/three-components/TextureUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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));
Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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 ?
Expand All @@ -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);
}
Expand Down

0 comments on commit 201ce31

Please sign in to comment.