Viewer: add support for hdr environments

packages/dev/core/src/Engines/AbstractEngine/abstractEngine.cubeTexture.ts

@@ -7,6 +7,7 @@ import { RandomGUID } from "../../Misc/guid";
 import type { IWebRequest } from "../../Misc/interfaces/iWebRequest";
 import { AbstractEngine } from "../abstractEngine";
 import { _GetCompatibleTextureLoader } from "core/Materials/Textures/Loaders/textureLoaderManager";
+import { GetExtensionFromUrl } from "core/Misc/urlTools";
 
 declare module "../../Engines/abstractEngine" {
     export interface AbstractEngine {
@@ -202,9 +203,7 @@ AbstractEngine.prototype.createCubeTextureBase = function (
         rootUrl = this._transformTextureUrl(rootUrl);
     }
 
-    const rootUrlWithoutUriParams = rootUrl.split("?")[0];
-    const lastDot = rootUrlWithoutUriParams.lastIndexOf(".");
-    const extension = forcedExtension ? forcedExtension : lastDot > -1 ? rootUrlWithoutUriParams.substring(lastDot).toLowerCase() : "";
+    const extension = forcedExtension ?? GetExtensionFromUrl(rootUrl);
 
     const loaderPromise = _GetCompatibleTextureLoader(extension);
 

packages/dev/core/src/Misc/index.ts

@@ -77,6 +77,7 @@ export * from "./equirectangularCapture";
 export * from "./decorators.serialization";
 export * from "./asyncLock";
 export * from "./bitArray";
+export * from "./urlTools";
 
 // RGBDTextureTools
 export * from "../Shaders/rgbdDecode.fragment";

packages/dev/core/src/Misc/urlTools.ts

@@ -0,0 +1,11 @@
+/**
+ * Gets the file extension from a URL.
+ * @param url The URL to get the file extension from.
+ * @returns The file extension, or an empty string if no extension is found.
+ */
+export function GetExtensionFromUrl(url: string) {
+    const urlWithoutUriParams = url.split("?")[0];
+    const lastDot = urlWithoutUriParams.lastIndexOf(".");
+    const extension = lastDot > -1 ? urlWithoutUriParams.substring(lastDot).toLowerCase() : "";
+    return extension;
+}

packages/tools/viewer/src/viewer.ts

@@ -4,8 +4,11 @@ import type {
     AnimationGroup,
     AssetContainer,
     AutoRotationBehavior,
+    BaseTexture,
     Camera,
+    CubeTexture,
     FramingBehavior,
+    HDRCubeTexture,
     HotSpotQuery,
     IDisposable,
     IMeshDataCache,
@@ -26,7 +29,6 @@ import { HemisphericLight } from "core/Lights/hemisphericLight";
 import { LoadAssetContainerAsync } from "core/Loading/sceneLoader";
 import { ImageProcessingConfiguration } from "core/Materials/imageProcessingConfiguration";
 import { PBRMaterial } from "core/Materials/PBR/pbrMaterial";
-import { CubeTexture } from "core/Materials/Textures/cubeTexture";
 import { Texture } from "core/Materials/Textures/texture";
 import { Clamp } from "core/Maths/math.scalar.functions";
 import { Matrix, Vector3 } from "core/Maths/math.vector";
@@ -41,6 +43,7 @@ import { AbortError } from "core/Misc/error";
 import { Logger } from "core/Misc/logger";
 import { Observable } from "core/Misc/observable";
 import { SnapshotRenderingHelper } from "core/Misc/snapshotRenderingHelper";
+import { GetExtensionFromUrl } from "core/Misc/urlTools";
 import { Scene } from "core/scene";
 import { registerBuiltInLoaders } from "loaders/dynamic";
 
@@ -134,7 +137,30 @@ function throwIfAborted(...abortSignals: (Nullable<AbortSignal> | undefined)[]):
     }
 }
 
-function createSkybox(scene: Scene, camera: Camera, reflectionTexture: CubeTexture, blur: number): Mesh {
+async function createCubeTexture(url: string, scene: Scene, extension?: string) {
+    extension = extension ?? GetExtensionFromUrl(url);
+    const instantiateTexture = await (async () => {
+        if (extension === ".hdr") {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { HDRCubeTexture } = await import("core/Materials/Textures/hdrCubeTexture");
+            return () => new HDRCubeTexture(url, scene, 256, false, true, false, true, undefined, undefined, undefined, true, true);
+        } else {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { CubeTexture } = await import("core/Materials/Textures/cubeTexture");
+            return () => new CubeTexture(url, scene, null, false, null, null, null, undefined, true, extension, true);
+        }
+    })();
+
+    const originalUseDelayedTextureLoading = scene.useDelayedTextureLoading;
+    try {
+        scene.useDelayedTextureLoading = false;
+        return instantiateTexture();
+    } finally {
+        scene.useDelayedTextureLoading = originalUseDelayedTextureLoading;
+    }
+}
+
+function createSkybox(scene: Scene, camera: Camera, reflectionTexture: BaseTexture, blur: number): Mesh {
     const hdrSkybox = CreateBox("hdrSkyBox", undefined, scene);
     const hdrSkyboxMaterial = new PBRMaterial("skyBox", scene);
     // Use the default image processing configuration on the skybox (e.g. don't apply tone mapping, contrast, or exposure).
@@ -495,8 +521,8 @@ export class Viewer implements IDisposable {
     private _skybox: Nullable<Mesh> = null;
     private _skyboxBlur: number = 0.3;
     private _skyboxVisible: boolean = true;
-    private _skyboxTexture: Nullable<CubeTexture> = null;
-    private _reflectionTexture: Nullable<CubeTexture> = null;
+    private _skyboxTexture: Nullable<CubeTexture | HDRCubeTexture> = null;
+    private _reflectionTexture: Nullable<CubeTexture | HDRCubeTexture> = null;
     private _reflectionsIntensity: number = 1;
     private _reflectionsRotation: number = 0;
     private _light: Nullable<HemisphericLight> = null;
@@ -1267,7 +1293,7 @@ export class Viewer implements IDisposable {
 
             try {
                 if (url) {
-                    const cubeTexture = CubeTexture.CreateFromPrefilteredData(url, this._scene, options.extension);
+                    const cubeTexture = await createCubeTexture(url, this._scene, options.extension);
 
                     if (options.lighting) {
                         this._reflectionTexture = cubeTexture;
@@ -1286,7 +1312,7 @@ export class Viewer implements IDisposable {
                     }
 
                     await new Promise<void>((resolve, reject) => {
-                        const successObserver = cubeTexture.onLoadObservable.addOnce(() => {
+                        const successObserver = (cubeTexture.onLoadObservable as Observable<unknown>).addOnce(() => {
                             successObserver.remove();
                             errorObserver.remove();
                             resolve();