@babylonjs/viewer 7.33.0 → 7.34.0-alpha

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../tools/viewer-alpha/src/viewer.ts","../../../../../../../../tools/viewer-alpha/src/viewerFactory.ts","../../../../../../../../tools/viewer-alpha/src/viewerElement.ts"],"sourcesContent":["import type {\r\n    AbstractEngine,\r\n    AnimationGroup,\r\n    AssetContainer,\r\n    AutoRotationBehavior,\r\n    Camera,\r\n    FramingBehavior,\r\n    HotSpotQuery,\r\n    IDisposable,\r\n    ISceneLoaderProgressEvent,\r\n    LoadAssetContainerOptions,\r\n    Mesh,\r\n    Nullable,\r\n    Observer,\r\n    // eslint-disable-next-line import/no-internal-modules\r\n} from \"core/index\";\r\n\r\nimport { ArcRotateCamera } from \"core/Cameras/arcRotateCamera\";\r\nimport { HemisphericLight } from \"core/Lights/hemisphericLight\";\r\nimport { loadAssetContainerAsync } from \"core/Loading/sceneLoader\";\r\nimport { ImageProcessingConfiguration } from \"core/Materials/imageProcessingConfiguration\";\r\nimport { PBRMaterial } from \"core/Materials/PBR/pbrMaterial\";\r\nimport { CubeTexture } from \"core/Materials/Textures/cubeTexture\";\r\nimport { Texture } from \"core/Materials/Textures/texture\";\r\nimport { Clamp } from \"core/Maths/math.scalar.functions\";\r\nimport { Matrix, TmpVectors, Vector3 } from \"core/Maths/math.vector\";\r\nimport { CreateBox } from \"core/Meshes/Builders/boxBuilder\";\r\nimport { computeMaxExtents } from \"core/Meshes/meshUtils\";\r\nimport { AsyncLock } from \"core/Misc/asyncLock\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport { Scene } from \"core/scene\";\r\nimport { registerBuiltInLoaders } from \"loaders/dynamic\";\r\nimport { Viewport } from \"core/Maths/math.viewport\";\r\nimport { GetHotSpotToRef } from \"core/Meshes/abstractMesh.hotSpot\";\r\nimport { SnapshotRenderingHelper } from \"core/Misc/snapshotRenderingHelper\";\r\n\r\nconst toneMappingOptions = [\"none\", \"standard\", \"aces\", \"neutral\"] as const;\r\nexport type ToneMapping = (typeof toneMappingOptions)[number];\r\n\r\nexport type LoadModelOptions = LoadAssetContainerOptions & {\r\n    /**\r\n     * The default animation index.\r\n     */\r\n    defaultAnimation?: number;\r\n};\r\n\r\nexport type CameraAutoOrbit = {\r\n    /**\r\n     * Whether the camera should automatically orbit around the model when idle.\r\n     */\r\n    enabled: boolean;\r\n\r\n    /**\r\n     * The speed at which the camera orbits around the model when idle.\r\n     */\r\n    speed: number;\r\n\r\n    /**\r\n     * The delay in milliseconds before the camera starts orbiting around the model when idle.\r\n     */\r\n    delay: number;\r\n};\r\n\r\nexport type PostProcessing = {\r\n    /**\r\n     * The tone mapping to use for rendering the scene.\r\n     */\r\n    toneMapping: ToneMapping;\r\n\r\n    /**\r\n     * The contrast applied to the scene.\r\n     */\r\n    contrast: number;\r\n\r\n    /**\r\n     * The exposure applied to the scene.\r\n     */\r\n    exposure: number;\r\n};\r\n\r\n/**\r\n * Checks if the given value is a valid tone mapping option.\r\n * @param value The value to check.\r\n * @returns True if the value is a valid tone mapping option, otherwise false.\r\n */\r\nexport function isToneMapping(value: string): value is ToneMapping {\r\n    return toneMappingOptions.includes(value as ToneMapping);\r\n}\r\n\r\nfunction throwIfAborted(...abortSignals: (Nullable<AbortSignal> | undefined)[]): void {\r\n    for (const signal of abortSignals) {\r\n        signal?.throwIfAborted();\r\n    }\r\n}\r\n\r\nfunction createSkybox(scene: Scene, camera: Camera, environmentTexture: CubeTexture, blur: number): Mesh {\r\n    const hdrSkybox = CreateBox(\"hdrSkyBox\", undefined, scene);\r\n    const hdrSkyboxMaterial = new PBRMaterial(\"skyBox\", scene);\r\n    // Use the default image processing configuration on the skybox (e.g. don't apply tone mapping, contrast, or exposure).\r\n    hdrSkyboxMaterial.imageProcessingConfiguration = new ImageProcessingConfiguration();\r\n    hdrSkyboxMaterial.backFaceCulling = false;\r\n    hdrSkyboxMaterial.reflectionTexture = environmentTexture.clone();\r\n    if (hdrSkyboxMaterial.reflectionTexture) {\r\n        hdrSkyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;\r\n    }\r\n    hdrSkyboxMaterial.microSurface = 1.0 - blur;\r\n    hdrSkyboxMaterial.disableLighting = true;\r\n    hdrSkyboxMaterial.twoSidedLighting = true;\r\n    hdrSkybox.material = hdrSkyboxMaterial;\r\n    hdrSkybox.isPickable = false;\r\n    hdrSkybox.infiniteDistance = true;\r\n\r\n    updateSkybox(hdrSkybox, camera);\r\n\r\n    return hdrSkybox;\r\n}\r\n\r\nfunction updateSkybox(skybox: Nullable<Mesh>, camera: Camera): void {\r\n    skybox?.scaling.setAll((camera.maxZ - camera.minZ) / 2);\r\n}\r\n\r\nexport type ViewerDetails = {\r\n    /**\r\n     * Gets the Viewer instance.\r\n     */\r\n    viewer: Viewer;\r\n\r\n    /**\r\n     * Provides access to the Scene managed by the Viewer.\r\n     */\r\n    scene: Scene;\r\n\r\n    /**\r\n     * Provides access to the Camera managed by the Viewer.\r\n     */\r\n    camera: ArcRotateCamera;\r\n\r\n    /**\r\n     * Provides access to the currently loaded model.\r\n     */\r\n    model: Nullable<AssetContainer>;\r\n};\r\n\r\nexport type ViewerOptions = Partial<\r\n    Readonly<{\r\n        /**\r\n         * Called once when the viewer is initialized and provides viewer details that can be used for advanced customization.\r\n         */\r\n        onInitialized: (details: Readonly<ViewerDetails>) => void;\r\n    }>\r\n>;\r\n\r\nexport type EnvironmentOptions = Partial<Readonly<{}>>;\r\n\r\nexport type ViewerHotSpotQuery = {\r\n    /**\r\n     * The type of the hot spot.\r\n     */\r\n    type: \"surface\";\r\n\r\n    /**\r\n     * The index of the mesh within the loaded model.\r\n     */\r\n    meshIndex: number;\r\n} & HotSpotQuery;\r\n\r\n/**\r\n * Provides the result of a hot spot query.\r\n */\r\nexport class ViewerHotSpotResult {\r\n    /**\r\n     * 2D canvas position in pixels\r\n     */\r\n    public readonly screenPosition: [x: number, y: number] = [NaN, NaN];\r\n\r\n    /**\r\n     * 3D world coordinates\r\n     */\r\n    public readonly worldPosition: [x: number, y: number, z: number] = [NaN, NaN, NaN];\r\n}\r\n\r\n/**\r\n * @experimental\r\n * Provides an experience for viewing a single 3D model.\r\n * @remarks\r\n * The Viewer is not tied to a specific UI framework and can be used with Babylon.js in a browser or with Babylon Native.\r\n * Includes (or will include) support for common model viewing requirements such as:\r\n * - Loading different model formats.\r\n * - Setting up a camera and providing default behaviors like auto orbit and pose interpolation.\r\n * - Framing the loaded model in the camera's view.\r\n * - Setting up the environment, lighting, and tone mapping.\r\n * - Enumerating and playing (or auto playing) animations.\r\n * - Enumerating and switching between material variants.\r\n * - Full screen and XR modes.\r\n */\r\nexport class Viewer implements IDisposable {\r\n    static {\r\n        registerBuiltInLoaders();\r\n    }\r\n\r\n    /**\r\n     * Fired when the environment has changed.\r\n     */\r\n    public readonly onEnvironmentChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when an error occurs while loading the environment.\r\n     */\r\n    public readonly onEnvironmentError = new Observable<unknown>();\r\n\r\n    /**\r\n     * Fired when the skybox blur changes.\r\n     */\r\n    public readonly onSkyboxBlurChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when the post processing state changes.\r\n     */\r\n    public readonly onPostProcessingChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when a model is loaded into the viewer (or unloaded from the viewer).\r\n     */\r\n    public readonly onModelChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when an error occurs while loading a model.\r\n     */\r\n    public readonly onModelError = new Observable<unknown>();\r\n\r\n    /**\r\n     * Fired when progress changes on loading activity.\r\n     */\r\n    public readonly onLoadingProgressChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when the camera auto orbit state changes.\r\n     */\r\n    public readonly onCameraAutoOrbitChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when the selected animation changes.\r\n     */\r\n    public readonly onSelectedAnimationChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when the animation speed changes.\r\n     */\r\n    public readonly onAnimationSpeedChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when the selected animation is playing or paused.\r\n     */\r\n    public readonly onIsAnimationPlayingChanged = new Observable<void>();\r\n\r\n    /**\r\n     * Fired when the current point on the selected animation timeline changes.\r\n     */\r\n    public readonly onAnimationProgressChanged = new Observable<void>();\r\n\r\n    private readonly _details: ViewerDetails;\r\n    private readonly _snapshotHelper: SnapshotRenderingHelper;\r\n    private readonly _autoRotationBehavior: AutoRotationBehavior;\r\n    private readonly _renderLoopController: IDisposable;\r\n    private readonly _imageProcessingConfigurationObserver: Observer<ImageProcessingConfiguration>;\r\n    private _skybox: Nullable<Mesh> = null;\r\n    private _skyboxBlur: number = 0.3;\r\n    private _light: Nullable<HemisphericLight> = null;\r\n    private _toneMappingEnabled: boolean;\r\n    private _toneMappingType: number;\r\n    private _contrast: number;\r\n    private _exposure: number;\r\n\r\n    private _isDisposed = false;\r\n\r\n    private readonly _loadModelLock = new AsyncLock();\r\n    private _loadModelAbortController: Nullable<AbortController> = null;\r\n\r\n    private readonly _loadEnvironmentLock = new AsyncLock();\r\n    private _environment: Nullable<IDisposable> = null;\r\n    private _loadEnvironmentAbortController: Nullable<AbortController> = null;\r\n\r\n    private _isLoadingModel = false;\r\n    private _modelLoadingProgress: Nullable<number> = null;\r\n\r\n    private _selectedAnimation = -1;\r\n    private _activeAnimationObservers: Observer<AnimationGroup>[] = [];\r\n    private _animationSpeed = 1;\r\n\r\n    public constructor(\r\n        private readonly _engine: AbstractEngine,\r\n        options?: ViewerOptions\r\n    ) {\r\n        {\r\n            const scene = new Scene(this._engine);\r\n\r\n            // Deduce tone mapping, contrast, and exposure from the scene (so the viewer stays in sync if anything mutates these values directly on the scene).\r\n            this._toneMappingEnabled = scene.imageProcessingConfiguration.toneMappingEnabled;\r\n            this._toneMappingType = scene.imageProcessingConfiguration.toneMappingType;\r\n            this._contrast = scene.imageProcessingConfiguration.contrast;\r\n            this._exposure = scene.imageProcessingConfiguration.exposure;\r\n\r\n            this._imageProcessingConfigurationObserver = scene.imageProcessingConfiguration.onUpdateParameters.add(() => {\r\n                let hasChanged = false;\r\n\r\n                if (this._toneMappingEnabled !== scene.imageProcessingConfiguration.toneMappingEnabled) {\r\n                    this._toneMappingEnabled = scene.imageProcessingConfiguration.toneMappingEnabled;\r\n                    hasChanged = true;\r\n                }\r\n\r\n                if (this._toneMappingType !== scene.imageProcessingConfiguration.toneMappingType) {\r\n                    this._toneMappingType = scene.imageProcessingConfiguration.toneMappingType;\r\n                    hasChanged = true;\r\n                }\r\n\r\n                if (this._contrast !== scene.imageProcessingConfiguration.contrast) {\r\n                    this._contrast = scene.imageProcessingConfiguration.contrast;\r\n                    hasChanged = true;\r\n                }\r\n\r\n                if (this._exposure !== scene.imageProcessingConfiguration.exposure) {\r\n                    this._exposure = scene.imageProcessingConfiguration.exposure;\r\n                    hasChanged = true;\r\n                }\r\n\r\n                if (hasChanged) {\r\n                    this.onPostProcessingChanged.notifyObservers();\r\n                }\r\n            });\r\n\r\n            const camera = new ArcRotateCamera(\"Viewer Default Camera\", 0, 0, 1, Vector3.Zero(), scene);\r\n            this._details = {\r\n                viewer: this,\r\n                scene,\r\n                camera,\r\n                model: null,\r\n            };\r\n        }\r\n        this._details.scene.skipFrustumClipping = true;\r\n        this._details.scene.skipPointerMovePicking = true;\r\n        this._snapshotHelper = new SnapshotRenderingHelper(this._details.scene, { morphTargetsNumMaxInfluences: 30 });\r\n        this._details.camera.attachControl();\r\n        this._updateCamera(); // set default camera values\r\n        this._autoRotationBehavior = this._details.camera.getBehaviorByName(\"AutoRotation\") as AutoRotationBehavior;\r\n\r\n        // Default to KHR PBR Neutral tone mapping.\r\n        this.postProcessing = {\r\n            toneMapping: \"neutral\",\r\n        };\r\n\r\n        // Load a default light, but ignore errors as the user might be immediately loading their own environment.\r\n        this.resetEnvironment().catch(() => {});\r\n\r\n        // TODO: render at least back ground. Maybe we can only run renderloop when a mesh is loaded. What to render until then?\r\n        const render = () => {\r\n            this._details.scene.render();\r\n            if (this.isAnimationPlaying) {\r\n                this.onAnimationProgressChanged.notifyObservers();\r\n                this._autoRotationBehavior.resetLastInteractionTime();\r\n            }\r\n        };\r\n\r\n        this._engine.runRenderLoop(render);\r\n        this._renderLoopController = {\r\n            dispose: () => this._engine.stopRenderLoop(render),\r\n        };\r\n\r\n        options?.onInitialized?.(this._details);\r\n    }\r\n\r\n    /**\r\n     * The camera auto orbit configuration.\r\n     */\r\n    public get cameraAutoOrbit(): Readonly<CameraAutoOrbit> {\r\n        return {\r\n            enabled: this._details.camera.behaviors.includes(this._autoRotationBehavior),\r\n            speed: this._autoRotationBehavior.idleRotationSpeed,\r\n            delay: this._autoRotationBehavior.idleRotationWaitTime,\r\n        };\r\n    }\r\n\r\n    public set cameraAutoOrbit(value: Partial<Readonly<CameraAutoOrbit>>) {\r\n        if (value.enabled !== undefined && value.enabled !== this.cameraAutoOrbit.enabled) {\r\n            if (value.enabled) {\r\n                this._details.camera.addBehavior(this._autoRotationBehavior);\r\n            } else {\r\n                this._details.camera.removeBehavior(this._autoRotationBehavior);\r\n            }\r\n        }\r\n\r\n        if (value.delay !== undefined) {\r\n            this._autoRotationBehavior.idleRotationWaitTime = value.delay;\r\n        }\r\n\r\n        if (value.speed !== undefined) {\r\n            this._autoRotationBehavior.idleRotationSpeed = value.speed;\r\n        }\r\n\r\n        this.onCameraAutoOrbitChanged.notifyObservers();\r\n    }\r\n\r\n    /**\r\n     * A value between 0 and 1 that specifies how much to blur the skybox.\r\n     */\r\n    public get skyboxBlur(): number {\r\n        return this._skyboxBlur;\r\n    }\r\n\r\n    public set skyboxBlur(value: number) {\r\n        if (value !== this._skyboxBlur) {\r\n            this._skyboxBlur = value;\r\n            if (this._skybox) {\r\n                const material = this._skybox.material;\r\n                if (material instanceof PBRMaterial) {\r\n                    this._snapshotHelper.disableSnapshotRendering();\r\n                    material.microSurface = 1.0 - value;\r\n                    this._snapshotHelper.enableSnapshotRendering();\r\n                }\r\n            }\r\n            this.onSkyboxBlurChanged.notifyObservers();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * The post processing configuration.\r\n     */\r\n    public get postProcessing(): PostProcessing {\r\n        let toneMapping: ToneMapping;\r\n        switch (this._toneMappingType) {\r\n            case ImageProcessingConfiguration.TONEMAPPING_STANDARD:\r\n                toneMapping = \"standard\";\r\n                break;\r\n            case ImageProcessingConfiguration.TONEMAPPING_ACES:\r\n                toneMapping = \"aces\";\r\n                break;\r\n            case ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL:\r\n                toneMapping = \"neutral\";\r\n                break;\r\n            default:\r\n                toneMapping = \"none\";\r\n                break;\r\n        }\r\n\r\n        return {\r\n            toneMapping,\r\n            contrast: this._contrast,\r\n            exposure: this._exposure,\r\n        };\r\n    }\r\n\r\n    public set postProcessing(value: Partial<Readonly<PostProcessing>>) {\r\n        this._snapshotHelper.disableSnapshotRendering();\r\n\r\n        if (value.toneMapping !== undefined) {\r\n            if (value.toneMapping === \"none\") {\r\n                this._details.scene.imageProcessingConfiguration.toneMappingEnabled = false;\r\n            } else {\r\n                switch (value.toneMapping) {\r\n                    case \"standard\":\r\n                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_STANDARD;\r\n                        break;\r\n                    case \"aces\":\r\n                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_ACES;\r\n                        break;\r\n                    case \"neutral\":\r\n                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL;\r\n                        break;\r\n                }\r\n                this._details.scene.imageProcessingConfiguration.toneMappingEnabled = true;\r\n            }\r\n        }\r\n\r\n        if (value.contrast !== undefined) {\r\n            this._details.scene.imageProcessingConfiguration.contrast = value.contrast;\r\n        }\r\n\r\n        if (value.exposure !== undefined) {\r\n            this._details.scene.imageProcessingConfiguration.exposure = value.exposure;\r\n        }\r\n\r\n        this._details.scene.imageProcessingConfiguration.isEnabled = this._toneMappingEnabled || this._contrast !== 1 || this._exposure !== 1;\r\n\r\n        this._snapshotHelper.enableSnapshotRendering();\r\n    }\r\n\r\n    /**\r\n     * Gets information about loading activity.\r\n     * @remarks\r\n     * false indicates no loading activity.\r\n     * true indicates loading activity with no progress information.\r\n     * A number between 0 and 1 indicates loading activity with progress information.\r\n     */\r\n    public get loadingProgress(): boolean | number {\r\n        if (this._isLoadingModel) {\r\n            return this._modelLoadingProgress ?? true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * The list of animation names for the currently loaded model.\r\n     */\r\n    public get animations(): readonly string[] {\r\n        return this._details.model?.animationGroups.map((group) => group.name) ?? [];\r\n    }\r\n\r\n    /**\r\n     * The currently selected animation index.\r\n     */\r\n    public get selectedAnimation(): number {\r\n        return this._selectedAnimation;\r\n    }\r\n\r\n    public set selectedAnimation(value: number) {\r\n        value = Math.round(Clamp(value, -1, this.animations.length - 1));\r\n        if (value !== this._selectedAnimation) {\r\n            const startAnimation = this.isAnimationPlaying;\r\n            if (this._activeAnimation) {\r\n                this._activeAnimationObservers.forEach((observer) => observer.remove());\r\n                this._activeAnimationObservers = [];\r\n                this._activeAnimation.pause();\r\n                this._activeAnimation.goToFrame(0);\r\n            }\r\n\r\n            this._selectedAnimation = value;\r\n\r\n            if (this._activeAnimation) {\r\n                this._activeAnimation.goToFrame(0);\r\n                this._activeAnimation.play(true);\r\n\r\n                if (!startAnimation) {\r\n                    this.pauseAnimation();\r\n                }\r\n\r\n                this._activeAnimationObservers = [\r\n                    this._activeAnimation.onAnimationGroupPlayObservable.add(() => {\r\n                        this.onIsAnimationPlayingChanged.notifyObservers();\r\n                    }),\r\n                    this._activeAnimation.onAnimationGroupPauseObservable.add(() => {\r\n                        this.onIsAnimationPlayingChanged.notifyObservers();\r\n                    }),\r\n                    this._activeAnimation.onAnimationGroupEndObservable.add(() => {\r\n                        this.onIsAnimationPlayingChanged.notifyObservers();\r\n                        this.onAnimationProgressChanged.notifyObservers();\r\n                    }),\r\n                ];\r\n\r\n                this._updateCamera(!this._isLoadingModel);\r\n            }\r\n\r\n            this.onSelectedAnimationChanged.notifyObservers();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * True if an animation is currently playing.\r\n     */\r\n    public get isAnimationPlaying(): boolean {\r\n        return this._activeAnimation?.isPlaying ?? false;\r\n    }\r\n\r\n    /**\r\n     * The speed scale at which animations are played.\r\n     */\r\n    public get animationSpeed(): number {\r\n        return this._animationSpeed;\r\n    }\r\n\r\n    public set animationSpeed(value: number) {\r\n        this._animationSpeed = value;\r\n        this._applyAnimationSpeed();\r\n        this.onAnimationSpeedChanged.notifyObservers();\r\n    }\r\n\r\n    /**\r\n     * The current point on the selected animation timeline, normalized between 0 and 1.\r\n     */\r\n    public get animationProgress(): number {\r\n        if (this._activeAnimation) {\r\n            return this._activeAnimation.getCurrentFrame() / (this._activeAnimation.to - this._activeAnimation.from);\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    public set animationProgress(value: number) {\r\n        if (this._activeAnimation) {\r\n            this._activeAnimation.goToFrame(value * (this._activeAnimation.to - this._activeAnimation.from));\r\n            this.onAnimationProgressChanged.notifyObservers();\r\n            this._autoRotationBehavior.resetLastInteractionTime();\r\n        }\r\n    }\r\n\r\n    private get _activeAnimation(): Nullable<AnimationGroup> {\r\n        return this._details.model?.animationGroups[this._selectedAnimation] ?? null;\r\n    }\r\n\r\n    /**\r\n     * Loads a 3D model from the specified URL.\r\n     * @remarks\r\n     * If a model is already loaded, it will be unloaded before loading the new model.\r\n     * @param source A url or File or ArrayBufferView that points to the model to load.\r\n     * @param options The options to use when loading the model.\r\n     * @param abortSignal An optional signal that can be used to abort the loading process.\r\n     */\r\n    public async loadModel(source: string | File | ArrayBufferView, options?: LoadModelOptions, abortSignal?: AbortSignal): Promise<void> {\r\n        await this._updateModel(source, options, abortSignal);\r\n    }\r\n\r\n    /**\r\n     * Unloads the current 3D model if one is loaded.\r\n     * @param abortSignal An optional signal that can be used to abort the reset.\r\n     */\r\n    public async resetModel(abortSignal?: AbortSignal): Promise<void> {\r\n        await this._updateModel(undefined, undefined, abortSignal);\r\n    }\r\n\r\n    private async _updateModel(source: string | File | ArrayBufferView | undefined, options?: LoadModelOptions, abortSignal?: AbortSignal): Promise<void> {\r\n        this._throwIfDisposedOrAborted(abortSignal);\r\n\r\n        const originalOnProgress = options?.onProgress;\r\n        const onProgress = (event: ISceneLoaderProgressEvent) => {\r\n            originalOnProgress?.(event);\r\n            if (this._isLoadingModel) {\r\n                this._modelLoadingProgress = event.lengthComputable ? event.loaded / event.total : null;\r\n                this.onLoadingProgressChanged.notifyObservers();\r\n            }\r\n        };\r\n\r\n        // Enable transparency as coverage by default to be 3D Commerce compliant by default.\r\n        // https://doc.babylonjs.com/setup/support/3D_commerce_certif\r\n        if (!options?.pluginOptions?.gltf?.transparencyAsCoverage) {\r\n            options = {\r\n                ...options,\r\n                pluginOptions: {\r\n                    ...options?.pluginOptions,\r\n                    gltf: {\r\n                        ...options?.pluginOptions?.gltf,\r\n                        transparencyAsCoverage: true,\r\n                    },\r\n                },\r\n                onProgress,\r\n            };\r\n        }\r\n\r\n        this._loadModelAbortController?.abort(\"New model is being loaded before previous model finished loading.\");\r\n        const abortController = (this._loadModelAbortController = new AbortController());\r\n\r\n        await this._loadModelLock.lockAsync(async () => {\r\n            throwIfAborted(abortSignal, abortController.signal);\r\n            this._snapshotHelper.disableSnapshotRendering();\r\n            this._details.model?.dispose();\r\n            this._details.model = null;\r\n            this.selectedAnimation = -1;\r\n\r\n            try {\r\n                if (source) {\r\n                    this._isLoadingModel = true;\r\n                    this._modelLoadingProgress = 0;\r\n                    this.onLoadingProgressChanged.notifyObservers();\r\n                    this._details.model = await loadAssetContainerAsync(source, this._details.scene, options);\r\n                    this._details.model.animationGroups.forEach((group) => {\r\n                        group.start(true, this.animationSpeed);\r\n                        group.pause();\r\n                    });\r\n                    this.selectedAnimation = options?.defaultAnimation ?? 0;\r\n                    this._snapshotHelper.fixMeshes(this._details.model.meshes);\r\n                    this._details.model.addAllToScene();\r\n                }\r\n\r\n                this._updateCamera();\r\n                this._updateLight();\r\n                this._applyAnimationSpeed();\r\n                this.onModelChanged.notifyObservers();\r\n            } catch (e) {\r\n                this.onModelError.notifyObservers(e);\r\n                throw e;\r\n            } finally {\r\n                this._isLoadingModel = false;\r\n                this.onLoadingProgressChanged.notifyObservers();\r\n                this._snapshotHelper.enableSnapshotRendering();\r\n            }\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Loads an environment texture from the specified url and sets up a corresponding skybox.\r\n     * @remarks\r\n     * If an environment is already loaded, it will be unloaded before loading the new environment.\r\n     * @param url The url of the environment texture to load.\r\n     * @param options The options to use when loading the environment.\r\n     * @param abortSignal An optional signal that can be used to abort the loading process.\r\n     */\r\n    public async loadEnvironment(url: string, options?: EnvironmentOptions, abortSignal?: AbortSignal): Promise<void> {\r\n        await this._updateEnvironment(url, options, abortSignal);\r\n    }\r\n\r\n    /**\r\n     * Unloads the current environment if one is loaded.\r\n     * @param abortSignal An optional signal that can be used to abort the reset.\r\n     */\r\n    public async resetEnvironment(abortSignal?: AbortSignal): Promise<void> {\r\n        await this._updateEnvironment(undefined, undefined, abortSignal);\r\n    }\r\n\r\n    private async _updateEnvironment(url: Nullable<string | undefined>, options?: EnvironmentOptions, abortSignal?: AbortSignal): Promise<void> {\r\n        this._throwIfDisposedOrAborted(abortSignal);\r\n\r\n        this._loadEnvironmentAbortController?.abort(\"New environment is being loaded before previous environment finished loading.\");\r\n        const abortController = (this._loadEnvironmentAbortController = new AbortController());\r\n\r\n        await this._loadEnvironmentLock.lockAsync(async () => {\r\n            throwIfAborted(abortSignal, abortController.signal);\r\n            this._snapshotHelper.disableSnapshotRendering();\r\n            this._environment?.dispose();\r\n            this._environment = null;\r\n            this._details.scene.autoClear = true;\r\n\r\n            try {\r\n                if (url) {\r\n                    this._environment = await new Promise<IDisposable>((resolve, reject) => {\r\n                        const cubeTexture = CubeTexture.CreateFromPrefilteredData(url, this._details.scene);\r\n                        this._details.scene.environmentTexture = cubeTexture;\r\n\r\n                        const skybox = createSkybox(this._details.scene, this._details.camera, cubeTexture, this.skyboxBlur);\r\n                        this._snapshotHelper.fixMeshes([skybox]);\r\n                        this._skybox = skybox;\r\n\r\n                        this._details.scene.autoClear = false;\r\n\r\n                        const dispose = () => {\r\n                            cubeTexture.dispose();\r\n                            skybox.dispose();\r\n                            this._skybox = null;\r\n                        };\r\n\r\n                        const successObserver = cubeTexture.onLoadObservable.addOnce(() => {\r\n                            successObserver.remove();\r\n                            errorObserver.remove();\r\n                            resolve({\r\n                                dispose,\r\n                            });\r\n                        });\r\n\r\n                        const errorObserver = Texture.OnTextureLoadErrorObservable.add((texture) => {\r\n                            if (texture === cubeTexture) {\r\n                                successObserver.remove();\r\n                                errorObserver.remove();\r\n                                dispose();\r\n                                reject(new Error(\"Failed to load environment texture.\"));\r\n                            }\r\n                        });\r\n                    });\r\n                }\r\n\r\n                this._updateLight();\r\n                this.onEnvironmentChanged.notifyObservers();\r\n            } catch (e) {\r\n                this.onEnvironmentError.notifyObservers(e);\r\n                throw e;\r\n            } finally {\r\n                this._snapshotHelper.enableSnapshotRendering();\r\n            }\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Toggles the play/pause animation state if there is a selected animation.\r\n     */\r\n    public toggleAnimation() {\r\n        if (this.isAnimationPlaying) {\r\n            this.pauseAnimation();\r\n        } else {\r\n            this.playAnimation();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Plays the selected animation if there is one.\r\n     */\r\n    public playAnimation() {\r\n        this._activeAnimation?.play(true);\r\n    }\r\n\r\n    /**\r\n     * Pauses the selected animation if there is one.\r\n     */\r\n    public async pauseAnimation() {\r\n        this._activeAnimation?.pause();\r\n    }\r\n\r\n    /**\r\n     * Disposes of the resources held by the Viewer.\r\n     */\r\n    public dispose(): void {\r\n        this.selectedAnimation = -1;\r\n        this.animationProgress = 0;\r\n\r\n        this._loadEnvironmentAbortController?.abort(\"Thew viewer is being disposed.\");\r\n        this._loadModelAbortController?.abort(\"Thew viewer is being disposed.\");\r\n\r\n        this._renderLoopController.dispose();\r\n        this._details.scene.dispose();\r\n\r\n        this.onEnvironmentChanged.clear();\r\n        this.onEnvironmentError.clear();\r\n        this.onSkyboxBlurChanged.clear();\r\n        this.onPostProcessingChanged.clear();\r\n        this.onModelChanged.clear();\r\n        this.onModelError.clear();\r\n        this.onCameraAutoOrbitChanged.clear();\r\n        this.onSelectedAnimationChanged.clear();\r\n        this.onAnimationSpeedChanged.clear();\r\n        this.onIsAnimationPlayingChanged.clear();\r\n        this.onAnimationProgressChanged.clear();\r\n        this.onLoadingProgressChanged.clear();\r\n\r\n        this._imageProcessingConfigurationObserver.remove();\r\n\r\n        this._isDisposed = true;\r\n    }\r\n\r\n    /**\r\n     * retrun world and canvas coordinates of an hot spot\r\n     * @param query mesh index and surface information to query the hot spot positions\r\n     * @param result Query a Hot Spot and does the conversion for Babylon Hot spot to a more generic HotSpotPositions, without Vector types\r\n     * @returns true if hotspot found\r\n     */\r\n    public getHotSpotToRef(query: Readonly<ViewerHotSpotQuery>, result: ViewerHotSpotResult): boolean {\r\n        if (!this._details.model) {\r\n            return false;\r\n        }\r\n        const worldPos = TmpVectors.Vector3[1];\r\n        const screenPos = TmpVectors.Vector3[0];\r\n        const mesh = this._details.model.meshes[query.meshIndex];\r\n        if (!mesh) {\r\n            return false;\r\n        }\r\n        GetHotSpotToRef(mesh, query, worldPos);\r\n\r\n        const renderWidth = this._engine.getRenderWidth(); // Get the canvas width\r\n        const renderHeight = this._engine.getRenderHeight(); // Get the canvas height\r\n\r\n        const viewportWidth = this._details.camera.viewport.width * renderWidth;\r\n        const viewportHeight = this._details.camera.viewport.height * renderHeight;\r\n        const scene = this._details.scene;\r\n\r\n        Vector3.ProjectToRef(worldPos, Matrix.IdentityReadOnly, scene.getTransformMatrix(), new Viewport(0, 0, viewportWidth, viewportHeight), screenPos);\r\n        result.screenPosition[0] = screenPos.x;\r\n        result.screenPosition[1] = screenPos.y;\r\n        result.worldPosition[0] = worldPos.x;\r\n        result.worldPosition[1] = worldPos.y;\r\n        result.worldPosition[2] = worldPos.z;\r\n        return true;\r\n    }\r\n\r\n    private _updateCamera(interpolate = false): void {\r\n        // Enable camera's behaviors\r\n        this._details.camera.useFramingBehavior = true;\r\n        const framingBehavior = this._details.camera.getBehaviorByName(\"Framing\") as FramingBehavior;\r\n        framingBehavior.framingTime = 0;\r\n        framingBehavior.elevationReturnTime = -1;\r\n\r\n        const currentAlpha = this._details.camera.alpha;\r\n        const currentBeta = this._details.camera.beta;\r\n        const currentRadius = this._details.camera.radius;\r\n        const currentTarget = this._details.camera.target;\r\n\r\n        const goalAlpha = Math.PI / 2;\r\n        const goalBeta = Math.PI / 2.4;\r\n        let goalRadius = 1;\r\n        let goalTarget = currentTarget;\r\n\r\n        if (this._details.model?.meshes.length) {\r\n            // get bounds and prepare framing/camera radius from its values\r\n            this._details.camera.lowerRadiusLimit = null;\r\n\r\n            const maxExtents = computeMaxExtents(this._details.model.meshes, this._activeAnimation);\r\n            const worldExtents = {\r\n                min: new Vector3(Math.min(...maxExtents.map((e) => e.minimum.x)), Math.min(...maxExtents.map((e) => e.minimum.y)), Math.min(...maxExtents.map((e) => e.minimum.z))),\r\n                max: new Vector3(Math.max(...maxExtents.map((e) => e.maximum.x)), Math.max(...maxExtents.map((e) => e.maximum.y)), Math.max(...maxExtents.map((e) => e.maximum.z))),\r\n            };\r\n            framingBehavior.zoomOnBoundingInfo(worldExtents.min, worldExtents.max);\r\n\r\n            const worldSize = worldExtents.max.subtract(worldExtents.min);\r\n            const worldCenter = worldExtents.min.add(worldSize.scale(0.5));\r\n\r\n            goalRadius = worldSize.length() * 1.1;\r\n\r\n            if (!isFinite(goalRadius)) {\r\n                goalRadius = 1;\r\n                worldCenter.copyFromFloats(0, 0, 0);\r\n            }\r\n\r\n            goalTarget = worldCenter;\r\n        }\r\n        this._details.camera.lowerRadiusLimit = goalRadius * 0.01;\r\n        this._details.camera.wheelPrecision = 100 / goalRadius;\r\n        this._details.camera.alpha = Math.PI / 2;\r\n        this._details.camera.beta = Math.PI / 2.4;\r\n        this._details.camera.radius = goalRadius;\r\n        this._details.camera.target = goalTarget;\r\n        this._details.camera.minZ = goalRadius * 0.01;\r\n        this._details.camera.maxZ = goalRadius * 1000;\r\n        this._details.camera.speed = goalRadius * 0.2;\r\n        this._details.camera.useAutoRotationBehavior = true;\r\n        this._details.camera.pinchPrecision = 200 / this._details.camera.radius;\r\n        this._details.camera.upperRadiusLimit = 5 * this._details.camera.radius;\r\n        this._details.camera.wheelDeltaPercentage = 0.01;\r\n        this._details.camera.pinchDeltaPercentage = 0.01;\r\n        this._details.camera.restoreStateInterpolationFactor = 0.1;\r\n        this._details.camera.storeState();\r\n\r\n        if (interpolate) {\r\n            this._details.camera.alpha = currentAlpha;\r\n            this._details.camera.beta = currentBeta;\r\n            this._details.camera.radius = currentRadius;\r\n            this._details.camera.target = currentTarget;\r\n            this._details.camera.interpolateTo(goalAlpha, goalBeta, goalRadius, goalTarget);\r\n        }\r\n\r\n        updateSkybox(this._skybox, this._details.camera);\r\n    }\r\n\r\n    private _updateLight() {\r\n        let shouldHaveDefaultLight: boolean;\r\n        if (!this._details.model) {\r\n            shouldHaveDefaultLight = false;\r\n        } else {\r\n            const hasModelProvidedLights = this._details.model.lights.length > 0;\r\n            const hasImageBasedLighting = !!this._environment;\r\n            const hasMaterials = this._details.model.materials.length > 0;\r\n            const hasNonPBRMaterials = this._details.model.materials.some((material) => !(material instanceof PBRMaterial));\r\n\r\n            if (hasModelProvidedLights) {\r\n                shouldHaveDefaultLight = false;\r\n            } else {\r\n                shouldHaveDefaultLight = !hasImageBasedLighting || !hasMaterials || hasNonPBRMaterials;\r\n            }\r\n        }\r\n\r\n        if (shouldHaveDefaultLight) {\r\n            if (!this._light) {\r\n                this._light = new HemisphericLight(\"defaultLight\", Vector3.Up(), this._details.scene);\r\n            }\r\n        } else {\r\n            this._light?.dispose();\r\n            this._light = null;\r\n        }\r\n    }\r\n\r\n    private _applyAnimationSpeed() {\r\n        this._details.model?.animationGroups.forEach((group) => (group.speedRatio = this._animationSpeed));\r\n    }\r\n\r\n    /**\r\n     * Check for disposed or aborted state (basically everything that can interrupt an async operation).\r\n     * @param abortSignals A set of optional AbortSignals to also check.\r\n     */\r\n    private _throwIfDisposedOrAborted(...abortSignals: (Nullable<AbortSignal> | undefined)[]): void {\r\n        if (this._isDisposed) {\r\n            throw new Error(\"Viewer is disposed.\");\r\n        }\r\n\r\n        throwIfAborted(...abortSignals);\r\n    }\r\n}\r\n","// eslint-disable-next-line import/no-internal-modules\r\nimport type { AbstractEngine, AbstractEngineOptions, EngineOptions, WebGPUEngineOptions } from \"core/index\";\r\n\r\nimport type { ViewerOptions } from \"./viewer\";\r\nimport { Viewer } from \"./viewer\";\r\n\r\n/**\r\n * Options for creating a Viewer instance that is bound to an HTML canvas.\r\n */\r\nexport type CanvasViewerOptions = ViewerOptions &\r\n    (({ engine?: undefined } & AbstractEngineOptions) | ({ engine: \"WebGL\" } & EngineOptions) | ({ engine: \"WebGPU\" } & WebGPUEngineOptions));\r\nconst defaultCanvasViewerOptions: CanvasViewerOptions = {};\r\n\r\n/**\r\n * Chooses a default engine for the current browser environment.\r\n * @returns The default engine to use.\r\n */\r\nexport function getDefaultEngine(): NonNullable<CanvasViewerOptions[\"engine\"]> {\r\n    // TODO: When WebGPU is fully production ready, we may want to prefer it if it is supported by the browser.\r\n    return \"WebGL\";\r\n}\r\n\r\n/**\r\n * Creates a Viewer instance that is bound to an HTML canvas.\r\n * @remarks\r\n * This function can be shared across multiple UI integrations (e.g. Web Components, React, etc.).\r\n * @param canvas The canvas element to bind the Viewer to.\r\n * @param options The options to use when creating the Viewer and binding it to the specified canvas.\r\n * @returns A Viewer instance that is bound to the specified canvas.\r\n */\r\nexport async function createViewerForCanvas(canvas: HTMLCanvasElement, options?: CanvasViewerOptions): Promise<Viewer> {\r\n    const finalOptions = { ...defaultCanvasViewerOptions, ...options };\r\n    const disposeActions: (() => void)[] = [];\r\n\r\n    // If the canvas is resized, note that the engine needs a resize, but don't resize it here as it will result in flickering.\r\n    let needsResize = false;\r\n    const resizeObserver = new ResizeObserver(() => (needsResize = true));\r\n    resizeObserver.observe(canvas);\r\n    disposeActions.push(() => resizeObserver.disconnect());\r\n\r\n    // Create an engine instance.\r\n    let engine: AbstractEngine;\r\n    switch (finalOptions.engine ?? getDefaultEngine()) {\r\n        case \"WebGL\": {\r\n            // eslint-disable-next-line @typescript-eslint/naming-convention, no-case-declarations\r\n            const { Engine } = await import(\"core/Engines/engine\");\r\n            engine = new Engine(canvas, undefined, options);\r\n            break;\r\n        }\r\n        case \"WebGPU\": {\r\n            // eslint-disable-next-line @typescript-eslint/naming-convention, no-case-declarations\r\n            const { WebGPUEngine } = await import(\"core/Engines/webgpuEngine\");\r\n            const webGPUEngine = new WebGPUEngine(canvas, options);\r\n            await webGPUEngine.initAsync();\r\n            engine = webGPUEngine;\r\n            break;\r\n        }\r\n    }\r\n\r\n    // Override the onInitialized callback to add in some specific behavior.\r\n    const onInitialized = finalOptions.onInitialized;\r\n    finalOptions.onInitialized = (details) => {\r\n        // Resize if needed right before rendering the Viewer scene to avoid any flickering.\r\n        const beforeRenderObserver = details.scene.onBeforeRenderObservable.add(() => {\r\n            if (needsResize) {\r\n                engine.resize();\r\n                needsResize = false;\r\n            }\r\n        });\r\n        disposeActions.push(() => beforeRenderObserver.remove());\r\n\r\n        // Call the original onInitialized callback, if one was provided.\r\n        onInitialized?.(details);\r\n    };\r\n\r\n    // Instantiate the Viewer with the engine and options.\r\n    const viewer = new Viewer(engine, finalOptions);\r\n    disposeActions.push(viewer.dispose.bind(viewer));\r\n\r\n    disposeActions.push(() => engine.dispose());\r\n\r\n    // Override the Viewer's dispose method to add in additional cleanup.\r\n    viewer.dispose = () => disposeActions.forEach((dispose) => dispose());\r\n\r\n    return viewer;\r\n}\r\n","// eslint-disable-next-line import/no-internal-modules\r\nimport type { ArcRotateCamera, Nullable, Observable } from \"core/index\";\r\n\r\nimport type { PropertyValues } from \"lit\";\r\nimport type { ToneMapping, ViewerDetails, ViewerHotSpotQuery } from \"./viewer\";\r\nimport type { CanvasViewerOptions } from \"./viewerFactory\";\r\n\r\nimport { LitElement, css, defaultConverter, html } from \"lit\";\r\nimport { customElement, property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { Vector3 } from \"core/Maths/math.vector\";\r\nimport { AsyncLock } from \"core/Misc/asyncLock\";\r\nimport { Logger } from \"core/Misc/logger\";\r\nimport { isToneMapping, ViewerHotSpotResult } from \"./viewer\";\r\nimport { createViewerForCanvas, getDefaultEngine } from \"./viewerFactory\";\r\n\r\n// Icon SVG is pulled from https://react.fluentui.dev/?path=/docs/icons-catalog--docs\r\nconst playFilledIcon = \"M17.22 8.68a1.5 1.5 0 0 1 0 2.63l-10 5.5A1.5 1.5 0 0 1 5 15.5v-11A1.5 1.5 0 0 1 7.22 3.2l10 5.5Z\";\r\nconst pauseFilledIcon = \"M5 2a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H5Zm8 0a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-2Z\";\r\nconst targetFilledIcon =\r\n    \"M10 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10a5 5 0 1 1 10 0 5 5 0 0 1-10 0Zm5-3.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z\";\r\n\r\nconst allowedAnimationSpeeds = [0.5, 1, 1.5, 2] as const;\r\n\r\n// Converts any standard html color string to a Color4 object.\r\nfunction parseColor(color: string | null | undefined): Nullable<Color4> {\r\n    if (!color) {\r\n        return null;\r\n    }\r\n\r\n    const canvas = document.createElement(\"canvas\");\r\n    canvas.width = canvas.height = 1;\r\n    const context = canvas.getContext(\"2d\");\r\n\r\n    if (!context) {\r\n        throw new Error(\"Unable to get 2d context for parseColor\");\r\n    }\r\n\r\n    context.clearRect(0, 0, 1, 1);\r\n    context.fillStyle = color;\r\n    context.fillRect(0, 0, 1, 1);\r\n\r\n    const data = context.getImageData(0, 0, 1, 1).data;\r\n    return new Color4(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);\r\n}\r\n\r\ntype HotSpot = ViewerHotSpotQuery & { cameraOrbit?: [alpha: number, beta: number, radius: number] };\r\n\r\n// Custom events for the HTML3DElement.\r\ninterface HTML3DElementEventMap extends HTMLElementEventMap {\r\n    viewerready: Event;\r\n    environmentchange: Event;\r\n    environmenterror: ErrorEvent;\r\n    modelchange: Event;\r\n    modelerror: ErrorEvent;\r\n    loadingprogresschange: Event;\r\n    selectedanimationchange: Event;\r\n    animationspeedchange: Event;\r\n    animationplayingchange: Event;\r\n    animationprogresschange: Event;\r\n}\r\n\r\n/**\r\n * Represents a custom element that displays a 3D model using the Babylon.js Viewer.\r\n */\r\n@customElement(\"babylon-viewer\")\r\nexport class HTML3DElement extends LitElement {\r\n    private readonly _viewerLock = new AsyncLock();\r\n    private _viewerDetails?: Readonly<ViewerDetails>;\r\n\r\n    // Bindings for properties that are synchronized both ways between the lower level Viewer and the HTML3DElement.\r\n    private readonly _propertyBindings = [\r\n        this._createPropertyBinding(\r\n            \"clearColor\",\r\n            (details) => details.scene.onClearColorChangedObservable,\r\n            (details) => (details.scene.clearColor = this.clearColor ?? new Color4(0, 0, 0, 0)),\r\n            (details) => (this.clearColor = details.scene.clearColor)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"skyboxBlur\",\r\n            (details) => details.viewer.onSkyboxBlurChanged,\r\n            (details) => (details.viewer.skyboxBlur = this.skyboxBlur ?? details.viewer.skyboxBlur),\r\n            (details) => (this.skyboxBlur = details.viewer.skyboxBlur)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"toneMapping\",\r\n            (details) => details.viewer.onPostProcessingChanged,\r\n            (details) => {\r\n                if (this.toneMapping) {\r\n                    details.viewer.postProcessing = { toneMapping: this.toneMapping };\r\n                }\r\n            },\r\n            (details) => (this.toneMapping = details.viewer.postProcessing?.toneMapping)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"contrast\",\r\n            (details) => details.viewer.onPostProcessingChanged,\r\n            (details) => (details.viewer.postProcessing = { contrast: this.contrast ?? undefined }),\r\n            (details) => (this.contrast = details.viewer.postProcessing.contrast)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"exposure\",\r\n            (details) => details.viewer.onPostProcessingChanged,\r\n            (details) => (details.viewer.postProcessing = { exposure: this.exposure ?? undefined }),\r\n            (details) => (this.exposure = details.viewer.postProcessing.exposure)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"cameraAutoOrbit\",\r\n            (details) => details.viewer.onCameraAutoOrbitChanged,\r\n            (details) => (details.viewer.cameraAutoOrbit = { enabled: this.cameraAutoOrbit }),\r\n            (details) => (this.cameraAutoOrbit = details.viewer.cameraAutoOrbit.enabled)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"cameraAutoOrbitSpeed\",\r\n            (details) => details.viewer.onCameraAutoOrbitChanged,\r\n            (details) => (details.viewer.cameraAutoOrbit = { speed: this.cameraAutoOrbitSpeed ?? undefined }),\r\n            (details) => (this.cameraAutoOrbitSpeed = details.viewer.cameraAutoOrbit.speed)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"cameraAutoOrbitDelay\",\r\n            (details) => details.viewer.onCameraAutoOrbitChanged,\r\n            (details) => (details.viewer.cameraAutoOrbit = { delay: this.cameraAutoOrbitDelay ?? undefined }),\r\n            (details) => (this.cameraAutoOrbitDelay = details.viewer.cameraAutoOrbit.delay)\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"animationSpeed\",\r\n            (details) => details.viewer.onAnimationSpeedChanged,\r\n            (details) => (details.viewer.animationSpeed = this.animationSpeed),\r\n            (details) => {\r\n                let speed = details.viewer.animationSpeed;\r\n                speed = allowedAnimationSpeeds.reduce((prev, curr) => (Math.abs(curr - speed) < Math.abs(prev - speed) ? curr : prev));\r\n                this.animationSpeed = speed;\r\n                this._dispatchCustomEvent(\"animationspeedchange\", (type) => new Event(type));\r\n            }\r\n        ),\r\n        this._createPropertyBinding(\r\n            \"selectedAnimation\",\r\n            (details) => details.viewer.onSelectedAnimationChanged,\r\n            (details) => (details.viewer.selectedAnimation = this.selectedAnimation ?? details.viewer.selectedAnimation),\r\n            (details) => (this.selectedAnimation = details.viewer.selectedAnimation)\r\n        ),\r\n    ] as const;\r\n\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention, jsdoc/require-jsdoc\r\n    static override styles = css`\r\n        :host {\r\n            --ui-foreground-color: white;\r\n            --ui-background-hue: 233;\r\n            --ui-background-saturation: 8%;\r\n            --ui-background-lightness: 39%;\r\n            --ui-background-opacity: 0.75;\r\n            --ui-background-color: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), var(--ui-background-opacity));\r\n            --ui-background-color-hover: hsla(\r\n                var(--ui-background-hue),\r\n                var(--ui-background-saturation),\r\n                calc(var(--ui-background-lightness) - 10%),\r\n                calc(var(--ui-background-opacity) - 0.1)\r\n            );\r\n            all: inherit;\r\n        }\r\n\r\n        .full-size {\r\n            display: block;\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n\r\n        .canvas {\r\n            outline: none;\r\n        }\r\n\r\n        .children-slot {\r\n            position: absolute;\r\n            top: 0;\r\n            background: transparent;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .bar {\r\n            position: absolute;\r\n            width: calc(100% - 24px);\r\n            min-width: 150px;\r\n            max-width: 1280px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background-color: var(--ui-background-color);\r\n        }\r\n\r\n        .bar-min {\r\n            width: unset;\r\n            min-width: unset;\r\n            max-width: unset;\r\n        }\r\n\r\n        .loading-progress-outer {\r\n            height: 4px;\r\n            border-radius: 2px;\r\n            border: none;\r\n            outline: none;\r\n            top: 12px;\r\n            pointer-events: none;\r\n            transition: opacity 0.5s ease;\r\n        }\r\n\r\n        .loading-progress-outer-inactive {\r\n            opacity: 0;\r\n            /* Set the background color to the foreground color while in the inactive state so that the color seen is correct while fading out the opacity. */\r\n            background-color: var(--ui-foreground-color);\r\n        }\r\n\r\n        .loading-progress-inner {\r\n            width: 0;\r\n            height: 100%;\r\n            border-radius: inherit;\r\n            background-color: var(--ui-foreground-color);\r\n            transition: width 0.3s linear;\r\n        }\r\n\r\n        /* The right side of the inner progress bar starts aligned with the left side of the outer progress bar (container).\r\n           So, if the width is 30%, then the left side of the inner progress bar moves a total of 130% of the width of the container.\r\n           This is why the first keyframe is at 23% ((100/130)*30).\r\n         */\r\n        @keyframes indeterminate {\r\n            0% {\r\n                left: 0%;\r\n                width: 0%;\r\n            }\r\n            23% {\r\n                left: 0%;\r\n                width: 30%;\r\n            }\r\n            77% {\r\n                left: 70%;\r\n                width: 30%;\r\n            }\r\n            100% {\r\n                left: 100%;\r\n                width: 0%;\r\n            }\r\n        }\r\n\r\n        .loading-progress-inner-indeterminate {\r\n            position: absolute;\r\n            animation: indeterminate 1.5s infinite;\r\n            animation-timing-function: linear;\r\n        }\r\n\r\n        .tool-bar {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: center;\r\n            border-radius: 12px;\r\n            border-color: var(--ui-foreground-color);\r\n            height: 48px;\r\n            bottom: 12px;\r\n            color: var(--ui-foreground-color);\r\n            -webkit-tap-highlight-color: transparent;\r\n        }\r\n\r\n        .tool-bar * {\r\n            height: 100%;\r\n            min-width: 48px;\r\n        }\r\n\r\n        .tool-bar .divider {\r\n            min-width: 1px;\r\n            margin: 0px 6px;\r\n            height: 66%;\r\n            background-color: var(--ui-foreground-color);\r\n        }\r\n\r\n        .tool-bar select {\r\n            background: none;\r\n            min-width: 52px;\r\n            max-width: 128px;\r\n            border: 1px solid transparent;\r\n            border-radius: inherit;\r\n            color: inherit;\r\n            font-size: 14px;\r\n            padding: 0px 12px;\r\n            cursor: pointer;\r\n            outline: none;\r\n            appearance: none; /* Remove default styling */\r\n            -webkit-appearance: none; /* Remove default styling for Safari */\r\n        }\r\n\r\n        .tool-bar .select-container {\r\n            position: relative;\r\n            display: flex;\r\n            border-radius: inherit;\r\n            border-width: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .tool-bar .select-container select {\r\n            position: absolute;\r\n            min-width: 0;\r\n            width: 100%;\r\n        }\r\n\r\n        .tool-bar .select-container button {\r\n            position: absolute;\r\n            border-width: 0;\r\n        }\r\n\r\n        .tool-bar select:hover,\r\n        .tool-bar select:focus {\r\n            background-color: var(--ui-background-color-hover);\r\n        }\r\n\r\n        .tool-bar select option {\r\n            background-color: var(--ui-background-color);\r\n            color: var(--ui-foreground-color);\r\n        }\r\n\r\n        .tool-bar select:focus-visible {\r\n            border-color: inherit;\r\n        }\r\n\r\n        .tool-bar button {\r\n            background: none;\r\n            border: 1px solid transparent;\r\n            border-radius: inherit;\r\n            color: inherit;\r\n            padding: 0;\r\n            cursor: pointer;\r\n            outline: none;\r\n        }\r\n\r\n        .tool-bar button:hover {\r\n            background-color: var(--ui-background-color-hover);\r\n        }\r\n\r\n        .tool-bar button:focus-visible {\r\n            border-color: inherit;\r\n        }\r\n\r\n        .tool-bar button svg {\r\n            width: 32px;\r\n            height: 32px;\r\n        }\r\n\r\n        .animation-timeline {\r\n            display: flex;\r\n            flex: 1;\r\n            position: relative;\r\n            overflow: hidden;\r\n            cursor: pointer;\r\n            align-items: center;\r\n            border-radius: inherit;\r\n            border-color: inherit;\r\n        }\r\n\r\n        .animation-timeline-input {\r\n            -webkit-appearance: none;\r\n            cursor: pointer;\r\n            width: 100%;\r\n            height: 100%;\r\n            outline: none;\r\n            border: 1px solid transparent;\r\n            border-radius: inherit;\r\n            padding: 0 12px;\r\n            background-color: transparent;\r\n        }\r\n\r\n        .animation-timeline-input:focus-visible {\r\n            border-color: inherit;\r\n        }\r\n\r\n        /*Chrome -webkit */\r\n\r\n        .animation-timeline-input::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            width: 20px;\r\n            height: 20px;\r\n            border: 2px solid;\r\n            color: var(--ui-foreground-color);\r\n            border-radius: 50%;\r\n            background: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), 1);\r\n            margin-top: -10px;\r\n        }\r\n\r\n        .animation-timeline-input::-webkit-slider-runnable-track {\r\n            height: 2px;\r\n            -webkit-appearance: none;\r\n            background-color: var(--ui-foreground-color);\r\n        }\r\n\r\n        /** FireFox -moz */\r\n\r\n        .animation-timeline-input::-moz-range-progress {\r\n            height: 2px;\r\n            background-color: var(--ui-foreground-color);\r\n        }\r\n\r\n        .animation-timeline-input::-moz-range-thumb {\r\n            width: 16px;\r\n            height: 16px;\r\n            border: 2px solid var(--ui-foreground-color);\r\n            border-radius: 50%;\r\n            background: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), 1);\r\n        }\r\n\r\n        .animation-timeline-input::-moz-range-track {\r\n            height: 2px;\r\n            background: var(--ui-foreground-color);\r\n        }\r\n    `;\r\n\r\n    /**\r\n     * Gets the underlying viewer details (when the underlying viewer is in a loaded state).\r\n     * This is useful for advanced scenarios where direct access to the viewer or Babylon scene is needed.\r\n     */\r\n    public get viewerDetails() {\r\n        return this._viewerDetails;\r\n    }\r\n\r\n    /**\r\n     * Get hotspot world and screen values from a named hotspot\r\n     * @param name slot of the hot spot\r\n     * @param result resulting world and screen positions\r\n     * @returns world and screen space coordinates\r\n     */\r\n    public queryHotSpot(name: string, result: ViewerHotSpotResult): boolean {\r\n        return this._queryHotSpot(name, result) != null;\r\n    }\r\n\r\n    private _queryHotSpot(name: string, result: ViewerHotSpotResult): Nullable<HotSpot> {\r\n        if (this._viewerDetails) {\r\n            const hotSpot = this.hotSpots?.[name];\r\n            if (hotSpot) {\r\n                if (this._viewerDetails.viewer.getHotSpotToRef(hotSpot, result)) {\r\n                    return hotSpot;\r\n                }\r\n            }\r\n        }\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Updates the camera to focus on a named hotspot.\r\n     * @param name The name of the hotspot to focus on.\r\n     * @returns true if the hotspot was found and the camera was updated, false otherwise.\r\n     */\r\n    public focusHotSpot(name: string): boolean {\r\n        const result = new ViewerHotSpotResult();\r\n        const query = this._queryHotSpot(name, result);\r\n        if (query && this._viewerDetails) {\r\n            const cameraOrbit = query.cameraOrbit ?? [undefined, undefined, undefined];\r\n            this._viewerDetails.camera.interpolateTo(\r\n                cameraOrbit[0],\r\n                cameraOrbit[1],\r\n                cameraOrbit[2],\r\n                new Vector3(result.worldPosition[0], result.worldPosition[1], result.worldPosition[2])\r\n            );\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * The engine to use for rendering.\r\n     */\r\n    @property({ reflect: true })\r\n    public engine: NonNullable<CanvasViewerOptions[\"engine\"]> = getDefaultEngine();\r\n\r\n    /**\r\n     * The model URL.\r\n     */\r\n    @property({ reflect: true })\r\n    public source: Nullable<string> = null;\r\n\r\n    /**\r\n     * Forces the model to be loaded with the specified extension.\r\n     * @remarks\r\n     * If this property is not set, the extension will be inferred from the model URL when possible.\r\n     */\r\n    @property({ reflect: true })\r\n    public extension: Nullable<string> = null;\r\n\r\n    /**\r\n     * The environment URL.\r\n     */\r\n    @property({ reflect: true })\r\n    public environment: Nullable<string> = null;\r\n\r\n    @state()\r\n    private _loadingProgress: boolean | number = false;\r\n\r\n    /**\r\n     * Gets information about loading activity.\r\n     * @remarks\r\n     * false indicates no loading activity.\r\n     * true indicates loading activity with no progress information.\r\n     * A number between 0 and 1 indicates loading activity with progress information.\r\n     */\r\n    public get loadingProgress(): boolean | number {\r\n        return this._loadingProgress;\r\n    }\r\n\r\n    /**\r\n     * A value between 0 and 1 that specifies how much to blur the skybox.\r\n     */\r\n    @property({ attribute: \"skybox-blur\" })\r\n    public skyboxBlur: Nullable<number> = null;\r\n\r\n    /**\r\n     * The tone mapping to use for rendering the scene.\r\n     */\r\n    @property({\r\n        attribute: \"tone-mapping\",\r\n        converter: (value: string | null): ToneMapping => {\r\n            if (!value || !isToneMapping(value)) {\r\n                return \"neutral\";\r\n            }\r\n            return value;\r\n        },\r\n    })\r\n    public toneMapping: Nullable<ToneMapping> = null;\r\n\r\n    /**\r\n     * The contrast applied to the scene.\r\n     */\r\n    @property()\r\n    public contrast: Nullable<number> = null;\r\n\r\n    /**\r\n     * The exposure applied to the scene.\r\n     */\r\n    @property()\r\n    public exposure: Nullable<number> = null;\r\n\r\n    /**\r\n     * The clear color (e.g. background color) for the viewer.\r\n     */\r\n    @property({\r\n        attribute: \"clear-color\",\r\n        reflect: true,\r\n        converter: {\r\n            fromAttribute: parseColor,\r\n            toAttribute: (color: Nullable<Color4>) => (color ? color.toHexString() : null),\r\n        },\r\n    })\r\n    public clearColor: Nullable<Color4> = null;\r\n\r\n    /**\r\n     * Enables or disables camera auto-orbit.\r\n     */\r\n    @property({\r\n        attribute: \"camera-auto-orbit\",\r\n        type: Boolean,\r\n    })\r\n    public cameraAutoOrbit = false;\r\n\r\n    /**\r\n     * The speed at which the camera auto-orbits around the target.\r\n     */\r\n    @property({\r\n        attribute: \"camera-auto-orbit-speed\",\r\n        type: Number,\r\n    })\r\n    public cameraAutoOrbitSpeed: Nullable<number> = null;\r\n\r\n    /**\r\n     * The delay in milliseconds before the camera starts auto-orbiting.\r\n     */\r\n    @property({\r\n        attribute: \"camera-auto-orbit-delay\",\r\n        type: Number,\r\n    })\r\n    public cameraAutoOrbitDelay: Nullable<number> = null;\r\n\r\n    /**\r\n     * Camera orbit can only be set as an attribute, and is set on the camera each time a new model is loaded.\r\n     * For access to the real time camera properties, use viewerDetails.camera.\r\n     */\r\n    @property({\r\n        attribute: \"camera-orbit\",\r\n        converter: (value) => {\r\n            if (!value) {\r\n                return null;\r\n            }\r\n\r\n            const array = value.split(/\\s+/);\r\n            if (array.length !== 3) {\r\n                throw new Error(\"cameraOrbit should be defined as 'alpha beta radius'\");\r\n            }\r\n\r\n            return (camera: ArcRotateCamera) => {\r\n                for (const [index, property] of ([\"alpha\", \"beta\", \"radius\"] as const).entries()) {\r\n                    const value = array[index];\r\n                    if (value !== \"auto\") {\r\n                        camera[property] = Number(value);\r\n                    }\r\n                }\r\n            };\r\n        },\r\n    })\r\n    private _cameraOrbitCoercer: Nullable<(camera: ArcRotateCamera) => void> = null;\r\n\r\n    /**\r\n     * Camera target can only be set as an attribute, and is set on the camera each time a new model is loaded.\r\n     * For access to the real time camera properties, use viewerDetails.camera.\r\n     */\r\n    @property({\r\n        attribute: \"camera-target\",\r\n        converter: (value) => {\r\n            if (!value) {\r\n                return null;\r\n            }\r\n\r\n            const array = value.split(/\\s+/);\r\n            if (array.length !== 3) {\r\n                throw new Error(\"cameraTarget should be defined as 'x y z'\");\r\n            }\r\n\r\n            return (camera: ArcRotateCamera) => {\r\n                const target = camera.target;\r\n                for (const [index, property] of ([\"x\", \"y\", \"z\"] as const).entries()) {\r\n                    const value = array[index];\r\n                    if (value !== \"auto\") {\r\n                        target[property] = Number(value);\r\n                    }\r\n                }\r\n                camera.target = target.clone();\r\n            };\r\n        },\r\n    })\r\n    private _cameraTargetCoercer: Nullable<(camera: ArcRotateCamera) => void> = null;\r\n\r\n    /**\r\n     * A string value that encodes one or more hotspots.\r\n     */\r\n    @property({\r\n        attribute: \"hotspots\",\r\n        converter: (value) => {\r\n            if (!value) {\r\n                return {};\r\n            }\r\n\r\n            return JSON.parse(value);\r\n        },\r\n    })\r\n    public hotSpots: Readonly<Record<string, HotSpot>> = {};\r\n\r\n    private get _hasHotSpots(): boolean {\r\n        return Object.keys(this.hotSpots).length > 0;\r\n    }\r\n\r\n    /**\r\n     * True if the default animation should play automatically when a model is loaded.\r\n     */\r\n    @property({ attribute: \"animation-auto-play\", reflect: true, type: Boolean })\r\n    public animationAutoPlay = false;\r\n\r\n    /**\r\n     * The list of animation names for the currently loaded model.\r\n     */\r\n    public get animations(): readonly string[] {\r\n        return this._animations;\r\n    }\r\n\r\n    private get _hasAnimations(): boolean {\r\n        return this._animations.length > 0;\r\n    }\r\n\r\n    /**\r\n     * The currently selected animation index.\r\n     */\r\n    @property({ attribute: \"selected-animation\", type: Number })\r\n    public selectedAnimation: Nullable<number> = null;\r\n\r\n    /**\r\n     * True if an animation is currently playing.\r\n     */\r\n    public get isAnimationPlaying(): boolean {\r\n        return this._isAnimationPlaying;\r\n    }\r\n\r\n    /**\r\n     * The speed scale at which animations are played.\r\n     */\r\n    @property({ attribute: \"animation-speed\" })\r\n    public animationSpeed = 1;\r\n\r\n    /**\r\n     * The current point on the selected animation timeline, normalized between 0 and 1.\r\n     */\r\n    @property({ attribute: false })\r\n    public animationProgress = 0;\r\n\r\n    @state()\r\n    private _animations: string[] = [];\r\n\r\n    @state()\r\n    private _isAnimationPlaying = false;\r\n\r\n    @query(\"#canvasContainer\")\r\n    private _canvasContainer: HTMLDivElement | undefined;\r\n\r\n    /**\r\n     * Toggles the play/pause animation state if there is a selected animation.\r\n     */\r\n    public toggleAnimation() {\r\n        this._viewerDetails?.viewer.toggleAnimation();\r\n    }\r\n\r\n    // eslint-disable-next-line babylonjs/available\r\n    override connectedCallback(): void {\r\n        super.connectedCallback();\r\n        this._setupViewer();\r\n    }\r\n\r\n    // eslint-disable-next-line babylonjs/available\r\n    override disconnectedCallback(): void {\r\n        super.disconnectedCallback();\r\n        this._tearDownViewer();\r\n    }\r\n\r\n    // eslint-disable-next-line babylonjs/available\r\n    override update(changedProperties: PropertyValues<this>): void {\r\n        super.update(changedProperties);\r\n\r\n        if (changedProperties.get(\"engine\")) {\r\n            this._tearDownViewer();\r\n            this._setupViewer();\r\n        } else {\r\n            this._propertyBindings.filter((binding) => changedProperties.has(binding.property)).forEach((binding) => binding.updateViewer());\r\n\r\n            if (changedProperties.has(\"source\")) {\r\n                this._updateModel();\r\n            }\r\n\r\n            if (changedProperties.has(\"environment\")) {\r\n                this._updateEnv();\r\n            }\r\n        }\r\n    }\r\n\r\n    // eslint-disable-next-line babylonjs/available\r\n    override render() {\r\n        const showProgressBar = this.loadingProgress !== false;\r\n        // If loadingProgress is true, then the progress bar is indeterminate so the value doesn't matter.\r\n        const progressValue = typeof this.loadingProgress === \"boolean\" ? 0 : this.loadingProgress * 100;\r\n        const isIndeterminate = this.loadingProgress === true;\r\n\r\n        // NOTE: The unnamed 'slot' element holds all child elements of the <babylon-viewer> that do not specify a 'slot' attribute.\r\n        return html`\r\n            <div class=\"full-size\">\r\n                <div id=\"canvasContainer\" class=\"full-size\"></div>\r\n                <slot class=\"full-size children-slot\"></slot>\r\n                <slot name=\"progress-bar\">\r\n                    <div part=\"progress-bar\" class=\"bar loading-progress-outer ${showProgressBar ? \"\" : \"loading-progress-outer-inactive\"}\" aria-label=\"Loading Progress\">\r\n                        <div\r\n                            class=\"loading-progress-inner ${isIndeterminate ? \"loading-progress-inner-indeterminate\" : \"\"}\"\r\n                            style=\"${isIndeterminate ? \"\" : `width: ${progressValue}%`}\"\r\n                        ></div>\r\n                    </div>\r\n                </slot>\r\n                ${this._viewerDetails?.model == null || (!this._hasAnimations && !this._hasHotSpots)\r\n                    ? \"\"\r\n                    : html`\r\n                          <slot name=\"tool-bar\">\r\n                              <div part=\"tool-bar\" class=\"bar ${this._hasAnimations ? \"\" : \"bar-min\"} tool-bar\">\r\n                                  ${!this._hasAnimations\r\n                                      ? \"\"\r\n                                      : html`<div class=\"animation-timeline\">\r\n                                                <button aria-label=\"${this.isAnimationPlaying ? \"Pause\" : \"Play\"}\" @click=\"${this.toggleAnimation}\">\r\n                                                    ${!this.isAnimationPlaying\r\n                                                        ? html`<svg viewBox=\"0 0 20 20\">\r\n                                                              <path d=\"${playFilledIcon}\" fill=\"currentColor\"></path>\r\n                                                          </svg>`\r\n                                                        : html`<svg viewBox=\"-3 -2 24 24\">\r\n                                                              <path d=\"${pauseFilledIcon}\" fill=\"currentColor\"></path>\r\n                                                          </svg>`}\r\n                                                </button>\r\n                                                <input\r\n                                                    aria-label=\"Animation Progress\"\r\n                                                    class=\"animation-timeline-input\"\r\n                                                    type=\"range\"\r\n                                                    min=\"0\"\r\n                                                    max=\"1\"\r\n                                                    step=\"0.0001\"\r\n                                                    .value=\"${this.animationProgress}\"\r\n                                                    @input=\"${this._onAnimationTimelineChanged}\"\r\n                                                    @pointerdown=\"${this._onAnimationTimelinePointerDown}\"\r\n                                                />\r\n                                            </div>\r\n                                            <select aria-label=\"Select Animation Speed\" @change=\"${this._onAnimationSpeedChanged}\">\r\n                                                ${allowedAnimationSpeeds.map(\r\n                                                    (speed) => html`<option value=\"${speed}\" .selected=\"${this.animationSpeed === speed}\">${speed}x</option>`\r\n                                                )}\r\n                                            </select> `}\r\n                                  ${this.animations.length > 1\r\n                                      ? html`<select aria-label=\"Select Animation\" @change=\"${this._onSelectedAnimationChanged}\">\r\n                                            ${this.animations.map((name, index) => html`<option value=\"${index}\" .selected=\"${this.selectedAnimation === index}\">${name}</option>`)}\r\n                                        </select>`\r\n                                      : \"\"}\r\n                                  ${this._hasAnimations && this._hasHotSpots ? html`<div class=\"divider\"></div>` : \"\"}\r\n                                  ${this._hasHotSpots\r\n                                      ? html`<div class=\"select-container\">\r\n                                            <select id=\"hotspotsSelect\" aria-label=\"Select HotSpot\" @change=\"${this._onHotSpotsChanged}\">\r\n                                                <option value=\"\" hidden selected></option>\r\n                                                <!-- When the select is forced to be less wide than the options, padding on the right is lost. Pad with white space. -->\r\n                                                ${Object.keys(this.hotSpots).map((name) => html`<option value=\"${name}\">${name}&nbsp;&nbsp;</option>`)}\r\n                                            </select>\r\n                                            <!-- This button is not actually interactive, we want input to pass through to the select below. -->\r\n                                            <button style=\"pointer-events: none\">\r\n                                                <svg viewBox=\"0 0 20 20\">\r\n                                                    <path d=\"${targetFilledIcon}\" fill=\"currentColor\"></path>\r\n                                                </svg>\r\n                                            </button>\r\n                                        </div> `\r\n                                      : \"\"}\r\n                              </div>\r\n                          </slot>\r\n                      `}\r\n            </div>\r\n        `;\r\n    }\r\n\r\n    // eslint-disable-next-line babylonjs/available\r\n    override addEventListener<K extends keyof HTML3DElementEventMap>(\r\n        type: K,\r\n        listener: (this: HTMLElement, ev: HTML3DElementEventMap[K]) => any,\r\n        options?: boolean | AddEventListenerOptions\r\n    ): void;\r\n    override addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void {\r\n        super.addEventListener(type as string, listener as EventListenerOrEventListenerObject, options as boolean | AddEventListenerOptions);\r\n    }\r\n\r\n    private _dispatchCustomEvent<TEvent extends keyof HTML3DElementEventMap>(type: TEvent, event: (type: TEvent) => HTML3DElementEventMap[TEvent]) {\r\n        this.dispatchEvent(event(type));\r\n    }\r\n\r\n    private _onSelectedAnimationChanged(event: Event) {\r\n        const selectElement = event.target as HTMLSelectElement;\r\n        this.selectedAnimation = Number(selectElement.value);\r\n    }\r\n\r\n    private _onAnimationSpeedChanged(event: Event) {\r\n        const selectElement = event.target as HTMLSelectElement;\r\n        this.animationSpeed = Number(selectElement.value);\r\n    }\r\n\r\n    private _onAnimationTimelineChanged(event: Event) {\r\n        if (this._viewerDetails) {\r\n            const input = event.target as HTMLInputElement;\r\n            const value = Number(input.value);\r\n            if (value !== this.animationProgress) {\r\n                this._viewerDetails.viewer.animationProgress = value;\r\n            }\r\n        }\r\n    }\r\n\r\n    private _onAnimationTimelinePointerDown(event: Event) {\r\n        if (this._viewerDetails?.viewer.isAnimationPlaying) {\r\n            this._viewerDetails.viewer.pauseAnimation();\r\n            const input = event.target as HTMLInputElement;\r\n            input.addEventListener(\"pointerup\", () => this._viewerDetails?.viewer.playAnimation(), { once: true });\r\n        }\r\n    }\r\n\r\n    private _onHotSpotsChanged(event: Event) {\r\n        const selectElement = event.target as HTMLSelectElement;\r\n        const hotSpotName = selectElement.value;\r\n        // We don't actually want a selected value, this is just a one time trigger.\r\n        selectElement.value = \"\";\r\n        this.focusHotSpot(hotSpotName);\r\n    }\r\n\r\n    // Helper function to simplify keeping Viewer properties in sync with HTML3DElement properties.\r\n    private _createPropertyBinding(\r\n        property: keyof HTML3DElement,\r\n        getObservable: (viewerDetails: Readonly<ViewerDetails>) => Observable<any>,\r\n        updateViewer: (viewerDetails: Readonly<ViewerDetails>) => void,\r\n        updateElement: (viewerDetails: Readonly<ViewerDetails>) => void\r\n    ) {\r\n        return {\r\n            property,\r\n            // Called each time a Viewer instance is created.\r\n            onInitialized: (viewerDetails: Readonly<ViewerDetails>) => {\r\n                getObservable(viewerDetails).add(() => {\r\n                    updateElement(viewerDetails);\r\n                });\r\n                updateViewer(viewerDetails);\r\n            },\r\n            // Called when the HTML3DElement property should be propagated to the Viewer.\r\n            updateViewer: () => {\r\n                if (this._viewerDetails) {\r\n                    updateViewer(this._viewerDetails);\r\n                }\r\n            },\r\n            // Called to re-sync the HTML3DElement property with its corresponding attribute.\r\n            syncToAttribute: () => {\r\n                const descriptor = HTML3DElement.elementProperties.get(property);\r\n                if (descriptor) {\r\n                    if (descriptor.attribute) {\r\n                        const attributeName = descriptor.attribute === true ? property : descriptor.attribute;\r\n                        if (this.hasAttribute(attributeName)) {\r\n                            const attributeValue = this.getAttribute(attributeName);\r\n\r\n                            const converter =\r\n                                typeof descriptor.converter === \"function\"\r\n                                    ? descriptor.converter\r\n                                    : descriptor.converter?.fromAttribute !== undefined\r\n                                      ? descriptor.converter.fromAttribute\r\n                                      : defaultConverter.fromAttribute;\r\n\r\n                            (this as any)[property] = converter ? converter(attributeValue, descriptor.type) : attributeValue;\r\n                        }\r\n                    }\r\n                }\r\n            },\r\n        };\r\n    }\r\n\r\n    private async _setupViewer() {\r\n        await this._viewerLock.lockAsync(async () => {\r\n            // The first time the element is connected, the canvas container may not be available yet.\r\n            // Wait for the first update if needed.\r\n            if (!this._canvasContainer) {\r\n                await this.updateComplete;\r\n            }\r\n\r\n            if (this._canvasContainer && !this._viewerDetails) {\r\n                const canvas = document.createElement(\"canvas\");\r\n                canvas.className = \"full-size canvas\";\r\n                canvas.setAttribute(\"touch-action\", \"none\");\r\n                this._canvasContainer.appendChild(canvas);\r\n\r\n                await createViewerForCanvas(canvas, {\r\n                    engine: this.engine,\r\n                    onInitialized: (details) => {\r\n                        this._viewerDetails = details;\r\n\r\n                        details.viewer.onEnvironmentChanged.add(() => {\r\n                            this._dispatchCustomEvent(\"environmentchange\", (type) => new Event(type));\r\n                        });\r\n\r\n                        details.viewer.onEnvironmentError.add((error) => {\r\n                            this._dispatchCustomEvent(\"environmenterror\", (type) => new ErrorEvent(type, { error }));\r\n                        });\r\n\r\n                        details.viewer.onModelChanged.add(() => {\r\n                            this._animations = [...details.viewer.animations];\r\n\r\n                            // When attributes are explicitly set, they are re-applied when a new model is loaded.\r\n                            this._propertyBindings.forEach((binding) => binding.syncToAttribute());\r\n\r\n                            // The same goes for camera pose attributes, but it is handled a little differently because there are no corresponding public properties\r\n                            // (since the underlying Babylon camera already has these properties).\r\n                            this._cameraOrbitCoercer?.(details.camera);\r\n                            this._cameraTargetCoercer?.(details.camera);\r\n\r\n                            // If animation auto play was set, then start the default animation (if possible).\r\n                            if (this.animationAutoPlay) {\r\n                                details.viewer.playAnimation();\r\n                            }\r\n\r\n                            this._dispatchCustomEvent(\"modelchange\", (type) => new Event(type));\r\n                        });\r\n\r\n                        details.viewer.onModelError.add((error) => {\r\n                            this._animations = [...details.viewer.animations];\r\n                            this._dispatchCustomEvent(\"modelerror\", (type) => new ErrorEvent(type, { error }));\r\n                        });\r\n\r\n                        details.viewer.onLoadingProgressChanged.add(() => {\r\n                            this._loadingProgress = details.viewer.loadingProgress;\r\n                            this._dispatchCustomEvent(\"loadingprogresschange\", (type) => new Event(type));\r\n                        });\r\n\r\n                        details.viewer.onIsAnimationPlayingChanged.add(() => {\r\n                            this._isAnimationPlaying = details.viewer.isAnimationPlaying ?? false;\r\n                            this._dispatchCustomEvent(\"animationplayingchange\", (type) => new Event(type));\r\n                        });\r\n\r\n                        details.viewer.onAnimationProgressChanged.add(() => {\r\n                            this.animationProgress = details.viewer.animationProgress ?? 0;\r\n                            this._dispatchCustomEvent(\"animationprogresschange\", (type) => new Event(type));\r\n                        });\r\n\r\n                        this._updateModel();\r\n                        this._updateEnv();\r\n\r\n                        this._propertyBindings.forEach((binding) => binding.onInitialized(details));\r\n\r\n                        this._dispatchCustomEvent(\"viewerready\", (type) => new Event(type));\r\n                    },\r\n                });\r\n            }\r\n        });\r\n    }\r\n\r\n    private async _tearDownViewer() {\r\n        await this._viewerLock.lockAsync(async () => {\r\n            if (this._viewerDetails) {\r\n                this._viewerDetails.viewer.dispose();\r\n                this._viewerDetails = undefined;\r\n            }\r\n\r\n            // We want to replace the canvas for two reasons:\r\n            // 1. When the viewer element is reconnected to the DOM, we don't want to briefly see the last frame of the previous model.\r\n            // 2. If we are changing engines (e.g. WebGL to WebGPU), we need to create a new canvas for the new engine.\r\n            if (this._canvasContainer && this._canvasContainer.firstElementChild) {\r\n                this._canvasContainer.removeChild(this._canvasContainer.firstElementChild);\r\n            }\r\n        });\r\n    }\r\n\r\n    private async _updateModel() {\r\n        if (this._viewerDetails) {\r\n            try {\r\n                if (this.source) {\r\n                    await this._viewerDetails.viewer.loadModel(this.source, { pluginExtension: this.extension ?? undefined, defaultAnimation: this.selectedAnimation ?? 0 });\r\n                } else {\r\n                    await this._viewerDetails.viewer.resetModel();\r\n                }\r\n            } catch (error) {\r\n                Logger.Log(error);\r\n            }\r\n        }\r\n    }\r\n\r\n    private async _updateEnv() {\r\n        if (this._viewerDetails) {\r\n            try {\r\n                if (this.environment) {\r\n                    await this._viewerDetails.viewer.loadEnvironment(this.environment);\r\n                } else {\r\n                    await this._viewerDetails.viewer.resetEnvironment();\r\n                }\r\n            } catch (error) {\r\n                Logger.Log(error);\r\n            }\r\n        }\r\n    }\r\n}\r\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,34 +1,28 @@
 {
     "name": "@babylonjs/viewer",
-    "version": "7.33.0",
-    "main": "index.js",
-    "module": "index.js",
-    "types": "index.d.ts",
+    "version": "7.34.0-alpha",
+    "type": "module",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "esnext": "lib/index.js",
+    "types": "lib/index.d.ts",
     "files": [
-        "**/*.js",
-        "**/*.d.ts",
-        "**/*.map",
+        "lib/**/*.js",
+        "lib/**/*.d.ts",
+        "lib/**/*.map",
+        "dist/**/*.js",
+        "dist/**/*.map",
+        "assets/**",
         "readme.md",
+        "docs/**",
         "license.md"
     ],
-    "scripts": {
-        "build": "npm run clean && npm run compile",
-        "clean": "rimraf dist && rimraf *.tsbuildinfo -g && rimraf \"./**/*.!(md|json|build.json)\" -g",
-        "compile": "tsc -b tsconfig.build.json --verbose",
-        "postcompile": "build-tools -c add-js-to-es6"
-    },
     "dependencies": {
-        "@babylonjs/core": "^7.33.0",
-        "@babylonjs/loaders": "^7.33.0",
-        "babylonjs-gltf2interface": "^7.33.0",
-        "babylonjs-viewer-assets": "^7.33.0",
-        "deepmerge": "~4.2.2",
-        "handlebars": "~4.7.7",
-        "pepjs": "~0.5.3",
-        "tslib": "^2.4.0"
+        "lit": "^3.2.0"
     },
-    "devDependencies": {
-        "@dev/build-tools": "^1.0.0"
+    "peerDependencies": {
+        "@babylonjs/core": "^7.23.1",
+        "@babylonjs/loaders": "^7.23.1"
     },
     "keywords": [
         "3D",
@@ -38,9 +32,6 @@
         "babylon.js"
     ],
     "license": "Apache-2.0",
-    "esnext": "index.js",
-    "type": "module",
-    "sideEffects": true,
     "homepage": "https://www.babylonjs.com",
     "repository": {
         "type": "git",
@@ -49,4 +40,4 @@
     "bugs": {
         "url": "https://github.com/BabylonJS/Babylon.js/issues"
     }
-}
+}

package/readme.md

@@ -1,40 +1,164 @@
 # BabylonJS Viewer
 
-This project is a 3d model viewer using babylonjs.
-Online docs: https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer/viewerExamples
+The Babylon Viewer aims to simplify a specific but common Babylon.js use case: loading, viewing, and interacting with a 3D model.
 
-## ES6/NPM usage
+![Viewer Default Appearance](./docs/ViewerDefault.jpg)
+
+`Viewer` is a lower level JavaScript class that implements the bulk of the features, and can be used in any babylonjs context (in the browser using pure HTML, in the browser using React, or even in Babylon Native).
+
+`HTML3DElement` is a custom HTML element that wraps the `Viewer` class and provides a declarative way to use it specifically in HTML via the custom element `<babylon-viewer>`.
+
+## Using with a Bundler
 
 Install the package using npm:
 
 ```bash
-npm install @babylonjs/viewer --save
+npm install @babylonjs/viewer@preview --save
 ```
 
-Then in JS/Typescript the viewer to be imported via:
+If you want to use the lower level `Viewer` directly in JavaScript code, you can import it and use it like this:
 
 ```bash
-import * as BabylonViewer from '@babylonjs/viewer';
+import { Engine } from '@babylonjs/core';
+import { Viewer } from '@babylonjs/viewer';
+
+const engine = new Engine(canvas);
+const viewer = new Viewer(engine);
+viewer.loadModel("https://playground.babylonjs.com/scenes/BoomBox.glb");
+```
+
+To use the higher level `HTML3DElement` you can import the `@babylonjs/viewer` module and then reference the `<babylon-viewer>` element in your HTML like this:
+
+```html
+<html lang="en">
+  <body>
+    <!-- If you already import @babylonjs/viewer somewhere in your JavaScript, you don't need this script import. -->
+    <script type="module">
+      import '@babylonjs/viewer';
+    </script>
+    <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
+  </body>
+</html>
 ```
 
-Add a babylon element in a html file:
+## Using Directly in a Browser
+
+If you want to use the viewer directly in a browser without any build tools, you can use the self-contained ESM bundle (which includes all dependencies) through a CDN such as [UNPKG](https://unpkg.com/) or [jsDelivr](https://www.jsdelivr.com/) like this:
 
 ```html
-<babylon id="babylon-viewer" camera.behaviors.auto-rotate="0"></babylon>
+<html lang="en">
+  <body>
+    <script type="module" src="https://unpkg.com/@babylonjs/viewer@preview/dist/babylon-viewer.esm.min.js"></script>
+    <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
+  </body>
+</html>
 ```
 
-And used to load models
+See the [codesandbox.io](https://codesandbox.io/p/sandbox/babylon-viewer-ws82xr) example for a live demo.
+
+## Features
+
+The Babylon Viewer is under active development and new features are continuously being added. You can request a specific feature in the [Babylon Forum](https://forum.babylonjs.com/c/features/11).
+
+**⚠️ NOTE**: While the Babylon Viewer is production ready in terms of performance, reliability, etc., the `@preview` tag and `-alpha` suffix are used to indicate that the API is still subject to change.
 
-```javascript
-BabylonViewer.viewerManager.getViewerPromiseById("babylon-viewer").then(function (viewer) {
-    // this will resolve only after the viewer with this specific ID is initialized
-    viewer.onEngineInitObservable.add(function (scene) {
-        viewer.loadModel({
-            title: "Helmet",
-            subtitle: "BabylonJS",
-            thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
-            url: "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf",
-        });
-    });
-});
+### Formats, Capabilities, and Dynamic Imports
+
+The Babylon Viewer supports all the formats that Babylon.js supports, as well as many capabilities such as animation and audio. However, the Babylon Viewer (with support from various Babylon.js libraries) uses dynamic imports to defer loading formats and capabilities until a model is loaded of a specific type or that uses a specific capability. This reduces the download burden on the end user and reduces the time to get something on the screen.
+
+### Advanced Usage and Customization
+
+While the Babylon Viewer is specifically designed to make viewing a single 3D model easy, it also exposes the underlying Babylon.js components so that you can customize it for your specific scenario and needs.
+
+The `HTML3DElement` exposes a `viewerDetails` property and a `viewerready` event that you can use to access the underlying `Viewer` object, the `Scene` object, and the loaded model (`AssetContainer`).
+
+### WebGL and WebGPU
+
+`HTML3DElement` will choose an underlying engine by default, and how it chooses will change over time. You can use the `engine` attribute to specify a specific engine, such as `WebGL` or `WebGPU`.
+
+### Lighting / Environment
+
+A Babylon.js environment file can be applied to the a `<babylon-viewer>` through the `environment` attribute. For example:
+
+```html
+<babylon-viewer
+  source="https://playground.babylonjs.com/scenes/BoomBox.glb"
+  environment="https://unpkg.com/@babylonjs/viewer@preview/assets/photoStudio.env">
+</babylon-viewer>
 ```
+
+The environment is automatically used as the skybox, and also used for image-based lighting (IBL) when a model is loaded that uses PBR materials (such as glTF), unless the model provides its own lights. When IBL is not used and the model does not provide its own lights, default lighting is applied using Babylon.js lights.
+
+### Styling
+
+`HTML3DElement` includes default UI for various capabilities, such as animation. You can customize the UI in a number of ways:
+
+#### CSS Variables
+
+Various CSS variables can be set to customize the appearance of the viewer. These variables are applied to the `babylon-viewer` element and are inherited by all UI elements within the viewer.
+
+| Variable                      | Description                                                                                                                                 |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--ui-foreground-color`       | The default color for the foreground of all UI elements.                                                                                    |
+| `--ui-background-hue`         | The default hue for the background of all UI elements.                                                                                      |
+| `--ui-background-saturation`  | The default saturation for the background of all UI elements.                                                                               |
+| `--ui-background-lightness`   | The default lightness for the background of all UI elements.                                                                                |
+| `--ui-background-opacity`     | The default opacity for the background of all UI elements.                                                                                  |
+| `--ui-background-color`       | The default color for the background of all UI elements (derived from the background hue, saturation, lightness, and opacity).              |
+| `--ui-background-color-hover` | The default color for the background of all UI elements when hovered (derived from the background hue, saturation, lightness, and opacity). |
+
+As an example, if you wanted UI elements with a moderately saturated bluish background, you could apply the following CSS variables on the `babylon-viewer` element:
+
+```css
+babylon-viewer {
+  --ui-background-hue: 200;
+  --ui-background-saturation: 70%;
+}
+```
+
+![Viewer styled with CSS Variables](./docs/ViewerStyled.jpg)
+
+#### Parts
+
+Various parts of the viewer can be styled using CSS part selectors. The following parts are available:
+
+| Part Name  | Description                              |
+| ---------- | ---------------------------------------- |
+| `tool-bar` | The toolbar used for animation controls. |
+
+As an example, if you wanted to style the toolbar to move it to the top and remove the rounded corners and margin, you could apply the following CSS on the `babylon-viewer` element:
+
+```css
+babylon-viewer::part(tool-bar) {
+  border-radius: 0;
+  left: 0;
+  right: 0;
+  bottom: unset;
+  top: 0;
+  width: unset;
+  max-width: unset;
+  transform: unset;
+}
+```
+
+![Viewer styled with Parts](./docs/ViewerParts.jpg)
+
+#### Slots
+
+Various slots are defined that allow entire sections of the UI to be replaced. The following slots are available:
+
+| Slot Name  | Description                              |
+| ---------- | ---------------------------------------- |
+| `tool-bar` | The toolbar used for animation controls. |
+
+As an example, if you wanted to replace the toolbar with a custom button that just toggles animation play/pause state, you could do so with the following:
+
+```html
+<babylon-viewer source="https://raw.githubusercontent.com/BabylonJS/Assets/master/meshes/ufo.glb">
+  <div slot="tool-bar" style="position: absolute; top: 12px; left: 12px; width: 100px; height: 36px">
+    <button onclick="document.querySelector('babylon-viewer').toggleAnimation()">Toggle Animation</button>
+  </div>
+</babylon-viewer>
+```
+
+![Viewer UI replacement with Slots](./docs/ViewerSlots.jpg)